Mobile Widgets User Experience Guidelines

Mobile WidgetsUE 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.

Mobile Widgets UE Guidelines 2/36

Table of Contents

Introduction 3About User Experience 3

Designing User-Centred Mobile Widgets 4

Vodafone User Experience Principles 5

1 Getting Started 7Naming the Widget 7

Creating a Widget icon 7

Downloading the Widget 7

2 Value and Engagement 8An immediate purpose and benefit 8

Engage the user 9

3 User Control 10Relevant, accessibleIe and meaningful 10

Context of use 11

4 Efficiency 12Ask for minimum information? 12

Does the widget feel responsive? 13

Order of links, content and other on-screen elements logical? 13

5 Look and Feel 14Widget layout 14

Look and feel of the Widget 18

Readable text 21

6 Feedback 22 Clear indication of successful operation 22

7 Navigation 23Clarity of location 23

8 Affordance and Consistency 25 Word and phrase meanings 25

Similar elements to have the same meaning 27

Clear functional design of elements 27

9 Error prevention and Recovery 28 Minimising user error 28

10 Instruction and Help 30Making instructions simple and clear 30

11 Localisation for Different Markets 31

12 Supporting Different Hardware 32Screen size and mode 32

Finger-based Interactions and Gestures 32

Target, icon, button and list sizes 33

Text entry 34

Touch Controls 34

Feedback 35

Metaphors and Signifiers 35

UE team contact details 36


Introduction

This documentThis 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.

These guidelines will also be used by Vodafone to evaluate the user experience of mobile widgets.

Most of the examples in this document relate to widgets, but many of the user experience guidelines are generally relevant for any type of mobile application.

In section 12, Supporting Different Hardware, you will find guidelines on touch screen 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.

Visual design is subject to separate guidelines and not covered in this document. Please refer to the Visual Guidelines, provided by your UE contact if you need further information.

The use of the Vodafone brand is subject to separate policies and not covered in this document. Please refer to your Vodafone contact if you need further information.

What are Widgets?Widgets are highly personalised lightweight applications that serve content from the internet or from the device. A widget is able to acquire and instantly display information from the web 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.

Widgets tend to organise information into a flattened list of items or into a straight-forward visualised data display. Users generally do not need to drill down through a hierarchy of information to find what they need as a well designed widget should be very easy to use: Open, scan the information and close – with some simple options to change the settings.

Widgets typically sit on the home screen of the device or application and are visually pleasing in appearance.

About User Experience

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 all aspects of design in order to deliver an easy to use and delightful product or service.

‘Useful’ means that it meets the target customer’s needs, it encourages adoption and use and it has no major barriers to adoption and use.

‘Usable’ means that it works ‘out of the box,’ that key tasks can be performed with ease, and that high frequency tasks can be performed efficiently.

‘Engaging’ means that it expresses Vodafone brand values, it provides differentiation for

Vodafone and that it delights the customer.

To ensure users have a positive experience with a widget, it should meet three key criteria:

The widget should be useful

It should provide easy access to functionality that helps users achieve their goals whilst being mobile.

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.

The widget should be engaging

The design, language and flow of interaction should create a positive emotional impact that is appropriate for your target users.

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 technology by users. For developers, the benefits include increased sales, reduced support and maintenance costs and reduced development costs, through focusing on the features that deliver the greatest benefit to users.

Vodafone believe that ensuring a good user experience is vital to the development of all mobile applications. Any widget should meet a core set of requirements, And compliance with these guidelines will improve the chance of user uptake.


User experience for mobile widgetsMobile widget developers should follow best practice in usability and interaction design, including:

Quick and easy setupUsability problems occurring during downloading, installation and set-up can deter or even prevent users from using the widget at all.

Prioritise key use casesPrioritise the most frequently needed or used functions. Avoid overloading the user with too many features, especially those that will only be used infrequently.

Good interaction designFollow basic usability guidelines, including:- Good error handling- Good interface consistency

Seamless integrationEnsure that widgets (especially communication-related ones such as messaging) are well integrated into the architecture of the host device. Widgets that are not easy to find will be used less frequently.

