1. Mobile Widget User Experience
Martina Joisten & Russell Sese
UE Platform / Vodafone
25 March 2010

2. Contents
Here to help you to develop faster better interfaces and interactions for mobile widgets
Mobile widgets from a user perspective
UE design resources
…that make your design life easier
User research
… is not only for big companies
UE guidelines
… are often requirements (QA!)
Design principles
… are something to always keep in mind
Design patterns
… suggest but don’t dictate
Designing and developing your app
… approaches to creating a great app
2
26 March 2010

3. Mobile widgets are all about context and utility
They help people achieve small tasks wherever they are
Many widgets are just downloaded
and used only once, and then
deleted or forgotten.
People won’t use a widget if it’s
slow, unresponsive, unreliable,
doesn’t solve problems or add
value to their current situation.
3
26 March 2010

4. Vodafone User Experience Principles
Keep them in mind whilst designing your widget to help you stay focused on the big picture
Useful Easy-to-use Engaging
4

5. Designing your widget should start by asking questions
Usually the users’ opinions and actions on using a widget differ from yours
Questions you should be asking Resources available to you
Who are your target users? User research
What do they want and what do Guidelines
they need from your widget?
Design Principles
Why should users download and
use your widget?
Design patterns with code snippets
and stencils
What excites your users and will
make them go, ‘Wow’?
5
26 March 2010

6. User Research in a nutshell (1): understand your users before you start development
It’s easy: Just ask people what they think
1) Find some relevant people 2) Ask them questions 3) Identify key insights
Try friends, friends of friends, What everyday problems would they Identify things like needs and wants, likes,
family and colleagues want your widget to help them with? dislikes, function requests and wishes
? ??
6

7. User Research in a nutshell (2): get users to review during development
It’s easy: Just ask users what they think again
1) Start building your widget 2a) Participatory design 2b) Agile plus user testing
Use your newfound user understanding and Design some bits then involve your users Or you can get straight into prototyping
prioritized task storyboards/use cases to to try and make those bits better, redesign your widget
guide and focus your development in-situ with your users
Then run some user testing
? ?
?
??
?
7

8. Guidelines (1): Icon
For the Vodafone 360 H1 and M1 by Samsung
200px
Square, 200 x 200 pixels
Must be in PNG format
200px
Do not add rounded corners, the
phone does it for you
149px
Do not use a 100% black
51px
background
Do not use a photo, unless it is a
cropped part of a larger photo
8

9. Guidelines (2): Floating Mode
For the Vodafone 360 H1 and M1 by Samsung
Vodafone 360 H1 by Samsung,
230 x 230 pixels (120x120 for M1)
Use all of the available viewport
Minimum font size of 4.7625mm
for main text elements
Show dynamically refreshed
content
9
26 March 2010

10. Guidelines (3): Fullscreen Mode
For the Vodafone 360 Samsung H1 and M1
Must make use full available If the widget is localised, it must:
screen
Localise UI text and/or content
The suggested minimum size of an
Display localised text correctly
interactive element is 6.9mm
Provide language selection
option
10
26 March 2010

11. Design Principles (1): Promoting your app in the Shop
User experience even starts before download
Keep the description concise and
relevant
Write about the main value first
Keep the language simple, concise
and everyday
11
26 March 2010

12. Design Principles (2): Give immediate benefit
Without immediate satisfaction, people will only use your widget a few times then never again
Show most important content straight
away
The user should always be in control
Make interaction immediately
available
12
26 March 2010

13. Design Principles (3): Speed, speed, speed
A fast mobile widget can even beat the PC
Ask for the minimum amount of
information
Set relevant default settings
Store user’s preferences
Optimise data downloading
Most frequent tasks should be
available on the homescreen
13
26 March 2010

14. Design Patterns (1): Content List
Content lists are the fundamental base of many mobile widgets
What it is...
A content list shows many items of
information content displayed vertically
one after the other.
Use it when...
You need to display many items of
information content that are related -
such as news, or address book contacts.
Depending on the type of list, there may
be actions that the user can further
perform on each list item.
14

15. Design Patterns (2): Page Drilldown Menu
Offer an easy mental model to the user
What it is...
A Page Drilldown Menu is used to
navigate through hierarchical
information. It presents each level of a
hierarchy one screen at a time.
Use it when...
You need a hierarchical menu where a
user is free to choose their own route
forwards and backwards through the
hierarchy.
15

16. Design Patterns (3): Accordion Settings Menu
Use expanding lists with care
What it is...
An accordion settings menu is an
expandable list. Sections expand to show
options and collapse to hide them.
Use it when...
You need to present settings with
mutually exclusive options.
16

17. In the end, the user determines your success
Design great user experiences
Design your widget with your users in Next up…
mind.
Russell will talk about the
By delighting your users, they will want practicalities of widget development
to keep on using your widget, they will
recommend your widget to their friends,
they will demand more from you.
Design your widget to do a few things
really well, and your users will love
you for it.
17

18. DESIGNING AND DEVELOPING YOUR APP
18

19. Personas
Help you to decide on what features and functionality to include
19

20. Customer journeys
Help you to consider the context in which you’re designing
20

21. Concept designs
Help you to explore ideas without the cost of implementation
21

22. Prototyping and Testing
Help you to experiment with concepts to see if they work in practice
22

23. Design
Visual design and interaction design are critical to your app, and take time and effort
23

24. Delivery
Help you to experiment with concepts to see if they work in practice
24

25. For in-depth developer resources visit
www.jil.org/vodafone
Thank you
25