Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

MONEYTREE

CREATING A GREAT MOBILE EXPERIENCE

Paul Chapman iOS Meetup Tokyo, August 2012

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

w

ww

.mon

eytr

ee.jp

  20 years dreaming so!ware

  Mobile so!ware coder/designer

  Lectured in mobile development

  Founder of Moneytree KK

ABOUT ME

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

1.  What Do You Want to Make?

2.  Why is UX Difficult?

3.  Understand Mobile Constraints

4.  Mobile UX-UI Toolbox

5.  Our UX Development Process

TODAY'S ROADMAP

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

JARGON

User vs. Guest

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

What Do You Want to Make?

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

WHAT'S YOUR APP-JECTIVE?

CREATION

CONSUMPTION

COMMUNICATION

ROLE PLAYING

Inspiration: Bret Victor

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

HOW YOU SEE YOUR APP

http://yvonnelao.com/2011/04/28/mobile-app-user-flow-chart/

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

IS THIS HOW OTHERS SEE YOUR APP?

http://www.inkblotmazes.com/top-mazes.html

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

Why is UX Difficult?

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

User experience (UX) is the way a person feels about using a product, system or service http://en.wikipedia.org/wiki/User_experience

WIKIPEDIA DEFINITION

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

WHAT PEOPLE KNOW ABOUT UX

EASE OF USE

USABILITY

ENJOYMENT

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

WHAT PEOPLE KNOW ABOUT UX

ww

w.m

oney

tree

.jp

Not Objective!

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

IS LIKE GREAT SEX Everyone Wants It

Not Everyone Gets It

Everyone's Definition is

A Little Dif ferent

GREAT UX

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

UX IS Not An Activity

You Cannot "Make" Great UX

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

UX IS Not An Activity

Great UX is a Goal, a Destination

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

GREAT UX RESULTS FROM

WELL EXECUTED & TESTED INTERFACES

RELIABLE & RESPONSIVE SYSTEMS

HELPFUL & TIMELY SUPPORT

ONGOING PRODUCT IMPROVEMENT

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

A BASIS FOR UNDERSTANDING UX

Objective or Subjective?

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

OBJECTIVE

http://www.youtube.com/watch?v=Ahg6qcgoay4

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

SUBJECTIVE

Japanese UI

Y U So Dense?

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

WHO IS REALLY GOOD AT UX?

Design + Development Development + Design

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

  UX Not Well Understood

  It's Not an Activity

  Objective or Subjective?

  Who is Really Good at UX?

WHAT'D HE SAY?

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

Understanding Mobile Constraints

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

DEVICE CONSTRAINTS

FORM FACTOR

BATTERY

CPU & RAM

NETWORK QUALITY

SENSORS

INPUT METHOD

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

PARADIGM CONSTRAINTS

SHORT SESSIONS

SNACKING NOT FEASTING

INTERRUPTED USAGE

PHONE CAN RING

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

CONTEXTUAL CONSTRAINTS

MOVING VS Stationary

INDOOR VS OUTDOOR

LIGHTING & NOISE

DISTRACTIONS

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

HUMAN CONSTRAINTS

LIMITED MEMORY

CHANGE BLINDNESS

CAN'T MULTI-TASK

IMPATIENT

CRAVE STIMULATION

http://www.businessinsider.com/100-things-you-should-know-about-people-2010-11

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

  Device Constraints

  Paradigm Constraints

  Contextual Constraints

  Human Constraints

WHAT'D HE SAY?

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

Mobile UX-UI Toolbox

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

CONCEPT SKETCHES

http://www.behance.net/gallery/Mobile-media-app-concept/795914

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

CONCEPT SKETCHES

http://designreviver.com/inspiration/a-selection-of-mobile-ui-wireframe-sketches/

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

PAPER MOCKUPS

http://www.lifehacker.com.au/2012/07/how-twitter-still-found-paper-useful/

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

TOUCHABLE PROTOTYPES

Moneytree

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

WIREFRAMES - LAYOUT

http://designreviver.com/inspiration/a-selection-of-mobile-ui-wireframe-sketches/

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

WIREFRAMES - BEHAVIOUR

Moneytree / Hands Memory

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

WIREFRAMES - FLOWS

http://designreviver.com/inspiration/a-selection-of-mobile-ui-wireframe-sketches/

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

DIGITAL WIREFRAMES

http://mcrubioux.wordpress.com/2011/03/09/mobile-app-ux-design/

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

WHAT IS YOUR INTENT?

HOW SHOULD THEY FEEL?

WHERE SHOULD THEY LOOK?

WHAT IS IMPORTANT?

WHAT IS USED OFTEN?

HOW DO I FEEL USING IT?

WHAT MADE ME FEEL GOOD?

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

USABILITY TACTICS

MINIMIZE NAVIGATION DEPTH

COUNT NUMBER OF TAPS

THUMB FRIENDLY

INSTANT FEEDBACK

FEWER OPTIONS (3-4)

DO ONE THING REALLY WELL

Re-USE LEARNT BEHAVIOURS

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

  Concept Sketches

  Paper Mockups

  Touchable Prototypes

  Wireframes

  Digital Wireframes

  What Is Your Intent?

  Usability Tactics

WHAT'D HE SAY?

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

Our UX Development Process

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

Brainstorm / Research / Discuss

Concept Sketches

Develop Persona (2-3)

Focus Problems/Questions (1-3)

Define Your MVP

Paper Mocks / Touchable Prototype

Paper Wireframes (Formal)

Review / Discuss

UX PROCESS FLOW - PLANNING

PROCESS STEP STAGE

IDEATION

CONCEPT DEVELOPMENT

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

Digital Wireframes

w Screen Design

w Behaviour Design

UI Implementation

w Animations

w Controls

Internal UI Testing

Production Asset Creation

Beta Testing

UX PROCESS FLOW - EXECUTION

PROCESS STEP STAGE

ASSET CREATION

PROGRAMMING

DESIGN FEEDBACK

END OF ITERATION

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

1.  What Do You Want to Make?

2.  Why is UX Difficult?

3.  Understand Mobile Constraints

4.  Mobile UX-UI Toolbox

5.  Our UX Development Process

TODAY'S ROADMAP

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

MY PARTING THOUGHT

You Can't "Make" Great UX You Can Only Make UX Great

ww

w.m

oney

tree

.jp

C

opyr

ight

©20

12 M

oney

tree

KK

⦿  Paul Chapman pchapman<at> moneytree <dot> jp @pchap10k

CONTACT ME