Mobile User Experience: The Intricacies Of Designing For Mobile Devices

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
then studied ants, bees and termites
joined the mobile scene 5 years ago
co-founded ribot 1.5 years ago
BACKGROUND
started at tomato (’99)
ceo / art director
Why does ribot exist?
explore and play with interfaces
in small spaces
passion for pushing UI
boundaries
ribot = ideas lab for mobile UIs
Method
Relationship
Personal definitions
Interaction
design
how the user
interacts with the
object
User experience
the qualitative
emotional
description of
multiple interactions

with an object
http://www.flickr.com/photos/ronlayters/586656022/
Constraints of mobile
network latency
input mechanism
memory
form factor
computational power
context
battery
THERE ARE MANY
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
handset range
operators
data allowance / pricing
THE ENVIRONMENT DIFFERS, DEPENDING ON WHERE YOU ARE
e.g. South Africa, Europe, Japan
user behaviour
Time for a snack
small snippets of info
30-60 seconds
simple, but repetitive
regular
DATA-SNACKING

Re-use learnt behaviours
Re-use interactions inherent in the device
Minimise the number of surprises
soft key positions
menu navigation
colour
tone of voice
http://www.flickr.com/photos/8586443@N03/1491516038/
Going into details
vs
Mobile is not about making
things smaller
Miniaturisation Mobilisation

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
Most important function highlighted?
Grid menus and lists
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
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
FOCUSING ON THE KEY FEATURE AND DOING IT WELL
http://www.flickr.com/photos/devos/95230930/
Opera Mini
page by page scrolling
A REWARD-BASED MOBILE BROWSER
Short-cuts in the soft key menu
Opera Mini
A REWARD-BASED MOBILE BROWSER
Process
Mobile UX - the easier path
Workshop
Idea exploration
Paper wireframes
Formalised digital wireframes
User/expert testing
Aesthetic concepts
Screen design
Rapid prototype
Docs
Art direction
http://www.flickr.com/photos/bbsc30/168832715/
Motion design
How to deal with diversity

select lead handsets for your target audience
use the design process to tackle “graceful
degradation”
/>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
http://www.flickr.com/photos/brianauer/2249169858/
Dashcode Pen & paper