Mobile Widgets User Experience Guidelines

Mobile Widgets UE Guidelines Mobile Widgets User Experience Guidelines This document describes user experience guidelines for designing mobile widgets, and is intended to be a resource for any parties developing widgets for use on Vodafone devices. VODAFONE and the Vodafone logo are trade marks of Vodafone Group. Copyright © Vodafone Group 2008, 2009.

Table of Contents 7 Navigation 23 Clarity of location 23 Introduction 3 8 Affordance and Consistency 25 About User Experience 3 Word and phrase meanings 25 Designing User-Centred Mobile Widgets 4 Similar elements to have the same meaning 27 Vodafone User Experience Principles 5 Clear functional design of elements 27 1 Getting Started 7 9 Error prevention and Recovery 28 Naming the Widget 7 Minimising user error 28 Creating a Widget icon 7 Downloading the Widget 7 10 Instruction and Help 30 2 Value and Engagement 8 Making instructions simple and clear 30 An immediate purpose and benefit 8 11 Localisation for Different Markets 31 Engage the user 9 3 User Control 10 12 Supporting Different Hardware 32 Relevant, accessibleIe and meaningful 10 Screen size and mode 32 Context of use 11 Finger-based Interactions and Gestures 32 Target, icon, button and list sizes 33 4 Efficiency 12 Text entry 34 Ask for minimum information? 12 Touch Controls 34 Does the widget feel responsive? 13 Feedback 35 Order of links, content and other on-screen elements logical? 13 Metaphors and Signifiers 35 5 Look and Feel 14 UE team contact details 36 Widget layout 14 Look and feel of the Widget 18 Readable text 21 6 Feedback 22 Clear indication of successful operation 22 Mobile Widgets UE Guidelines 2/36

Introduction About User Experience This document Vodafone use the ‘Useful, Usable and Engaging’ (UUE) framework to understand ‘UE quality’ at different stages of design development. We recommend that you apply this framework in This document describes user experience guidelines for designing mobile widgets, and is all aspects of design in order to deliver an easy to use and delightful product or service. intended to be a resource for any parties developing widgets for use on Vodafone devices. ‘Useful’ means that it meets the target customer’s needs, it encourages adoption and use and These guidelines will also be used by Vodafone to evaluate the user experience of mobile it has no major barriers to adoption and use. widgets. ‘Usable’ means that it works ‘out of the box,’ that key tasks can be performed with ease, and Most of the examples in this document relate to widgets, but many of the user experience that high frequency tasks can be performed efficiently. guidelines are generally relevant for any type of mobile application. ‘Engaging’ means that it expresses Vodafone brand values, it provides differentiation for In section 12, Supporting Different Hardware, you will find guidelines on touch screen Vodafone and that it delights the customer. interaction. If you develop an application which might be used on a touch screen handset you should follow the guidelines in all other sections and keep the touch screen interaction guidelines always in mind. To ensure users have a positive experience with a widget, it should meet three key criteria: Visual design is subject to separate guidelines and not covered in this document. Please The widget should be useful refer to the Visual Guidelines, provided by your UE contact if you need further information. It should provide easy access to functionality that helps users achieve their goals whilst being The use of the Vodafone brand is subject to separate policies and not covered in this mobile. document. Please refer to your Vodafone contact if you need further information. The widget should be easy to use It should enable your target users to achieve their goals in an effective and efficient way that is appropriate to the context of use. What are Widgets? The widget should be engaging Widgets are highly personalised lightweight applications that serve content from the internet The design, language and flow of interaction should create a positive emotional impact that is or from the device. A widget is able to acquire and instantly display information from the web appropriate for your target users. or local machine without the need to open a web browser. This provides quick access for the user to specialised information such as weather updates or share prices. Investing time in creating a good user experience will result in greater productivity, competence, ease of learning, overall satisfaction, fewer errors and greater trust in mobile Widgets tend to organise information into a flattened list of items or into a straight-forward technology by users. For developers, the benefits include increased sales, reduced support visualised data display. Users generally do not need to drill down through a hierarchy of and maintenance costs and reduced development costs, through focusing on the features information to find what they need as a well designed widget should be very easy to use: that deliver the greatest benefit to users. Open, scan the information and close – with some simple options to change the settings. Vodafone believe that ensuring a good user experience is vital to the development of all Widgets typically sit on the home screen of the device or application and are visually pleasing mobile applications. Any widget should meet a core set of requirements, And compliance in appearance. with these guidelines will improve the chance of user uptake. Mobile Widgets UE Guidelines 3/36

Designing User-Centred Mobile User experience for mobile widgets Mobile widget developers should follow best practice in usability and interaction design, Widgets including: Quick and easy setup Usability problems occurring during downloading, installation and set-up can deter or even User-centered design approach prevent users from using the widget at all. To create a mobile widget that offers a great user experience, you need to employ a user- Prioritise key use cases centred design approach. The goal is to understand the real needs your target users have Prioritise the most frequently needed or used functions. Avoid overloading the user with too when they are mobile, and address those in the most appropriate way. many features, especially those that will only be used infrequently. There is no single correct set of user-centred design methods, but this document describes Good interaction design some tips, tools and techniques that can help make your widget as useful, usable and Follow basic usability guidelines, including: engaging as possible, whether you are creating a new widget from scratch or a mobile version - Good error handling of an existing web service or PC-based widget. - Good interface consistency Seamless integration What’s different about mobile usage Ensure that widgets (especially communication-related ones such as messaging) are well Mobile usage is fundamentally different from usage that is taking place in a fixed location, or integrated into the architecture of the host device. Widgets that are not easy to find will be on a PC. Some of the key differences are: used less frequently. Users are likely to be interrupted Scalability and interoperability Mobile usage tends to take place in much shorter bursts than interaction with a PC, and the Avoid designing a widget for a single phone. Make sure the widget can easily be used on a user is much more likely to be interrupted (e.g. incoming phone calls, messages but also variety of phones (and formats). social interactions, boarding a train or plane, etc.). Ensure users can start and finish tasks This document provides detailed guidance on these and other aspects of user experience. quickly, abandon partially completed tasks and resume them later. Their attention is likely to be divided between the mobile interface and other tasks, so where possible, avoid situations where the user must act within a defined period of time. For example, ensure that important system messages and notifications remain onscreen until the user has actively dismissed them. Mobile devices have limited input/output capabilities Mobile devices have smaller screens, more limited pointing devices and more fiddly text entry capabilities than other devices (even if the device has a QWERTY keyboard, it will be smaller and touch-typing will be slower and more error-prone). Avoid cluttering the screen with too much information and require only the minimum of text entry or data manipulation. The limitations of the device and context of use mean that users typically only want to perform a few key functions on the phones, so concentrate on supporting the key functions of the application that make most sense on the phone as efficiently as possible, rather than providing all the features you might provide on e.g. a web channel. Not every function needs to be ported; for example, the user may choose to upload a video to a blog from the phone but then add tags later. Mobile Widgets UE Guidelines 4/36

