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
\"Name and postcode are missing. Please \"Destination fields to be completed!\"
include.\"
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.
\"MMS cannot be sent during a call. \"Message sending invalid! GPRS is not
Addresses UE components of Usability and Engagingness
Please try again after the call.\" available.\"
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