Mobile Prototyping Essentials

Title
Mobile Prototyping EssentialsWeb Directions Unplugged
Rachel Hinman
Senior Research Scientist
Nokia Research Lab
Palo Alto, California USA

I used to be a web designer, too

How can we streamline the checkout process
What makes mobile UX different?
Q:
Q:

Where do I begin

Where do I begin
“I would have made different choices.”

Where do I begin
Key Difference =
Different Design Choices

Our plan for today…
Our plan for today
Identify where things usually go wrong during the mobile UX process

Our plan for today
Review the four “whys” of prototyping

Our plan for today
Identify the two genres of mobile prototyping

Our plan for today
Overview/how-to of six mobile prototyping methods

Along the way…
Along the way
Watch for slides with this orange label!
Slides Worth Keeping
Design Principles
Design Activities
Shameless Opinion

Okay, let’s get started!
Okay… let’s get started

A
What are the similarities

?
16
Web designers know how to work in a rapidly evolving field

17

Bad Decision-Making
18

The final diamond is where good design decisions matter most…
19

The final diamond is where good design decisions matter most…
…and where designers new to mobile have the least domain specific skill and confidence.
20

Prototype
Prototype
Prototype
Prototype
Prototype
Prototype
21
Prototype

PC Prototypingis considered a
Luxury
A
Um… duh!

Mobile Prototyping is
Essential
A
Um… duh!

24
Differences in the mobile environment
Seated in a relatively predictable environment
Large screen enables multi-tasking
Keyboard and a mouse for input

Differences in the mobile environment
Highly variable context and environment
Small screen size and limited text input
UI takes up the entire screen
Difficult to multi-task and easy to get lost
25

Designers new to mobile don’t have the domain specific skills or heuristics to lean on.
A
Um… duh!

The best way to develop those skills is to prototype early and often.
A
Um… duh!

Prototypes are the ultimate
decision-making aid.
A
Um… duh!

What we learned from the web
steal this slide!
“Whys” of prototyping
Improve your design decision-making
Communicate an Idea
Gather User Feedback
Explore the “Unknowns”
Fine-tune an Idea

Communicating an Idea or Experience
YouTube Video

Hypothesis vs. Agenda
Gather User Feedback

Exploring the Unknowns

Fine-Tune an Idea

Two Genres
34

Tactical Prototyping

Experiential Prototyping

You are working on a “focused” mobile project.
1
Sympathy to context principles
Tactical Prototyping:
Best suited for design explorations where:
steal this slide!
2
Target mobile hardware and software scope is known.
3
The design space is relatively known.

You are working on a “broader” mobile project.
1
Experiential Prototyping:
steal this slide!
2
Target mobile hardware and software scope is unknown.(perhaps being created).
3
The design space is relatively unchartered.

Tactical Prototyping

steal this slide!
Tactical Prototypes
Sketching
In-Screen Mobile Prototypes
Mobile Browser Prototypes
Keynote/Powerpoint Prototypes
Flash Prototype
Platform Specific Prototype

Sketching

Great Mobile UIs Speak their Power

Speak their power?
Huh?
Q:
A

A light switch

Shopping cart
46

Shopping cart
47

We can annotate expectations in the web world
48

Free two-day shipping
Look inside the book
REALLY!Look inside the book
Get it new OR used!
Sell mine
Add to cart
Shipping!
Collectible!
Maybe a kindle!

Options have to be apparent and intuitive in mobile for people to

51
Text entry will never be easy
Design for partial attention and interruption

How do you make interfaces that speak their power
How do I create mobile interfaces that “speak their power”?
Q:
A

Edit!!!
53

RuthlessEditing
54

Each card speaks it’s power
55
It’s like a game of cards

Let the Content be the Star
56
It’s like a game of cards

Pivoting people through information
57

Pivoting people through information
Claiming you can’t draw get’s you labeled a “whiner”
58

steal this slide!
Tips for Ruthless Editing
What’s the primary purpose of this screen?
What are the 3-5 secondary actions this screen must support?
What is the most intuitive way to visualize this information?
Will users know how to interact with the screen within three seconds?
Is the information on this screen too dense? What can be removed?

Paper In-Screen Prototypes
Following Process documented by Diego Pulidovia UX Magazine – Paper In-Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine
60
http://www.uxmag.com/design/paper-in-screen-prototyping

Paper Prototype example
1. Sketch screen layouts.

61
Photo courtesy of Diego Pulido and UX Magazine


2. Scan or photograph
the sketches.

62


2. Scan or photograph
the sketches.
3. Making sizing
adjustments to the
files.

63

4. Save the resized images in a file format supported by the mobile device. Be mindful of the sequencing of your screens and label files accordingly.

64

4. Save the resized images in a file format supported by the mobile device. Be mindful of the sequencing of your screens and label files accordingly
5. Import the files into the mobile device’s photo gallery.

65

4. Save the resized images in a file format supported by the mobile device. Be mindful of the sequencing of your screens and label files accordingly
5. Import the files into the mobile device’s photo gallery.
6. Click and swipe away.

66

Paper Prototyping
67

Mobile Browser Prototypes
69

Keynote/Powerpoint Prototypes
70

71