Vodafone User Experience Focus on communication, availability and spontaneity Despite the limitations, mobile phones can offer unique opportunities. In particular, the Principles mobile phone forms a primary connection point to other people, so there is a lot of potential added value for the user in integrating the information and functions of a widget into the other communication functions provided. In addition, the fact that the phone is always available to the user (and the user can be available via the phone whenever they choose) Vodafone has developed a set of user experience (UE) principles, which are applied enables greater spontaneity in interactions than might be available via a PC. To create a really throughout the design of all their services. As well as embodying good practice, the guidelines compelling mobile widget, think about how your widget can make the most of the unique also integrate Vodafone business goals in order to ensure that both business and user needs communication opportunities the phone offers. are met. The context of use varies Mobile devices are used in a wide variety of locations and situations, in which both physical These are: conditions (such as lighting levels and ambient noise, and whether the user is occupied with - Facilitate communication another activity, such as driving, or watching live music) and social circumstances may vary (e.g. the user may be in a restaurant, on a bus or at work, or in situation in which it is not - Encourage usage acceptable to use the phone). These external factors can restrict how the user is physically - Give the user control able to use the device, or mean that they wish to use it in a particular way (for example, using - Be consistent voice commands whilst driving, replacing audio alerts with vibrate, or ensuring the camera - Provide a seamless user experience adjusts automatically and quickly to varying light levels when photographing a band on stage). - Display and communicate information clearly - Ensure learnability - Make the user aware and provide clear feedback Designing a good user experience - Allow for efficient interaction for frequent use cases The list above provides some guidance on mobile usage in general, but to ensure your widget - Guide users through low frequency use cases offers a great user experience you also need to ensure it meets the specific needs of the - Provide multiple entry points for a use case target users of your individual widget. There are many possible techniques you can use to practice user-centred design, but the basic process is as follows: - Prevent errors and allow for recovery - Support customisability & personalisation These principles underpin the detailed recommendations in each section. Design & Refine Understand Launch your users Iterate Prototype the design Fig. 1: Basic overview of the user-centred design process Mobile Widgets UE Guidelines 5/36

Mobile Widgets UE Guidelines Specific Interaction Design Guidelines The guidelines are intended to be applicable to any mobile device or platform. If particular devices or platforms make it difficult to execute a specific guideline in this document, we encourage you to look for a solution that best addresses the underlying user need behind the guideline, and is consistent with the interaction design of the platform or device in general. These guidelines are not intended to restrict or stifle innovation, and there may be occasions when it is appropriate to break with convention in order to create a great and novel user experience. However, this should only be considered if the new solution offers a tangible and substantial improvement for users to a salutation based on established best practice.

1 Getting Started 1-3 The icon should be easily recognisable Keep it simple, as the icon may vary in size depending on the device. Avoid using too much detail or too many colours, as these are not easily discernible at small sizes. Icons are easier to understand when accompanied by a text description. Naming the widget Addresses UE components of Usefulness, Usability and Engagingness 1-4 Consider giving your widget an active icon from which it can be 1-1 Create a memorable and intuitive name for your widget expanded. Good naming makes it easier for the user to identify the purpose of your widget and Addresses UE components of Usability understand what it does. Ensure that your name is suitable for the short text strings and small screen sizes used on mobile phones. Addresses UE components of Usefulness and Engagingness Downloading the widget Creating a widget icon 1-5 Provide a loading screen if necessary If you cannot be sure that the widget will load within 0.5 seconds, there should be a loading 1-2 Create a clear and unique icon for your widget screen with a progress bar. The loading time can be used visually to illustrate the purpose of the widget, and should provide the name of the widget and its developer. This reassures the Create a unique icon to represent your application. This should be easy to understand, user and holds their attention until the widget has fully loaded. descriptive, and if it is an active icon, it should display exactly the information the user would Addresses UE components of Usefulness want to see. It should be visible and recognisable at a glance. As with naming, ensure it works on the screen size and resolution of the phone screen. Addresses UE components of Usefulness and Engagingness 1-6 Provide a soft key option to cancel the loading For those situations where the user really does have to exit the widget loading process, Good example: Poor example: provide a soft key option to ‘Cancel’. These examples give no immediate These examples display the widget Addresses UE components of Usefulness. understanding of the widget’s purpose. content explicitly and implicitly. 1-7 Any settings defined at set up should be editable later through the settings menu The user should be able to edit any settings defined during the set-up process at any time throughout their use of the widget, not only during the initial set-up. For example, settings should be available through a Settings option in the widget’s Options menu, and also through the phone’s main Settings menu (where appropriate). Addresses UE components of Usability Mobile Widgets UE Guidelines 7/36

2 Value and Engagement 1-8 Make key functions available as soon as the widget is open Assist the user in getting started to use a widget by presenting upfront the options that they are most likely to use. Addresses UE components of Usability An immediate purpose and benefit 1-9 Updates to the widget The widget should be designed to allow automatic updates to a newer version when needed. 2-1 Create a widget that has a clear purpose and that delivers specific The updating process must preserve the identity of the widget. value to the user Addresses UE components of Usability Value is defined by what the user needs at that specific moment in time. They may want to know the latest score of their team, or they may just want to know the time. Whatever the purpose of your widget, decide on the core purpose of your widget, and then deliver that content as precisely as possible. Addresses UE components of Usefulness and Engagingness 2-2 Clearly communicate the purpose and the benefit of the widget What is the real user need that the widget addresses? Does it do something new or does it do the same as something else only more efficiently or effectively? A clear and compelling proposition will persuade users to download and use your widget. Addresses UE components of Usefulness and Engagingness Good example: This widget’s purpose is clearly stated at the top of the screen. Mobile Widgets UE Guidelines 8/36

2-3 Two widgets can be better than one 2-6 Be engaging for the user at any time If you are trying to get too much information across then the widget can appear to be too Mobile widgets are accepted as having a limited functionality, but design your widget to allow busy and difficult to read. Consider creating more than one widget, with each one delivering a that functionality to be used in mobile environments and public places where distractions, specific piece of information really well. interruptions and adverse lighting conditions may be prevalent. Addresses UE components of Usefulness and Usability Addresses UE components of Usefulness and Engagingness 2-4 Has the widget done its job? Check that once the user has used your widget then their need for that specific activity or information is completely and accurately satisfied. Addresses UE components of Usefulness, Usability and Engagingness Engage the user 2-5 Engaging a user in many ways Users can be engaged in a wide variety of ways. One user may spend time reading many different articles that are delivered through a widget, whereas another user may like to try several different appearances of a clock widget. Addresses UE components of Engagingness Good example: This widget allows the user to customise the display of a clock. Even the simplest widgets can be made to engage the user. Mobile Widgets UE Guidelines 9/36

3 User Control 3-2 Back function Ensure the user has a quick and easy route to go back. This option is usually assigned to a soft key and should not conflict with the UI paradigm of the host device. Addresses UE components of Usability Relevance, accessibility and meaningful 3-3 Only use the “Back” label if your control goes back precisely one screen 3-1 Provide a main navigation menu which contains entry points to all of the content and functionality on the widget “Back” is such a well-understood function that everyone has very specific expectations of what it performs. If you wish to go back more than one screen, use a different label for your Access to that menu should be clearly labelled from all others screens on the widget. control, such as “Retry”, “Start Over”, “Main” or some other location-specific label. Follow NB: depending on the type of widget, this may simply be the home screen or default screen platform conventions for phones with a hard Back key (e.g. Sony Ericsson). the user sees on entering the widget, as long as all content and functionality are available Addresses UE components of Usability from this point. Addresses UE components of Usability 3-4 Ensure the user can exit the widget using the standard platform exit function Good example: Good example: Ensure the user can always exit out of the widget by pressing the red End key (Nokia) or any The menu bar is not highlighted but the The menu bar is clearly identified on the other relevant device or platform convention. Do not assign this key to another function, or menu box stands out from the screen bottom of the screen. disable it, as this will confuse and frustrate users. content. Addresses UE components of Usability 3-5 List menu items in a logical order Place the most frequently used or important options at the top of the menu and the least used ones at the bottom. Addresses UE components of Usefulness, Usability Good example: This shows the options in an alphabetical index across the top and in an alphabetical column too which allows the user a choice of use. Mobile Widgets UE Guidelines 10/36

