You are on page 1of 47

New ways to interact A guide to designing a Deloitte-branded app

Internal use only July 2012
Click here to return to Contents

Contents
Before you consider designing an app, consider this A note to the reader 1.0 1.1 1.2 1.3 1.4 1.5 1.6 2.0 2.1 2.2 2.3 2.4 Deloitte and apps Who is the user guide for? Aims of this guide Why apps? Apps and mobile devices Why develop an app? Defining the best approach A foundation for design development Understanding user experience Touchscreen gestures Principles of user interface design Understanding the process 3 4 5 5 5 6 7 8 9 10 11 12 13 14 15 16 17 19 22 24 27 28 29 30 31 32 35 37 39 41 42

3.0 App design & visual identity 3.1 On-brand design approach 3.2 Logo 3.3 Colors 3.4 Typography 3.5 Imagery 3.6 Information graphics 3.7 Iconography 3.8 Interface elements 3.9 Tone of voice 4.0 App design in practice 4.1 Editorial and ePublishing 4.2 Tools 4.3 Challenges 4.4 Frameworks 4.5 Smartphones 4.6 Enhancements

Support 43 Definitions 44 Appendix 1 Appendix 2 45 46

Click here to return to Contents

Deloitte App Guide July 2012

2

Before you consider designing an app, consider this
The ten most important things you and your colleagues need to know before, during, and after development of a Deloitte-branded app.
1. Get permission Any Deloitte-branded app needs to be authorized by your local brand, legal, and/or risk manager. 2. Know Deloitte Global and local policies Make sure to familiarize yourself not only with this guide, but also with related guides and any relevant member firm rules and regulations. 3. Be properly resourced A significant investment of time and energy is needed by dedicated professionals to bring apps to life. Postlaunch maintenance, support and updates can often be overlooked. 4. Define your purpose Ensure you complete adequate user research. Apps are products that fulfill a business function and need to be designed, tested, and maintained to fit their purpose. 5. Understand distribution Familiarize yourself with the detail and the timings of required approval and release processes internally within Deloitte and externally with any 3rd party platform owners (eg, Apple)

6. Maintenance is key Ensure you have adequate resource to engage in dialogue with your users, gather feedback, manage further updates and inform them of your future release or app retirement plans, should you choose to discontinue updating.

7. Consider the ecosystem Ensure you devise the functions of your app to take advantage of other platforms and content. Your apps’ functions can benefit from content, data, social media feeds, and relational links from a variety of sources.

8. Continually consider your users’ understanding Share and test your decisions at each step of the process. Ensuring an appropriate and usable release is your key consideration and testing will aid your development.

9. Remember the Deloitte brand and identity Beyond the look and feel and tone of voice, it is essential that our presence be consistent, helping to further position the organization as a global category of one.

10. Last, but not least Read this guide in its entirety. The information that follows provides the necessary foundation for designing a Deloitte-branded app.

Click here to return to Contents

Deloitte App Guide July 2012

3

A note to the reader
It is critical that any individual or Deloitte entity wishing to create and launch their own app in the name of Deloitte must receive clearance from their member firm
The technology platforms for apps are ever changing, and there is a risk that sections of this document will become ‘out of date’ quickly. This user guide will be updated periodically to help counter this; however, where possible, we have included hyperlinks to relevant online help and documentation. Please refer to these resources to ensure you are briefed with the most up-to-date information. In conjunction with this document you should also refer to other relevant User Guides on Brand Space (brandspace.deloitte.com – User guides link on the homepage). Furthermore, it is critical that any individual or Deloitte entity wishing to design, create and launch a Deloitte-branded app MUST RECEIVE CLEARANCE FROM THEIR MEMBER FIRM BRAND LEADERSHIP AND LEGAL/ RISK TEAM(S), as they are positioned to ensure alignment with broader brand, marketing, and communications efforts. Should you have any queries or require guidance on any topic that is not covered within this documentation then please contact: • Brian Resnick: Associate Director, Global Brand, bresnick@deloitte.com • Bill Barrett: Associate Director, Global Communications, wbarrett@deloitte.com

As used herein, “Deloitte”, “we”, “our” and similar terminology are used to refer to Deloitte Touche Tohmatsu Limited (DTTL) and its network of member firms (each of which is a legally separate entity) or, where the context requires, DTTL or a particular DTTL member firm. Please see www.deloitte.com/about for a more detailed description of DTTL and its member firms Click here to return to Contents Deloitte App Guide July 2012 4

The overall aim.1 Who is the user guide for? This document is designed as a guide for those thinking of designing and developing an app.2 Aims of this guide This document aims to define organization-wide guidance for the design of Deloitte-branded apps. any app created for business purposes and bearing the Deloitte name or identity falls within the jurisdiction of this document and guidance therein. and risk managers. For the purpose of this document. Please note before creating a Deloitte-branded app. is to present a more coherent and ‘on-brand’ message via mobile platforms using apps to intended audiences. you must obtain prior authorization by your member firm brand legal.Deloitte and apps This document aims to define organization wide guidance on the creation and development of Deloitte-branded apps 1. rather than limit activity. Please follow these guidelines so we are consistently presenting the Deloitte brand. In summary the aim is to: • Present a consistent and ‘on-brand’ presence in terms of tone and visual identity • Create best-practice communication that our audience can understand and benefit from • Engage that audience in a conversation where appropriate • Demonstrate Always One Step Ahead values by embracing the latest platforms and technologies in an appropriate way • Improve processes and practices by utilizing the opportunities mobile platforms and apps offer Click here to return to Contents Deloitte App Guide July 2012 5 . however. 1. or those already maintaining one on behalf of a member firm or a select business initiative.

work and share using a range of devices. These interactions require a framework. hardware and software Why are they great? • rich and interactive experience • a familiar paradigm • ownable and customizable • continually updateable • easily connected Click here to return to Contents Deloitte App Guide July 2012 6 . applications or ‘apps’ are the way we contain and control functions to bring these devices to life.3 Why apps? We’ve become accustomed to using applications on our PCs and as technology has evolved the smartphone and tablet have also become an important part of our everyday lives. What is an app? • self-contained software application • normally has a defined function Why are they useful? • independent and easy-to-manage • easy-to-distribute • flexible • utilize the virtues of the chosen platform. read. We now play.1.

integrated into a flat touch screen. For clarity this guide uses tablet apps as visual examples. primarily operated by touching the screen rather than using a physical keyboard. a range of other devices on a variety of platforms are available all with a similar specification. Click here to return to Contents Deloitte App Guide July 2012 7 . intuitive interfaces. the leading tablet currently available. They often use an onscreen virtual keyboard or a passive stylus pen. A tablet is a mobile computer. This guide focuses on the basics of an on-brand design approach for apps. Their connectivity.4 Apps and mobile devices Many of the virtues of smartphones and tablets that have made them successful devices for the consumer market can also be very beneficial in a corporate environment. instant-on capability and long battery life are all qualities that are changing the way we now interact with the world. The device shown in the visuals is Apple’s iPad. larger than a mobile phone or PDA. The principles of the approaches covered in this guide relate generally to app 'experience design' best-practice which is universal across platforms or devices. ease-of-use. portability.1.

