69
! 1 MOBILE PROTOTYPING DONNA LICHAW @DLICHAW GREATNORTHELECTRIC.COM

Mobile Prototyping

Embed Size (px)

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

Citation preview

Page 1: Mobile Prototyping

!1MOBILE PROTOTYPING

DONNA LICHAW @DLICHAW

GREATNORTHELECTRIC.COM

Page 2: Mobile Prototyping

�2

@dlichaw

Page 3: Mobile Prototyping

�3

Page 4: Mobile Prototyping

WHY PROTOTYPE?!4

Page 5: Mobile Prototyping

KEY OBJECTIVE(S) AGENDA

RESOURCESDELIVERABLE

WHY PROTOTYPE?

Bill Buxton, Sketching User Experiences

Design

“Branching Exploration”

v

Prototyping

“Incremental iterative refinement”

Page 6: Mobile Prototyping

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

INSERT CHAPTER TITLEWHY PROTOTYPE? !7

‣Communicate functionality

‣Test ideas

‣Refine ideas

‣Refine user interfaces (screen and flow)

‣Test usability

Page 8: Mobile Prototyping

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
Page 10: Mobile Prototyping

TYPES OF PROTOTYPES

!10

Page 11: Mobile Prototyping

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

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

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

INSERT CHAPTER TITLE

SWIPEABLE PHOTO GALLERY (SKETCHES)

Page 15: Mobile Prototyping

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

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

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

INSERT CHAPTER TITLESTATIC HTML, RESPONSIVE

Good for:

‣ Troubleshooting scalability issues

!Pros:

‣ See what the user sees

!Cons:

‣ Slow

Page 19: Mobile Prototyping

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

MOBILE UI PATTERNS

!20

Page 21: Mobile Prototyping

IOS UI ELEMENTS

Page 22: Mobile Prototyping

IOS UI ELEMENTS (CONT.)

Tables

Page 23: Mobile Prototyping

IOS UI ELEMENTS (CONT.)

Page 24: Mobile Prototyping

IOS VIEWS

Page 25: Mobile Prototyping

TEMPORARY VIEWS

Page 26: Mobile Prototyping

GESTURES

Page 27: Mobile Prototyping

GESTURES (CONT.)

Page 28: Mobile Prototyping

IOS ELEMENTS

Page 29: Mobile Prototyping

‣ http://pttrns.com

‣ http://www.mobile-patterns.com/

‣ http://inspired-ui.com/

MOBILE UI PATTERN GALLERIES

Page 30: Mobile Prototyping

DESIGN PRINCIPLES

!30

Page 31: Mobile Prototyping

DESIGN PRINCIPLES

‣Easier to scale up UIs than to scale down

‣Provide continuity across devices and touchpoints

Page 32: Mobile Prototyping

‣Focus on content over navigation

‣Focus on primary tasks (1 per screen)

DESIGN PRINCIPLES

Page 33: Mobile Prototyping

‣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

DESIGN PRINCIPLES

Page 35: Mobile Prototyping

‣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

‣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

‣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

CASE STUDIES!38

Page 39: Mobile Prototyping

LOW TO HIGH FIDELITY

Page 40: Mobile Prototyping

INSERT CHAPTER TITLEHEY, WE HAVE AN IDEA! (SKETCH)

Page 41: Mobile Prototyping

INSERT CHAPTER TITLE

Page 42: Mobile Prototyping

INSERT CHAPTER TITLE

Page 43: Mobile Prototyping

INSERT CHAPTER TITLE !43BUT CAN IT TECHNICALLY WORK??

Page 44: Mobile Prototyping

INSERT CHAPTER TITLEIS IT USEFUL? HELPFUL? DESIRABLE? !44

Page 45: Mobile Prototyping

BUT, WAIT...THERE’S MORE

Page 46: Mobile Prototyping

INSERT CHAPTER TITLEDOES IT LOOK GOOD? CONSISTENT UI? !46

Page 47: Mobile Prototyping

INSERT CHAPTER TITLECAN IT WORK ON EVERY SCREEN ON THE PLANET???

Page 48: Mobile Prototyping

...AND MORE

Page 49: Mobile Prototyping

INSERT CHAPTER TITLEPROTOTYPING THE APP STORE SCREENFLOW

Page 50: Mobile Prototyping

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

Why prototype mobile first?

‣Clarity and focus

‣Limit feature creep

‣Test in the wild

‣Success is scalable

Page 52: Mobile Prototyping

RAPID ITERATIVE PROTOTYPING IN THE WILD

Page 53: Mobile Prototyping

INSERT CHAPTER TITLE

Page 54: Mobile Prototyping

PROTOTYPING TOOLS

!54

Page 55: Mobile Prototyping

FLINTO

Page 56: Mobile Prototyping
Page 57: Mobile Prototyping

DEMO: POP APP

Page 58: Mobile Prototyping

POP

Page 59: Mobile Prototyping

POP

Page 60: Mobile Prototyping

POP

Page 61: Mobile Prototyping

PAPER

Page 62: Mobile Prototyping

INSERT CHAPTER TITLE

Page 63: Mobile Prototyping

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

EXERCISE: PAPER PROTOTYPING

!64

Page 65: Mobile Prototyping

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

EXERCISE: SWIPEABLE AND TAPPABLE PROTOTYPES WITH PHOTO GALLERY AND POP APP

!66

Page 67: Mobile Prototyping

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

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

THANK YOU.

DONNA LICHAW @DLICHAW GREATNORTHELECTRIC.COM