3-6 Try to minimise the number of menu items 3-9 Allow the user to abandon long processes Ideally, all items in the Options menu should be visible without scrolling. As a rough guide, Allow the user the option to cancel any long process that they have initiated. If the user the maximum number of items in the left Options menu (1st level) should be no more than decides to cancel the process, the terminal should be set back to the same state it was in prior five. Related items can be grouped in sub-menus to decrease the amount of items on the first to the procedure. level of the options menu. The maximum number of items in a 2nd level option menu should Addresses UE components of Usefulness be limited to three. Addresses UE components of Usability Context of use 3-7 Hide, fade out or disable all choices that are not applicable at that moment 3-10 Support interruptions in use This reduces confusion and prevents errors. Users often use mobile devices in situations in which they are likely to be interrupted. If it can Addresses UE components of Usability be avoided, the widget should not require the user to engage in lengthy tasks, and should allow users to exit/pause and resume where they last left off in the widget. When exiting a Poor example: widget, consider saving the user’s current settings or ask users whether they want to save them. Make saved settings available to the user upon restarting the widget. Here the main screen is faded but the menu box and highlight bar are from the If the widget has an auto-save feature, consider whether the widget need a reset mechanism, same colour set and so are hard to for example in conjunction with settings. separate from the faded screen content. When interrupted by an incoming phone call or SMS, it is best to pause the widget and give the user the opportunity to resume where they left off. Addresses UE components of Usability 3-11 Expect the user’s attention to be divided Users often use mobile devices in situations in which their attention is divided between the device and other activities or things happening around them (such as catching a bus or crossing the road). The widget should present information and tasks in concise chunks, allow users to move forward and back through tasks easily, and avoid requiring a response within a set time frame. Streaming widgets which require constant attention should provide a one- click pause and resume function. Alerts or any message requiring the user’s attention, should be supported by both audio and visual cues. Addresses UE components of Usability 3-8 Notify the user who will be able to view any uploaded content When uploading content it must be clear to the user who will be able to view it and set access rights to the desired level. For example, when uploading a photo to a blog it should be clear whether it will be visible to anyone, or to friends and/or family only. Addresses UE components of Usability Mobile Widgets UE Guidelines 11/36

4 Efficiency 3-12 Ensure widget copes gracefully with interrupted/patchy network availability For example, allow uploads and downloads to be paused and resumed as network coverage varies or switch to an alternative data connection if 3G becomes unavailable. The user should Ask for minimum information be warned if the device has to switch to a slower data connection and, if downloading a large file, should be offered the opportunity to pause and resume the download when a faster connection becomes available again. Whenever possible, the widget should behave seamlessly under varying network availability. 4-1 Have default settings where possible Addresses UE components of Usability Having a default setting for a widget allows the user to experience the potential value of the widget without having to use it. The widget’s icon on the widget engine dashboard may include basic text, numbers or symbols to display the current information. Addresses UE components of Usefulness and Engagingness Good example: The widget attempts to show locally relevant information at startup 4-2 Localised default settings Where possible default information should be as accurate as possible. A weather widget could display the weather for the users current location or for a default location based upon the local country. Addresses UE components of Usefulness and Engagingness Mobile Widgets UE Guidelines 12/36

Target the range of content 4-3 Make key tasks as quick to complete as possible Limit the number of screens the user must navigate through, the amount of information they see, and the amount of scrolling or keystrokes required. For example, avoid free text entry if 4-8 The most frequent user tasks should be available from the home picking from a list would be more efficient. screen of the widget Addresses UE components of Usefulness and Engagingness The most frequent user tasks should preferably be available on the home screen within 1 key press from the home screen. When use cases consist of several sequential actions that the 4-4 Storing the user’s preference user must complete, each action should lead the user to access the next logical action easily. Addresses UE components of Usability The widget should store the user’s preferences and initial settings to prevent the user having to reset their preferences each time. For example a weather widget should store the preferred location for weather information, and not ask for the information every time the widget is opened. 4-9 The options available on any page should match the key needs of Addresses UE components of Usefulness and Usability the user at that point For example, when purchasing, information on price and download size should be obvious on 4-5 Multiple installations the screen. If the user is looking at a TV Guide, make sure that they can see what the current time is. Where the availability or quality of the service received is dependant on coverage, The widget should be aware that there may be multiple installations of itself running display a signal strength or 3G coverage icon. concurrently. For example, two clock widgets showing the time in different countries. Addresses UE components of Usability Addresses UE components of Usefulness and Engagingness Does the widget feel responsive? 4-6 Make it happen quickly Design the widget so that the response to user actions is immediate. If the widget needs to download data, let the user know that download is in progress. Addresses UE components of Usability 4-7 Optimise data downloading If data needs to be downloaded, try to display the first screen of data while the rest is downloading in the background Addresses UE components of Usability Mobile Widgets UE Guidelines 13/36

Order of links, content and other on-screen 5 Look and Feel elements logical? Widget layout 4-10 Less frequent tasks should be available via logically structured menus 5-1 Ensure the screen layout includes plenty of white space These do not generally need to be placed directly on the home screen: too many functions clutter up the screen and make it harder to focus on the most important functions. Do not fill every pixel of the screen with content, including text and graphics. Using plenty of Addresses UE components of Usability white space helps guide the user’s eye to the most important information and increases legibility. 4-11 Make tasks that users will not perform frequently easy to Addresses UE components of Usability and Engagingness understand Good example: Poor example: Tasks that users perform infrequently should be accompanied by clear instructions. It is less This screen includes two data entry A solid screen of text links makes important that these tasks can be achieved quickly than that they provide adequate guidance fields, instructions and icons but still unappealing to view even if it is an and assistance, as users will probably not remember how to go about them. includes white space. effective usage screen area. Addresses UE components of Usability 5-2 Soft keys should be labelled Soft keys should always be clearly and consistently labelled unless there is a strong justification for not doing so. If possible, soft keys should be labelled in full-screen mode. Addresses UE components of Usability Mobile Widgets UE Guidelines 14/36

5-3 Follow operating platform soft key conventions 5-7 Links or access to online content should be clearly distinguished For example, if there is usually a left soft key Options menu, it is generally advisable to For example, links should be indicated with an icon and/or underlined text. When embedded structure your application in this way too. If the centre key is mapped to a default action on links are displayed on top of a content list, the default position of the focus should be on the the rest of the phone, you should do this too. entry below the embedded link. Addresses UE components of Usability Addresses UE components of Usability 5-4 Avoid completely obstructing key areas of the screen with pop-ups, 5-8 For selectable options, there should be clear states for the “active” alerts or sub-menus and “passive” states Consider using transparency to allow visibility of the background. Addresses UE components of Usability Addresses UE components of Usability Good example: Good example: Good practice regarding selecting New popup menus only appears within on-screen options. bottom menu area, so that the content window is fully visible. 5-9 Use a check box only when it provides an opportunity to select more than one option Addresses UE components of Usability 5-5 The purpose and effect of on-screen elements such as buttons, 5-10 Make sure that it is clear to the user when a check box is on, off, scroll bars and text fields should be obvious focussed upon or not available for positive selection For example, an interactive button should look ‘clickable’ by having a clear border, raised Addresses UE components of Usability edges or a drop shadow Addresses UE components of Usability 5-11 Use a tick (not a cross) to indicate selection Addresses UE components of Usability 5-6 Ensure icons representing objects (e.g. messages or contacts) are visually distinguished from those representing actions (e.g. create a 5-12 Use radio buttons only when the choice options presented to the message) user are mutually exclusive Addresses UE components of Usability I.e. where the user can only choose one of the options displayed. Addresses UE components of Usability Mobile Widgets UE Guidelines 15/36

