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