Scalability and interoperabilityAvoid designing a widget for a single phone. Make sure the widget can easily be used on a variety of phones (and formats).

This document provides detailed guidance on these and other aspects of user experience.

Designing User-Centred Mobile Widgets

User-centered design approachTo create a mobile widget that offers a great user experience, you need to employ a user-centred design approach. The goal is to understand the real needs your target users have when they are mobile, and address those in the most appropriate way.

There is no single correct set of user-centred design methods, but this document describes some tips, tools and techniques that can help make your widget as useful, usable and engaging as possible, whether you are creating a new widget from scratch or a mobile version of an existing web service or PC-based widget.

What’s different about mobile usageMobile usage is fundamentally different from usage that is taking place in a fixed location, or on a PC. Some of the key differences are:

Users are likely to be interrupted

Mobile usage tends to take place in much shorter bursts than interaction with a PC, and the user is much more likely to be interrupted (e.g. incoming phone calls, messages but also social interactions, boarding a train or plane, etc.). Ensure users can start and finish tasks 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.


Focus on communication, availability and spontaneity

Despite the limitations, mobile phones can offer unique opportunities. In particular, the 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) enables greater spontaneity in interactions than might be available via a PC. To create a really compelling mobile widget, think about how your widget can make the most of the unique communication opportunities the phone offers.

The context of use varies

Mobile devices are used in a wide variety of locations and situations, in which both physical conditions (such as lighting levels and ambient noise, and whether the user is occupied with 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 acceptable to use the phone). These external factors can restrict how the user is physically able to use the device, or mean that they wish to use it in a particular way (for example, using voice commands whilst driving, replacing audio alerts with vibrate, or ensuring the camera adjusts automatically and quickly to varying light levels when photographing a band on stage).

Designing a good user experienceThe list above provides some guidance on mobile usage in general, but to ensure your widgetoffers a great user experience you also need to ensure it meets the specific needs of the 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:

Understand your users

Design &

Refine

Prototype the design

LaunchIterate

Fig. 1: Basic overview of the user-centred design process

Vodafone User Experience Principles

Vodafone has developed a set of user experience (UE) principles, which are applied throughout the design of all their services. As well as embodying good practice, the guidelines also integrate Vodafone business goals in order to ensure that both business and user needs are met.

These are:

- Facilitate communication

- Encourage usage

- Give the user control

- Be consistent

- Provide a seamless user experience

- Display and communicate information clearly

- Ensure learnability

- Make the user aware and provide clear feedback

- Allow for efficient interaction for frequent use cases

- Guide users through low frequency use cases

- Provide multiple entry points for a use case

- Prevent errors and allow for recovery

- Support customisability & personalisation

These principles underpin the detailed recommendations in each section.

Mobile WidgetsUE Guidelines

Specific Interaction Design GuidelinesThe 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

Naming the widget

1-1 Create a memorable and intuitive name for your widget

Good naming makes it easier for the user to identify the purpose of your widget and 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

Creating a widget icon

1-2 Create a clear and unique icon for your widget

Create a unique icon to represent your application. This should be easy to understand, descriptive, and if it is an active icon, it should display exactly the information the user would 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

Good example: Poor example:

These examples display the widget content explicitly and implicitly.

These examples give no immediate understanding of the widget’s purpose.

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.

Addresses UE components of Usefulness, Usability and Engagingness

1-4 Consider giving your widget an active icon from which it can be expanded.Addresses UE components of Usability

Downloading the widget

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 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 user and holds their attention until the widget has fully loaded.

Addresses UE components of Usefulness

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, provide a soft key option to ‘Cancel’.

Addresses UE components of Usefulness.

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


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.


1-9 Updates to the widget

The widget should be designed to allow automatic updates to a newer version when needed. The updating process must preserve the identity of the widget.


2 Value and Engagement

An immediate purpose and benefit

2-1 Create a widget that has a clear purpose and that delivers specific value to the user

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.


2-3 Two widgets can be better than one

If you are trying to get too much information across then the widget can appear to be too busy and difficult to read. Consider creating more than one widget, with each one delivering a specific piece of information really well.

Addresses UE components of Usefulness and Usability

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.


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.

