mobile prototyping essentials

UX Australia 2011Mobile Prototyping

Essentials

Rachel HinmanSenior Research Scientist Nokia Research Lab Palo Alto, California USA

Hinman

Q:

What makes mobile UX different?

Q:

3

A :-(

5

Bad Decision-Making

9

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

10

Seated in a relatively predictable environment

Large screen enables multi-tasking

Keyboard and a mouse for input

11

12

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

A

Designers new to mobile don’t have the domain specific skills or heuristics to lean on.

13

PrototypePrototypePrototypePrototypePrototypePrototypePrototypePrototype

14

A

PC Prototypingis considered a Luxur

y15

A

Mobile Prototyping is

Essential16

The best way to develop those skills is to prototype early and often.

17

A

Prototypes are the ultimate decision-making aid

18

Our plan for today…Review the four “whys” of mobile prototypingIdentify the two genres of prototyping and overview of six prototyping methodsReview the key differences between NUI and GUI interfacesOverview of animation principles that can be incorporated into your mobile experiencesThree hands-on activities

19


20


21


22


23

Okay, let’s get started!

24

Prototyping

25

Explore the “Unknowns”

“Whys” of prototypingImprove your design decision-making

steal this slide!

Gather User Feedback

Communicate an Idea

Fine-tune an Idea26

YouTube Video

Communicating an Idea or Experience

27

http://www.youtube.com/watch?v=IX-gTobCJHs

Gather User Feedback

28

Explore the Unknowns

29

Fine-Tune an Idea

30

Two Genres

31

Experiential Prototyping

32

Tactical Prototyping

33

You are working on a “broader” mobile project.1

Experiential Prototyping:Best suited for design explorations where:

Target mobile hardware and software scope is unknown.(perhaps being created).

2

steal this slide!

The design space is relatively unchartered.

334

You are working on a “focused” mobile project.1

Tactical Prototyping:Best suited for design explorations where:

Target mobile hardware and software scope is known.

2

steal this slide!

The design space is relatively known.

335

Experiential Prototyping

36

39

Context Matters

40

Context will likely beyour blindside

Context Framework steal this slide!

41

Context Framework steal this slide!

42

43

Experiential Prototypingwill help you understand

context

You are working on a “broader” mobile project.

Experiential Prototyping:Best suited for design explorations where:

Target mobile hardware and software scope is unknown.(perhaps being created).

The design space is relatively unchartered.

1

2

3

Concept Videos

Experiential Prototypes

Storyboarding

Speed Dating Prototypes

Body Storming

46

Bodystorming

Through Lines

In reality… people’s lives are messy

53

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.

Photo by Christian Crumlish (xian), 2009 on Flickr 54

1. Select groups of five to eight participants in a troupe.

http://www.flickr.com/photos/xian/3763800332/in/photostream/

55

1. Select groups of five to eight participants in a troupe.

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

Photo by Christian Crumlish (xian), 2009 on Flickr


56

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.



57

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



58

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.Photo by Christian Crumlish (xian), 2009 on

Flickr


59

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. Photo by Christian Crumlish (xian), 2009 on

Flickr


60

Bodystorming will help you capture the emotional tenor of

mobile interactions

61

Design in Context

Concept Videos


Storyboarding


Body Storming

63


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

http://scottdavidoff.com/downloads/publications/rapidly-exploring-application-design-through-speed-dating.pdf

64

Scott Davidoff of CMU• Few design tools

• High Cost of Failure

• Unpredictable social consequences

Rapidly Exploring Application Design through Speed Dating


Abundance brings perspective.

Speed Dating PrototypesBuilds on three theories:

Need to cross boundaries to know they exist.

Multiple low-cost engagements with multiple concepts enables a broader perspective to emerge.

1

2

3

65

66

Step OneIdentify most promisingconcepts

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

Step TwoCreate storyboards thatdepict each concept


68

Step ThreePresent storyboards tousers & gather feedback

Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 69

Step FourCreate prototypes


Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 70

Step FiveConduct user enactments with prototypes


71

Speed Dating Prototypes are especially well-suited for gathering user impressions of a new-to-the-world experience

Concept Videos


Storyboarding


Body Storming

Concept Videos

Nokia 888 communicator concept phone design by Tamer Nakisci 73

• High Impact

• Highly Shareable

• Good for High-Level Ideas

• Technology still in development

Concept VideosPros

76

• High Impact

• Highly Shareable

• Good for High-Level Ideas

• Technology still in development

Concept VideosPros

• Resource Intensive!!!

• Skill Intensive

• Cultural Fit

• Concept videos don’t make bad ideas good.

Cons

77

78

The first step of creating a concept video is….

Concept Videos


Storyboarding


Body Storming

79

Storyboarding

80

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

82

Mobile UX StoryboardingIdentify the central idea(s) you are trying to communicate. Create a character and identify the key issues he/she currently faces.

83


Rough out a basic story.

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

84

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


Rough out a basic story.


85

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


Rough out the basic story


86

ActivityYour Design Challenge!Storyboarding

89

ActivityYour Design Challenge!Storyboarding: Ideas

90

ActivityYour Design Challenge!Storyboarding

Select one concept you’d like to explore more deeply using the storyboarding technique.

Storyboard one scenario using the templates provided.

Remember to identify the key issues the character faces and rough out the complete story before filling in details.

1

2

3

Tactical Prototyping

Flash Prototype

Tactical Prototypes

In-Screen Mobile Prototypes

steal this slide!

Keynote/Powerpoint Prototypes

Mobile Browser Prototypes

Platform Specific Prototype

Sketching/Paper Prototyping

93

Flash Prototype

Tactical Prototypes


steal this slide!




Sketching/Paper Prototyping

94

Sketching

95

Great mobile UIsspeak their power

96

AHuh?Q

:

97

101

We can annotate expectations in the web world

Add to cart

Free two-day shipping

Shipping!

Collectible!

Maybe a kindle!

Look inside the book

REALLY!Look inside the book

Get it new OR used!

Sell mine

102

104

Design for partial attention and interruption

AHow do I create mobile interfaces that “speak their power”?

Q:

105

Edit!!!

106

RuthlessEditing

107

108

A Brave NUI World

110

Seated in a relatively predictable environment

Large screen enables multi-tasking

Keyboard and a mouse for input

111

We’re reaching the edges of what GUI can do

112

Most mobile smartphones have touchscreens with Natural User Interfaces

113

GUIs Become Brittleon a Mobile Device

117

GUI/NUI Chasm

Key differences between NUI and GUI

118

Defining Attributes of

GUIs…

119

120

GUI Mental Model = Computer as tool

121

GUI = Recognition“What you see is what you

get”

GUI = Metaphorics, containment and place

122

GUIs = Heavy Chrome, Icons & Buttons

123

Defining Attributes of

NUIs…

124

125

NUI Mental Model = Computer as media

126

NUI = Intuition“What you do is what you

get”

127

NUI = Fluid, Unmediated, and Organic

NUIs = Content is the Star128

129

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

GUI = Experiences are anchored

130

131

NUI = Experiences Unfold

132

NUIs Unfold Like a Game

NUIs Can Feel Anchor-less

133

The Nested Doll Pattern1

Mobile Experiences UnfoldPatterns for how mobile experiences unfold and progressively reveal their nature

steal this slide!

The Hub and Spoke Pattern2

The Bento Box Pattern3

The Filtered View Pattern4135

136

Nested Doll Pattern

137

Hub and Spoke Pattern

138

Bento Box Pattern

139

Filtered View Pattern

A

140

Trick to unfolding = Information boulders to pebbles

A

141

A

142

ActivityYour Design Challenge!From GUI to NUI

143

ActivityYour Design Challenge!From GUI to NUI

Identify an interaction sequence you’d like to recreate using NUI principles.

Sketch out the interaction using the templates provided.

Identify how you’d like your mobile experience to unfold.

1

2

3

144

147

ActivityREMEMBER!It’s easy to go crazy and try to do it all.Instead, focus on applying what we’ve covered…

Understanding the differences between graphical and natural user interfaces.

Experimenting with how your mobile experience can unfold and and progressively reveal its nature.

Play around with the unfolding patterns that have been presented… or invent some of your own.

149

Paper In-Screen Prototypes

Following Process documented by Diego Pulido via UX Magazine – Paper In-Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine

http://www.uxmag.com/design/paper-in-screen-prototyping

1. Sketch screen layouts.

Photo courtesy of Diego Pulido and UX Magazine 150

1. Sketch screen layouts. 2. Scan or photograph the sketches.


1. Sketch screen layouts. 2. Scan or photograph the sketches.

3. Making sizing adjustments to the files.

Photo courtesy of Diego Pulido and UX Magazine

152

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.


154


5. Import the files into the mobile device’s photo gallery.


155


5. Import the files into the mobile device’s photo gallery.

6. Click and swipe away.


156

ActivityYour Design Challenge!Create an in-screen prototype.

Hang your screen designs on the wall.

Photograph each design.

Transfer photos from the camera to computer and make any sizing adjustments.

Sync images to your mobile device and swipe away….

Flash Prototype

Tactical Prototypes


steal this slide!




Sketching

157

158

Paper Prototyping

160


161


LOGOTagline

163Edit

LOGOTagline

164Edit

Sydney Opera HouseThere is no doubt that the Sydney Opera House is his masterpiece. It is one of the great iconic buildings of the 20th century, an image of great beauty that has become known throughout the world – a symbol for not only a city, but a whole country and continent.

LOGOTagline

165Edit


LOGOTagline

166Edit


LOGOTagline

167Edit

LOGOTagline

167Edit


LOGOTagline

168Edit

Supports *some* gestures and transitions.

Reasons for Prototyping in Keynote/Powerpoint

steal this slide!

Level of fidelity is high – gives you an end result that looks and feels like a real app.

It’s as close as you can get to the real thing without digging into code.

It’s super efficient and fast!

169

Supports *some* gestures and transitions.

Reasons for Prototyping in Keynote/Powerpoint

steal this slide!

Level of fidelity is high – gives you an end result that looks and feels like a real app.

It’s as close as you can get to the real thing without digging into code.

It’s super efficient and fast!

170

Motion:New Design Material

171

Animation & TransitionsA new design elements that can:

steal this slide!

Help users form a mental model of how information will “unfold”.

Help make your experience feel more intuitive for users.

Reinforce cognition.

Provide cues for interaction.

172

Twelve Basic Principles of Animation

173

Principle OneSquash and Stretch

174

Principle OneSquash and Stretch

175

Principle TwoAnticipation

176

Principle TwoAnticipation

177

Principle ThreeStaging

178

Principle ThreeStaging

179

Principle FourStraight Ahead and Pose to Pose

180

Principle FourStraight Ahead and Pose to Pose

181

Principle FiveFollow Throughand Overlapping Action

182

183

Principle FiveFollow Throughand Overlapping Action

Principle SixSlow in and Out

184

Principle SixSlow in and Out

185

Principle SevenArcs

186

Principle SevenArcs

187

Principle EightSecondary Action

188

Principle EightSecondary Action

189

Principle NineTiming

190

Principle NineTiming

191

Principle TenExaggeration

192

Principle TenExaggeration

193

Principle Eleven and TwelveSolid Drawing and Appeal

194

195Sketches Courtesy of Greg NudelmenStoryboarding iPad Transitions

Specifying Transitions

http://boxesandarrows.com/view/storyboarding-ipad

Transitions and AnimationMethods for specifying motion:

Build a prototype of key motion phrases using PowerPoint, Keynote or other prototyping tool.

Include specifications on wireframes.

196

Hand drawn sketches.

197

Motion is an Art.There are no formulas.

198

Fidelity

199

Failure

200

Prototyping is not a Panacea

A

PC Prototypingis considered a Luxur

y

A

Mobile Prototyping is

Essential

Thank you!Email:[email protected]

Templates and Online Resources:www.rachelhinman.com/mobile_prototyping_essentials

mailto:[email protected]

Oh! By the way, I’m writing a book..

The Mobile FrontierA Guide for Designing Mobile Experiences

Expected Publication: late 2011

Follow along…

http://rosenfeldmedia.com/books/mobile-design/

206

Different platforms express characteristics differently