the 10 golden rules of mobile ux

@SparklingLabs  #Voxxed  

The 10 Golden Rules of Mobile UX"

Emilia Ciardi!emilia@sparklinglabs.com!

The 10 Golden Rules of Mobile UX!

Acquisition!

Retention!

Monetization!

Mobile UX/UI!

design!

The Business Funnel"

2!

The 10 Golden Rules of Mobile UX!

Intui8ve  Clear  Easy  

Meaningful  Emo8onal  

Cool  

Effec8ve  Responsive  

3!

Design task-oriented, user-centered flows. 1.

Add meaning and value to the UX. 2.

Less is more. Be lean! 3.

The Learning Loop"

The 10 Golden Rules of Mobile UX! 7!

Why use data for UX"UX Discovery!

² Issue Identification!

² Strategy Guidance!

² Health Monitoring!

UX Optimization!

² Project Metrics !

² Experimentation with A/B and multivariate tests!

The 10 Golden Rules of Mobile UX! 8!

Design for small screens. 4.

How do we hold mobile devices?"

The 10 Golden Rules of Mobile UX! 10!

The Thumb Zone "

The 10 Golden Rules of Mobile UX! 11!

The Thumb Zone evolution One Handed"

Credit:  ScoD  Hurff  

The 10 Golden Rules of Mobile UX! 12!

Leverage standard patterns. 5.

Material Design"http://www.google.com/design/spec/material-design!

The 10 Golden Rules of Mobile UX! 14!

Embrace Gesture-Intensive Design. 6.

Flick Gesture"

The 10 Golden Rules of Mobile UX! 16!

Touch & Hold"

The 10 Golden Rules of Mobile UX! 17!

Draw"

The 10 Golden Rules of Mobile UX! 18!

How to embrace gestures?"² Use gestures if the context they are used in feels

natural!

² Make sure your users will find them!ª Draw attention to the part of the UI where the gesture is

active – maybe it could pulse the first time to signify it is interactive!

ª Perform an animation that hints to the type of gesture !

²  If you don’t think users will figure out your gestures easily, don’t overload them with too many help hints all at once, instead reveal them over time!

The 10 Golden Rules of Mobile UX! 19!

Embrace Motion Design. 7.

Menu Animations"

The 10 Golden Rules of Mobile UX! 21!

Floating Button Speed Dial"

The 10 Golden Rules of Mobile UX! 22!

Robert Penner’s Easing Functions"

The 10 Golden Rules of Mobile UX! 23!

Design for Communication. 8.

A picture is worth a thousand words"

² We process visuals faster than text.!

² Images affect us both cognitively and emotionally!!

² Words are processed by our short-term memory, images can go into long-term memory!

The 10 Golden Rules of Mobile UX! 25!

Invest on the First Time User Experience. 9.

The First Time User Experience"The FTUE is one of the most important parts of a successful app.!!²  30 seconds to hook new

users!² <5 minutes to teach them!

²  Show off the cool parts!² Give clear directions!² Get the user going ASAP!

27!

Pine

vent

- FT

UE"

Pine

vent

- FT

UE"

FTUE - Tutorial"The DON’Ts"²  Don’t be too wordy!

²  Don’t explain!

²  Don’t get users lost!

²  Don’t be boring!

The DO’s"²  Use as little words as

possible!²  Walk the user through the

core mechanics!²  Put the user on rails!

²  Show off!!

If applicable:!²  Show the use of virtual currency during the tutorial!²  “Learn as you go” approach !

30!

Gra

nde

Frat

ello

- FT

UE"

Gra

nde

Frat

ello

- FT

UE"

Cot

to e

Man

giat

o - F

TUE"

Don't prevent users from using your app! 10.

Don’t force registration on users"² When forcing registration, the user drop-

off can be very high. According to Tapjoy, it can reach 50%-75% (even relying on Facebook Connect)!

² Access as guest!² Allow late registration!² Reward users for creating accounts!

The 10 Golden Rules of Mobile UX! 35!

Whe

re’s

Up

- FTU

E"

36!

Whe

re’s

Up

- FTU

E"

37!

Never, ever discount execution! *.

Vision without execution is just hallucination. *.

Thomas Edison

THANKS!!

!www.sparklnglabs.com!@sparklinglabs!

emilia@sparklinglabs.com!www.sparklinglabs.com!