2-6 Be engaging for the user at any time

Mobile widgets are accepted as having a limited functionality, but design your widget to allow that functionality to be used in mobile environments and public places where distractions, interruptions and adverse lighting conditions may be prevalent.



3 User Control

Relevance, accessibility and meaningful

3-1 Provide a main navigation menu which contains entry points to all of the content and functionality on the widget

Access to that menu should be clearly labelled from all others screens on the widget.

NB: depending on the type of widget, this may simply be the home screen or default screen the user sees on entering the widget, as long as all content and functionality are available from this point.


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.


3-3 Only use the “Back” label if your control goes back precisely one screen

“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 control, such as “Retry”, “Start Over”, “Main” or some other location-specific label. Follow platform conventions for phones with a hard Back key (e.g. Sony Ericsson).


3-4 Ensure the user can exit the widget using the standard platform exit function

Ensure the user can always exit out of the widget by pressing the red End key (Nokia) or any other relevant device or platform convention. Do not assign this key to another function, or disable it, as this will confuse and frustrate users.


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:

The menu bar is clearly identified on the bottom of the screen.

Good example:

The menu bar is not highlighted but the menu box stands out from the screen content.

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.


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.


3-6 Try to minimise the number of menu items

Ideally, all items in the Options menu should be visible without scrolling. As a rough guide, the maximum number of items in the left Options menu (1st level) should be no more than five. Related items can be grouped in sub-menus to decrease the amount of items on the first level of the options menu. The maximum number of items in a 2nd level option menu should be limited to three.


3-7 Hide, fade out or disable all choices that are not applicable at that moment

This reduces confusion and prevents errors.


3-9 Allow the user to abandon long processes

Allow the user the option to cancel any long process that they have initiated. If the user decides to cancel the process, the terminal should be set back to the same state it was in prior to the procedure.

Addresses UE components of Usefulness

Context of use

3-10 Support interruptions in use

Users often use mobile devices in situations in which they are likely to be interrupted. If it can 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 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.

If the widget has an auto-save feature, consider whether the widget need a reset mechanism, for example in conjunction with settings.

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.


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.


Here the main screen is faded but the menu box and highlight bar are from the same colour set and so are hard to separate from the faded screen content.

Poor example:


3-12 Ensure widget copes gracefully with interrupted/patchy networkavailability

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 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.


Good example:

The widget attempts to show locally relevant information at startup

4 Efficiency

Ask for minimum information

4-1 Have default settings where possible

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.


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.



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 picking from a list would be more efficient.


4-4 Storing the user’s preference

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.Addresses UE components of Usefulness and Usability

4-5 Multiple installations

The widget should be aware that there may be multiple installations of itself running concurrently. For example, two clock widgets showing the time in different countries.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


Target the range of content

4-8 The most frequent user tasks should be available from the home screen of the widget

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 user must complete, each action should lead the user to access the next logical action easily.


4-9 The options available on any page should match the key needs of the user at that point

For example, when purchasing, information on price and download size should be obvious on 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, display a signal strength or 3G coverage icon.



Order of links, content and other on-screen elements logical?

4-10 Less frequent tasks should be available via logically structured menus

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.


4-11 Make tasks that users will not perform frequently easy to understand

Tasks that users perform infrequently should be accompanied by clear instructions. It is less important that these tasks can be achieved quickly than that they provide adequate guidance and assistance, as users will probably not remember how to go about them.


5 Look and Feel

Widget layout

5-1 Ensure the screen layout includes plenty of white space

Do not fill every pixel of the screen with content, including text and graphics. Using plenty of white space helps guide the user’s eye to the most important information and increases legibility.

Addresses UE components of Usability and Engagingness


This screen includes two data entry fields, instructions and icons but still includes white space.

A solid screen of text links makes unappealing to view even if it is an effective usage screen area.

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.



5-3 Follow operating platform soft key conventions

For example, if there is usually a left soft key Options menu, it is generally advisable to structure your application in this way too. If the centre key is mapped to a default action on the rest of the phone, you should do this too.


5-4 Avoid completely obstructing key areas of the screen with pop-ups, alerts or sub-menus

Consider using transparency to allow visibility of the background.