5-13 Limit the physical interaction required 5-19 The items in the menu should be organised in order of frequency of use Reduce the amount of scrolling or keystrokes to a minimum. For example, avoid free text entry where possible and use selection lists, radio buttons, and other controls that do not The default selection should usually be the most frequently used option. There are require typing instead. occasional exceptions to this, for example a list of countries would provide most likely default Addresses UE components of Usability options at the top, then all others in alphabetical order. Addresses UE components of Usability 5-14 Indication of Text Entry Modes 5-20 Allow users to select and apply actions to multiple list items where Clearly indicate the active mode on screen. Allow T9, non-T9 and numeric entry. appropriate Addresses UE components of Usability For example, deleting messages or photos, copying address book contacts. Allow the user to select items individually and provide a ‘select all’ option when possible. 5-15 Allow direct selection and editing of text fields Addresses UE components of Usability For example, always allow the user to click in the field to edit it rather than selecting the field from the widget menu. For touch screen devices, allow the user to tap directly on the field to 5-21 Allow users to edit object details directly select or edit it. When viewing the details of an object (e.g. contact details, calendar entries, filenames, Addresses UE components of Usability content tags) the user should be able to select the different fields directly to edit them (e.g. contact’s first name). It should be possible to switch from viewing to the edit mode with a 5-16 Display default formats or values for entry fields to give the user single click or key press. an idea of which input is expected Addresses UE components of Usability e.g. DD/MM/YYYY or “00:00”. Addresses UE components of Usability 5-22 The on/off status of any option or functionality should be obvious This can be as simple as stating ‘on’ or ‘off’ alongside the relevant option. 5-17 Input should be masked for sensitive information (such as the Addresses UE components of Usability user’s password) For PIN / Password entry, the character the user has inputted should be momentarily shown 5-23 Allow the user to manage lists easily before appearing as an asterisk (*). For one, all or selected items and where appropriate the following options should be easily Addresses UE components of Usability accessible: Delete, copy, move and send. 5-18 Drop down fields should be used to allow the user to choose from a Addresses UE components of Usability long list of options 5-24 Lists should usually be ordered chronologically with the most Drop down fields are the preferred way to offer a list of options, however, long lists of options recent item at the top (e.g. messages, pictures taken) are generally not a good idea as they require too much dexterity from the user. Exceptions to this may be lists of contacts or countries, where the item name is known and Addresses UE components of Usability time is less important. Addresses UE components of Usability Mobile Widgets UE Guidelines 16/36

5-25 Clearly label each field and give examples of correct input 5-32 Group fields in forms logically For example, if the user is asked to enter the first line of their address, give an example just For example, all fields relating to personal details should be grouped together and separate below the relevant field of how that entry might look i.e. ‘11 Main Road’. If entry has to be case from fields relating to payment details. sensitive, indicate this as well. Addresses UE components of Usability Addresses UE components of Usability 5-33 Provide the user the ability to choose from fixed values 5-26 Use appropriate default input modes for entry fields The error rate resulting from selecting data is lower than the error rate resulting from entering For example, numeric mode should be used for phone numbers and text mode should be data e.g. dropdown fields (see below) used for email addresses. The default entry character entry mode for an age field should be Addresses UE components of Usability numeric. Where appropriate allow the user to switch the input mode. For proper nouns, the first letter should be capitalised by default. 5-34 Clearly show the maximum character length of any field Addresses UE components of Usability Ideally provide a countdown from the maximum number to 0 as the user enters characters. Addresses UE components of Usability 5-27 Ensure the user can clearly read text they enter Ideally use a plain white background for good readability. 5-35 If the user leaves mandatory fields empty or makes a mistake, Addresses UE components of Usability there should be one alert/error message for all of the missing fields rather than one for every field 5-28 Accept common misspellings Take the user back to the entry screen and preserve any correct information they have The device may be a better speller than the user (and text entry on phones is difficult). already entered. If optional fields are empty, allow the user to proceed without an alert. Error messages in forms should describe where the problem is, what it is, and how to fix it. Addresses UE components of Usability Addresses UE components of Usability 5-36 All widgets should have a close button which should be 5-29 Display a cursor in text entry fields permanently visible A flashing cursor may be easier to spot, but follow the conventions of the operating platform. Addresses UE components of Usability Addresses UE components of Usability 5-30 Clearly identify mandatory fields It’s usual to use an asterisk *, but be careful not to use this symbol for any thing else on the screen such as footnotes. Addresses UE components of Usability 5-31 Only make fields mandatory if absolutely necessary Consider whether the field is really mandatory; wherever possible let the user save partial details since mobile usage is often interrupted. Addresses UE components of Usability Mobile Widgets UE Guidelines 17/36

Look and feel of the widget 5-40 Use muted colours to de-emphasise less important information Addresses UE components of Usability 5-37 Use colour sparingly Overuse of colour can be distracting and take away from the design. Keep the number of 5-41 Use bright colours to highlight important information colours to a minimum Addresses UE components of Usability Addresses UE components of Usability Good example: Poor example: A simple colour scheme helps to user to Having the same colour scheme in every 5-38 Use a consistent colouring scheme focus on their next action. window can make it difficult to As a general rule, if objects are the same colour, they should have the same meaning. differentiate each window. Addresses UE components of Usability 5-39 Colour can be used to effectively group, define or separate functional areas For example, using borders and background colours. Addresses UE components of Usability Good example: Poor example: When you click on the links the colour by the side of the link is the defining colour on all those sub-pages. 5-42 Ensure your colour scheme can be rendered effectively on low colour depth displays, as appropriate Addresses UE components of Usability 5-43 Ensure that information conveyed with colour is also available without colour Up to 6% of users have colour deficient vision, which affects their ability to differentiate different hues. Problems distinguishing red and green are particularly common, and age- related yellowing of the cornea can cause confusion between some shades of blue, green and violet shades in older users. If you use colour to convey information, ensure that this is always backed up with other cues, such as a change in the shape of an icon, or a text label. Addresses UE components of Usability Mobile Widgets UE Guidelines 18/36

5-44 Use colour in a way that is appropriate to the cultures of your users 5-50 Do not use background images unless you know the device supports them The meaning of specific colours can vary widely between cultures. The colour red, for example, may be used to represent a warning or an error message, but in another culture it When using background images make sure that content in the foreground remains may be used to promote a positive experience. See Section 11: Localisation for more sufficiently legible. Plain colour backgrounds work best. information. Addresses UE components of Usability Addresses UE components of Usability 5-51 Use images compatible with your display capability (e.g. 2 bit, 256 5-45 Use images sparingly or thousands of colours, etc) Superfluous images compete with every other relevant unit of content on screen, reducing Addresses UE components of Usability their visibility and impact. Addresses UE components of Usability 5-52 Provide textual alternatives for non-text elements This is important if the application relies on a connection to the network in order to retrieve 5-46 Images should primarily be used to communicate information and images. Making the page readable in text only mode can help the user assess basic not solely to decorate information before images arrive. For example, an arrow might be used to suggest the action required by the user e.g. rocker left Addresses UE components of Usability or left. Addresses UE components of Usability 5-53 Ensure animations are informative Use animations to communicate information, not solely to decorate. 5-47 Use images that are appropriate to users’ cultures Addresses UE components of Usability The meaning can vary across cultures and so pay special attention to the use of human figures, numbers, colours, symbols, and hand gestures. 5-54 Animations can be distracting so it is best to have no more than Addresses UE components of Usability one animation showing on the screen 5-48 When using icons, make sure that they are based on easily They should be avoided when the user needs to concentrate on something else. understood metaphors Addresses UE components of Usability The user should be able to learn the icons as quickly as possible. There are many successful icons already in use in other applications and widgets so you are advised to look at existing best practice. Addresses UE components of Usability 5-49 Use icon colours that support the meaning of the icon For example, red usually suggests an error or ‘stop’. See also section 11-8 for more information. Addresses UE components of Usability Mobile Widgets UE Guidelines 19/36