steal this slide!
Reasons for Prototyping in Keynote/Powerpoint
It’s super efficient and fast!
Level of fidelity is high – gives you an end result that looks and feels like a real app.
Supports *some* gestures and transitions.
It’s as close as you can get to the real thing without digging into code.

SCROLL
GUI = “Desktop” and “Pages” as Anchors
74

NUIs Can Feel Anchor-less
75

[
]
+
=
76

=
77

Animation & TransitionsA new design elements that can:
steal this slide!
Reinforce cognition.
Help users form a mental model of how information will “unfold”.
Provide cues for interaction.
Help make your experience feel more intuitive for users.

79

Practice
80

How to prototype interactive iPad applications in 30 minutes or less using Apple KeynoteBy Amir Khella
Photo courtesy of Amir Khella
81

Experiential Prototyping

83
Context Framework
Context Framework
steal this slide!

84
Context Framework
Context Framework
steal this slide!

85
Relationships Chording
Orchestration and Inflection

You are working on a “broader” mobile project.
1
Experiential Prototyping:
steal this slide!
2
Target mobile hardware and software scope is unknown.(perhaps being created).
3
The design space is relatively unchartered.

Experiential Prototypes
Storyboarding
Body Storming
Speed Dating Prototypes
Concept Videos

Storyboarding
88

89
“in the wild” ideation

Mobile UX Storyboarding
Identify the central idea(s) you are trying to communicate.

Create a character and identify the key issues he/she currently faces.

Rough out the basic story

Rough out the basic story
Start filling in the cells. Rough out the complete story, then fill in details.

95

96

Bodystorming
97

In reality… people’s lives are messy

Similar to improvisational theater, body storming involves acting out possible scenarios or use cases with actors and props. Unlike computer-based technology that is logic based and only makes visible the conditions that existed before, people are illogical, perceptive, aware, and self-correcting. Body storming is a technique that helps capture and harness these messy yet essential aspects of human behavior and account for them in the mobile design process.
104

Select groups of five to eight participants in a troupe.
Photo by Christian Crumlish (xian), 2009 on Flickr
105

Select groups of five to eight participants in a troupe.
Identify 3-5 experience scenarios for your troupe to “perform.” Examples: Purchasing a cup of coffee with my iPhone, selecting which phone to purchase in a carrier’s store.
106

3. Every player must have a role; there should be no “trees” that are just for background. Use large cards that label the roles people are playing.

107

4. Props can have feelings, thoughts, and the ability to speak. Use thought-bubble cards to show what a participant is thinking versus saying.
108

5. Have a narrator or color commentator who can explain things. The narrator can pretend the scenario is like television, using a remote to stop action, rewind, or fast-forward.
109

6. De-brief after each scenario. What did the group learn? What was surprising? What seemed important? Capture what you learned from the exercise and discuss how you can integrate it into what happens next.
110

Design in Context
111

Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
112

Scott Davidoff of CMU
Few design tools
High Cost of Failure
Unpredictable social consequences
Rapidly Exploring Application Design through Speed Dating
113

Builds on three theories:
Abundance brings perspective.
1
2
Need to cross boundaries to know they exist.
3
Multiple low-cost engagements with multiple concepts enables a broader perspective to emerge.

115
“in the wild” ideation

1. Need Validation
Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
116

1. Need Validation
117

2. User Enactments
Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
118

2. User Enactments
Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
119

Concept Videos
Nokia 888 communicator concept phone design by Tamer Nakisci
120

121

122

Concept Videos
Pros
High Impact
Highly Shareable
Good for High-Level Ideas
Technology still in development
123

Concept Videos
Pros
Cons
High Impact
Highly Shareable
Good for High-Level Ideas
Technology still in development
Resource Intensive!!!
Skill intensive
Cultural Fit
Concept videos don’t make bad ideas good.
124

Things to remember…
125

Fidelity
126

Failure
127

Prototyping is not a Panacea
128

Our plan for today
Overview/how-to of six mobile prototyping methods

PC Prototypingis considered a
Luxury
A
Um… duh!

Mobile Prototyping is
Essential
A
Um… duh!

Good luck
Good luck!

Thanks, and next up…
Thank you!
Email:
rachel.hinman@nokia.com

Oh! By the way, I’m writing a book..
The Mobile Frontier
A Guide for Designing Mobile Experiences
Expected Publication: late 2011
Follow along…

Q?
Q&A: final break

http://www.jvetrau.com	728
http://www.rachelhinman.com	563
http://www.theuxbookmark.com	404
http://www.webdirections.org	343
http://www.rosenfeldmedia.com	318
http://www.boobox.ru	274
http://feeds.feedburner.com	113
http://rosenfeldmedia.com	106
https://pramati.qontext.com	15
http://usabilityandwebdes.collected.info	10
url_unknown	5
http://webcache.googleusercontent.com	3
http://paper.li	3
http://www.slideshare.net	2
http://translate.googleusercontent.com	1
http://mvuinc.tumblr.com	1
http://www.google.com HTTP	1
http://strawberryj.am	1
http://ucdteamatwps.posterous.com	1
http://chinaberry:15871	1
http://www.hanrss.com	1
http://www.dashdot.nl	1
http://www.twylah.com	1

Mobile Prototyping Essentials

by Rachel Hinman on May 20, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

23 Embeds 2,896

Statistics

Mobile Prototyping Essentials — Presentation Transcript