5-5 The purpose and effect of on-screen elements such as buttons,scroll bars and text fields should be obvious

For example, an interactive button should look ‘clickable’ by having a clear border, raised edges or a drop shadow


5-6 Ensure icons representing objects (e.g. messages or contacts) are visually distinguished from those representing actions (e.g. create a message)


5-7 Links or access to online content should be clearly distinguished

For example, links should be indicated with an icon and/or underlined text. When embedded links are displayed on top of a content list, the default position of the focus should be on the entry below the embedded link.


5-8 For selectable options, there should be clear states for the “active” and “passive” states


Good example:

New popup menus only appears within 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 optionAddresses UE components of Usability

5-10 Make sure that it is clear to the user when a check box is on, off, focussed upon or not available for positive selection


5-11 Use a tick (not a cross) to indicate selection


5-12 Use radio buttons only when the choice options presented to the user are mutually exclusive

I.e. where the user can only choose one of the options displayed.


Good practice regarding selecting on-screen options.

Good example:


5-13 Limit the physical interaction required

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 require typing instead.


5-14 Indication of Text Entry Modes

Clearly indicate the active mode on screen. Allow T9, non-T9 and numeric entry.


5-15 Allow direct selection and editing of text fields

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 select or edit it.


5-16 Display default formats or values for entry fields to give the user an idea of which input is expected

e.g. DD/MM/YYYY or “00:00”.


5-17 Input should be masked for sensitive information (such as theuser’s password)

For PIN / Password entry, the character the user has inputted should be momentarily shown before appearing as an asterisk (*).


5-18 Drop down fields should be used to allow the user to choose from a long list of options

Drop down fields are the preferred way to offer a list of options, however, long lists of options are generally not a good idea as they require too much dexterity from the user.


5-19 The items in the menu should be organised in order of frequency of use

The default selection should usually be the most frequently used option. There are occasional exceptions to this, for example a list of countries would provide most likely default options at the top, then all others in alphabetical order.


5-20 Allow users to select and apply actions to multiple list items where appropriate

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-21 Allow users to edit object details directly