5-55 For optimum effect, it is best for the animation to loop only a 5-61 Provide a volume control limited number of times and then stop If the user cannot access the volume control through hard-key controls, they should be able Animations that don’t stop cause the screen to remain on which prevents the phone going to control the volume via the widget within one or maximum two key presses. into sleep mode – which drains the battery. Additionally, the screen that the animation stops Addresses UE components of Usability on should convey the main information conveyed by the animation Addresses UE components of Usability 5-62 Use sounds to communicate what happens outside the widget 5-56 The user should be able to interrupt or skip animations where E.g. ensure that the standard device tone for an incoming text message is audible over the possible application. E.g. animated introduction screens. Addresses UE components of Usability Addresses UE components of Usability 5-63 Avoid using sounds that are similar to ring tones and alert tones 5-57 Sounds should be used sparingly For example, the user might mistakenly think they have received a message and prematurely Sounds are a powerful means for rendering feedback and emotional context to a widget, but quit the widget. overuse can be irritating. Addresses UE components of Usability Addresses UE components of Usability 5-64 Sounds should be appropriate for different cultures 5-58 Avoid loud or high-pitched sounds Sounds that are very culture or country specific (such as human voices, which will have This will unduly alarm the user, making them less comfortable with the widget. recognisable accents) may be confusing or carry negative connotations in other cultures. Addresses UE components of Usability Some may be misunderstood (e.g. a German PSTN dial tone sounds like a British engaged tone). Addresses UE components of Usability 5-59 Ensure sounds can be turned off when inappropriate In some contexts of use it will be inappropriate to make any sounds. Sounds should either be 5-65 Key press sounds and effects should begin within 50 ms of the OFF by default, or prompt for sound settings at the start of the widget. Ensure that the widget action is silent when the device profile is set to ‘silent’. Addresses UE components of Usability Addresses UE components of Usability 5-66 The user should be able to interrupt any tone with a key press 5-60 Provide alternatives to audio Addresses UE components of Usability Provide a text equivalent to any important information conveyed by sound e.g. in a shooting game, provide visual indication to the user that they are out of ammunition rather than relying solely on a sound effect. Addresses UE components of Usability Mobile Widgets UE Guidelines 20/36

5-67 Use vibration sparingly 5-74 Avoid large areas of text, bunched or unbroken text blocks Vibration is another powerful means for rendering feedback and emotional context to a Addresses UE components of Usability widget, but it should be used sparingly. If used too frequently it becomes irritating and loses its impact. Addresses UE components of Usability 5-75 Limit the number of font sizes, styles, and weights Use fonts and styles consistently, e.g. for types of heading or specific types of information. 5-68 Use vibration of just enough length and intensity to get the user’s Addresses UE components of Usability attention, confirm actions or alert them to errors Addresses UE components of Usability 5-76 Use headings and sub headings to convey structure in long pages of text 5-69 Ensure vibration can be turned off when inappropriate Addresses UE components of Usability In some contexts of use it will be inappropriate for the device to vibrate. Vibration should either be OFF by default, or prompt for vibration settings at the start of the widget. Ensure 5-77 Avoid using ALL CAPITALS that vibration is off when the device profile is set not to vibrate. Addresses UE components of Usability This slows down reading as users cannot easily recognise the outline of words when they are all the same height. This also represents shouting in online writing and may be considered rude if used inappropriately. 5-70 The widget should be usable without the vibration Addresses UE components of Usability Provide a text equivalent to any important information conveyed by vibration. Addresses UE components of Usability 5-78 Use bullet points and short paragraphs for ease of scanning Addresses UE components of Usefulness, Usability and Engagingness 5-71 Vibration effects should begin within 50 ms of the action Addresses UE components of Usefulness, Usability and Engagingness 5-79 Use pixel fonts for better readability Readable text These are fonts that consist only of black/white pixels and are not anti-aliased. 5-72 Avoid small or unusual fonts as they are likely to impair reading Addresses UE components of Usability The screen content of the widget should be clear to read, so avoid trying to cram too much on the screen by using small fonts. The minimum font size used should be 12 point to be really 5-80 Text should be distinguished from the background through colour readable and selectable.. and contrast Addresses UE components of Usability The background should be less detailed and less colourful than the foreground. This is especially important for mobiles that maybe used outdoors in bright light. Addresses UE components of Usability 5-73 Provide an option to resize text, if possible (in the Options menu) At the very least, ensure that your widget inherits any system-wide changes to text size specified in the phone’s main settings menu. Addresses UE components of Usability and Engagingness Mobile Widgets UE Guidelines 21/36

6 Feedback Good example (contrast OK): Poor example (not enough contrast): Clear indication of successful operation 6-1 Provide clear, appropriate and immediate feedback for every user action For example, use keypad tones, tactile feedback, visual highlights, screen transitions, animations etc. It should always be clear to the user whether their task was completed successfully or not, e.g. via a prompt, or focusing an item that was has just been created or saved. Addresses UE components of Usability 5-81 The default alignment of text should be top left This is true in left-to-right languages like English. Number editors, like a calculator, should 6-2 Provide feedback for actions taking longer than 0.5 seconds support right alignment. If any action takes more than 0.5 seconds, provide the user with an on-screen indication that Addresses UE components of Usefulness, Usability and Engagingness something is happening. If any action takes more than 2 seconds (e.g. buffering streaming media), animation, or progress bar should be displayed. 5-82 Use word wrapping Addresses UE components of Usability I.e. if the character string does not fit the line, it should be moved to the next line. Good example: Poor example: Addresses UE components of Usefulness, Usability and Engagingness In this example the progress download is Upon opening this widget dashboard, a displayed in kb but the user is unaware of download bar appears. the total download size required. 5-83 Text should be truncated from the end Truncation is indicated by adding an ellipsis (…). This is the standard tool used to indicate that more text is present. Addresses UE components of Usefulness, Usability and Engagingness 5-84 Truncated text should be displayed to the user in a marquee effect (scrolling text from right to left) This effect takes place upon focussing on the text with the cursor. The marquee should begin .5 sec after the option is focussed upon. For a smoother marquee, avoid scrolling character by character. Addresses UE components of Usefulness, Usability and Engagingness Mobile Widgets UE Guidelines 22/36

7 Navigation 6-3 Inform the user when a process has been completed Indicate whether or not the task has been completed successfully (if it has not, explain why and allow them to retry). If they have purchased something it is important to thank them for this. Clarity of location Addresses UE components of Usability 7-1 Make it clear where they are in the screen The user should always know where he exactly is on this screen. For example, through the use of scrollbars or thumbnail overviews (e.g. of large web pages). Addresses UE components of Usability Good example: The magnifying window as well as the scroll bar on the right hand side both help the user understand where they are on the page. Mobile Widgets UE Guidelines 23/36

