• Like
Mobile Prototyping
Upcoming SlideShare
Loading in...5
×

Mobile Prototyping

  • 4,420 views
Uploaded 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 …

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).

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,420
On Slideshare
0
From Embeds
0
Number of Embeds
11

Actions

Shares
Downloads
111
Comments
2
Likes
21

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. !1 MOBILE PROTOTYPING DONNA LICHAW @DLICHAW GREATNORTHELECTRIC.COM
  • 2. 2 @dlichaw
  • 3. 3
  • 4. WHY PROTOTYPE? !4
  • 5. KEY OBJECTIVE(S) AGENDA RESOURCESDELIVERABLE WHY PROTOTYPE? Bill Buxton, Sketching User Experiences Design “Branching Exploration” v Prototyping “Incremental iterative refinement”
  • 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. INSERT CHAPTER TITLEWHY PROTOTYPE? !7 ‣ Communicate functionality ‣ Test ideas ‣ Refine ideas ‣ Refine user interfaces (screen and flow) ‣ Test usability
  • 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. TYPES OF PROTOTYPES !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. 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. 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. INSERT CHAPTER TITLE SWIPEABLE PHOTO GALLERY (SKETCHES)
  • 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. 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. 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. INSERT CHAPTER TITLE STATIC HTML, RESPONSIVE Good for: ‣ Troubleshooting scalability issues ! Pros: ‣ See what the user sees ! Cons: ‣ Slow
  • 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. MOBILE UI PATTERNS !20
  • 20. IOS UI ELEMENTS
  • 21. IOS UI ELEMENTS (CONT.) Tables
  • 22. IOS UI ELEMENTS (CONT.)
  • 23. IOS VIEWS
  • 24. TEMPORARY VIEWS
  • 25. GESTURES
  • 26. GESTURES (CONT.)
  • 27. IOS ELEMENTS
  • 28. ‣ http://pttrns.com ‣ http://www.mobile-patterns.com/ ‣ http://inspired-ui.com/ MOBILE UI PATTERN GALLERIES
  • 29. DESIGN PRINCIPLES !30
  • 30. DESIGN PRINCIPLES ‣ Easier to scale up UIs than to scale down ‣ Provide continuity across devices and touchpoints
  • 31. ‣ Focus on content over navigation ‣ Focus on primary tasks (1 per screen) DESIGN PRINCIPLES
  • 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. DESIGN PRINCIPLES
  • 34. ‣ Auto-save ‣ Multi-tasking ‣ Let users pick up where they left off ‣ Same device ‣ Other devices Other touch points DESIGN PRINCIPLES
  • 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. ‣ 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. CASE STUDIES !38
  • 38. LOW TO HIGH FIDELITY
  • 39. INSERT CHAPTER TITLEHEY, WE HAVE AN IDEA! (SKETCH)
  • 40. INSERT CHAPTER TITLE
  • 41. INSERT CHAPTER TITLE
  • 42. INSERT CHAPTER TITLE !43 BUT CAN IT TECHNICALLY WORK??
  • 43. INSERT CHAPTER TITLEIS IT USEFUL? HELPFUL? DESIRABLE? !44
  • 44. BUT, WAIT...THERE’S MORE
  • 45. INSERT CHAPTER TITLEDOES IT LOOK GOOD? CONSISTENT UI? !46
  • 46. INSERT CHAPTER TITLE CAN IT WORK ON EVERY SCREEN ON THE PLANET???
  • 47. ...AND MORE
  • 48. INSERT CHAPTER TITLEPROTOTYPING THE APP STORE SCREENFLOW
  • 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. Why prototype mobile first? ‣ Clarity and focus ‣ Limit feature creep ‣ Test in the wild ‣ Success is scalable
  • 51. RAPID ITERATIVE PROTOTYPING IN THE WILD
  • 52. INSERT CHAPTER TITLE
  • 53. PROTOTYPING TOOLS !54
  • 54. FLINTO
  • 55. DEMO: POP APP
  • 56. POP
  • 57. POP
  • 58. POP
  • 59. PAPER
  • 60. INSERT CHAPTER TITLE
  • 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. EXERCISE: PAPER PROTOTYPING !64
  • 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. EXERCISE: SWIPEABLE AND TAPPABLE PROTOTYPES WITH PHOTO GALLERY AND POP APP !66
  • 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. ADDITIONAL RESOURCES ‣ Mobile Frontier, Rachel Hinman ‣ (Rosenfeld Media, promo code: LICHAW) ‣ Tapworthy, Josh Clark ‣ Mobile First, Luke Wroblewski ‣ Responsive Design, Ethan Marcotte
  • 67. THANK YOU. DONNA LICHAW @DLICHAW GREATNORTHELECTRIC.COM