When viewing the details of an object (e.g. contact details, calendar entries, filenames, 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 single click or key press.


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-23 Allow the user to manage lists easily

For one, all or selected items and where appropriate the following options should be easily accessible: Delete, copy, move and send.


5-24 Lists should usually be ordered chronologically with the most recent item at the top (e.g. messages, pictures taken)

Exceptions to this may be lists of contacts or countries, where the item name is known and time is less important.



5-25 Clearly label each field and give examples of correct input

For example, if the user is asked to enter the first line of their address, give an example just below the relevant field of how that entry might look i.e. ‘11 Main Road’. If entry has to be case sensitive, indicate this as well.


5-26 Use appropriate default input modes for entry fields

For example, numeric mode should be used for phone numbers and text mode should be used for email addresses. The default entry character entry mode for an age field should be numeric. Where appropriate allow the user to switch the input mode. For proper nouns, the first letter should be capitalised by default.


5-27 Ensure the user can clearly read text they enter

Ideally use a plain white background for good readability.


5-28 Accept common misspellings

The device may be a better speller than the user (and text entry on phones is difficult).


5-29 Display a cursor in text entry fields

A flashing cursor may be easier to spot, but follow the conventions of the operating platform.


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.


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.


5-32 Group fields in forms logically

For example, all fields relating to personal details should be grouped together and separate from fields relating to payment details.


5-33 Provide the user the ability to choose from fixed values

The error rate resulting from selecting data is lower than the error rate resulting from entering data e.g. dropdown fields (see below)


5-34 Clearly show the maximum character length of any field

Ideally provide a countdown from the maximum number to 0 as the user enters characters.


5-35 If the user leaves mandatory fields empty or makes a mistake, there should be one alert/error message for all of the missing fields rather than one for every field

Take the user back to the entry screen and preserve any correct information they have 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

5-36 All widgets should have a close button which should be permanently visibleAddresses UE components of Usability


Look and feel of the widget

5-37 Use colour sparingly

Overuse of colour can be distracting and take away from the design. Keep the number of colours to a minimum


5-38 Use a consistent colouring scheme

As a general rule, if objects are the same colour, they should have the same meaning.


5-39 Colour can be used to effectively group, define or separate functional areas

For example, using borders and background colours.



When you click on the links the colour by the side of the link is the defining colour on all those sub-pages.

5-40 Use muted colours to de-emphasise less important information


5-41 Use bright colours to highlight important informationAddresses UE components of Usability


A simple colour scheme helps to user to focus on their next action.

Having the same colour scheme in every window can make it difficult to differentiate each window.

5-42 Ensure your colour scheme can be rendered effectively on low colour depth displays, as appropriate


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.



5-50 Do not use background images unless you know the device supports them

When using background images make sure that content in the foreground remains sufficiently legible. Plain colour backgrounds work best.


5-51 Use images compatible with your display capability (e.g. 2 bit, 256 or thousands of colours, etc)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 images. Making the page readable in text only mode can help the user assess basic information before images arrive.


5-53 Ensure animations are informative

Use animations to communicate information, not solely to decorate.


5-54 Animations can be distracting so it is best to have no more than one animation showing on the screen

They should be avoided when the user needs to concentrate on something else.


5-44 Use colour in a way that is appropriate to the cultures of your users

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 may be used to promote a positive experience. See Section 11: Localisation for more information.


5-45 Use images sparingly

Superfluous images compete with every other relevant unit of content on screen, reducing their visibility and impact.


5-46 Images should primarily be used to communicate information and not solely to decorate

For example, an arrow might be used to suggest the action required by the user e.g. rocker left or left.


5-47 Use images that are appropriate to users’ cultures

The meaning can vary across cultures and so pay special attention to the use of human figures, numbers, colours, symbols, and hand gestures.


5-48When using icons, make sure that they are based on easily understood metaphors

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.


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.



5-61 Provide a volume control

If the user cannot access the volume control through hard-key controls, they should be able to control the volume via the widget within one or maximum two key presses.


5-62 Use sounds to communicate what happens outside the widget

E.g. ensure that the standard device tone for an incoming text message is audible over the application.


5-63 Avoid using sounds that are similar to ring tones and alert tones

For example, the user might mistakenly think they have received a message and prematurely quit the widget.


5-64 Sounds should be appropriate for different cultures

Sounds that are very culture or country specific (such as human voices, which will have recognisable accents) may be confusing or carry negative connotations in other cultures. Some may be misunderstood (e.g. a German PSTN dial tone sounds like a British engaged tone).


5-65 Key press sounds and effects should begin within 50 ms of the actionAddresses UE components of Usability

5-66 The user should be able to interrupt any tone with a key press


5-55 For optimum effect, it is best for the animation to loop only a limited number of times and then stop

Animations that don’t stop cause the screen to remain on which prevents the phone going into sleep mode – which drains the battery. Additionally, the screen that the animation stops on should convey the main information conveyed by the animation


5-56 The user should be able to interrupt or skip animations where possible

E.g. animated introduction screens.


5-57 Sounds should be used sparingly

Sounds are a powerful means for rendering feedback and emotional context to a widget, but overuse can be irritating.


5-58 Avoid loud or high-pitched sounds

This will unduly alarm the user, making them less comfortable with the widget.


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 OFF by default, or prompt for sound settings at the start of the widget. Ensure that the widget is silent when the device profile is set to ‘silent’.


5-60 Provide alternatives to audio

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.



5-67 Use vibration sparingly

Vibration is another powerful means for rendering feedback and emotional context to a widget, but it should be used sparingly. If used too frequently it becomes irritating and loses its impact.


5-68 Use vibration of just enough length and intensity to get the user’s attention, confirm actions or alert them to errorsAddresses UE components of Usability

5-69 Ensure vibration can be turned off when inappropriate

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 that vibration is off when the device profile is set not to vibrate.


5-70 The widget should be usable without the vibration

Provide a text equivalent to any important information conveyed by vibration.


5-71 Vibration effects should begin within 50 ms of the actionAddresses UE components of Usefulness, Usability and Engagingness

Readable text5-72 Avoid small or unusual fonts as they are likely to impair reading

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

readable and selectable..


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.


5-74 Avoid large areas of text, bunched or unbroken text blocks


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-76 Use headings and sub headings to convey structure in long pages of textAddresses UE components of Usability

5-77 Avoid using ALL CAPITALS

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-78 Use bullet points and short paragraphs for ease of scanningAddresses UE components of Usefulness, Usability and Engagingness

5-79 Use pixel fonts for better readability

These are fonts that consist only of black/white pixels and are not anti-aliased.


5-80 Text should be distinguished from the background through colour and contrast

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.



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 support right alignment.


5-82 Use word wrapping

I.e. if the character string does not fit the line, it should be moved to the next line.


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.


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.


Good example (contrast OK): Poor example (not enough contrast): 6 Feedback

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

6-2 Provide feedback for actions taking longer than 0.5 seconds

If any action takes more than 0.5 seconds, provide the user with an on-screen indication that something is happening. If any action takes more than 2 seconds (e.g. buffering streaming media), animation, or progress bar should be displayed.



Upon opening this widget dashboard, adownload bar appears.

In this example the progress download is displayed in kb but the user is unaware of the total download size required.


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.


7 Navigation

Clarity of location

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).


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.


