!1
MOBILE
PROTOTYPING
DONNA LICHAW
@DLICHAW
GREATNORTHELECTRIC.COM
2
@dlichaw
3
WHY PROTOTYPE?
!4
KEY OBJECTIVE(S) AGENDA
RESOURCESDELIVERABLE
WHY PROTOTYPE?
Bill Buxton, Sketching User Experiences
Design
“Branching Expl...
KEY OBJECTIVE(S) AGENDA
RESOURCESDELIVERABLE
WHY PROTOTYPE?
Bill Buxton, Sketching User Experiences
Design
“Getting the ri...
INSERT CHAPTER TITLEWHY PROTOTYPE? !7
‣ Communicate functionality
‣ Test ideas
‣ Refine ideas
‣ Refine user interfaces (sc...
INSERT CHAPTER TITLEWHY PROTOTYPE FOR MOBILE? !8
‣ Flow is everything (actions span multiple screens)
‣ Animations carry m...
TYPES OF
PROTOTYPES
!10
INSERT CHAPTER TITLE
STORYBOARDS
Good for:
‣ Getting started
‣ Product/process flows
‣ Covering touchpoints
‣ Product-mark...
INSERT CHAPTER TITLE
PAPER PROTOTYPES
Good for:
‣ Brainstorming UIs
‣ Proofs of concept
‣ Quick user feedback
!
Pros:
‣ Fa...
INSERT CHAPTER TITLEPRINTOUTS (WIREFRAMES OR MOCKUPS)
Good for:
‣ UI consistency
‣ Screen flow
‣ User feedback
Pros:
‣ Det...
INSERT CHAPTER TITLE
SWIPEABLE PHOTO GALLERY (SKETCHES)
INSERT CHAPTER TITLE !15
Good for:
‣ UI consistency
‣ Screen flow
‣ User feedback
Pros:
‣ Detailed
‣ Faster than code
‣ Ch...
INSERT CHAPTER TITLECLICKABLE TAPPABLE PROTOTYPE
Good for:
‣ UI consistency
‣ Screen flow
‣ User feedback
‣ Proof of conce...
INSERT CHAPTER TITLECONCIERGE !17
Good for:
‣ Proof of concept
‣ Product market fit
‣ User feedback
Pros:
‣ Fast
‣ Cheap
‣...
INSERT CHAPTER TITLE
STATIC HTML, RESPONSIVE
Good for:
‣ Troubleshooting
scalability issues
!
Pros:
‣ See what the user se...
INSERT CHAPTER TITLECODE + BACKEND !19
Good for:
‣ Proof of concept
‣ Troubleshooting
‣ Screen flow
‣ User feedback
‣ Livi...
MOBILE UI
PATTERNS
!20
IOS UI ELEMENTS
IOS UI ELEMENTS (CONT.)
Tables
IOS UI ELEMENTS (CONT.)
IOS VIEWS
TEMPORARY VIEWS
GESTURES
GESTURES (CONT.)
IOS ELEMENTS
‣ http://pttrns.com
‣ http://www.mobile-patterns.com/
‣ http://inspired-ui.com/
MOBILE UI PATTERN GALLERIES
DESIGN
PRINCIPLES
!30
DESIGN PRINCIPLES
‣ Easier to scale up UIs than to scale down
‣ Provide continuity across devices and touchpoints
‣ Focus on content over navigation
‣ Focus on primary tasks (1 per screen)
DESIGN PRINCIPLES
‣ Provide clarity and focus
‣ You need to know what matters most 

i.e. You need to really know your customers and your bu...
DESIGN PRINCIPLES
‣ Auto-save
‣ Multi-tasking
‣ Let users pick up where they left off
‣ Same device
‣ Other devices
Other touch points
DESIG...
‣ GPS - location
‣ Compass - direction
‣ Gyroscope - movement, acceleration
‣ Device (address book, phone, SMS, calendar i...
‣ GPS - location
‣ Compass - direction
‣ Gyroscope - movement, acceleration
‣ Device (address book, phone, SMS, calendar i...
CASE STUDIES
!38
LOW TO HIGH FIDELITY
INSERT CHAPTER TITLEHEY, WE HAVE AN IDEA! (SKETCH)
INSERT CHAPTER TITLE
INSERT CHAPTER TITLE
INSERT CHAPTER TITLE !43
BUT CAN IT TECHNICALLY WORK??
INSERT CHAPTER TITLEIS IT USEFUL? HELPFUL? DESIRABLE? !44
BUT, WAIT...THERE’S MORE
INSERT CHAPTER TITLEDOES IT LOOK GOOD? CONSISTENT UI? !46
INSERT CHAPTER TITLE
CAN IT WORK ON EVERY SCREEN ON THE
PLANET???
...AND MORE
INSERT CHAPTER TITLEPROTOTYPING THE APP STORE SCREENFLOW
Why?
‣ Increased new user engagement by 80%
‣ Increased new user conversion to premium by 1000%
!
—> We wanted to make sur...
Why prototype mobile first?
‣ Clarity and focus
‣ Limit feature creep
‣ Test in the wild
‣ Success is scalable
RAPID ITERATIVE PROTOTYPING IN THE WILD
INSERT CHAPTER TITLE
PROTOTYPING
TOOLS
!54
FLINTO
DEMO: POP APP
POP
POP
POP
PAPER
INSERT CHAPTER TITLE
INSERT CHAPTER TITLE
Tool
Barrier to
Entry
Cost Time Devices Transitions Shareability
Code High Free High All Yes Remote
A...
EXERCISE: PAPER
PROTOTYPING
!64
INSERT CHAPTER TITLEEXERCISE: PAPER PROTOTYPE !65
‣ Break up into pairs.
‣ Create a paper prototype for a mobile photo-sha...
EXERCISE: SWIPEABLE
AND TAPPABLE
PROTOTYPES WITH
PHOTO GALLERY AND
POP APP
!66
INSERT CHAPTER TITLEEXERCISE: SWIPEABLE AND TAPPABLE
PROTOTYPES
!67
‣ Split up into pairs (same as before)
‣ Photograph ke...
ADDITIONAL RESOURCES
‣ Mobile Frontier, Rachel Hinman
‣ (Rosenfeld Media, promo code: LICHAW)
‣ Tapworthy, Josh Clark
‣ Mo...
THANK YOU.
DONNA LICHAW
@DLICHAW
GREATNORTHELECTRIC.COM
Mobile Prototyping
Mobile Prototyping
Upcoming SlideShare
Loading in...5
×

Mobile Prototyping

5,159

Published on

Prototyping is essential to designing memorable mobile user experiences, but can often be overlooked at the beginning of building a product. Learn the types of prototypes, tools, and best practices for mobile product design (including overview of mobile flow and UI best practices, patterns, and frameworks).

Published in: Design, Technology
2 Comments
25 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,159
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
141
Comments
2
Likes
25
Embeds 0
No embeds

No notes for slide

Mobile Prototyping

  1. 1. !1 MOBILE PROTOTYPING DONNA LICHAW @DLICHAW GREATNORTHELECTRIC.COM
  2. 2. 2 @dlichaw
  3. 3. 3
  4. 4. WHY PROTOTYPE? !4
  5. 5. KEY OBJECTIVE(S) AGENDA RESOURCESDELIVERABLE WHY PROTOTYPE? Bill Buxton, Sketching User Experiences Design “Branching Exploration” v Prototyping “Incremental iterative refinement”
  6. 6. KEY OBJECTIVE(S) AGENDA RESOURCESDELIVERABLE WHY PROTOTYPE? Bill Buxton, Sketching User Experiences Design “Getting the right design” v Prototyping “Getting the design right”
  7. 7. INSERT CHAPTER TITLEWHY PROTOTYPE? !7 ‣ Communicate functionality ‣ Test ideas ‣ Refine ideas ‣ Refine user interfaces (screen and flow) ‣ Test usability
  8. 8. INSERT CHAPTER TITLEWHY PROTOTYPE FOR MOBILE? !8 ‣ Flow is everything (actions span multiple screens) ‣ Animations carry meaning ‣ More expensive to code ‣ Harder to correct issues after the fact (App Store) ‣ It’s easy!
  9. 9. TYPES OF PROTOTYPES !10
  10. 10. INSERT CHAPTER TITLE STORYBOARDS Good for: ‣ Getting started ‣ Product/process flows ‣ Covering touchpoints ‣ Product-market fit Pros: ‣ Fast ‣ Cheap ‣ Easy ‣ Disposable Cons: ‣ None
  11. 11. INSERT CHAPTER TITLE PAPER PROTOTYPES Good for: ‣ Brainstorming UIs ‣ Proofs of concept ‣ Quick user feedback ! Pros: ‣ Fast ‣ Cheap ‣ Easy ‣ Disposable Cons: ‣ Can’t work out details ‣ Can’t share remotely ‣ Difficult to update
  12. 12. INSERT CHAPTER TITLEPRINTOUTS (WIREFRAMES OR MOCKUPS) Good for: ‣ UI consistency ‣ Screen flow ‣ User feedback Pros: ‣ Detailed ‣ Faster than code ‣ Cheaper than code Cons: ‣ Slower than sketching ‣ Rabbit hole ‣ Precious
  13. 13. INSERT CHAPTER TITLE SWIPEABLE PHOTO GALLERY (SKETCHES)
  14. 14. INSERT CHAPTER TITLE !15 Good for: ‣ UI consistency ‣ Screen flow ‣ User feedback Pros: ‣ Detailed ‣ Faster than code ‣ Cheaper than code Cons: ‣ Miss UI and flow issues uncovered with printouts SWIPEABLE PHOTO GALLERY
  15. 15. INSERT CHAPTER TITLECLICKABLE TAPPABLE PROTOTYPE Good for: ‣ UI consistency ‣ Screen flow ‣ User feedback ‣ Proof of concept ‣ Living spec Pros: ‣ Fast ‣ Cheap ‣ Easy ‣ Highly shareable ! Cons: ‣ Slower than paper ‣ Precious-ish
  16. 16. INSERT CHAPTER TITLECONCIERGE !17 Good for: ‣ Proof of concept ‣ Product market fit ‣ User feedback Pros: ‣ Fast ‣ Cheap ‣ Easy Cons: ‣ Requires patience from those who want to jump into code
  17. 17. INSERT CHAPTER TITLE STATIC HTML, RESPONSIVE Good for: ‣ Troubleshooting scalability issues ! Pros: ‣ See what the user sees ! Cons: ‣ Slow
  18. 18. INSERT CHAPTER TITLECODE + BACKEND !19 Good for: ‣ Proof of concept ‣ Troubleshooting ‣ Screen flow ‣ User feedback ‣ Living spec Pros: ‣ Fast-ish ‣ Cheap-ish ‣ Easy-ish ! ! Cons: ‣ Extra step ‣ Slow-ish ‣ Expensive-ish ‣ Difficult-ish
  19. 19. MOBILE UI PATTERNS !20
  20. 20. IOS UI ELEMENTS
  21. 21. IOS UI ELEMENTS (CONT.) Tables
  22. 22. IOS UI ELEMENTS (CONT.)
  23. 23. IOS VIEWS
  24. 24. TEMPORARY VIEWS
  25. 25. GESTURES
  26. 26. GESTURES (CONT.)
  27. 27. IOS ELEMENTS
  28. 28. ‣ http://pttrns.com ‣ http://www.mobile-patterns.com/ ‣ http://inspired-ui.com/ MOBILE UI PATTERN GALLERIES
  29. 29. DESIGN PRINCIPLES !30
  30. 30. DESIGN PRINCIPLES ‣ Easier to scale up UIs than to scale down ‣ Provide continuity across devices and touchpoints
  31. 31. ‣ Focus on content over navigation ‣ Focus on primary tasks (1 per screen) DESIGN PRINCIPLES
  32. 32. ‣ Provide clarity and focus ‣ You need to know what matters most 
 i.e. You need to really know your customers and your business DESIGN PRINCIPLES
  33. 33. DESIGN PRINCIPLES
  34. 34. ‣ Auto-save ‣ Multi-tasking ‣ Let users pick up where they left off ‣ Same device ‣ Other devices Other touch points DESIGN PRINCIPLES
  35. 35. ‣ GPS - location ‣ Compass - direction ‣ Gyroscope - movement, acceleration ‣ Device (address book, phone, SMS, calendar integration) ‣ Input - Audio, video, image ‣ Bluetooth, RFID - connectivity and “Near Field Communication” ‣ Light sensors - environmental awareness ‣ Touch - gestures, direct manipulation (NUI) DESIGN PRINCIPLES
  36. 36. ‣ GPS - location ‣ Compass - direction ‣ Gyroscope - movement, acceleration ‣ Device (address book, phone, SMS, calendar integration) ‣ Input - Audio, video, image ‣ Bluetooth, RFID - connectivity and “Near Field Communication” ‣ Light sensors - environmental awareness ‣ Touch - gestures, direct manipulation (NUI) ! ! ! } REIMAGINE WHAT’S POSSIBLE DESIGN PRINCIPLES
  37. 37. CASE STUDIES !38
  38. 38. LOW TO HIGH FIDELITY
  39. 39. INSERT CHAPTER TITLEHEY, WE HAVE AN IDEA! (SKETCH)
  40. 40. INSERT CHAPTER TITLE
  41. 41. INSERT CHAPTER TITLE
  42. 42. INSERT CHAPTER TITLE !43 BUT CAN IT TECHNICALLY WORK??
  43. 43. INSERT CHAPTER TITLEIS IT USEFUL? HELPFUL? DESIRABLE? !44
  44. 44. BUT, WAIT...THERE’S MORE
  45. 45. INSERT CHAPTER TITLEDOES IT LOOK GOOD? CONSISTENT UI? !46
  46. 46. INSERT CHAPTER TITLE CAN IT WORK ON EVERY SCREEN ON THE PLANET???
  47. 47. ...AND MORE
  48. 48. INSERT CHAPTER TITLEPROTOTYPING THE APP STORE SCREENFLOW
  49. 49. Why? ‣ Increased new user engagement by 80% ‣ Increased new user conversion to premium by 1000% ! —> We wanted to make sure this was not just usable, but desirable and delightful
  50. 50. Why prototype mobile first? ‣ Clarity and focus ‣ Limit feature creep ‣ Test in the wild ‣ Success is scalable
  51. 51. RAPID ITERATIVE PROTOTYPING IN THE WILD
  52. 52. INSERT CHAPTER TITLE
  53. 53. PROTOTYPING TOOLS !54
  54. 54. FLINTO
  55. 55. DEMO: POP APP
  56. 56. POP
  57. 57. POP
  58. 58. POP
  59. 59. PAPER
  60. 60. INSERT CHAPTER TITLE
  61. 61. INSERT CHAPTER TITLE Tool Barrier to Entry Cost Time Devices Transitions Shareability Code High Free High All Yes Remote Axure Medium $289 Medium All Yes Remote Keynotopia Medium $99 Low All No Remote Flinto Low $8/mo Lower iPhone Yes Remote POP App Lower Free Lower iPhone Android Yes Remote Photo Album Lower Free Lower iOS Android Sort of In-person Paper Lowest Free Lowest All Yes In-person PROTOTYPING TOOLS !63
  62. 62. EXERCISE: PAPER PROTOTYPING !64
  63. 63. INSERT CHAPTER TITLEEXERCISE: PAPER PROTOTYPE !65 ‣ Break up into pairs. ‣ Create a paper prototype for a mobile photo-sharing tool. ‣ Invent your own photo app or prototype the iPhone camera app, Instagram, Flickr, or an app of your choice. ‣ Combine two teams. ‣ Test your prototype on your new teammates. ‣ Make any modifications or revisions. ‣ Test your prototype one more time. ‣ Tools: index cards, Sharpies.
  64. 64. EXERCISE: SWIPEABLE AND TAPPABLE PROTOTYPES WITH PHOTO GALLERY AND POP APP !66
  65. 65. INSERT CHAPTER TITLEEXERCISE: SWIPEABLE AND TAPPABLE PROTOTYPES !67 ‣ Split up into pairs (same as before) ‣ Photograph key screens from your paper prototype in order ‣ Swipe through your flows in the photo gallery app ! ‣ Go to iTunes App Store on your phone ‣ Search for “pop app” ‣ Download POP app ‣ Play along ‣ Stitch your key screens together using POP app
  66. 66. ADDITIONAL RESOURCES ‣ Mobile Frontier, Rachel Hinman ‣ (Rosenfeld Media, promo code: LICHAW) ‣ Tapworthy, Josh Clark ‣ Mobile First, Luke Wroblewski ‣ Responsive Design, Ethan Marcotte
  67. 67. THANK YOU. DONNA LICHAW @DLICHAW GREATNORTHELECTRIC.COM
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×