mobile prototyping
DESCRIPTION
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).TRANSCRIPT
!1MOBILE 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 Exploration”
v
Prototyping
“Incremental iterative refinement”
KEY OBJECTIVE(S) AGENDA
RESOURCESDELIVERABLE
WHY PROTOTYPE?
Bill Buxton, Sketching User Experiences
Design
“Getting the right design”v
Prototyping
“Getting the design right”
INSERT CHAPTER TITLEWHY PROTOTYPE? !7
‣Communicate functionality
‣Test ideas
‣Refine ideas
‣Refine user interfaces (screen and flow)
‣Test usability
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!
TYPES OF PROTOTYPES
!10
INSERT CHAPTER TITLESTORYBOARDS
Good for:
‣ Getting started
‣ Product/process flows
‣ Covering touchpoints
‣ Product-market fit
Pros:
‣ Fast
‣ Cheap
‣ Easy
‣ Disposable
Cons:
‣ None
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
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
INSERT CHAPTER TITLE
SWIPEABLE PHOTO GALLERY (SKETCHES)
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
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
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
INSERT CHAPTER TITLESTATIC HTML, RESPONSIVE
Good for:
‣ Troubleshooting scalability issues
!Pros:
‣ See what the user sees
!Cons:
‣ Slow
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
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 business
DESIGN PRINCIPLES
DESIGN PRINCIPLES
‣Auto-save
‣Multi-tasking
‣Let users pick up where they left off
‣Same device
‣Other devices
Other touch points
DESIGN PRINCIPLES
‣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
‣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
CASE STUDIES!38
LOW TO HIGH FIDELITY
INSERT CHAPTER TITLEHEY, WE HAVE AN IDEA! (SKETCH)
INSERT CHAPTER TITLE
INSERT CHAPTER TITLE
INSERT CHAPTER TITLE !43BUT 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 TITLECAN 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 sure this was not just usable, but desirable and delightful
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
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
EXERCISE: PAPER PROTOTYPING
!64
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.
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 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
ADDITIONAL RESOURCES
‣ Mobile Frontier, Rachel Hinman
‣ (Rosenfeld Media, promo code: LICHAW)
‣ Tapworthy, Josh Clark
‣ Mobile First, Luke Wroblewski
‣ Responsive Design, Ethan Marcotte
THANK YOU.
DONNA LICHAW @DLICHAW GREATNORTHELECTRIC.COM