7-2 Make it clear what the user can do next

The user should always know how to get to his next destination. For example, when entering

data into a form, the ‘next’ or ‘support’ button should be easy to spot. The primary next step

(the default action) should always be available in an explicit and consistent way (e.g. always

mapped to the centre select key).


7-3 Any key functions should always be made obvious

The functions assigned to physical interaction devices (e.g. keys, scroll wheels) should always

be made obvious to the user, e.g. by labels or icons on the screen.


7-4 The relative position of a selected item within the entire list should

always be clear

Give the user an indication of how much of the screen content they have seen and how much 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?


Good examples:

Good example:

The colour highlight bar shows which

item is selected on the screen and the

scroll bar indicator on the right shows

the user that they are almost halfway through the complete screen content.

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-6 All messages, labels and headers should be simple, descriptive and

context sensitive

Ensure it is always clear what (if anything) the user has to do, and what will happen next.


7-7 Help the user to make an informed decision when they are asked to give consent or engage in a process

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.


User is offered a choice of what they

would like to do. Next action is also

confirmed.


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.

NB: It is not necessary to prompt the user for confirmation when accessing the Vodafone live! portal (e.g. embedded links, dynamic content discovery etc) or for scheduled events that require network connection (e.g. email).


8 Affordance and Consistency

Your widget should behave as consistently as possible with user expectations, which will be determined by the operating platform, similar widgets, real world parallels, and any parts of your widget that the user has already used.

There are three types of consistency, as described below.

-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.



8-9 Use correct and consistent spelling, grammar and terminology

Double check all text (including translations) before launch.


8-10 Separate long series of controls with punctuation

In a series of three or more controls, separate the controls with a comma (,) or pipe (|).


8-11 Use ellipses (…) to indicate the presence of more content, or marquee (scrolling) text

E.g. ‘more…’ Use an ellipsis (…) to indicate the presence of a marquee or ticker that will run once the cursor has been focused on that option.


8-12 Make sure that the screen layout can accommodate all necessary languages

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.


Good example:

"Name and postcode are missing. Please include."

Poor example:

"Destination fields to be completed!"

Good example:

"MMS cannot be sent during a call. Please try again after the call."

Poor example:

"Message sending invalid! GPRS is not available."

8-8 Keep all messages, labels and title text simple, descriptive and context-sensitive

This ensures that users know what to expect upon selection or how to resolve a context.


8-2 Use common metaphors, icons or language that users will expect from similar widgets

If users are likely to be familiar with common metaphors, icons or language from similar widgets, either on the mobile device, other platforms, or even in the real world, then use these to represent the relevant functions in your widget.


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 real world.


8-4 Use alarming language only when necessary

For example, use urgent language where the user is about to lose personal information or settings by selecting a delete option.


8-5 Avoid using jargon

Terminology should be based on your user’s language and skill set. For example, if a widget is 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-6 Avoid abbreviations, acronyms and slang