7-2 Make it clear what the user can do next Good example: The user should always know how to get to his next destination. For example, when entering The colour highlight bar shows which data into a form, the ‘next’ or ‘support’ button should be easy to spot. The primary next step item is selected on the screen and the (the default action) should always be available in an explicit and consistent way (e.g. always scroll bar indicator on the right shows mapped to the centre select key). the user that they are almost halfway through the complete screen content. Addresses UE components of Usability Good examples: User is offered a choice of what they would like to do. Next action is also confirmed. 7-5 Clearly indicate where more content is available than can currently be displayed on screen The presence of more content should always be indicated with arrows and/or an option that allows the user to access the information, such as a scrollbar. Using arrows helps to identify the key movement the user must perform in order to view the additional content. Addresses UE components of Usability 7-3 Any key functions should always be made obvious 7-6 All messages, labels and headers should be simple, descriptive and The functions assigned to physical interaction devices (e.g. keys, scroll wheels) should always context sensitive be made obvious to the user, e.g. by labels or icons on the screen. Addresses UE components of Usability Ensure it is always clear what (if anything) the user has to do, and what will happen next. Addresses UE components of Usability 7-4 The relative position of a selected item within the entire list should always be clear 7-7 Help the user to make an informed decision when they are asked to Give the user an indication of how much of the screen content they have seen and how much give consent or engage in a process still remains to be viewed. For example, if an item appears in a list (e.g. a contact in the phone book), how far down the list is it? This can be achieved by supplying them with adequate up-front information. For example, give users adequate notification of price, delivery options, terms and conditions etc. Addresses UE components of Usability Addresses UE components of Usability Mobile Widgets UE Guidelines 24/36

8 Affordance and Consistency 7-8 Always prompt the user for confirmation whenever establishing connections (e.g. a Bluetooth connection or a GPRS connection) Use clear language and explain why the widget needs to use the network. Your widget should behave as consistently as possible with user expectations, which will be NB: It is not necessary to prompt the user for confirmation when accessing the Vodafone live! determined by the operating platform, similar widgets, real world parallels, and any parts of portal (e.g. embedded links, dynamic content discovery etc) or for scheduled events that your widget that the user has already used. require network connection (e.g. email). There are three types of consistency, as described below. Addresses UE components of Usability -The widget must be internally consistent (e.g. labels and visual indicators mean the same thing wherever they are encountered). -The widget must be consistent to standards including the device UI paradigm. For example, basic functions, such as accessing Options menus and Exit functions, should be consistent with the operating platform. -The widget must be consistent with the user’s experience elsewhere, with similar widgets or in the real world. It is sometimes necessary to prioritise one type of consistency over another (for example, when deciding whether to make a function consistent with a PC widget equivalent or the phone operating platform). As a general rule, you should always give the highest priority to maintaining internal consistency, so that at least the user can always be confident that actions, words or symbols in your widget mean the same thing. Maintaining consistency with the operating platform is the next highest priority, as this allows the user to apply the knowledge they have about their phone in general. Consistency with experiences the user has had elsewhere are important, but if you have to compromise in order to maintain internal or same platform consistency then this is acceptable. Words and phrase meanings 8-1 Functions should be as consistent as possible with real world experience For example, a mapping widget typically has a zoom control, and instant messaging widgets typically allow the user to select a contact directly from the list and send a message. Although users will expect basic functionality (such as the presence of an Options menu) to be consistent with the device, they will tend to expect functions which are unique to the focus of your widget to behave as they do elsewhere. So, for example, selecting a contact in an IM widget should allow the user to send a message to the contact. Addresses UE components of Usability and Engagingness Mobile Widgets UE Guidelines 25/36

8-2 Use common metaphors, icons or language that users will expect 8-8 Keep all messages, labels and title text simple, descriptive and from similar widgets context-sensitive If users are likely to be familiar with common metaphors, icons or language from similar This ensures that users know what to expect upon selection or how to resolve a context. widgets, either on the mobile device, other platforms, or even in the real world, then use these Addresses UE components of Usability to represent the relevant functions in your widget. Good example: Poor example: Addresses UE components of Usability and Engagingness quot;Name and postcode are missing. Please quot;Destination fields to be completed!quot; include.quot; 8-3 Use language that is meaningful and self-explanatory Language should match the language users would expect to see in a similar context in the Good example: Poor example: real world. quot;MMS cannot be sent during a call. quot;Message sending invalid! GPRS is not Addresses UE components of Usability and Engagingness Please try again after the call.quot; available.quot; 8-4 Use alarming language only when necessary 8-9 Use correct and consistent spelling, grammar and terminology For example, use urgent language where the user is about to lose personal information or settings by selecting a delete option. Double check all text (including translations) before launch. Addresses UE components of Usability Addresses UE components of Usability and Engagingness 8-10 Separate long series of controls with punctuation 8-5 Avoid using jargon In a series of three or more controls, separate the controls with a comma (,) or pipe (|). Terminology should be based on your user’s language and skill set. For example, if a widget is Addresses UE components of Usability aimed at highly skilled engineers then specialist or technical terminology can be used. If your widget is aimed at the general population, avoid technical jargon. 8-11 Use ellipses (…) to indicate the presence of more content, or Addresses UE components of Usability and Engagingness marquee (scrolling) text E.g. ‘more…’ Use an ellipsis (…) to indicate the presence of a marquee or ticker that will run 8-6 Avoid abbreviations, acronyms and slang once the cursor has been focused on that option. Examples of Abbreviations include, ‘pl.’ for player or ‘l.’ for level. If there is not enough space Addresses UE components of Usability on the screen for the text use standard abbreviations or try rephrasing text to ensure that it fits on the screen. Examples of Abbreviations include, FPS, MMOG. Avoid acronyms that have two 8-12 Make sure that the screen layout can accommodate all necessary common meanings (e.g. FT can mean ‘full time’ or ‘Financial Times’). Examples of slang languages include ‘Start Over’ or ‘foot the bill’ (meaning to pay the bill). Addresses UE components of Usability and Engagingness Certain languages, such as German and Finnish, tend to have longer words or take up more space, particularly when compared to English. Make sure you can accommodate these differences. 8-7 Use active words that encourage people to participate Addresses UE components of Usability Verbs like “Get” or “Do” in a link are better than a simple description of content. Using the word ‘now’ implies immediacy, but overuse can be irritating. Addresses UE components of Usability and Engagingness Mobile Widgets UE Guidelines 26/36

8-13 Be aware of cultural differences in language use 8-15 Each key on a device should have a consistent meaning throughout the interface Terms can be spelt differently and have different meanings even within same language family. Some are merely differences in spelling, e.g. ‘localized’ (US) vs. ‘localised’ (UK) and This means that naming of the soft keys, as well as their functions, should be consistent. ‘center’ (US) v ‘centre’ (UK). Others carry potential for greater misunderstanding: e.g. ‘chips’ in Addresses UE components of Usability the US are ‘crisps’ in the UK, and ‘chips’ in the UK are ‘fries’ in the US. Addresses UE components of Usability 8-16 Navigation and other critical on-screen elements should be placed in the same location on all screens Similar elements to have the same This helps users orient themselves and allows them to identify the navigation mechanism meaning more easily. Addresses UE components of Usability 8-14 If elements look the same, they should behave the same 8-17 User interface elements that look similar should behave Navigation and other on-screen elements that are made to appear the same should have the consistently same meaning or effect wherever they are encountered. User Interface elements should behave consistently. For example, if grey elements cannot be Addresses UE components of Usability interacted with in one place ensure that grey always indicates something that cannot be Good example: interacted with. These are good examples of consistency. Addresses UE components of Usability Clear functional design elements 8-18 Where there are too many options to fit on the screen an Option menu should be provided This menu should be labelled consistently within the widget and always accessible in the same way (e.g. an 'Options' menu which is always assigned to the left soft key). The menu should only include items that are relevant and usable to the users’ goals. Addresses UE components of Usability Mobile Widgets UE Guidelines 27/36

