the 10 golden rules of mobile ux

40
@SparklingLabs #Voxxed The 10 Golden Rules of Mobile UX Emilia Ciardi [email protected]

Upload: emilia-ciardi

Post on 28-Jul-2015

332 views

Category:

Mobile


0 download

TRANSCRIPT

Page 1: The 10 Golden Rules of Mobile UX

@SparklingLabs  #Voxxed  

The 10 Golden Rules of Mobile UX"

Emilia [email protected]!

Page 2: The 10 Golden Rules of Mobile UX

The 10 Golden Rules of Mobile UX!

Acquisition!

Retention!

Monetization!

Mobile UX/UI!

design!

The Business Funnel"

2!

Page 3: The 10 Golden Rules of Mobile UX

The 10 Golden Rules of Mobile UX!

Intui8ve  Clear  Easy  

Meaningful  Emo8onal  

Cool  

Effec8ve  Responsive  

3!

Page 4: The 10 Golden Rules of Mobile UX

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

Page 5: The 10 Golden Rules of Mobile UX

Add meaning and value to the UX. 2.

Page 6: The 10 Golden Rules of Mobile UX

Less is more. Be lean! 3.

Page 7: The 10 Golden Rules of Mobile UX

The Learning Loop"

The 10 Golden Rules of Mobile UX! 7!

Page 8: The 10 Golden Rules of Mobile UX

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!

Page 9: The 10 Golden Rules of Mobile UX

Design for small screens. 4.

Page 10: The 10 Golden Rules of Mobile UX

How do we hold mobile devices?"

The 10 Golden Rules of Mobile UX! 10!

Page 11: The 10 Golden Rules of Mobile UX

The Thumb Zone "

The 10 Golden Rules of Mobile UX! 11!

Page 12: The 10 Golden Rules of Mobile UX

The Thumb Zone evolution One Handed"

Credit:  ScoD  Hurff  

The 10 Golden Rules of Mobile UX! 12!

Page 13: The 10 Golden Rules of Mobile UX

Leverage standard patterns. 5.

Page 14: The 10 Golden Rules of Mobile UX

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

The 10 Golden Rules of Mobile UX! 14!

Page 15: The 10 Golden Rules of Mobile UX

Embrace Gesture-Intensive Design. 6.

Page 16: The 10 Golden Rules of Mobile UX

Flick Gesture"

The 10 Golden Rules of Mobile UX! 16!

Page 17: The 10 Golden Rules of Mobile UX

Touch & Hold"

The 10 Golden Rules of Mobile UX! 17!

Page 18: The 10 Golden Rules of Mobile UX

Draw"

The 10 Golden Rules of Mobile UX! 18!

Page 19: The 10 Golden Rules of Mobile UX

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!

Page 20: The 10 Golden Rules of Mobile UX

Embrace Motion Design. 7.

Page 21: The 10 Golden Rules of Mobile UX

Menu Animations"

The 10 Golden Rules of Mobile UX! 21!

Page 22: The 10 Golden Rules of Mobile UX

Floating Button Speed Dial"

The 10 Golden Rules of Mobile UX! 22!

Page 23: The 10 Golden Rules of Mobile UX

Robert Penner’s Easing Functions"

The 10 Golden Rules of Mobile UX! 23!

Page 24: The 10 Golden Rules of Mobile UX

Design for Communication. 8.

Page 25: The 10 Golden Rules of Mobile UX

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!

Page 26: The 10 Golden Rules of Mobile UX

Invest on the First Time User Experience. 9.

Page 27: The 10 Golden Rules of Mobile UX

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!

Page 28: The 10 Golden Rules of Mobile UX

Pine

vent

- FT

UE"

Page 29: The 10 Golden Rules of Mobile UX

Pine

vent

- FT

UE"

Page 30: The 10 Golden Rules of Mobile UX

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!

Page 31: The 10 Golden Rules of Mobile UX

Gra

nde

Frat

ello

- FT

UE"

Page 32: The 10 Golden Rules of Mobile UX

Gra

nde

Frat

ello

- FT

UE"

Page 33: The 10 Golden Rules of Mobile UX

Cot

to e

Man

giat

o - F

TUE"

Page 34: The 10 Golden Rules of Mobile UX

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

Page 35: The 10 Golden Rules of Mobile UX

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!

Page 36: The 10 Golden Rules of Mobile UX

Whe

re’s

Up

- FTU

E"

36!

Page 37: The 10 Golden Rules of Mobile UX

Whe

re’s

Up

- FTU

E"

37!

Page 38: The 10 Golden Rules of Mobile UX

Never, ever discount execution! *.

Page 39: The 10 Golden Rules of Mobile UX

Vision without execution is just hallucination. *.

Thomas Edison

Page 40: The 10 Golden Rules of Mobile UX

THANKS!!

!www.sparklnglabs.com!@sparklinglabs!

[email protected]!www.sparklinglabs.com!