creating a great mobile experience = ios meetup tokyo aug 2012
TRANSCRIPT
![Page 1: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/1.jpg)
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
![Page 2: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/2.jpg)
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
![Page 3: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/3.jpg)
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
![Page 4: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/4.jpg)
ww
w.m
oney
tree
.jp
C
opyr
ight
©20
12 M
oney
tree
KK
JARGON
User vs. Guest
![Page 5: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/5.jpg)
ww
w.m
oney
tree
.jp
C
opyr
ight
©20
12 M
oney
tree
KK
What Do You Want to Make?
![Page 6: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/6.jpg)
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
![Page 7: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/7.jpg)
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/
![Page 8: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/8.jpg)
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
![Page 9: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/9.jpg)
ww
w.m
oney
tree
.jp
C
opyr
ight
©20
12 M
oney
tree
KK
Why is UX Difficult?
![Page 10: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/10.jpg)
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
![Page 11: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/11.jpg)
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
![Page 12: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/12.jpg)
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!
![Page 13: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/13.jpg)
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
![Page 14: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/14.jpg)
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
![Page 15: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/15.jpg)
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
![Page 16: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/16.jpg)
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
![Page 17: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/17.jpg)
ww
w.m
oney
tree
.jp
C
opyr
ight
©20
12 M
oney
tree
KK
A BASIS FOR UNDERSTANDING UX
Objective or Subjective?
![Page 18: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/18.jpg)
ww
w.m
oney
tree
.jp
C
opyr
ight
©20
12 M
oney
tree
KK
OBJECTIVE
http://www.youtube.com/watch?v=Ahg6qcgoay4
![Page 19: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/19.jpg)
ww
w.m
oney
tree
.jp
C
opyr
ight
©20
12 M
oney
tree
KK
SUBJECTIVE
Japanese UI
Y U So Dense?
![Page 20: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/20.jpg)
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
![Page 21: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/21.jpg)
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?
![Page 22: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/22.jpg)
ww
w.m
oney
tree
.jp
C
opyr
ight
©20
12 M
oney
tree
KK
Understanding Mobile Constraints
![Page 23: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/23.jpg)
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
![Page 24: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/24.jpg)
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
![Page 25: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/25.jpg)
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
![Page 26: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/26.jpg)
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
![Page 27: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/27.jpg)
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?
![Page 28: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/28.jpg)
ww
w.m
oney
tree
.jp
C
opyr
ight
©20
12 M
oney
tree
KK
Mobile UX-UI Toolbox
![Page 29: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/29.jpg)
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
![Page 30: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/30.jpg)
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/
![Page 31: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/31.jpg)
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/
![Page 32: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/32.jpg)
ww
w.m
oney
tree
.jp
C
opyr
ight
©20
12 M
oney
tree
KK
TOUCHABLE PROTOTYPES
Moneytree
![Page 33: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/33.jpg)
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/
![Page 34: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/34.jpg)
ww
w.m
oney
tree
.jp
C
opyr
ight
©20
12 M
oney
tree
KK
WIREFRAMES - BEHAVIOUR
Moneytree / Hands Memory
![Page 35: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/35.jpg)
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/
![Page 36: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/36.jpg)
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/
![Page 37: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/37.jpg)
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?
![Page 38: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/38.jpg)
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
![Page 39: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/39.jpg)
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?
![Page 40: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/40.jpg)
ww
w.m
oney
tree
.jp
C
opyr
ight
©20
12 M
oney
tree
KK
Our UX Development Process
![Page 41: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/41.jpg)
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
![Page 42: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/42.jpg)
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
![Page 43: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/43.jpg)
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
![Page 44: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/44.jpg)
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
![Page 45: Creating a Great Mobile Experience = iOS Meetup Tokyo Aug 2012](https://reader035.vdocuments.mx/reader035/viewer/2022062320/55a0f6ee1a28abe74f8b48a1/html5/thumbnails/45.jpg)
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