mobile prototyping essentials workshop: part 2

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

Hinman

Part II

Mobile Prototyping Essentials

Our plan for today…8:30am - Noon

What makes mobile UX different?Two Design/Mobile UX Exercises:• Identifying Mobile Needs• Ideating in the Wild

1:30pm – 5:30pm

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

Noon – 1pm - LUNCH

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

A

…and their instincts are not tuned to the nuance of mobile.

14

Try starting with instinct and intuition

AInstinct nounA natural or innate impulse, inclination, or tendency.

16

A

PC Prototypingis considered a

Luxury

17

ADesign involves

Instincts

18

A

Mobile Prototyping is

Essential

19

APrototyping

will help you develop

Mobile Instincts

20

ADesign involves

Instincts

22

APrototyping


Mobile Instincts

23

Our plan for this afternoon…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

24

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


25

Our plan for this afternoon…




26




Three hands-on activities

27


Okay, let’s get started!

28

Prototyping

29

Explore the “Unknowns”

“Whys” of prototyping

Improve your design decision-making

steal this slide!

Gather User Feedback

Communicate an Idea

Fine-tune an Idea

30

YouTube Video

Communicating an Idea or Experience

31

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

Gather User Feedback

32

Explore the Unknowns

33

Fine-Tune an Idea

34

Two Genres

35

Experiential Prototyping

36

Tactical Prototyping

37

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.

338

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.

339

Experiential Prototyping

40

43

Context Matters

44

Context will likely beyour blindside

45

Experiential Prototypingwill help you understand

context

Concept Videos

Experiential Prototypes

Storyboarding

Speed Dating Prototypes

Body Storming

Q:

“…users are just trying to muddle through situations in their lives. They often act without rationalizing.”

~ Andrew HintonInteractions 2012

Q:

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:

57

Bodystorming

58

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

59

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

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

60

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.



61

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.



62

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



63

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


64

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.



65

Bodystorming will help you capture the emotional tenor of

mobile interactions

66

Design in Context

Concept Videos


Storyboarding


Body Storming

Storyboarding

68

Why Storyboard?

69

1. In mobile, Context Matters

70

Even in situations in which a spirit of exploration and freedom exist, where faculty are free to experiment to work beyond physical

and social constraints, our cognitive habits often get in the

way.

Marshall McLuhan called it “the rear-view mirror effect,” noting that “We see the world through a

rear-view mirror. We march backwards into the future.”

“Hey, I’ve got this great idea …”

2. Qualify ideas

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

74


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

75


Rough out a basic story.


76

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


Rough out a basic story.


77

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


Rough out the basic story


78

81

ActivitySelect a concept…

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

88


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

89

Scott Davidoff of CMU

• Few design tools

• High Cost of Failure

• Unpredictable social consequences

Rapidly Exploring Application Design through Speed Dating


Concept Videos


Storyboarding


Body Storming

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

91

92

Step One

Identify most promisingconcepts

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

Step Two

Create storyboards thatdepict each concept


94

Step Three

Present storyboards tousers & gather feedback

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

Step Four

Create prototypes


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

Step Five

Conduct user enactments with prototypes


97

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

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

99

Flash Prototype

Tactical Prototypes


steal this slide!




Sketching/Paper Prototyping

100

Great mobile UIsspeak their power

101

Already talked about….

Edit!!!

102


RuthlessEditing

103


A

104


105

A Brave NUI World

107

Seated in a relatively predictable environment

Large screen enables multi-tasking

Keyboard and a mouse for input

108

We’re reaching the edges of what GUI can do

109

Most mobile smartphones have touchscreens with Natural User Interfaces

110

GUIs Become Brittleon a Mobile Device

Eight Principles of NUIs

1. Principle of Performance Aesthetics

2. Principle of Direct Manipulation

3. Principle of Scaffolding

4. Principle of Contextual Environments

5. Principle of Super Real

6. Principle of Social Interaction

7. Principle of Spatial Representation

8. Principle of Seamlessness

115

1. Principle of Performance Aesthetics

NUI experiences should be like an ocean voyage, the pleasure comes from the interaction, not the accomplishment.

Example:Part instrument, part composition and part artwork, the iPhone application Bloom enables users to create elaborate patterns and unique melodies by simply tapping on the screen

116

2. Principle of Direct Manipulation

Touch screens and gestural interaction functionality enable users to feel like they are physically touching and manipulating information with their fingertips. Example:The scrolling gesture is an example of the Principle of Direct manipulation

117

3. Principle of Scaffolding

Scaffolding is strong cue or guide that sets a user’s expectation by giving them an indication of how the interaction will unfold.

Example:The graphics that surround objects as the are placed on a Surface Table are an example of scaffolding.

