Mobile Widgets User Experience Guidelines

Mobile Widgets
UE Guidelines

Mobile Widgets User Experience Guidelines
This document describes user experience guidelines for designing mobile widgets, and is
intended to be a resource for any parties developing widgets for use on Vodafone devices.

VODAFONE and the Vodafone logo are trade marks of Vodafone Group. Copyright © Vodafone Group 2008, 2009.

Table of Contents 7 Navigation 23
Clarity of location 23

Introduction 3 8 Affordance and Consistency 25
About User Experience 3 Word and phrase meanings 25
Designing User-Centred Mobile Widgets 4 Similar elements to have the same meaning 27
Vodafone User Experience Principles 5 Clear functional design of elements 27

1 Getting Started 7 9 Error prevention and Recovery 28
Naming the Widget 7
Minimising user error 28
Creating a Widget icon 7
Downloading the Widget 7
10 Instruction and Help 30
2 Value and Engagement 8 Making instructions simple and clear 30
An immediate purpose and benefit 8
11 Localisation for Different Markets 31
Engage the user 9

3 User Control 10 12 Supporting Different Hardware 32
Relevant, accessibleIe and meaningful 10 Screen size and mode 32
Context of use 11 Finger-based Interactions and Gestures 32
Target, icon, button and list sizes 33
4 Efficiency 12 Text entry 34
Ask for minimum information? 12 Touch Controls 34
Does the widget feel responsive? 13 Feedback 35
Order of links, content and other on-screen elements logical? 13
Metaphors and Signifiers 35

5 Look and Feel 14 UE team contact details 36
Widget layout 14
Look and feel of the Widget 18
Readable text 21

6 Feedback 22
Clear indication of successful operation 22

Mobile Widgets UE Guidelines 2/36

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


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.


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

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


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.

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

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.

Good example:
This widget’s purpose is clearly stated at
the top of the screen.


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.


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.
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
from this point.
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.

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.


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.

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

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


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

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.


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

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.

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


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.

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

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

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

5-11 Use a tick (not a cross) to indicate selection
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.


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.

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
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,
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”.
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
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
time is less important.



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

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
Ideally provide a countdown from the maximum number to 0 as the user enters characters.
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,
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.

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.

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.



Look and feel of the widget 5-40 Use muted colours to de-emphasise less important information

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

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

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

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

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

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.

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.
Some may be misunderstood (e.g. a German PSTN dial tone sounds like a British engaged
tone).
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’.

5-66 The user should be able to interrupt any tone with a key press
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 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
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
Provide a text equivalent to any important information conveyed by vibration.
5-78 Use bullet points and short paragraphs for ease of scanning
5-71 Vibration effects should begin within 50 ms of the action

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


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

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.


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

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

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.

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


Mobile Widgets User Experience Guidelines

Mobile Widgets User Experience Guidelines

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (19)

Semelhante a Mobile Widgets User Experience Guidelines

Semelhante a Mobile Widgets User Experience Guidelines (20)

Mais de LE ROUZIC Stéphanie

Mais de LE ROUZIC Stéphanie (11)

Último

Último (20)

Mobile Widgets User Experience Guidelines