Mobile Prototyping

transcript

!1MOBILE PROTOTYPING

DONNA LICHAW @DLICHAW

GREATNORTHELECTRIC.COM

@dlichaw

WHY PROTOTYPE?!4

KEY OBJECTIVE(S) AGENDA

RESOURCESDELIVERABLE

WHY PROTOTYPE?

Bill Buxton, Sketching User Experiences

Design

“Branching Exploration”

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

INSERT CHAPTER TITLESTORYBOARDS

Good for:

‣ Getting started

‣ Product/process flows

‣ Covering touchpoints

‣ Product-market fit

‣ Fast

‣ Cheap

‣ Easy

‣ Disposable

‣ None

INSERT CHAPTER TITLEPAPER PROTOTYPES

Good for:

‣ Brainstorming UIs

‣ Proofs of concept

‣ Quick user feedback

‣ Fast

‣ Cheap

‣ Easy

‣ Disposable

‣ 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

‣ Detailed

‣ Faster than code

‣ Cheaper than code

‣ 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

‣ Detailed

‣ Faster than code

‣ Cheaper than code

‣ 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

‣ Fast

‣ Cheap

‣ Easy

‣ Highly shareable

!Cons:

‣ Slower than paper

‣ Precious-ish

INSERT CHAPTER TITLECONCIERGE !17

Good for:

‣ Product market fit

‣ User feedback

‣ Fast

‣ Cheap

‣ Easy

‣ 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:

‣ Troubleshooting

‣ Screen flow

‣ User feedback

‣ Living spec

‣ Fast-ish

‣ Cheap-ish

‣ Easy-ish

‣ Extra step

‣ Slow-ish

‣ Expensive-ish

‣ Difficult-ish

MOBILE UI PATTERNS

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

‣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

‣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 !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

‣ 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

PROTOTYPING TOOLS

FLINTO

DEMO: POP APP

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

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

INSERT CHAPTER TITLEEXERCISE: SWIPEABLE AND TAPPABLE PROTOTYPES

‣ 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