Mobile Prototyping
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Mobile Prototyping

  • 5,496 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
5,496
On Slideshare
4,207
From Embeds
1,289
Number of Embeds
11

Actions

Shares
Downloads
108
Comments
2
Likes
20

Embeds 1,289

http://www.iphone-entreprise.com 1,001
http://www.greatnorthelectric.com 157
https://donna-lichaw-5yo3.squarespace.com 65
https://twitter.com 40
http://www.linkedin.com 10
http://chart-test.boh.local 4
http://cloud.feedly.com 4
http://lanyrd.com 4
http://ranksit.com 2
http://eventifier.com 1
http://www.pinterest.com 1

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