Mobile Prototyping Essentials - Part II

Mobile Prototyping Essentials

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

Hinman

Part IPart II

Our plan for today…8:30am - Noon

What makes mobile UX different?Three Design/Mobile UX Exercises:• Identifying Mobile Needs• Ideating in the Wild• Creating a Good Hand

1:30pm – 5:30pm

Mobile prototyping essentialsThree Mobile Prototyping Exercises• Storyboarding• Translating GUI to NUI• Creating an In-Screen Prototype

Noon – 1:30pm - LUNCH

are uniquely mobile

Great Mobile Experiences:

are sympathetic to contextspeak their power3

1

2

3

Our plan for today…8:30am - Noon

What makes mobile UX different?Three Design/Mobile UX Exercises:• Identifying Mobile Needs• Ideating in the Wild• Creating a Good Hand

1pm – 5pm

Mobile prototyping essentialsThree Mobile Prototyping Exercises• Storyboarding• Translating GUI to NUI• Creating an In-Screen Prototype

Noon – 1pm - LUNCH

Q:

What makes mobile UX different?

Q:

5

A :-(

7

Bad Decision-Making

11

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

12

Seated in a relatively predictable environment

Large screen enables multi-tasking

Keyboard and a mouse for input

13

14

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.

15

PrototypePrototypePrototypePrototypePrototypePrototypePrototypePrototype

16

A

PC Prototypingis considered a

Luxury

17

A

Mobile Prototyping is

Essential

18

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

19

A

Prototypes are the ultimate decision-making aid

20

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 interfaces

Overview of animation principles that can be incorporated into your mobile experiencesThree hands-on activities

21

Our plan for today…Review the four “whys” of mobile prototypingIdentify the two genres of prototyping and overview six prototyping methods

Review the key differences between NUI and GUI interfaces


22




23




24




25

Okay, let’s get started!

26

Prototyping

27

Explore the “Unknowns”

“Whys” of prototyping

Improve your design decision-making

steal this slide!

Gather User Feedback

Communicate an Idea

Fine-tune an Idea

28

YouTube Video

Communicating an Idea or Experience

29

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

Gather User Feedback

30

Explore the Unknowns

31

Fine-Tune an Idea

32

Two Genres

33

Experiential Prototyping

34

Tactical Prototyping

35

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.

336

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.

337

Experiential Prototyping

38

41

Context Matters

42

Context will likely beyour blindside

Context Frameworksteal this slide!

43

Context Frameworksteal this slide!

44

45

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

49

Bodystorming

Through Lines

In reality… people’s lives are messy

56

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

57

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

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

58

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.



59

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.



60

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



61

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


62

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.



63

Bodystorming will help you capture the emotional tenor of

mobile interactions

64

Design in Context

Concept Videos


Storyboarding


Body Storming

66


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

67

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

68

69

Step One

Identify most promisingconcepts

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

Step Two

Create storyboards thatdepict each concept


71

Step Three

Present storyboards tousers & gather feedback

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

Step Four

Create prototypes


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

Step Five

Conduct user enactments with prototypes


74

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

Concept Videos


Storyboarding


Body Storming

Storyboarding

76

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

78


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

79


Rough out a basic story.


80

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


Rough out a basic story.


81

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


Rough out the basic story


82

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

30 Minutes

Concept Videos


Storyboarding


Body Storming

Concept Videos

Nokia 888 communicator concept phone design by Tamer Nakisci 91

• High Impact

• Highly Shareable

• Good for High-Level Ideas

• Technology still in development

Concept Videos

Pros

94

• High Impact

• Highly Shareable

• Good for High-Level Ideas

• Technology still in development

Concept Videos

Pros

• Resource Intensive!!!

• Skill Intensive

• Cultural Fit

• Concept videos don’t make bad ideas good.

Cons

95

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

97

Flash Prototype

Tactical Prototypes


steal this slide!




Sketching/Paper Prototyping

98

Sketching

99

Great mobile UIsspeak their power

100

RuthlessEditing

101

102

A Brave NUI World

104

Seated in a relatively predictable environment

Large screen enables multi-tasking

Keyboard and a mouse for input

105

We’re reaching the edges of what GUI can do

106

Most mobile smartphones have touchscreens with Natural User Interfaces

107

GUIs Become Brittleon a Mobile Device

111

GUI/NUI Chasm

Key differences between NUI and GUI

112

Defining Attributes of

GUIs…

113

114

GUI Mental Model = Computer as tool

115

GUI = Recognition“What you see is what you

get”

GUI = Metaphorics, containment and place

116

GUIs = Heavy Chrome, Icons & Buttons

117

Defining Attributes of

NUIs…

118

119

NUI Mental Model = Computer as media

120

NUI = Intuition“What you do is what you

get”

121

NUI = Fluid, Unmediated, and Organic

NUIs = Content is the Star

122

123

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

124

125

NUI = Experiences Unfold

126

NUIs Unfold Like a Game

NUIs Can Feel Anchor-less

127

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 Pattern4129

130

Nested Doll Pattern

131

Hub and Spoke Pattern

132

Bento Box Pattern

133

Filtered View Pattern

A

134

Trick to unfolding =

Information boulders to pebbles

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

135

136

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.

30 Minutes

139

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 Magazine140

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.


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.


144


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

Photo courtesy of Diego Pulido and UX Magazine

145


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

6. Click and swipe away.

Photo courtesy of Diego Pulido and UX Magazine

146

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

147

148


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!

150

Flash Prototype

Tactical Prototypes


steal this slide!




Sketching

152

Shapeshifting1

A Brave NUI World

Comfortable Computing

Emergent Mobile Topics

2

3

Shapeshifting

“We made the web in the image of ourselves, and in the U.S., that means OBESE.”

~Jason Grigsby

A

158

Q:

“I think a lot of web design in the past five to ten years is actually just a reflection of print again. We’ve been designing for one context, which isn’t much better than a PDF document.” ~ Bryan Rieger

Q:

160

Q:

“Our obsession with layout (carried over from print design) keeps us from seizing much bigger opportunities on mobile.”

~ Luke Wroblewski

Q:

161

Shapeshifting

Plans & Situated Action

Mutual Reconfiguration

Q:

Suchman’s theory of mutual reconfiguration suggests a person’s capacity to act (their agency) is reconfigured when it comes into contact with another thing or person - that human action is constantly constructed and reconstructed from dynamic interactions with the material and social worlds.

Q:

Q: TwoDesign Implications

Q:

Q:

Q:

1. Shift in contextual assumptions

Q:

Q:

2. Shift in our sensibilities around content as a design material

Q:

Q:

1. Shift in contextual assumptions

A

Throughout the design process, our work should be situated in the contexts where it will be used.

Go to the Gemba

Q:

Q:

2. Shift in our sensibilities around content as a design material

Design as the manipulation of materials.

Q:

Q:

Pages and screensare not our design material

Content as a design material.

Q:

“Right now many designers end up focusing a lot of energy on the overlying view – the whole template and look and feel. But the smaller the screen gets, the less that stuff matters.

One of the most important things we’ve started looking at is writing and working with APIs rather than designing ‘pages’ for one context.”

~Stephanie Rieger

Q:

Q:

“For so much digital content, there is no good metaphor to render anymore – the content is just information, text and images – so new approaches to interaction and visual UI design are needed.”

~Mike Kruzeniski

Shapeshifting1

A Brave NUI World

Comfortable Computing

Emergent Mobile Topics

2

3

Mark Weiser

Q:

Q:

Q:

Q:“The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable from it.”

~ Mark WeiserThe Computer for the 21st Century

Q:

Q:

1991

Tab Pad Yard-Sized Board

Mobile devices are the gateway drug for ubicomp

Following toddlers into the future

Q:

Q:“I like cuddling up in bed with Netflix on the iPad instead of sitting in front of the TV. It’s more comfortable to go to bed with a movie the same way I used to go to bed with a book”

~ NorbertiPad Study Participant

Q:

Q:“It’s almost like my blankie… I curl up in bed with it, or on the couch. I usually have it with me, regardless of extenuating circumstances ”

~ EriniPad Study Participant

“It’s almost like my blankie…”

Say Goodbye to Done

213

This should look familiar…

214

The web has evolved around a task-efficiency model.

Mobile can be different.

This should look familiar…

215

Tasks are about completion…

216


Possibilities are interactions that accrue over time…

… or facilitate exploration…

217



… or facilitate exploration…

218



..or are about SENSINGINTENT!

226

Fidelity

227

Failure

228

Prototyping is not a Panacea

A

PC Prototypingis considered a

Luxury

A

Mobile Prototyping is

Essential

are uniquely mobile

Great Mobile Experiences:

are sympathetic to contextspeak their power3

1

2

3

232

Mobile presents an

opportunity to invent new ways for users to interact with information.

Opinion!

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: May 2012

Follow along…

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

Mobile Prototyping Essentials - Part II

Design

Transcript of Mobile Prototyping Essentials - Part II