Upload
paul-chapman
View
22.846
Download
2
Tags:
Embed Size (px)
Citation preview
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