Examples of Abbreviations include, ‘pl.’ for player or ‘l.’ for level. If there is not enough space 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 common meanings (e.g. FT can mean ‘full time’ or ‘Financial Times’). Examples of slang include ‘Start Over’ or ‘foot the bill’ (meaning to pay the bill).


8-7 Use active words that encourage people to participate

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.



8-15 Each key on a device should have a consistent meaning throughout the interface

This means that naming of the soft keys, as well as their functions, should be consistent.


8-16 Navigation and other critical on-screen elements should be placed in the same location on all screens

This helps users orient themselves and allows them to identify the navigation mechanism more easily.


8-17 User interface elements that look similar should behave consistently

User Interface elements should behave consistently. For example, if grey elements cannot be interacted with in one place ensure that grey always indicates something that cannot be interacted with.


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.


8-13 Be aware of cultural differences in language use

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 ‘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.


Similar elements to have the same meaning

8-14 If elements look the same, they should behave the same

Navigation and other on-screen elements that are made to appear the same should have the same meaning or effect wherever they are encountered.

Addresses UE components of UsabilityGood example:

These are good examples of consistency.


9 Error Prevention and Recovery

Minimising user error

9-1 Avoid irreversible actions

Provide an ‘undo’ option wherever possible.


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.


Good example:

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


8-20 Use the number pad to support navigation

If relevant, use the following convention for movement. Use 2, 4, 6, and 8 for horizontal and vertical movement. Use 1, 3, 7, and 9 for diagonal motion. Use 5 as the action button.



9-10 If the user makes a mistake, allow them to correct it and preserve any correct information they have already entered

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. If optional fields are empty, allow the user to proceed without an alert.


9-3 If an operation fails, provide “Retry” and “Cancel” options if retrying may lead to success

E.g. when logging into a service.


9-4 Avoid requiring the user to press two keys simultaneously since thismay not work

It is very difficult to press two keys simultaneously on many phone handsets so this is likely to result in errors.


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.


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.


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.)


9-8 Provide an option for the user to escape from the error screenAddresses 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 errorAddresses UE components of Usability


10 Instruction and Help

Making instructions simple and clear

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)

This can be achieved by ensuring it is always clear which functions are available, using clear labelling, avoiding jargon, and providing in-screen guidance on any tasks which the user does not perform on a regular basis.


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.


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.


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.


10-5 Provide an option to uninstall the widgetAddresses UE components of Usability

10-6 Where possible, avoid interactions that require the use of both hands

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.


10-7 Ensure your widget can work unobtrusively if required

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. Ensure your widget is silent when the phone profile is set to silent, and where appropriate, allow the user to customise the intrusiveness of alerts or manage presence settings (e.g. in an instant messaging application).



11 Localisation for Different Markets

11-1 The widget should be able to display and handle input in the local languages of each market in which it is to be provided

E.g. Belgian French


11-2 If your widget will be provided in several languages, make sure that the screen layout works for every one of these

Certain languages, such as German and Finnish, tend to use longer words or take up more space, particularly when compared to English.


11-3 Ensure that any translations are checked by a native speaker

Even if a translation is technically correct, it may contain words or phrases that may be unclear, easily misinterpreted or even cause offence due to cultural factors.


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.


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 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’.


11-6 Support appropriate alignments of text and other information in the appropriate cultures

E.g. headlines and text are top left aligned in Western countries, but right-left or top-bottom orientations may be used in other countries.


11-7 Ensure that any examples provide in instructions can be easily understood in your target markets

For example, UK postcodes are very different in format from continental European postcodes or US zip codes.


Good example:

The amazon search in this example isavailable for different countries. Localised versions are created.


11-8 If you are addressing a global market, keep in mind that the 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.

Addresses UE components of Engagingness

Colour China Japan Egypt United States

Red Happiness Anger, Danger Death Danger, Stop

Blue Heavens, Clouds VillainyVirtue, Faith, Truth

Masculine

GreenMing, Dynasty, Heavens

Future, Youth, Energy

Fertility, Strength

Safety, Go

YellowBirth, Wealth, Power

Grace, NobilityHappiness, Prosperty

Cowardice, Temporary

White Death, Purity Death, Purity Joy Purity

