MOBILE USER EXPERIENCE
the intricacies of designing for mobile devices
Antony Ribot, CEO, Ribot
UX Corner - 08.01.2009
http://www.flickr.com/taraethers

First of all, some context
BACKGROUND
started at tomato (’99)
then studied ants, bees and termites
joined the mobile scene 5 years ago
co-founded ribot 1.5 years ago
ceo / art director

Why does ribot exist?
ribot = ideas lab for mobile UIs
explore and play with interfaces
in small spaces
passion for pushing UI
boundaries

Personal definitions
User experience
Interaction
the qualitative
design
emotional
how the user
description of
interacts with the
multiple interactions
object
with an object
Method Relationship
http://www.flickr.com/photos/ronlayters/586656022/

Constraints of mobile
THERE ARE MANY
form factor battery
network latency context
input mechanism
memory
computational power

Context of use

Behaviours & usage

The mobile environment
IT’S LIKE MARS
single early failure = non-returning user
crucial first 30-60 seconds usage

Mars, Neptune, Pluto...
THE ENVIRONMENT DIFFERS, DEPENDING ON WHERE YOU ARE
user behaviour
handset range
operators
data allowance / pricing
e.g. South Africa, Europe, Japan...

Time for a snack...
DATA-SNACKING
small snippets of info
30-60 seconds
simple, but repetitive
regular

Re-use learnt behaviours
Re-use interactions inherent in the device
Minimise the number of surprises
soft key positions colour
menu navigation tone of voice
http://www.flickr.com/photos/8586443@N03/1491516038/

Going into details...

Mobile is not about making
things smaller
Miniaturisation Mobilisation
vs
http://mobilewebbook.com
http://www.flickr.com/photos/tridi_animeitor/2224661744/

It’s all about the subtleties
Fewer options = simple and more effective
interface
Polish makes the UX and app stand out

Default states in a UI
Grid menus and lists
Most important function highlighted?
Maximise number of options a click away
http://flickr.com/photos/moonypics/2130645953/

Faking it
Low latency is key to the user experience...
...especially with touch devices
Make immediate visual changes...
...whilst we wait for network/other process
http://flickr.com/photos/rabataller/638250907/

Working around the 3G icon

Reward-based exploration
FOCUSING ON THE KEY FEATURE AND DOING IT WELL
keep it as simple as possible (the hard part)
1. allow the user to play within safe boundaries
2. user’s comfort increases
3. sense of exploration increases
4. discovery of features almost by accident
http://www.flickr.com/photos/devos/95230930/

Opera Mini
A REWARD-BASED MOBILE BROWSER
page by page scrolling

Opera Mini
A REWARD-BASED MOBILE BROWSER
Short-cuts in the soft key menu

Process

Mobile UX - the easier path
Workshop Idea exploration
Paper wireframes
Formalised digital wireframes
User/expert testing Aesthetic concepts
Screen design
Rapid prototype
Docs Motion design
Art direction http://www.flickr.com/photos/bbsc30/168832715/

How to deal with diversity
select lead handsets for your target audience
use the design process to tackle “graceful
degradation”
http://www.admob.com/
http://www.flickr.com/photos/joaomoura/2661761961/

Why use rapid prototyping
test ideas quickly in a tangible environment
extremely useful reference for developers
an interactive showcase of the intended UX

Mobile rapid prototyping tools
Flash (lite v3.0)
XHTML + CSS
Nokia Web Runtime
Silverlight
Dashcode Pen & paper
http://www.flickr.com/photos/brianauer/2249169858/

Questions
Antony Ribot
ribot.co.uk
http://www.flickr.com/photos/ronlayters/2402199783/