Top Banner
Mobile UX Therapy Session
48

Conversion Camp: Mobile UX, Keep It Usable

Apr 14, 2017

Download

Design

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Conversion Camp: Mobile UX, Keep It Usable

Mobile UX Therapy Session

Page 2: Conversion Camp: Mobile UX, Keep It Usable

Smartphone history…

2000 2007

Ericsson R380

Sony Ericsson P800

Nokia 3310

Blackberry 5810

Motorola Razr V3

Blackberry 7270

Nokia N95

Apple iPhone

Page 3: Conversion Camp: Mobile UX, Keep It Usable

Smartphone usage

Page 4: Conversion Camp: Mobile UX, Keep It Usable

The smartphone demographic

The smartphone demographic?

Page 5: Conversion Camp: Mobile UX, Keep It Usable

The smartphone demographic

Page 6: Conversion Camp: Mobile UX, Keep It Usable

Internet history…

1990s

HTML grows up!

Page 7: Conversion Camp: Mobile UX, Keep It Usable

Amazing mobile UX and usability are expected!

Where are we now?

Page 8: Conversion Camp: Mobile UX, Keep It Usable

Amazing mobile UX and usability are expected!

Page 9: Conversion Camp: Mobile UX, Keep It Usable

Amazing mobile UX and usability are expected!

Page 10: Conversion Camp: Mobile UX, Keep It Usable

Amazing mobile UX and usability are expected!

“I’ve not turned on my laptop for 6 months!”

Page 11: Conversion Camp: Mobile UX, Keep It Usable

Amazing mobile UX and usability are expected!6/10 teenage users are addicted to their smartphone

The most common use of mobile is to access social networks.

2/3 of teens use their mobile whilst socialising.

1/3 of teens use their mobile during meals.

Half use social networks whilst in the bathroom ;-)

6/10 teenage users are addicted to their smartphone

Page 12: Conversion Camp: Mobile UX, Keep It Usable

Amazing mobile UX and usability are expected!6/10 teenage users are addicted to their smartphone

Page 13: Conversion Camp: Mobile UX, Keep It Usable

Mobile UX

Page 14: Conversion Camp: Mobile UX, Keep It Usable

Devices, environments, context

Kind of device

Context of use

Interaction

Technical aspects of the device

Page 15: Conversion Camp: Mobile UX, Keep It Usable

Navigation

Navigation

Page 16: Conversion Camp: Mobile UX, Keep It Usable

Navigation

Page 17: Conversion Camp: Mobile UX, Keep It Usable

Navigation

Page 18: Conversion Camp: Mobile UX, Keep It Usable

Navigation

Page 19: Conversion Camp: Mobile UX, Keep It Usable

Navigation

Page 20: Conversion Camp: Mobile UX, Keep It Usable

Consistency

Consistency

Page 21: Conversion Camp: Mobile UX, Keep It Usable

Consistency

Page 22: Conversion Camp: Mobile UX, Keep It Usable

Consistency

Page 23: Conversion Camp: Mobile UX, Keep It Usable

Any willing volunteers…?

Page 24: Conversion Camp: Mobile UX, Keep It Usable

A little user test…

Page 25: Conversion Camp: Mobile UX, Keep It Usable

Interaction

Page 26: Conversion Camp: Mobile UX, Keep It Usable

Gestures

Tap Swipe

Drag Pinch

Page 27: Conversion Camp: Mobile UX, Keep It Usable

3D Touch?

Page 28: Conversion Camp: Mobile UX, Keep It Usable

Interaction controls

What is the data i’d like to capture?

Choose me :)

Option 1 Option 2

Option 1 Option 2

What is the best control that I can use?

Page 29: Conversion Camp: Mobile UX, Keep It Usable

Dropdown

Page 30: Conversion Camp: Mobile UX, Keep It Usable

Dropdown alternative

Page 31: Conversion Camp: Mobile UX, Keep It Usable

Dropdown alternative

Page 32: Conversion Camp: Mobile UX, Keep It Usable

Hit areas

Make them Obvious!

Consistent

Finger touchable

Reactive

Visual affordance

Page 33: Conversion Camp: Mobile UX, Keep It Usable

Forms

Page 34: Conversion Camp: Mobile UX, Keep It Usable

Forms

Sigh! :(

Page 35: Conversion Camp: Mobile UX, Keep It Usable

Forms

Page 36: Conversion Camp: Mobile UX, Keep It Usable

Forms

Don’t make me think!!

Page 37: Conversion Camp: Mobile UX, Keep It Usable

Forms

Page 38: Conversion Camp: Mobile UX, Keep It Usable

Inspiring

Inspire

Page 39: Conversion Camp: Mobile UX, Keep It Usable

Inspiring

Page 40: Conversion Camp: Mobile UX, Keep It Usable

Useful

Page 41: Conversion Camp: Mobile UX, Keep It Usable

Transitions

Page 42: Conversion Camp: Mobile UX, Keep It Usable

Transitions

Emulate real life experiences

Education

Intuitive

Connect the action to it’s outcome

Fun & slick Ui!

Page 43: Conversion Camp: Mobile UX, Keep It Usable

Without transition

Page 44: Conversion Camp: Mobile UX, Keep It Usable

With transition

Page 45: Conversion Camp: Mobile UX, Keep It Usable

Add to basket

Page 46: Conversion Camp: Mobile UX, Keep It Usable

Opportunity

Page 47: Conversion Camp: Mobile UX, Keep It Usable

Opportunity

There’s a BIG opportunity to create an amazing ecommerce experience for the mobile web!

Page 48: Conversion Camp: Mobile UX, Keep It Usable

Hola!

[email protected]

Ricardo Ortega

@uxspot