0 App design in practice for more detail and inspiration as to what’s possible. Tools Mobile platforms and apps offer interactivity. By putting the user first. either through bespoke apps or ePublishing services. whether for sharing thoughts or capturing feedback. Apps can be created to fulfill a number of different functions.1. Editorial Sharing editorial content is one of the predominant uses for mobile platforms.5 Why develop an app? When developing ideas for apps. the idea or the device?” The answer is neither… it’s people. They generally fit into the following categories displayed on the screen at right. challenges and puzzles can be an effective way to deliver messages through engagement and apps are often the ideal vehicle. Frameworks Designing apps to act as frameworks for diverse and dynamic content provides opportunities for brands. their requirements and understanding become the driving force and offer clear objectives for making decisions. Challenges Games. Deloitte App Guide July 2012 8 Further reference Please refer to Section 4. the question that often arises is “which comes first. Click here to return to Contents . Deciding if creating an app fulfills your member firms requirements can be easily assessed once you’ve established – through research – that you have an audience that will understand and benefit from your release. activations. portability and connectivity making them valuable for creating tools to fulfill a variety of functions.

com/ios/ Android Global Variations on the build in multiple languages.microsoft. $400.com/ Click here to return to Contents Deloitte App Guide July 2012 9 .com Windows Mobile Hybrid app Self-contained app built using a combination of technologies (often web languages) and distributed via a bespoke solution Lower penetration across markets for richer apps http://www.blackberry.000+ Updateable Contains data and content that requires regular updates Framework for content linked to a CMS potentially with added data capture Full experience Enhanced interactive approach with the app utilizing the hardwares’ full capability Native app Self-contained app built using the native coding environment and distributed via the suppliers preferred platform Apple iOS Main focus with high penetration across markets through iPhone and iPad www. What is your level of investment? Consider your development and ongoing maintenance costs What is the scale of the distribution? Define where you’ll be distributing and whether regular updates are required What is the primary objective of the app? Decide the functional reason for your app and the category it fits within What is your desired user experience? Decide the functional approach to your audience engagement Potential approach The basic definition of available development approaches Current platforms A basic list of current platforms each with a range of supported devices Savvy business users or consumers with fast data speeds in a developed market High Development and ongoing costs approx. $200.com/ Medium Development and ongoing costs approx.apple.6 Defining the best approach With a range of different technical approaches. $100. optimsed for mobile and viewable online across any device Blackberry Reduced focus with lower penetration across markets for richer apps www.android.000 Novice business users or consumers with slow data speeds in a developing market Low Development and ongoing costs approx.nokia. platforms and devices it’s a challenge to choose the most appropriate for your requirements. Who are your audience? Consider their use of technology and penetration across their market The following chart gives an overview of the main options.com/ windowsphone/ Single market One build in one language Editorial approach with simple access to content Offline Simpler functional approach with the bulk of the content contained within the app Symbian Lower penetration across markets for richer apps http://symbian. only produced once Challenge or game to promote an idea or fit within a campaign Online Richer functional approach with the bulk of the content delivered remotely and added data capture Main focus with high penetration across markets through numerous devices www.000 or less Multiple markets Variations on the build in multiple languages Tool approach with more complex functionality or task based interaction Rich and interactive Richer functional approach with added video Mobile internet Browser based website built using web languages.1.

2. 2.A foundation for design development An essential overview into what users understand.1 Understanding user experience A basic overview of the four main areas users are familiar with through interaction with apps on mobile devices. designing the experience and the practicalities of process 2. c a working prototy with placeholder v Click here to return to Contents Deloitte App Guide July 2012 10 . how they interact.4 Understanding the process A design-led process for design apps. accounting for the rigor required to ensure best-practice for each step of the journey. 4. Design a prototype Using your wirefra as a foundation.2 Touchscreen gestures Insight into the main methods of input and interaction with touchscreen devices. 2. 3. Visualise your idea Create wireframes as a foundation for prototyping including all functional considerations and content requirements.3 Principles of user interface design Six simple principles inform an approach to improve interface design from a user perspective.

Connecting users Allow users to share. Getting input Getting the user to input decisions and data is a task that should be kept simple and tailored to match context of use. Click here to return to Contents Deloitte App Guide July 2012 11 . Dealing with content and data Data can be searched. communicate. tv. These experiences are generally designed using simple.2. overviewed. and browsed in a variety of ways. intuitive patterns to aid adoption and improve usability. formatted. The following is a basic overview of the four main areas users are familiar with through interaction with apps on mobile devices. associate. the internet. Navigation Users need to locate specific features and content and require navigation to accomplish this.1 Understanding user experience Users have become familiar with interactive devices. and software applications. and interact with other people online and save and download content for future reference.

Pinch Open fingers to zoom into content.2 Touchscreen gestures Using touch gesture to interact is intuitive although different from previous methods we've become accustom to through using the standard PC. pan or move an element and flick to scroll or pan quickly.2. such as imagery and close fingers to zoom out. Swipe With one finger to move between screens. The following are the main methods of input and interaction with touchscreen devices. drag and hold to scroll. mouse or trackpad configuration. Tap Selects a control or item (similar to a single mouse click). open new content or create a different view or shake to undo an action. Click here to return to Contents Deloitte App Guide July 2012 12 . Turn To initiate an action. double-tap to zoom and touch-andhold to select and edit content.

and provide shortcuts that are meaningfully related to longer procedures. changes of state.3 Principles of user interface design All interactive products require an interface to make them usable. Click here to return to Contents Deloitte App Guide July 2012 13 . Whether constructed with physical buttons or switches or a touch screen interface the principles remain the same. common tasks easy. Reuse The design should reuse internal and external components and behaviors. With related content together and similar functions resembling one another. and errors that are relevant to the user through clear. The following principles have been devised by Larry Constantine and Lucy Lockwood from their book Software For Use: A Practical Guide to the Models and Methods of Usage-Centered Design (Addison Wesley. Tolerance The design should be flexible to reduce the cost of mistakes by allowing a user to undo actions while also preventing errors by tolerating varied inputs and by interpreting all reasonable actions. 1999) Structure The design should organize the interface based on consistent models that are familiar to users. Visibility The design should make all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. concise language familiar to users. maintain consistency with purpose thus reducing the need for users to rethink and remember.2. Feedback The design should keep users informed of actions. communicate clearly in the user's own language. Simplicity The design should make simple.

