Great UX is difficult to achieve, partly because we don't have a good mental model of "what" it is. UX Is not an activity, it's a goal and we discus how you achieve it with mobile apps. Presented by Paul Chapman from Moneytree KK (@pchap10k) at Tokyo iOS Meetup.

1. Copyright ©2012 Moneytree KK
CREATING A GREAT
MOBILE EXPERIENCE
Paul Chapman
iOS Meetup Tokyo, August 2012
www.moneytree.jp
MONEYTREE

2. ABOUT ME
Copyright ©2012 Moneytree KK
20 years dreaming software
Mobile software coder/designer
Lectured in mobile development
Founder of Moneytree KK
www.moneytree.jp

3. TODAY'S ROADMAP
Copyright ©2012 Moneytree 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
www.moneytree.jp

4. JARGON
User vs. Guest
www.moneytree.jp Copyright ©2012 Moneytree KK

5. What Do You
Want to Make?
www.moneytree.jp Copyright ©2012 Moneytree KK

6. WHAT'S YOUR APP-JECTIVE?
Copyright ©2012 Moneytree KK
CREATION
CONSUMPTION
COMMUNICATION
ROLE PLAYING
www.moneytree.jp
Inspiration: Bret Victor

7. HOW YOU SEE YOUR APP
Copyright ©2012 Moneytree KK
www.moneytree.jp
http://yvonnelao.com/2011/04/28/mobile-app-user-flow-chart/

8. IS THIS HOW OTHERS SEE YOUR APP?
Copyright ©2012 Moneytree KK
www.moneytree.jp
http://www.inkblotmazes.com/top-mazes.html

9. Why is UX Difficult?
www.moneytree.jp Copyright ©2012 Moneytree KK

10. WIKIPEDIA DEFINITION
Copyright ©2012 Moneytree KK
User experience (UX) is the way a person
feels about using a product, system or service
http://en.wikipedia.org/wiki/User_experience
www.moneytree.jp

11. WHAT PEOPLE KNOW ABOUT UX
Copyright ©2012 Moneytree KK
EASE OF USE
USABILITY
ENJOYMENT
www.moneytree.jp

12. WHAT PEOPLE KNOW ABOUT UX
Not Objective!
www.moneytree.jp Copyright ©2012 Moneytree KK

13. GREAT UX
Copyright ©2012 Moneytree KK
IS LIKE GREAT SEX
Everyone
Wants It
Not Everyone
Gets It
Everyone's
Definition is
www.moneytree.jp
A Little Dif ferent

14. UX IS Not An Activity
Copyright ©2012 Moneytree KK
You Cannot "Make"
Great UX
www.moneytree.jp

15. UX IS Not An Activity
Copyright ©2012 Moneytree KK
Great UX is a Goal,
a Destination
www.moneytree.jp

16. GREAT UX RESULTS FROM
Copyright ©2012 Moneytree KK
WELL EXECUTED & TESTED INTERFACES
RELIABLE & RESPONSIVE SYSTEMS
HELPFUL & TIMELY SUPPORT
ONGOING PRODUCT IMPROVEMENT
www.moneytree.jp

17. A BASIS FOR UNDERSTANDING UX
Copyright ©2012 Moneytree KK
Objective or Subjective?
www.moneytree.jp

18. OBJECTIVE
Copyright ©2012 Moneytree KK
www.moneytree.jp
http://www.youtube.com/watch?v=Ahg6qcgoay4

19. SUBJECTIVE
Japanese UI
Y U So Dense?
www.moneytree.jp Copyright ©2012 Moneytree KK

20. WHO IS REALLY GOOD AT UX?
Copyright ©2012 Moneytree KK
Design + Development
Development + Design
www.moneytree.jp

21. WHAT'D HE SAY?
Copyright ©2012 Moneytree KK
UX Not Well Understood
It's Not an Activity
Objective or Subjective?
Who is Really Good at UX?
www.moneytree.jp

22. Understanding
Mobile Constraints
www.moneytree.jp Copyright ©2012 Moneytree KK

23. DEVICE CONSTRAINTS
Copyright ©2012 Moneytree KK
FORM FACTOR
BATTERY
CPU & RAM
NETWORK QUALITY
SENSORS
INPUT METHOD
www.moneytree.jp

24. PARADIGM CONSTRAINTS
Copyright ©2012 Moneytree KK
SHORT SESSIONS
SNACKING NOT FEASTING
INTERRUPTED USAGE
PHONE CAN RING
www.moneytree.jp