9 Error Prevention and Recovery 8-19 The device’s default navigation key should be used for moving focus or cursor Where relevant, when the user presses the left/right/up/down navigation key, the cursor also moves left/right/up/down on the screen Minimising user error Addresses UE components of Usability 8-20 Use the number pad to support navigation 9-1 Avoid irreversible actions If relevant, use the following convention for movement. Use 2, 4, 6, and 8 for horizontal and Provide an ‘undo’ option wherever possible. vertical movement. Use 1, 3, 7, and 9 for diagonal motion. Use 5 as the action button. Addresses UE components of Usability Addresses UE components of Usability 9-2 When there is a serious consequence to a user's action or it cannot be undone, ask the user for confirmation Emphasise and explain the consequences of potential critical actions by using strong language such as ‘Warning’. This ensures that the action is one that the user truly wants to perform. Addresses UE components of Usability Good example: Mobile Widgets UE Guidelines 28/36

9-3 If an operation fails, provide “Retry” and “Cancel” options if retrying 9-10 If the user makes a mistake, allow them to correct it and preserve may lead to success any correct information they have already entered E.g. when logging into a service. Provide specific information on what the user needs to do to overcome the problem. Take the user back to the entry screen and preserve any correct information they have already entered. Addresses UE components of Usability If optional fields are empty, allow the user to proceed without an alert. Addresses UE components of Usability 9-4 Avoid requiring the user to press two keys simultaneously since this may not work It is very difficult to press two keys simultaneously on many phone handsets so this is likely to result in errors. Addresses UE components of Usability 9-5 Alert users to errors but do not alarm them unnecessarily Less intrusive warnings should be presented for minor problems and more dramatic warnings for major problems. Addresses UE components of Usability 9-6 Keep messages, labels and headers simple, descriptive and specific to the context Ensure that users know what to expect upon selection or how to resolve an issue in context. Addresses UE components of Usability 9-7 Tell the user how to go about recovering from the error For example, ‘Password' should contain between 6 and 8 characters’ or ‘Call support’ (in the latter case, provide the error code and help contact details, if possible.) Addresses UE components of Usability 9-8 Provide an option for the user to escape from the error screen Addresses UE components of Usability 9-9 After presenting an error message, take the user back to what they were doing before the error occurred, or take them to the page where they can correct the error Addresses UE components of Usability Mobile Widgets UE Guidelines 29/36

10 Instruction and Help 10-6 Where possible, avoid interactions that require the use of both hands Making instructions simple and clear Users may often be unable to use the device with both hands whilst on the move, for example if they are holding a bag or standing up on a bus or train and holding onto a support. Addresses UE components of Usability 10-7 Ensure your widget can work unobtrusively if required 10-1 Where possible, the widget should guide the user to use it correctly without the need for external help (such as the user guide) The device will be used in a range of social contexts, and in some of these it may not be acceptable for it to make a noise or otherwise interrupt the user or others around them. This can be achieved by ensuring it is always clear which functions are available, using clear Ensure your widget is silent when the phone profile is set to silent, and where appropriate, labelling, avoiding jargon, and providing in-screen guidance on any tasks which the user does allow the user to customise the intrusiveness of alerts or manage presence settings (e.g. in an not perform on a regular basis. instant messaging application). Addresses UE components of Usefulness, Usability and Engagingness Addresses UE components of Usability 10-2 Help should be provided within the widget Do not rely on providing a link to Help on the network. The user may not be in an area with sufficient coverage when using the application. Addresses UE components of Usefulness, Usability and Engagingness 10-3 The option(s) to retrieve help should always be easily available on the widget e.g. through the Options menu In this situation, the Help option should be placed near the bottom of the Options menu, just above the Exit option. Addresses UE components of Usefulness, Usability and Engagingness 10-4 The user should be able to return to the location from which they accessed Help in the first place The user should be able to return to the location from which they accessed Help in the first place. Addresses UE components of Usability 10-5 Provide an option to uninstall the widget Addresses UE components of Usability Mobile Widgets UE Guidelines 30/36

11 Localisation for Different 11-5 Localisation of date, currency, numbering and time e.g. in Europe date formats are usually written DD/MM/YYYY, but in the US they are usually Markets written MM/DD/YYYY; in the UK the decimal point is written as ‘2.5’, but in other parts of Europe it is written ‘2,5’. Addresses UE components of Usefulness, Usability and Engagingness 11-6 Support appropriate alignments of text and other information in 11-1 The widget should be able to display and handle input in the local the appropriate cultures languages of each market in which it is to be provided E.g. headlines and text are top left aligned in Western countries, but right-left or top-bottom E.g. Belgian French orientations may be used in other countries. Addresses UE components of Usability and Engagingness Addresses UE components of Usability and Engagingness 11-2 If your widget will be provided in several languages, make sure that 11-7 Ensure that any examples provide in instructions can be easily the screen layout works for every one of these understood in your target markets Certain languages, such as German and Finnish, tend to use longer words or take up more For example, UK postcodes are very different in format from continental European postcodes space, particularly when compared to English. or US zip codes. Addresses UE components of Usability and Engagingness Addresses UE components of Usefulness, Usability and Engagingness 11-3 Ensure that any translations are checked by a native speaker Good example: Even if a translation is technically correct, it may contain words or phrases that may be The amazon search in this example is unclear, easily misinterpreted or even cause offence due to cultural factors. available for different countries. Addresses UE components of Usability and Engagingness Localised versions are created. 11-4 Allow for cultural differences in language even when preparing a widget for use in different culture that speak the same language, e.g. the UK and US Some are merely differences in spelling, e.g. ‘localized’ US) vs. ‘localised’ (UK) and ‘center’ (US) v ‘centre’ (UK). Others carry potential for greater misunderstanding: e.g. ‘chips’ in the US are ‘crisps’ in the UK, and ‘chips’ in the UK are ‘fries’ in the US. Addresses UE components of Usability and Engagingness Mobile Widgets UE Guidelines 31/36

11-8 If you are addressing a global market, keep in mind that the 12 Supporting Different Hardware meaning of specific colours can vary widely The colour red, for example, may be used to represent a warning or an error message, but in another culture it may be used to promote a positive experience. Screen size and mode Addresses UE components of Engagingness Colour China Japan Egypt United States Red Happiness Anger, Danger Death Danger, Stop 12-1 The widget should take into account the fact that the user may view the application in landscape as well as portrait mode Virtue, Faith, Blue Heavens, Clouds Villainy Masculine Truth Addresses UE components of Usability Ming, Dynasty, Future, Youth, Fertility, Green Safety, Go Heavens Energy Strength 12-2 The widget should work on different sized screens, if appropriate Widgets should adopt a fluid design approach (using relative rather than absolute units of Birth, Wealth, Happiness, Cowardice, Yellow Grace, Nobility measurement) or provide bespoke versions optimised for different device types and screen Power Prosperty Temporary sizes. White Death, Purity Death, Purity Joy Purity Addresses UE components of Usability and Engagingness Finger-based interactions and gestures 12-3 Use single-tap interaction as the primary interaction method Single-tap interaction should be introduced as the primary interaction method for a widget. Multi-touch gestures require deeper discovery and may require off-screen explanation for user (instruction manual or learning wizard). Addresses UE components of Usability 12-4 Use interaction methods like double tap, tap and hold and tap and drag where useful Interaction is not limited to a single tap. Double tap, tap and hold, and tap and release states must all be considered, and must give separate visual (if not tactile and aural) feedback to the user. Double tab can for example be used for accelerator functions, like centering content or quickly zooming in or out. Tap and hold shall be used for contextual options, menus or help. Use tap and drag for actions that would allow drag and drop in a PC context like dragging items from one folder to another. Addresses UE components of Usability Mobile Widgets UE Guidelines 32/36