create a working prototype with placeholder visual direction to test and evaluate typical user journeys. Design a prototype Using your wireframes as a foundation. consider content updates and manage further updates through your chosen distribution platform.0 App design & visual identity for more detail. Visualize your idea Create wireframes as a foundation for prototyping including all functional considerations and content requirements. Complete and deliver your app Create your final app based upon the original idea. Please refer to Section 3. functional specification.6 Defining the best approach and Section 4. budget.6 Defining the best approach for more detail Further reference Please refer to [Section 4. device and delivery options to suit your requirements. Define your function Create the exact functional specification of your app taking into consideration your timescale. Please note before creating a Deloitte-branded app. Discovery 1. 5. Research your user requirements and create sketches to define your idea.2. 3. Dialogue 6. the correct principles and knowledge into a defined structure with the required considerations at each step of the journey will help you arrive at the best possible outcome. The application of experience.0 App design in practice for more detail Delivery 4.0 App design in practice] for more detail. basic functions and overall intent. taking into consideration testing evaluation with the Deloitte Visual Identity applied. The following is a simple process accounting for the rigor required to ensure best-practice for each step of the journey. define a need and an audience. Please refer to Section 1. you must obtain prior authorization from your member firm brand and legal / risk manager. sign off audience? Consistent UI Gestures? Click here to return to Contents Theme Deloitte App Guide July 2012 Business Society 14 . Manage your release Gather feedback.4 Understanding the process From discovery to delivery a number of detailed steps are required when embarking on designing an app. Research your platform. Design and Development 2. Develop your idea First. Please refer to Section 1. available resource and user requirements.

App design & visual identity Bringing the Deloitte brand to life in apps through the component parts of the visual identity Click here to return to Contents Deloitte App Guide July 2012 15 .

This is the key to us being the first choice of the most sought-after clients and talent. Always strive for clarity and precision through every functional and visual design decision you make. To becoming a category of one. opinion and expertise between our organization. talent and wider society. To produce the best possible results from your app it is necessary to have a clear goal and a sense of what is possible with a practical plan for how it will be achieved. from positioning to visual identity. above all else. Apps are an effective way to share our ideas.3. from both a content and audience perspective. We can easily create connections and they are becoming increasingly diverse. During the design process. our clients.1 On-brand design approach Everything about the Deloitte brand. The use of technology now gives us more opportunity to achieve this. continually consider the principle of focus. Click here to return to Contents . is designed to help us achieve our long-term vision: to be the Standard of Excellence.

Further reference Please visit Brand Space (brandspace.2 Logo Primary logo We are best recognized around the world by a blue and green Deloitte logo on a white background. Click here to return to Contents Deloitte App Guide July 2012 17 .3. available in the Downloads section. Please use only approved artwork. Narrative sequences explaining the premise of an app can also be used incorporating the logo. Primary logo size Consider the proportions of the screen when sizing the logo. and the clarity with which we communicate. the use of a slight grey gradient can be used to help soften the bright white background or use black as an alternative.com) for detailed guidance and downloads. The Small size logo has been optimized to reproduce well at small sizes: the ’counter space’ within the letter ’e’ has been opened up to stop the ink filling in.deloitte. The Primary logo can also be used in any legal screens as further identification. This should be the first preference for any new communication. 80 px minimum Using the Primary logo for apps As apps generally require a launch process it can be useful to use the Primary logo in this initial sequence for identification. so this is now our primary way of showing the logo. as well as opening up the space between the letters to achieve the right appearance at small sizes. The highlighting of white as a key part of our identity builds on the clarity and precision of our thought and opinion. Launch screen The Primary logo should be used as an introduction to the app and placed centrally as a Launch screen or as part of a narrative sequence. black is often the most appropriate predominant color for background elements. Primary logo Small size logo The shortest length the logo can be is 80 pixels wide for onscreen applications. Due to the nature of ambient screens. Digital white As device screens are ambient. Select Primary logo under the Logo overview section within Elements for more information.

