8/9/2019 UXCorner

1/26

MOBILE USER EXPERIENCE

the intricacies of designing for mobile devices

Antony Ribot, CEO, Ribot

UX Corner - 08.01.2009

http://www.flickr.com/photos/8586443@N03/1491516038/http://www.flickr.com/photos/8586443@N03/1491516038/

8/9/2019 UXCorner

2/26

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

8/9/2019 UXCorner

3/26

Why does ribot exist?

explore and play with interfacesin small spaces

passion for pushing UIboundaries

ribot = ideas lab for mobile UIs

8/9/2019 UXCorner

4/26

Method

Personal definitions

Interaction

design

how the user

interacts with the

object

User experience

the qualitative

emotional

description of

multiple interactionswith an object

http://www.flickr.com/photos/ronlayters/586656022/http://www.flickr.com/photos/ronlayters/586656022/

8/9/2019 UXCorner

5/26

Constraints of mobile

network latency

input mechanism

memory

form factor

computational power

context

battery

THERE ARE MANY

8/9/2019 UXCorner

6/26

Context of use

8/9/2019 UXCorner

7/26

Behaviours & usage

8/9/2019 UXCorner

8/26

The mobile environmentITS LIKE MARS

single early failure = non-returning user

crucial first 30-60 seconds usage

8/9/2019 UXCorner

9/26

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

8/9/2019 UXCorner

10/26

Time for a snack...

small snippets of info

30-60 seconds

simple, but repetitive

regular

DATA-SNACKING

8/9/2019 UXCorner

11/26

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/http://www.flickr.com/photos/8586443@N03/1491516038/

8/9/2019 UXCorner

12/26

Going into details...

8/9/2019 UXCorner

13/26

Mobile is not about making

things smaller

Miniaturisation Mobilisation

http://mobilewebbook.com/http://www.flickr.com/photos/tridi_animeitor/2224661744/http://www.flickr.com/photos/tridi_animeitor/2224661744/http://mobilewebbook.com/http://mobilewebbook.com/

8/9/2019 UXCorner

14/26

Its all about the subtleties

Fewer options = simple and more effective

interface

Polish makes the UX and app stand out

8/9/2019 UXCorner

15/26

Default states in a UI

Most important function highlighted?

Grid menus and lists

Maximise number of options a click away

http://www.flickr.com/photos/olliesphotos/229174019/http://www.flickr.com/photos/olliesphotos/229174019/

8/9/2019 UXCorner

16/26

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://www.flickr.com/photos/olliesphotos/229174019/http://www.flickr.com/photos/olliesphotos/229174019/

8/9/2019 UXCorner

17/26

Working around the 3G icon

8/9/2019 UXCorner

18/26

Reward-based exploration

keep it as simple as possible (the hard part)

1. allow the user to play within safe boundaries

2. users 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/http://www.flickr.com/photos/devos/95230930/http://www.flickr.com/photos/devos/95230930/

8/9/2019 UXCorner

19/26

Opera Mini

page by page scrolling

A REWARD-BASED MOBILE BROWSER

8/9/2019 UXCorner

20/26

Short-cuts in the soft key menu

Opera MiniA REWARD-BASED MOBILE BROWSER

8/9/2019 UXCorner

21/26

Process

8/9/2019 UXCorner

22/26

Mobile UX - the easier path

http://www.flickr.com/photos/bbsc30/168832715/http://www.flickr.com/photos/bbsc30/168832715/http://www.admob.com/metricshttp://www.admob.com/metrics

8/9/2019 UXCorner

23/26

How to deal with diversity

select lead handsets for your target audience

use the design process to tackle gracefuldegradation

http://www.flickr.com/photos/joaomoura/2661761961/http://www.flickr.com/photos/joaomoura/2661761961/http://www.admob.com/metricshttp://www.admob.com/metrics

8/9/2019 UXCorner

24/26

Why use rapid prototyping

test ideas quickly in a tangible environment

extremely useful reference for developers

an interactive showcase of the intended UX

8/9/2019 UXCorner

25/26

Mobile rapid prototyping tools

Flash (lite v3.0)

XHTML + CSS

Nokia Web Runtime

Silverlight

Dashcode Pen & paper

http://www.flickr.com/photos/brianauer/2249169858/http://www.flickr.com/photos/brianauer/2249169858/

8/9/2019 UXCorner

26/26

Questions

Antony Ribot

ribot.co.uk

http://www.flickr.com/photos/ronlayters/2402199783/http://www.flickr.com/photos/ronlayters/2402199783/