25. CONTEXTUAL CONSTRAINTS
Copyright ©2012 Moneytree KK
MOVING VS Stationary
INDOOR VS OUTDOOR
LIGHTING & NOISE
DISTRACTIONS
www.moneytree.jp

26. HUMAN CONSTRAINTS
Copyright ©2012 Moneytree KK
LIMITED MEMORY
CHANGE BLINDNESS
CAN'T MULTI-TASK
IMPATIENT
CRAVE STIMULATION
www.moneytree.jp
http://www.businessinsider.com/100-things-you-should-know-about-people-2010-11

27. WHAT'D HE SAY?
Copyright ©2012 Moneytree KK
Device Constraints
Paradigm Constraints
Contextual Constraints
Human Constraints
www.moneytree.jp

28. Mobile UX-UI Toolbox
www.moneytree.jp Copyright ©2012 Moneytree KK

29. CONCEPT SKETCHES
Copyright ©2012 Moneytree KK
www.moneytree.jp
http://www.behance.net/gallery/Mobile-media-app-concept/795914

30. CONCEPT SKETCHES
Copyright ©2012 Moneytree KK
www.moneytree.jp
http://designreviver.com/inspiration/a-selection-of-mobile-ui-wireframe-sketches/

31. PAPER MOCKUPS
Copyright ©2012 Moneytree KK
www.moneytree.jp
http://www.lifehacker.com.au/2012/07/how-twitter-still-found-paper-useful/

32. Moneytree
TOUCHABLE PROTOTYPES
www.moneytree.jp Copyright ©2012 Moneytree KK

33. WIREFRAMES - LAYOUT
Copyright ©2012 Moneytree KK
www.moneytree.jp
http://designreviver.com/inspiration/a-selection-of-mobile-ui-wireframe-sketches/

34. WIREFRAMES - BEHAVIOUR
Copyright ©2012 Moneytree KK
www.moneytree.jp
Moneytree / Hands Memory

35. WIREFRAMES - FLOWS
Copyright ©2012 Moneytree KK
www.moneytree.jp
http://designreviver.com/inspiration/a-selection-of-mobile-ui-wireframe-sketches/

36. DIGITAL WIREFRAMES
Copyright ©2012 Moneytree KK
www.moneytree.jp
http://mcrubioux.wordpress.com/2011/03/09/mobile-app-ux-design/

37. WHAT IS YOUR INTENT?
Copyright ©2012 Moneytree KK
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?
www.moneytree.jp

38. USABILITY TACTICS
Copyright ©2012 Moneytree KK
MINIMIZE NAVIGATION DEPTH
COUNT NUMBER OF TAPS
THUMB FRIENDLY
INSTANT FEEDBACK
FEWER OPTIONS (3-4)
DO ONE THING REALLY WELL
Re-USE LEARNT BEHAVIOURS
www.moneytree.jp

39. WHAT'D HE SAY?
Copyright ©2012 Moneytree KK
Concept Sketches
Paper Mockups
Touchable Prototypes
Wireframes
Digital Wireframes
What Is Your Intent?
www.moneytree.jp
Usability Tactics

40. Our UX
Development Process
www.moneytree.jp Copyright ©2012 Moneytree KK

41. UX PROCESS FLOW - PLANNING
Copyright ©2012 Moneytree KK
PROCESS STEP STAGE
Brainstorm / Research / Discuss IDEATION
Concept Sketches
Develop Persona (2-3) CONCEPT DEVELOPMENT
Focus Problems/Questions (1-3)
Define Your MVP
Paper Mocks / Touchable Prototype
Paper Wireframes (Formal)
www.moneytree.jp
Review / Discuss

42. UX PROCESS FLOW - EXECUTION
Copyright ©2012 Moneytree KK
PROCESS STEP STAGE
Digital Wireframes ASSET CREATION
w Screen Design
w Behaviour Design
UI Implementation PROGRAMMING
w Animations
w Controls
Internal UI Testing
www.moneytree.jp
Production Asset Creation DESIGN FEEDBACK
Beta Testing END OF ITERATION

43. TODAY'S ROADMAP
Copyright ©2012 Moneytree 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
www.moneytree.jp

44. MY PARTING THOUGHT
Copyright ©2012 Moneytree KK
You Can't "Make" Great UX
You Can Only Make UX Great
www.moneytree.jp

45. CONTACT ME
Copyright ©2012 Moneytree KK
Paul Chapman
pchapman<at> moneytree <dot> jp
@pchap10k
www.moneytree.jp