118

4. Principle of Contextual Environments

Unlike GUIs that will present a user with the same set of options regardless of the context it is in, NUIs are responsive to the environment and suggests what the next interaction should be.

Example:Most mobile devices can locate themselves in time and space, and present interfaces that adapt to the orientation of the device.

119

5. Principle of the Super Real

Unlike GUIs that contains information in a cascading series of windows that resemble sheets of paper, successful NUIs extend objects in a logical way into the world of magic.

Example:Gestures like “pinch/zoom” are a logical extension into the world of magic

120

6. Principle of Social Interaction

Unlike GUI laptops that are optimized for individual use, systems with larger NUI formats like the Microsoft Surface Table or tablets, like the iPad, lend themselves to social computing experiences.

Example:Matt Jones of BERG Design Consultancy created an UI iPad sketch that explores the passable and sharable nature of the iPad as an object

121

7. Principle of Spatial Representation

Unlike GUI systems, where an icon serves as visual representation of information, NUIs represent information as objects. Example:NUI objects have auras, like attraction affordances pictured in this Surface Table application.

122

8. Principle of Seamlessness

Touchscreens, sensors embedded in hardware, and the use of gestural UIs allow NUI interactions to feel seamless for users because interactions are direct. There are fewer barriers between the user and information. Example:Coverflow UI on the iPhone is a seamless way to navigate content

123

GUI/NUI Chasm

Q:

Q:

Key differences between NUI and GUI

125

Defining Attributes of

GUIs…

126

127

GUI Mental Model = Computer as tool

128

GUI = Recognition“What you see is what you

get”

GUI = Metaphorics, containment and place

129

GUIs = Heavy Chrome, Icons & Buttons

130

Defining Attributes of

NUIs…

131

132

NUI Mental Model = Computer as media

133

NUI = Intuition“What you do is what you

get”

134

NUI = Fluid, Unmediated, and Organic

NUIs = Content is the Star

135

GUI = Experiences are anchored

136

137

NUI = Experiences Unfold

138

NUIs Unfold Like a Game

NUIs Can Feel Anchor-less

139

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 Pattern4141

142

Nested Doll Pattern

143

Hub and Spoke Pattern

144

Bento Box Pattern

145

Filtered View Pattern

ActivityDesign 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

146

152

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.

NUI characteristics:• Computer as Media • What you DO is what you get

• Content is the interface • Unfolding

GUI to NUI TranslationFocus on....

Boulder to Pebbles - Create UIs that speak their power with Ruthless Editing!

NUI Unfolding Patterns• Nested Doll • Hub and Spoke

• Bento Box • Filtered View

30 Minutes

155

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 Magazine156

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.


160


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

Photo courtesy of Diego Pulido and UX Magazine

161


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

6. Click and swipe away.

Photo courtesy of Diego Pulido and UX Magazine

5-10 Minutes

Q:

Now you can really start to have

some fun!

Q:

• Gesture• Sound/Voice• Image/Video• GPS• Animation• Facial Recognition• Sensors

Q:What revisions can you make now?

Q:

ActivityDesign Challenge!From GUI to NUI Modifications

Now that your concept is on the device, what new interactions does the device inspire?

Modify your existing interaction sequence with at least one NUI-inspired interaction

Create a new in-screen prototype using the new NUI-inspired interaction

1

2

3

168

20 Minutes

3Key Learnings

170

171

1. Sketching Rocks!

2. Get into the NUI Paradigm to design for

it

173Photo courtesy of Diego Pulido and UX Magazine

3. Get your work on a device as quickly as you can

174Photo courtesy of Diego Pulido and UX Magazine

3. GET YOUR WORK ON A DEVICE AS QUICKLY

AS YOU CAN!!!

supermodel

Use the medium you’re designing for

Making it pretty…

Flash Prototype

Tactical Prototypes


steal this slide!




Sketching

182

183


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!

185

186

http://keynotopia.com/

Even in situations in which a spirit of exploration and freedom exist, where faculty are free to experiment to work beyond physical

and social constraints, our cognitive habits often get in the

way.

Marshall McLuhan called it “the rear-view mirror effect,” noting that “We see the world through a

rear-view mirror. We march backwards into the future.”

In closing….

188

Fidelity

189

Failure

190

Prototyping is not a Panacea

191

Mobile presents an

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

Opinion!

are uniquely mobile

Great Mobile Experiences:

are sympathetic to contextspeak their power3

1

2

3

Q:

Q:

A

PC Prototypingis considered a

Luxury

A

Mobile Prototyping is

Essential

APrototyping


Mobile Instincts

196

Thank you!Email:[email protected]

mailto:[email protected]