Target, icon, button and list sizes 12-5 Consider using tap and hold for contextual actions Touch and hold is not so vital as a primary interaction, but can be very useful for contextual actions. For example a pause during a touch can also mean uncertainty, or that users will 12-9 Make a clear distinction between touchable and non-touchable expect to recover an error by releasing the touch. To take advantage of this, use contextual areas menus, help or options when touch and hold states occur. For example the user presses on a photo to see options, or gets an options menu hitting a hot corner. It is important to make a clear distinction between touchable areas and non-touchable areas, Addresses UE components of Usability such as text. Borders, glow effects or other indicators can be used on release state to show successful interaction. Addresses UE components of Usability 12-6 Consider one- and two-handed interaction One-handed and two-handed interaction must both be considered for interactions, whether 12-10 Reduce the density of items on a page tapping buttons, making gestures or using a keyboard. The width of a finger limits the density of items on a page. If the items are too close, the user Addresses UE components of Usability won’t be able to choose a single one. For example, contextual, rather than fixed menus can be used and retrieved and minimized as needed by the widget or by the user in order to gain 12-7 Scrolling interaction changes to ’flicking’ more space on the screen. The scrolling orientation is flipped from the former hard key method as users will flick or drag Addresses UE components of Usability Good example: Poor example: the page upwards, rather than pull a control (scroller) down to move the page up. The items on the example below are not In this example it’s hard to select some of Addresses UE components of Usability too close and allow the user to choose a the items as this is a mix between finger single item immediately. and stylus touch screen. 12-8 Place critical interactions within the easiest reachable positions Critical interactions shall be placed within the easiest reachable positions with one hand and with proper physical and graphical affordances. The human thumb is the biggest yet shortest digit on the human hand, and can only reach so far horizontally and vertically on the screen. Addresses UE components of Usability The edges of the display are used to help the user to locate the buttons. This approach can be used in other applications as well, e.g., the on-screen keypad buttons are displayed in fingerprint size and placed for best access instead of being rectangular and according to a perpendicular layout. 12-11 Determine the proper target size for interaction targets If key input method is finger, calculations and approximations should be made for determining target size for interactions. 10mm x 10mm is a good general minimum guideline for finger-based targets. Addresses UE components of Usability Mobile Widgets UE Guidelines 33/36

12-12 Increase button sizes and icons vertically 12-16 Consider migration from T9 keypad to QWERTY keyboard Icons and buttons can be increased in size vertically as the user is more likely to touch higher Migrating from a T9 keypad to a QWERTY keyboard can be a steep learning curve for some on the button in error than to either side. users. Give the user shortcuts, memorized entries, and suggestions. Predictive and corrective text can speed users through text entry. Addresses UE components of Usability Addresses UE components of Usability 12-13 Hit areas can be larger than the target size 12-17 Use touch screen optimised features to enhance interaction Invisible to the user, hit areas can be larger than the size of the target to make sure user hits the intended target. It’s important to provide aural and visual feedback on touch, touch and hold, and release states. Touch and hold could show a key preview or could show magnifying lenses to increase Addresses UE components of Usability text size. Provide predictive and corrective text to user. For a finger touch screen don’t use common gestures known from PDA designs as they are often cumbersome and not Hit area around buttons can exceed icon size. immediately apparent to finger touch users. Addresses UE components of Usability Good example: Poor example: The iPhone brings up a magnifying lens HTC Touch keyboard is rather stylus then upon touch and hold. finger friendly. Text Entry 12-14 Reduce text input whenever possible Text entry may be provided both through hardware keyboards or software keyboards on- screen, appearing when needed. Keyboards are generally regarded as the worst interaction experience on touch screen devices, simply because of the amount of interaction required. Therefore text input should be reduced whenever possible. Addresses UE components of Usability Touch controls 12-15 Virtual keyboard shall stay if text is entered frequently 12-18 Use controls that have been converted to touch screen For widgets where numbers or letters are frequently entered, the virtual keyboard should stay The following controls have been converted to touch uses. Sliders, used for volume and permanently on the screen until user dismisses it. intensity, can help prevent errors and provide a clear result state. Switches are used to Addresses UE components of Usability indicate on/off state or to confirm. The user can now for example directly interact with media control buttons as he is used to from the PC. Addresses UE components of Usability Mobile Widgets UE Guidelines 34/36

Metaphors and signifiers Slider and media control buttons: 12-21 Help user to transfer acquired knowledge to touch screen context The user’s previously acquired knowledge about functions should efficiently be transferred from the known into the new context. For example, users familiar with camera functions before will expect to use familiar camera functions on a touch screen device as well. Addresses UE components of Usability 12-22 Respect the conventions of the platform E.g. Symbian Series 60 or Sony Ericsson. For example, if the battery status is visible in the upper right corner, you should keep it there in your application. Addresses UE components of Usability 12-19 Browsing through a large set of items Flick-gesturing through lists or icons allows the user to quickly browse large sets of 12-23 Support different host device hardware information. Therefore scroll bars are no longer needed in the traditional sense, instead they Different handsets may provide different hardware controls. For example, the Sony Ericsson are used as indicators for lists or pages. Visual browsing by panning, zooming and centering W900i has volume control keys and an exit/cancel key that is independent of the left and must be considered for applications like browser, maps, pictures, albums, contacts. right soft keys. The Nokia N70 does not have either of these controls, so N70 users need an Addresses UE components of Usability option to control the volume of the application in the Options menu. Ensure that all applications work on all hardware configurations on which the application will be available. Addresses UE components of Usability Feedback 12-24 Follow the input conventions of the platform and device where possible 12-20 Always provide feedback This includes: Three types of feedback are used with touch devices: - All text entry conventions of the platform, including inserting symbols, changing entry Visual feedback like button effects, color changes, status indicators, up/down (touch/release) modes, and so on. state changes, clearing of screen when transitioning to next screen. Visual feedback is the most important sensory feedback when entering characters on a touchscreen. Visual widgets - Selection method. can help give user visual feedback and balance risk of finger obstruction of targets - Cursor behaviour and way of indicating the currently focused screen element. Aural feedback like clicks, tones or other audible noise. Lower audio feedback is preferred over Addresses UE components of Usability a loud beep. Tactile feedback like vibration for interaction or input, specific vibrations for types of events (i.e. errors). Tactile feedback reduces workload and can even be given in noisy environments. Addresses UE components of Usability Mobile Widgets UE Guidelines 35/36

Contacts We appreciate any feedback and are happy to answer your questions. Harald Lamberts Senior UE Manager harald.lamberts@vodafone.com Katrin Luniaczek UE Manager katrin.luniaczek@vodafone.com Mobile Widgets UE Guidelines 36/36

http://www.utilisabilite.info	633
http://www.ergophile.com	120
http://www.slideshare.net	30
http://thecusuilab.blogspot.com	22
https://pramati.qontext.com	13
https://rd.atosworldline.com	3
http://apprentieweb.blogspot.com	2
http://feeds2.feedburner.com	2

Mobile Widgets User Experience Guidelines

by LaRecherche2.0 on May 04, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 825

Statistics

Mobile Widgets User Experience Guidelines — Presentation Transcript