12 Supporting Different Hardware

Screen size and mode

12-1 The widget should take into account the fact that the user may view the application in landscape as well as portrait modeAddresses UE components of Usability

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 measurement) or provide bespoke versions optimised for different device types and screen sizes.


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).


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 statesmust all be considered, and must give separate visual (if not tactile and aural) feedback to theuser. Double tab can for example be used for accelerator functions, like centering content orquickly 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 draggingitems from one folder to another.



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 expect to recover an error by releasing the touch. To take advantage of this, use contextual 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.


12-6 Consider one- and two-handed interaction

One-handed and two-handed interaction must both be considered for interactions, whether tapping buttons, making gestures or using a keyboard.


12-7 Scrolling interaction changes to ’flicking’

The scrolling orientation is flipped from the former hard key method as users will flick or drag the page upwards, rather than pull a control (scroller) down to move the page up.


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.


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.

Target, icon, button and list sizes

12-9 Make a clear distinction between touchable and non-touchable areas

It is important to make a clear distinction between touchable areas and non-touchable areas, such as text. Borders, glow effects or other indicators can be used on release state to show successful interaction.


12-10 Reduce the density of items on a page

The width of a finger limits the density of items on a page. If the items are too close, the user 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 more space on the screen.

Addresses UE components of UsabilityGood example:

The items on the example below are not too close and allow the user to choose a single item immediately.

Poor example:

In this example it’s hard to select some of the items as this is a mix between finger and stylus touch screen.

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.



12-12 Increase button sizes and icons vertically

Icons and buttons can be increased in size vertically as the user is more likely to touch higher on the button in error than to either side.


12-13 Hit areas can be larger than the target size

Invisible to the user, hit areas can be larger than the size of the target to make sure user hits the intended target.


Hit area around buttons can exceed icon size.

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.


12-15 Virtual keyboard shall stay if text is entered frequently

For widgets where numbers or letters are frequently entered, the virtual keyboard should stay permanently on the screen until user dismisses it.


12-16 Consider migration from T9 keypad to QWERTY keyboard

Migrating from a T9 keypad to a QWERTY keyboard can be a steep learning curve for some users. Give the user shortcuts, memorized entries, and suggestions. Predictive and corrective text can speed users through text entry.


12-17 Use touch screen optimised features to enhance interaction

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 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 immediately apparent to finger touch users.Addresses UE components of Usability

Good example:

The iPhone brings up a magnifying lens upon touch and hold.

Poor example:

HTC Touch keyboard is rather stylus then finger friendly.

Touch controls

12-18 Use controls that have been converted to touch screen

The following controls have been converted to touch uses. Sliders, used for volume and intensity, can help prevent errors and provide a clear result state. Switches are used to 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.



Slider and media control buttons:

12-19 Browsing through a large set of items

Flick-gesturing through lists or icons allows the user to quickly browse large sets of information. Therefore scroll bars are no longer needed in the traditional sense, instead they are used as indicators for lists or pages. Visual browsing by panning, zooming and centering must be considered for applications like browser, maps, pictures, albums, contacts.


Feedback

12-20 Always provide feedback

Three types of feedback are used with touch devices:

Visual feedback like button effects, color changes, status indicators, up/down (touch/release) 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 can help give user visual feedback and balance risk of finger obstruction of targets

Aural feedback like clicks, tones or other audible noise. Lower audio feedback is preferred over 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.


Metaphors and signifiers

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.


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.


12-23 Support different host device hardware

Different handsets may provide different hardware controls. For example, the Sony Ericsson W900i has volume control keys and an exit/cancel key that is independent of the left and right soft keys. The Nokia N70 does not have either of these controls, so N70 users need an 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.


12-24 Follow the input conventions of the platform and device where possible

This includes:

- All text entry conventions of the platform, including inserting symbols, changing entry modes, and so on.

- Selection method.

- Cursor behaviour and way of indicating the currently focused screen element.



Contacts

We appreciate any feedback and are happy to answer your questions.

Harald Lamberts

Senior UE Manager

[email protected]

Katrin Luniaczek

UE Manager

[email protected]

Technology

Mobile Widgets User Experience Guidelines