Blue brand bar Use the Secondary logo in the blue brand bar as useful identification for apps with a number of visual layers. There are certain applications. Select Secondary logo under the Logo overview section within Elements for more information.3. Click here to return to Contents Deloitte App Guide July 2012 18 . Menu bar Use the blue bar as an additional menu bar for added functionality where necessary. This serves to separate the logo from the other elements on the screen. Secondary logo Using the Secondary logo for apps For Deloitte screen-based applications there is a blue brand bar which can act as an important visual ’anchor’ on-screen with a reversed out logo.deloitte. Please use only approved artwork. so there is a Secondary logo use for these situations. however. and should be used on Deloitte communications.com) for detailed guidance and downloads. Blue brand bar Further reference Please visit Brand Space (brandspace.2 Logo Secondary logo The Deloitte logo on white is our primary logo. where the reversed out logo is more practical. available in the Downloads section.

White represents clarity and focus.deloitte. Deloitte Blue Deloitte Green White Adding emphasis The Primary colors should also be used to add emphasis wherever required. and white. It is the combination of blue and green that is so distinctive and valuable to Deloitte. R0 G39 B118 HEX 002776 R146 G212 B0 HEX 92D400 Using Primary colors for apps The Primary colors should be used for core elements throughout to maintain visual consistency and uphold the identity. It also makes communications consistent across markets.3.com) for detailed guidance and downloads. For example. bright green. This blue/green combination is at the heart of the Primary palette. Select Primary color under the Color overview section within Elements for more information. Core typography Use the primary colors for core typography for headings and through the initial areas of the apps interactive journey. White backgrounds The use of Deloitte Green should be minimized on white or light backgrounds as ambient screens can reduce contrast. Deloitte Blue and Deloitte Green appear in all communications.3 Colors Primary colors Deloitte has a palette of colors that is already recognized around the world and differentiated from our competitors: dark blue. Click here to return to Contents Deloitte App Guide July 2012 19 . as predominant colors in imagery. The use of White on-screen benefits from the addition of either translucency or a grey-gradient adding visual depth to denote different content ‘objects’ or navigation. Further reference Please visit Brand Space (brandspace. and inspires the Secondary palette.

2 Colors/Interactive colors for more detail. The colors can be used in addition for more complex graphic elements such as web icons to support the enhancements that interactivity requires. the Secondary colors can be used as interactive support for apps – see 3.com) for detailed guidance and downloads. Charts and diagrams They offer flexibility and clarity for charts. Further reference Please visit Brand Space (brandspace. Click here to return to Contents Deloitte App Guide July 2012 20 . these Secondary colors are within a blue/green spectrum. Blue/green Secondary palette Deloitte Mid Blue Deloitte Light Blue Deloitte Dark Green Deloitte Light Green Interactive functions The colors are necessary for interaction as they allow different states for navigable elements.deloitte. These help give the flexibility and clarity we need when presenting more complex information. diagrams and information graphics.3. Select Secondary color under the Color overview section within Elements for more information. This ensures that every part of the Deloitte visual identity that uses color is instantly recognized as Deloitte. diagrams and information graphics. without affecting the distinctive blue/green personality of all Deloitte communications. In addition to the blue/green Secondary colors there are three neutral grays. particularly charts. Importantly. Adding support The colors can be used as support to the Primary colors for more complex graphic elements such as web icons.3 Colors Secondary colors The three Primary colors are supported by a set of four Secondary colors. R0 G161 B222 HEX 00A1DE R114 G199 B231 HEX 72C7E7 R60 G138 B46 HEX 3C8A2E R201 G221 B3 HEX C9DD03 Gray Secondary palette Deloitte Dark Gray Deloitte Mid Gray Deloitte Light Gray R140 G140 B140 HEX 8C8C8C R180 G180 B180 HEX B4B4B4 R220 G220 B220 HEX DCDCDC Using Secondary colors for apps In addition to their general function.

selected and disabled states as feedback for the user. inactive. Select the Color overview section within Elements for more information.3 Colors Interactive colors In addition to the Primary and Secondary color palettes. It is necessary to visually identify these objects with a base color that can effectively hold content. This is generally why apps use darker color backgrounds to denote interactive objects. inactive.3. Interactive journeys Different steps of an interactive journey can use the base colors to identify different levels. and disabled states or navigation. increase visual contrast and cope with the ambience of the screen. R000 G000 B000 HEX 000000 R060 G060 B060 HEX 3C3C3C R100 G100 B100 HEX 646464 Secondary palette as highlight colors Deloitte Mid Blue Deloitte Light Blue Deloitte Dark Green Deloitte Light Green Deloitte Dark Gray Deloitte Mid Gray Deloitte Light Gray Further reference Please visit Brand Space (brandspace. Click here to return to Contents Deloitte App Guide July 2012 21 .deloitte. Interactive base colors Black Base Dark Gray Base Mid Gray White Base color translucency Translucency can be used as a useful visual approach to create difference between the objects for layering and status feedback. interactive touchscreen applications require further colors to allow for functional differences. Interactive feedback Secondary colors should be used as visual feedback identifying active.com) for detailed guidance and downloads. The Secondary palette should be used as highlights for this interactive content to show active. Gesture driven interfaces generally use visual ‘objects’ that are layered or adjacent to other objects with differing or related functions.

the closest universally available typeface. Where Garamond 3 LT Std is not available. We use it for insightful headlines and headings. it is replaced with Times New Roman.com) for detailed guidance and downloads. Select Primary typeface under the Typography overview section within Elements for more information. Garamond 3 LT Std carries our insight and our personality. available in the Downloads section.3. and our unique palette of colors means that our communications still look characteristically Deloitte. To ensure legibility and retain contrast when used on a white or translucent white background the use of Deloitte Green should be limited. Further reference Please visit Brand Space (brandspace. Often we have to rely on universal system typefaces for certain applications. The typeface can be used on a variety of color backgrounds wherever emphasis is required. Core typography Use the Primary typeface for core typography through the initial areas of the apps interactive journey.deloitte.4 Typography Primary typeface Garamond 3 LT Std is our Primary typeface. for quotes and opinions pulled out from the main body of the text. Click here to return to Contents Deloitte App Guide July 2012 22 . the distinctive combination of serif and sans serif. Please use only approved typefaces. It is an immediately recognizable typeface and is used simply and clearly. Add emphasis The Primary typeface should also be used to add emphasis wherever required. for example in a web app. An intelligent and distinctive typeface for headlines: Garamond 3 LT Std Using the Primary typeface for apps The Primary typeface should be used for core elements throughout to maintain visual consistency and identity.

active. Where Frutiger Next Pro is not available. navigation and other functions without replacing them with the Secondary typeface. and our unique palette of colors means that our communications still look characteristically Deloitte. The typeface can be used in Primary or Secondary colors on a variety of color backgrounds wherever content is required below the level of headings. Creating buttons Ensure legibility and touch usability by testing button sizes and states on your chosen device. inactive. A modern and functional typeface for everything else: Frutiger Next Pro Using the Secondary typeface for apps In addition to its general function. Different weights can also be used when creating states for navigation items. the Secondary typeface can be used in an interactive role as navigation menus or buttons. Detailed content As with other communication the Secondary typeface can be used for detailed content. Please use only approved typefaces. It is a highly readable and efficient typeface: being slightly condensed it is very economical on page space. Click here to return to Contents Deloitte App Guide July 2012 23 . menus and buttons. Consider screen contrast when choosing type colors and defining states for navigation items. such as. legends and captions. selected and disabled states as feedback for the user. Select Secondary typeface under the Typography overview section within Elements for more information. We use it for all other content in our communications below the level of headings: from subheadings to body text to legends in charts.deloitte. Many mobile platforms use a sans serif typeface as their default. for example Apple iOS uses Helvetica and Andriod uses Droid Sans. it is replaced with Arial. Owing to the similarity in appearance it is appropriate to rely on the default for menus. Navigation and menus Use different weights for flexibility when creating states for navigation items.com) for detailed guidance and downloads.4 Typography Secondary typeface Frutiger Next Pro is our functional typeface. the closest universally available typeface. for example in a web app. Often we have to rely on universal system typefaces for certain applications. Further reference Please visit Brand Space (brandspace.3. available in the Downloads section. menus and buttons. the distinctive combination of serif and sans serif.

Every image should be in sharp focus.5 Imagery Primary imagery A Primary image style of sharp focus.deloitte. For illustrating single ideas or topics consider the visual flexibility required of interactive content. When choosing imagery for your app ensure you have secured appropriate usage rights. The Primary imagery can be used as background layers to additional content sections.com) for detailed guidance and downloads. Layering content The Primary imagery can be used as background layers to additional content sections. Navigation and menus You can use the imagery as thumbnails for content sections in a navigation menu. Illustrating ideas Use wherever a requirement exists for illustrating an idea or topic. in a navigation menu for example. available in the Downloads section. All images on Brand Space (brandspace. Further reference Please visit Brand Space (brandspace. Click here to return to Contents Deloitte App Guide July 2012 24 . and be the focal point wherever it appears. This allows us to have our distinctive white covers and title slides. deloitte. Please use only approved images.com) are available to use Globally for all media. color images of objects on a white background. and is a style that is easy to understand and use by all practitioners. focusing on a single idea or topic. It is also a style that gives maximum design flexibility across all apps. whether design professionals or not.3. the Primary imagery can be used as visual identification for content sections. Using Primary imagery for apps In addition to its general function. Select Primary imagery under the Imagery overview section within Elements for more information.

Further reference Please visit Brand Space (brandspace. the Secondary imagery can be used as visual identification for content sections. deloitte. Please use only approved images. For illustrating a single idea or topic consider the visual flexibility required of interactive content.com) for detailed guidance and downloads. events. when we show our people. real-life) color images is used when the object style is not appropriate. The Secondary imagery can be used as background layers to additional content sections. Using Secondary imagery for apps In addition to its general function. focusing on a single idea or topic. industries.com) are available to use Globally for all media. Illustrating ideas Use wherever a requirement exists for illustrating an idea or topic. Layering content The Secondary imagery can be used as background layers to additional content sections.5 Imagery Secondary imagery A Secondary image style of reportage (natural. Click here to return to Contents Deloitte App Guide July 2012 25 . For example.3. available in the Downloads section. and be the focal point wherever it appears. All images on Brand Space (brandspace. and in some circumstances. Navigation and menus You can use the imagery as thumbnails for content sections in a navigation menu. in a navigation menu for example. Select Secondary imagery under the Imagery overview section within Elements for more information.deloitte. When choosing imagery for your app ensure you have secured appropriate usage rights. places. Every image should be in sharp focus.

Also. Content led approach If your app is using a network connection to access video content. Applying simplicity Ensure you use appropriate video content for delivery in the context of an app. considering focus and simplicity of visual approach and message. when a network connection is down.com) is available to use Globally for all media. considering focus and simplicity of visual approach and message.com) for detailed guidance and downloads. Video is a familiar medium for users. If your app is using a network connection to access video content. insights and careers. Video examples are available in the Downloads section under Multimedia. Please note Flash will not work on some devices. industries. Defining purpose Consider context when deciding whether video is useful as support to other content or as an alternative method to deliver a concise narrative. Remember the user. Consider visual approaches that are looser and celebrate the dynamic nature of the source material. Further reference Please visit Brand Space (brandspace. for example. how much time they have. and their level of understanding with respect to your content and purpose.3. consider how your app looks and feels when the content is unavailable. Using video for apps Consider context when deciding whether video is useful as support to other content in your app or as an alternative method to deliver a concise narrative around your subject.deloitte. which makes it simpler for them to consume and understand messaging and ideas.5 Imagery Video We use video regularly as a versatile method for delivering messages online and through social media on platforms such as YouTube and Facebook across a number of subject areas including our services. Select Flash video/audio player option under Electronic applications within Application for further information. All video on Brand Space (brandspace. consider how your app looks and feels when the content is unavailable. When choosing video for your app ensure you have secured appropriate usage rights. Click here to return to Contents Deloitte App Guide July 2012 26 . Ensure you use appropriate video content for delivery in the context of an app. video may come from different sources and can be challenging to fit into a universal template. the way in which they will use the app. deloitte.

com) for more detailed guidance and downloads. 5% Always use a clear legend and labelling system to make sure the 6% graphs are meaningful. fresh color 0 palette to reflect the brand at all levels of the communication. They can be simplified and areas of focus can be enhanced by allowing detail to be revealed through touch and overlaid content panels. media & technology Using charts and diagrams for apps In addition to their general use.Chart 5 (Column) 2000 1500 3. Select Timesaver option under the Information graphics category for this file. Templated chart and table styles exist in the Downloads section to make it easier to create on-brand information graphics. Consider creating interactive charts and diagrams based on similar formats but holding different data which can be controlled through user selection. charts and diagrams for apps. Gr at i de tu 8% Expe cta tio n Arrival 9% 18% 10% 2 ht Insig • Select a suitable venue/good event stand location • Make the most of the location • Use visuals to create impact 12% Other Real estate Manufacturing Energy. interactivity requires consideration when using information graphics. Since 2004 2005 2006 2007 2008 the informationData graphics occur on a white background.deloitte. They are a great opportunity to use the bright. Applying simplicity Charts and diagrams can be simplified and areas of focus can be enhanced by allowing detail to be revealed through touch and overlaid content panels. Large areas of heavy solid color should be Chart 6 (Pie) avoided where possible to keep the presence of white space strong. infrastructure & utilities Consumer business Tourism. These Illustrator and InDesign files are for creative professionals only. Click here to return to Contents Deloitte App Guide July 2012 27 . Financial services Further reference Please visit Brand Space (brandspace. they should 1 feel light and elegant. 25% 7% 1355 1559 Applying interactivity Consider creating interactive charts and diagrams based on similar formats but holding different data which can be controlled through user selection. tidy and welcoming • Make eye contact and smile • Engage visitors with questions Telecoms. Utilizing multitouch Use simple touch buttons to reveal annotation. hospitality & leisure Public sector Ho spi t a lit y We lco e m 3 • Ensure the stand is well laid out.6 Information graphics 1000 Charts and diagrams 1264 1188 Information graphics should feel as simple and uncomplicated as 500 908 possible.

Consider the size of the icons in relation to the visual elements around them and their function. Select Web icons option under the Electronic applications within Applications for this file. The icons have a purely functional role and may only be used in circumstances where they are an active link or navigational aid. purely functional graphics.com) for detailed guidance and downloads. These Illustrator files are for creative professionals only. Please use only approved icon artwork. The icons should be created with flat color.deloitte. Further reference Please visit Brand Space (brandspace. inactive. the icons are designed to be as simple as possible. Click here to return to Contents Deloitte App Guide July 2012 28 . using the Deloitte palette.3. If a new icon is required. Consider context Consider the size of the icons in relation to the visual elements around them and their function. Stylistically. Using Web icons for apps Icons can be used for apps to provide two key functions. Icons as navigation When used solely for navigation. Icons as feedback Consider the icon colors as they are interactive content that will require a number of color variations to show various states as feedback for the user. For navigation and feedback consider the base colors and the icon colors as they are interactive content that will require a number of color variations to show active. When used solely for navigation. available in the Downloads section. selected and disabled states as feedback for the user. Bevels and drop shadows should not be used. its design must be approved by the Global Brand Team before it is used in an application. as navigation or feedback. They may also be used as hyperlinks in interactive PDFs or flash animations. ensure clear space around the icon to make it easier to touch and aid usability.7 Iconography Web icons A set of icons have been developed to aid navigation on the Deloitte website and Brand Space. ensure clear space around the icon to make it easier to touch and aid usability.

8 Interface elements Enhancing the identity Designing for apps requires a number of simple enhancements to the identity to cater for interactivity. Adding visual depth Visual differentiation between objects either subtly with an added pixel line between menu items or an added shadow beneath a larger interface object. and flexibility of content.3.deloitte.com) for detailed guidance and downloads. Adding and implying movement to objects and layering over other objects also aids touch usability and is more dynamic. In order to visually identify these objects and cope with levels of interactivity. Using translucency The use of the Base colors on-screen can benefit from the addition of either translucency or a gradient to add visual depth. navigation. visual depth is useful. Click here to return to Contents Deloitte App Guide July 2012 29 . inactive. slight enhancements are necessary to the general visual identity approach. Adding visual depth As a technique to create visual differentiation between objects with different functions. Creating objects Gesture driven interfaces use visual ‘objects’ that are layered or adjacent to other objects with differing or related functions. Creating objects Gesture driven interfaces generally use visual ‘objects’ that are layered or adjacent to other objects with differing or related functions. selected and disabled states as feedback for the user. For example: Using color For navigation and feedback consider the base colors and the icon colors as they are interactive content that will require a number of color variations to show active. feedback. Further reference Please visit Brand Space (brandspace. Using translucency and adding gradients The use of the Interactive base colors (Please see page 21) on-screen can benefit from the addition of either translucency or a gradient to add visual depth. Due to the nature of ambient screens. either subtly with an added pixel line between menu items or an added shadow beneath a larger interface object. darker colors are often the most appropriate predominant color for background elements.

Writing for alerts Extra consideration is required when writing alerts and supporting content to ensure users immediately understand the reasoning behind the message. The content. Click here to return to Contents Deloitte App Guide July 2012 30 . Considering Tone of voice for apps Writing for apps requires two key types of written content. powerfully and unambiguously • Thinking ahead to the response we're aiming to provoke A conversation It's helpful to see our writing as a conversation. ensure clarity. Communication content works with the same principle of focus as with other media. Our tone – which reflects our personality – will not.deloitte.9 Tone of voice Focus Like all the identity elements. Select Tone of voice within Elements for more information. General content Communication content works with the same principle of focus as with other media. vocabulary. and style of our writing will change depending on the audience and why we're talking to them.3. Writing for navigation When writing for navigation menus and buttons. Remember these rules apply equally to internal audiences as well as external audiences. Further reference Please visit Brand Space (brandspace. communication and interactive content.com) for detailed guidance and downloads. ensure clarity. Extra consideration is required when writing alerts and supporting content to ensure users immediately understand the reasoning behind the message. consistency and use the correct terminology. our verbal and written communications are built on the principle of focus. consistency and the correct terminology by considering your users’ understanding of the subject matter and the apps functions. What do we mean by focus? • Always striving for clarity and precision • Making one point at a time. When writing for navigation menus and buttons. Interactive content requires the added consideration of context to ensure delivering the correct message in an intuitive way.

4. 4. portability and connectivity making them valuable for creating tools to fulfill a variety of functions.4 Frameworks Apps rely on data and content as a foundation for interaction and users’ expectations have become increasingly sophisticated. whether for sharing thoughts or capturing feedback. including productivity. Apps can be designed for contained formats such as articles. activations.2 Tools Mobile platforms and apps offer interactivity. challenges and puzzles can be an effective way to deliver messages through engagement and apps are often the ideal vehicle. data capture. They can be designed as a component function or as independent apps depending on your marketing requirements. Using an app to share your content offers options for enhanced interactivity and they can be re-released for regular updates. and content creation. Click here to return to Contents Deloitte App Guide July 2012 31 .3 Challenges Games.App design in practice Examples and related best practice advice for creating innovative app experiences across four main categories 4. 4. Apps as tools can be useful for a number of tasks. either through bespoke apps or ePublishing services. white papers and insight documents. meetings. Designing apps to act as frameworks for diverse and dynamic content provides opportunities for brands.1 Editorial and ePublishing Sharing editorial content is one of the predominant uses for mobile platforms.

The best approach is to keep the experience consistent in each view. The following examples offer advice on making the most of what the platforms offer. Design advice Create paper prototypes of your screens in both modes. white papers and insight documents. Successful apps also often use the different views when switching orientation to use the opportunity to allow alternate data display and functionality.4. Apps can be designed for contained formats such as articles. creating layers to test your ideas and make decisions as to how the two orientations can be used in a valuable way. Having to consider every aspect of your app design in these two different layouts can be challenging. Using a modular approach to simplify orientation shifts Click here to return to Contents Deloitte App Guide July 2012 32 .1 Editorial and ePublishing Sharing editorial content is one of the predominant uses for mobile platforms. either through bespoke apps or ePublishing services. allowing for a seamless user experience. Using an app to share your content offers options for enhanced interactivity and they can be re-released for regular updates. Visual example An app designed to house articles such as briefings with options to view them organized by different categories Considering tablet orientation Tablets offer the user the opportunity to switch between two views – landscape and portrait.

Using the master/detail principle Master/detail is an interactive concept whereby you can view the navigation and chosen content in the same interface view. keep it simple and consider the Visibility principle when designing your interactive journeys. Tablet screen size allows for this whereas most smartphones require layered or sliding navigation to make the most valuable use of the screen. consider content ‘objects’ rather than ‘screens’ or ‘pages’ for ultimate flexibility. Test size and contrast of the smaller elements of your design Click here to return to Contents Deloitte App Guide July 2012 33 . arrangement and spacing. contrast. Above all. Editorial apps can use this principle to good effect. then think of how you can create a design that optimizes ease-of-use. allowing the user quick access to the available content. Multiple pane interfaces can also be developed to allow ultimate flexibility. Design advice When developing your visual design approach. The visual clarity of text and other graphic elements all depend upon their size. Visual example An app designed for insight house articles with a visible menu for quick access to the contents Carefully considering the user interface When developing the detail of your interface consider the functions of your app and your intended audience. Design advice Rigorously test your visuals on the intended device to ensure legibility.

Visual example An example of Adobe's Digital Publishing system. They work similarly in taking your editorial layout via your page make-up software.com) Click here to return to Contents The editorial can be enhanced with interactive detail and video content Deloitte App Guide July 2012 34 .adobe. adding audio and video. They attempt to provide the best possible user experience by utilizing techniques such as interactive overlays. They also act as distribution platforms and for commercial apps offer enhancements such as ecommerce and user tracking through analytics. such as Adobe InDesign and offer content editing to maximize interactivity and leverage the tablet experience. the On Technology app uses a variety of interactive functions to enhance the editorial The platform menu showing ‘issues’ that can be updated and regularly released Further reference For more detail on the following platforms please visit the links listed below: Adobe Digital Publishing Suite (www.com/products/ digital-publishing-suite-family.pressrun. audio or video. These solutions have quickly become the industry standard for most business and consumer magazines and journals.com) Mag+ (www. consider how the user experience can be enhanced through adding extra text.html) PressRun (www. Each solution employs a slightly different approach to preparing and adding the content into the system with different functional options and related costing plans.magplus. scrollable frames and pop-up content viewers. Design advice When developing your visual design approach and content.The virtues of ePublishing A variety of software solutions are available to simplify the process of publishing and distributing content across mobile platforms for tablets.

Design advice Devise user journeys to focus on exact benefits for the audience when using your app. Feature focused software works well because the interface is easier to design and therefore understand. Apps as tools can be useful for a number of tasks. Make the key feature clearly visible to aid usability Click here to return to Contents Deloitte App Guide July 2012 35 . portability and connectivity making them valuable for creating tools to fulfill a variety of functions. Visual example An app designed as a conversation tool with a data capture function to aid business development relationships Defining your app’s features Our relationship with interactivity through using the internet has led us to believe that the more features. including productivity. This will help you define the scope and the features required.4. and implement only those. and content creation. meetings. The key is to decide which small set of features are actually important. data capture. Be careful to not add features for the sake of adding. By considering your apps purpose. Your assessment should be based upon a value judgement. The following examples offer advice on developing appropriate. If you consider your relationship with software applications there are often plenty of features you will never use. then finding a way to incorporate them into your existing user experience is important and worth the challenge.2 Tools Mobile platforms and apps offer interactivity. Users generally need only a small set of features in any interactive application and software works much better when it’s focused. the more useful the site will be. functional and usable apps. if the features you’re adding honestly provide more value to your end user.

Use of the native OS keyboard for inputting data Click here to return to Contents Deloitte App Guide July 2012 36 . Successful applications take advantage of the standards and paradigms that users are comfortable with. Depending upon your approach to creating your app. and regularly test your ideas and prototypes with typical users. viewing terms and conditions or using a keyboard for data entry. For example. these tasks can be managed by simply adding a ‘layer‘ of features or functions that already exist for the platform and can be adapted to suit your requirements with minimal customization. receiving an alert. Design advice Undertake adequate research into your chosen platforms approach and standards. Design advice Undertake adequate research into your chosen platform to cross-reference any existing features it provides that can be used in your app. Visual example An app designed as a presentation creator with templates for devising and sharing tablet-based content Utilize familiar functions such as search Utilizing the native user interface A number of interactive tasks related to the user requirements for your app will be general for your chosen platform.Allow users to apply their knowledge Is your application consistent with the platforms’ standards? Does it incorporate the device features in a valuable way? Is your application consistent within itself? Do the same icons always mean the same thing? Can people predict the outcome when they perform the same action in different places? By considering consistency of approach it will allow users to transfer their knowledge and skills from using other applications to yours.

Design advice Consider the available gestures when devising challenge functions or game play to make the interaction appropriate and intuitive. When people directly manipulate objects on-screen they become more engaged with the task and they more readily understand the results of their actions. Intuitive gestures can greatly improve experiences.3 Challenges Games. Through gestures. The following examples offer advice for some techniques to employ to bring your ideas to life. and dragging and dropping on-screen objects. using pinch gestures to directly control the size of content instead of tapping zoom controls. challenges and puzzles can be an effective way to deliver messages through engagement and apps are often the ideal vehicle. Dragging and dropping elements Click here to return to Contents Deloitte App Guide July 2012 37 . mouse or trackpad configuration. activations.4. They can be designed as a component function or as independent apps depending on how they're required to meet your marketing requirements. users have a greater affinity for the objects and an increased sense of control. Visual example An app designed as a puzzle challenge showing how a modal interface can be simplified to improve ease-of-use and retain the integrity of the visual identity Utilizing multitouch Using touch gestures to interact is intuitive although different from previous methods we‘ve learnt through using the standard PC. This approach to interaction is ideal for designing challenges and games where dexterity and response time are key factors in measuring success during play. for example.

It should always be subtle. They expect to have the opportunity to cancel an operation or confirm their intention to perform an action. visual metaphors work well when kept simple and allowed to complement the overall visual appeal of your app. whether in the form of simple highlights. Design advice Assess your functions in the context of overall usability of your app to consider whether applying visual metaphors would aid user interaction. Feedback should be immediate and can also be repeat during lengthy operations. depth and texture.User control and feedback Users feel more in control when app behaviors are familiar and predictable. Design advice During your design phase consider feedback and develop consistent options where required across all features. Generally. animation or even using sound although not as the primary feedback mechanism as users often turn sound off or down especially in public places. all adding an element of realism into the interface. The time bar ‘fills’ showing simple feedback during a task The visual display of input as ‘handwriting’ is familiar to users Click here to return to Contents Deloitte App Guide July 2012 38 . By using feedback you can assure them that a process has been initiated. Visual example An app designed as a brain training game visualizing a metaphorical approach to using the identity for games and challenges The value of visual metaphors Users can quickly learn how to use an app when virtual objects and actions are metaphors for objects and actions in the real world. Current devices can support rich imagery and video allowing greater scope for detailed visual approaches such as layering.

Consider visual approaches that are looser and celebrate the dynamic nature of the source material. portability. ease-of-use. Design advice Consider how your app looks and feels when the content is unavailable. when a network connection is down. imagery and video. This added functionality poses a fundamental challenge to deciding the scope of your app and the interactive approach you take to cope with the variation and scale of dynamic content. forms and even imagery and video. with a number of options to organize the posts and added functionality for commenting and sharing Considering dynamic content The virtues of smartphones and tablets. whether for sharing thoughts or capturing feedback. With connected mobile devices we can access the internet and databases for text.4. Designing apps to act as frameworks for diverse and dynamic content provides opportunities for brands. Visual techniques for loading content Often. The following examples offer advice for some of the design and content challenges you can face.4 Frameworks Apps rely on data and content as a foundation for interaction and users’ expectations have become increasingly sophisticated. recording and manipulating content. intuitive interfaces. instant-on capability and long battery life are now providing new opportunities and challenges for viewing. their connectivity. sharing. for example. imagery and video may come from different sources and can be challenging to fit into a universal template. When designing ‘containers’ for dynamic text content carefully consider the structure of the raw content and how it can be styled appropriately to create the right experience. Visual example An app designed as a framework for accessing content from a blog. Click here to return to Contents Deloitte App Guide July 2012 39 . We regularly rely on social media content to enhance our message and the devices also allow capturing data through email.

The general challenge when designing apps is to keep your user-interface clear. Modes can help achieve this by applying focus to each specific task. Modal interfaces are designed for the user to undertake one particular task at a time. This is where a quick introduction on how to use your app makes the user feel more comfortable and is not a reflection of a poor design. Visual example An app designed as a framework to access social media feeds (in this example video content) as one of its features Giving users a helping hand Through effective design. tutorials and walkthroughs to much simpler singlescreen overlays. Design advice Consider a number of options to aid first-time use. summaries or interface tips. uncluttered and usable as a touch interface. Interface tips as simple overlays Click here to return to Contents Deloitte App Guide July 2012 40 . Design advice Consider opportunities to simplify aspects of your design into modes by mapping typical user journeys and simplifying shared tasks. modes can be useful. there are times when a design is most efficient to use once some initial behaviors have been learnt. From demos. seeing only the relevant controls and information.Controlling visual structure Even after defining the exact features of your app you may find aspects of the design require different approaches to interaction and interface design. In this instance. However. one of your main aims will be to make your interface intuitive without relying on help or a guide to how your app works.

such as the Deloitte Mobile user guidelines (brandspace.com – User guides link on the homepage). the principles of user interface design and appropriate process are equally applicable to designing apps for smartphones. creating greater differences between device functionality and screen real-estate. Some added design challenges exist when creating ideas for a smaller screen and through following the correct process and adequate testing they can be solved easily. mapping the user experience and designing the interface appropriately for the range of platforms and devices on which you choose to develop. Click here to return to Contents Deloitte App Guide July 2012 41 .5 Smartphones All aspects of this guide from understanding user experience. In conjunction with this document you should also refer to other relevant User Guides on Brand Space. When designing for smartphones there are a larger number of platforms and devices to consider. Ensure adequate time and resource is applied to defining your idea.4. touchscreen gestures.deloitte.

and of course multi-touch screens for allowing a variety of gesture based interactions. Global positioning systems (GPS) for navigation and ‘finding’ your location in order to leverage location-based services. gyroscopes for measuring or maintaining orientation. When researching platform. accelerometers to measure acceleration which is useful in games and ‘bumping’ devices to transfer data.4. In conjunction with this document you should also refer to other relevant User Guides on Brand Space.deloitte. Many smartphones and tablets now have built-in cameras for taking photos. such as the Deloitte Mobile user guidelines (brandspace.6 Enhancements As you read this. recording video. the technologies listed in this section are already part of how we’re using our smartphones and tablets in everyday life. utilizing augmented reality. device and delivery options to suit your requirements it’s important to have an clear understanding of the added hardware technology that can be utilized to enhance the functionality of your app. Click here to return to Contents Deloitte App Guide July 2012 42 .com – User guides link on the homepage). mobile image recognition and scanning QR codes.

deloitte.com/ (User guides link on homepage) 5. the listed contacts can also refer you to agencies specializing in the custom build and implementation of apps.3 Contacts Name Brian Resnick Bill Barrett Role Associate Director.org/ Android Developers User Interface Guidelines Android Design General resource – Smashing Magazine General resource – Mobile X Web General resource – Mobile HTML 5 Click here to return to Contents Guidelines for Mobile Web Development UI Guidelines Compatibility Deloitte App Guide July 2012 43 .2 External resources Name Apple iOS Description iOS Dev Center Human Interface Guidelines URL http://developer.apple.com wbarrett@deloitte.apple.html http://developer. reach out to local internal or external specialists of your choosing.1 Internal resources Name Deloitte Brand Space Deloitte Mobile user guidelines Deloitte Keynote guide Description The definitive guide to our Brand identity A user guide to leveraging mobile technologies A user guide to the alternative presentation app for use with iPad and Multi-touch mobile devices URL https://brandspace.html http://developer.smashingmagazine. Global Brand Associate Director.com/ https://brandspace.com/devcenter/ios http://developer. html http://www.com/design/index.com Agency contacts In addition to providing clarification and/or support.com/index.com/library/ ios/#documentation/UserExperience/ Conceptual/MobileHIG/Introduction/ Introduction. of course.deloitte.com/blog/ ui-guidelines-mobile-tablet-design http://mobilehtml5.android. 5.mobilexweb.com/ guidelines-for-mobile-web-development/ http://www.html http://developer.com/ (User guides link on homepage) https://brandspace.Support 5.android.android. You may also.deloitte.com/guide/practices/ ui_guidelines/index. Online Communications Email bresnick@deloitte.

Sometimes sound is also used as feedback during interaction. Tablet A tablet is a mobile computer. primarily operated by touching the screen rather than using a physical keyboard. Menu Interactive objects or text organized into a horizontal or vertical layout as grouped menu items. for example. ePublishing Third party platforms designed to allow easy editing and publishing of content into self-contained modules for browsing primarily on tablets. or SMS/MMS and accessing mobile internet. Objects General term used to describe a visual module of an interface or self-contained pattern of interaction. Wireframes Diagrams or blueprints including all functional considerations and content requirements created as a foundation for prototyping. Platform General term used to describe an open or closed software delivery option. They often use an onscreen virtual keyboard or a passive stylus pen. Hardware often has a variety of functions including GPS utilized through downloadable apps.Definitions This glossary includes definitions of terms that are referenced within this document App Short for application. a type of end-user software that is developed to serve a specific function. Navigation Interactive objects or text added to screen layouts to reveal or allow access to further content or features. Smartphone Mobile handsets with the functionality for calling. Click here to return to Contents Deloitte App Guide July 2012 44 . Prototype An in-progress software version of an app created to test structure and functionality. Gestures Intuitive finger movements for using a multitouch screen to select and interact with apps. Multitouch Smartphone and tablet screen technology used as a physical interface capable of receiving feedback from multiple touches simultaneously. Icons Visual representations of themes or ideas as a shorthand for feedback or navigation. integrated into a flat touch screen. larger than a mobile phone or PDA.. the color change of an icon. Hardware often has a variety of functions including GPS utilized through downloadable apps. Feedback Visual changes to screen objects denoting an action has occurred.

Challenges – GE Patient Shuffle Apple iOS available via the app store Do you have what it takes to run a hospital? Place the non-stop flow of patients in rooms.Appendix 1 Best practice examples of apps aimed at a business focused audience. Includes a concise manifesto. Has a customizable dashboard that pushes live information to investors and analysts and interactive share price charts showing the latest prices for Unilever shares on four exchanges. Click here to return to Contents Deloitte App Guide July 2012 45 . and meet the people involved in making it happen. Discover new ways of finding energy. the higher you score. It's harder than it sounds. learn about advances in technology. case examples and a number of interactive tools to present the idea of defining business purpose. A number of other good examples can also be found on Apple’s App Store and Google’s Android Marketplace. Editorial – Shell Inside Energy Apple iOS available via the app store An app exploring the role innovation plays in producing energy to power and sustain our lives. The more happy patients you discharge. so you better plan ahead. Tools – Deloitte Business:Society app Not currently available for general release A tool based conversation app designed to aid discussions around businesses and their purpose in society. then match them with doctors. Frameworks – Unilever Investor Centre Apple iOS available via the app store Provides Unilever investors with instant access to important financial and business information.

commentary. sports journalism and unique modular approach to coverage of culture. science and technology. Offers easy browsing through the schedules to find the content you want. Challenges – Angry Birds Apple iOS available via the app store and Android via Marketplace A game app featuring challenging physics-based gameplay with hours of replay value. Editorial – The Guardian Apple iOS available via the app store and Android via Marketplace An app which showcases international reporting. Frameworks – BBC iPlayer Apple iOS available via the app store and Android via Marketplace An app designed to allow you to watch. Tools – Discovr Music Apple iOS available via the app store An app with access to more than 15 million songs and 3 million artists in the world. listen live and catch up on the last 7 days of BBC TV and Radio. A number of other good examples can also be found on Apple’s App Store and Google’s Android Marketplace. It makes it easy to find and explore new music. Each level requires logic and skill to progress to the next level.Appendix 2 Best practice examples of apps aimed at a general audience. engaging layout and a magazine-style reading experience. Tools – Keynote Apple iOS available via the app store A presentation app with editing features to make creative presentations – complete with animated charts and transitions – simply by touching and tapping. You can enter an artist you like and browse the connections. Deloitte App Guide July 2012 46 Click here to return to Contents . Frameworks – Flipboard Apple iOS available via the app store An app that aggregates different sources of published content into a beautiful. Also offers simple share functionality across your social media networks.

Deloitte brings world-class capabilities and deep local expertise to help clients succeed wherever they operate. consulting.000 professionals are committed to becoming the standard of excellence. and its network of member firms. Please see www. its member firms. tax. a UK private company limited by guarantee. Deloitte provides audit. and their related entities (collectively. Deloitte's approximately 195. and financial advisory services to public and private clients spanning multiple industries.Deloitte refers to one or more of Deloitte Touche Tohmatsu Limited. © 2012 Deloitte Global Services Limited . None of the Deloitte Network shall be responsible for any loss whatsoever sustained by any person who relies on this publication.com/about for a detailed description of the legal structure of Deloitte Touche Tohmatsu Limited and its member firms. each of which is a legally separate and independent entity. This publication is for internal distribution and use only among personnel of Deloitte Touche Tohmatsu Limited. With a globally connected network of member firms in more than 150 countries.deloitte. the “Deloitte Network”).