mobile ux- from principles to prototypes

8/13/2019 Mobile UX- From Principles to Prototypes

1/169


2/169

Mobile UX

Rachel HinmanSenior Research Scientist

Nokia Research Lab

Palo Alto, California USA

Hinman

Part I

From Principles to Prototypes

2004

I used to be a web designer, too

UX Immersion Conference, April 2012All materials 2012


3/169

Q:Where do I begin?

Where do I begin

How can we streamline the checkout process

Q:

What can we do with

mobile?

Q:

2



4/169

Q:Where do I begin?

Where do I begin

Our plan for today8: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 essentials

Three Mobile Prototyping Exercises

Storyboarding Translating GUI to NUI

Creating an In-Screen Prototype

Noon 1:30pm - LUNCH

3



5/169

8:30am - Noon


Similarities and differences between

designing for web and mobile

Three most important attributes of

great mobile experiences

A set of mobile design principles

Three mobile design activities

8:30am - Noon








4



6/169

8:30am - Noon








8:30am - Noon








5



7/169

Okay, lets get started!

Okay let"s get started

A

What are the similarities

What are the similarities?:

6



8/169

UX designers know how to work

in a rapidly evolving field

13

Web designers know how to work in a rapidly evolving field

UX designers understand how to create

experiences within technical constraints

14

Ability to work within technical constraints

7



9/169

UX designers use similar

tools and processes

15

Similar Tools Similar processes

A

What are the differences?

Q: What are the differences?:

8



10/169

A mobile phone is not a computer

17

A mobile phone is not a computer

A umm. duh!

Um duh!

9



11/169

19

Differences in the mobile environment

Seated in a relatively predictable environment

Large screen enables multi-tasking

Keyboard and a mouse for input

20





10



12/169

21


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

22

Mobile phones started out as a one-to-one

11



13/169

They evolved

23

Mobile phones evolved from the landline phone

24

12



14/169

26

Smartphone added

13



15/169

27

Smartphone added

27

The Rearview Mirror Effect

14



16/169

Even in situations in which a spirit of

exploration and freedom exist, where faculty

are free to experiment to work beyond physicaland social constraints, our cognitive habits

often get in the way.

Marshall McLuhan called it the rear-viewmirror effect, noting that We see the world

through a rear-view mirror. We marchbackwards into the future.

Even in situations in which a spirit of

exploration and freedom exist, where we are

free to experiment and work beyond physicaland social constraints,our cognitive habits often get in the way.

Marshall McLuhan called itthe rear-view mirror effect, noting that

We see the world through a rear-view mirror.We march backwards into the future.

30

Mobile presents an

opportunity to inventnew ways for users to

interact with information.

15



17/169

31

iPhone

Mobile phones arent really phones anymore

Hypothesis vs. Agenda

16



18/169



17



19/169


A

What are the differences?

Whats the first step?:

18



20/169

3Steps

37

38

Shift your perspective and point of view

Step One: Become familiar

with the medium youre designing for

19



21/169

39


NOEXCUSESBuy a modern mobile device

40


Step Two: Mobile culture indoctrination

20



22/169

41


Images needed

Observe the culture youre designing for

42


Step Three: Brace yourself

for a fast and exciting ride

21



23/169

43

Rapid Evolution

The rapid development of cell phones is killing

early cell phones much faster than it's killing any

of the early, older legacy technologies.

I think that is a real principle... something you

have to understand if you're going to be in this

line of work. It's very romantic. It's very fast

moving.

You are building dead lumps of plastic.

When people come out and they show you an

iPhone, or an Android... they are showing you

larval versions of something much more

sophisticated.

The world you are building right now is the

ground floor for something much larger -- and

the soil beneath that ground floor is violently

unstable.

-- Mobile Monday Amsterdam November 2008

are uniquely mobile

Great Mobile user experiences

Great Mobile Experiences:

are sympathetic to context

speak their power3

1

2

3

22



24/169

are uniquely mobile




speak their power3

1

2

3

A

Do you remember a time

Do you remember a

time when the web was

new?

Q:

23



25/169

A

Do you remember a time

We need a web presence!!

48

Solution: Brochure - online

Brochureware

24



26/169

we need a web presence

A We need online commerce!!

50

Online commerce

What about shipping?

25



27/169

A

Make it like the world

A Lets make our site like!

52

Southwest airlines

26



28/169

We confused the solution with the

need.

What we learned from the web

Lessons Learned from Web

We borrowed broken models.Too focused on tactics.

We didnt focus on what the web

could do well.

A

How do we not do that again?

AHow do we NOT

do that again?

Q:

27



29/169

Technology can guide, but should not

be the focus.

Focus on needsinstead of tactics andsolutions.


Design PrinciplesUniquely Mobile

Mobile is a unique & different medium

- focus on what it can do well.

VS.

28



30/169


Design Principle: Uniquely Mobile

Focus on what mobile can do well

58

Identify your assumptions

vs

29



31/169

59


vs



Technology can help guide,

but should not be the focus

30



32/169



Need vs. Solution

62


Research Techniques

Diary Studies Contextualinterviews

INVASIVE

LESS INVASIVE

RESEARCHERPRESENT

RESEARCHERNOT PRESENT

Deprivation

Study

OnlineSurvey

Shop Alongs

PrototypeTesting

Traffic Studies

Shadowing

31



33/169

63


Research Techniques

Diary Studies Contextualinterviews

INVASIVE

LESS INVASIVE

RESEARCHERPRESENT

RESEARCHERNOT PRESENT

Deprivation

Study

OnlineSurvey

Shop Alongs

PrototypeTesting

Traffic Studies

Shadowing

Use Two Techniques

64


Solution SpeakSolution NeedDatabase of Dr. Names Find a Doctor near me

Map Get from point A to Point B

Calendar I need to know what may happen

Email I need to communicate

Facebook Updates I need to feel connected

LinkedIn I need to manage my identity

Search I need to answer a question

Picassa I need to share

32



34/169

65


Your Design Challenge!

Create a mobile experience for thePortland Marriott Hotel

66


Your Design Challenge!Step 1: Identifying Mobile Needs

1.# Divide into groups

2.# Develop a list of mobile

needs3.# Identify top 3-5 mobile

needs

25 Minutes

33



35/169

are uniquely mobile




speak their power3

1

2

3

Pictures of mobile contexts

AWhat exactly do you mean by

mobile context ?

Q:

34



36/169

A

Pictures of mobile contexts

More pictures of mobile contexts

35



37/169

Social context

A

Context is complex

Context is complex!!

36



38/169

A

Context is about

understanding

human relationships to

the people, places and

thingsin the world.

Context is about understanding the relationships

74

Context Framework

Context Framework

37



39/169

75

Context Framework

Context Framework

76

Relationships Chording

Orchestration and Inflection

38



40/169

77

Peanut butter

78

Google: Facebook

Spatial

39



41/169

79

Temporal

Temporal

80

Spatial - peanut butter

Social

40



42/169

81

Google: Facebook

Semantic

82

Peanut butter in Denver

Peanut butter in Melbourne right now?

41



43/169

A

The web is good at

peopleand things.

The web is really good at

semantic relationships.

(and okay at social relationships)

Context is about understanding the relationships

84

Context Framework

Mobile is good at places

42



44/169

85

Context Framework

Mobile is good at spatial

and temporal relationships.

86

Google maps - PC vs. Mobile

43



45/169

Temporal and spatial relationships are underserved

There are currently not

many technologiesthat help us understand

place, and temporal and

spatial relationships.

87

How do you get that understanding?

How do we get that

understanding?

Q:

44



46/169

Design for partial attentionand interruption

Sympathy to context principles

Design Principles:

Sympathy to Context

Reduce cognitive load

and opportunity cost

Ideate in the wild

90

Text entry will never be easy

Design for partial attention and interruption

45



47/169

91


Design for partial attention and interruption

92

Cognitive Load

46



48/169

93

Opportunity cost

94


Ideate in the wild

47



49/169

95


Your Design Challenge!

Create a mobile experience for thePortland Marriott Hotel

96


Currently you have

Mobile Needs

48



50/169

97

Wand in the world

Your Design Challenge!Step 2: Sympathy to the mobile context

1.# Divide into groups

2.# Head to the streets

3.# Ideate in the wild

Create 2-3 concepts

based on the needs

your team identified

35 Minutes

98

in the wild ideation

Go outside and brainstorm ideas

49



51/169

99


Anatomy of a concept

100


35 Minutes

50



52/169

101

Context Framework


102

Context Framework


51



53/169

are uniquely mobile




speak their power3

1

2

3

Speak their power?

AHuh?Q:

52



54/169

A light switch

105

Shopping cart

106

53



55/169

Shopping cart

107

108

We can annotate expectations in the web world

We can annotate expectationsin the web world

54



56/169

We can annotate expectations in the web world

Add to cart

Free two-dayshippingShipping

Collectible

Maybe a kindle

Look insidethe book

REALLYLook insidethe bookGet it newOR used

Sell mine

109

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

110

55



57/169

How do you make interfaces that speak their power

A How do I createmobile interfaces that

speak their power?

Q:


Edit!!!

112

56



58/169


RuthlessEditing

113

We made the web

in the image of

ourselves, and in

the U.S., that

means OBESE.

~Jason Grigsby

57



59/169

A

115

116

58



60/169


A

117


A

118

59



61/169


A

119

Josh Clark Example

120

It$s like a game of cards

60



62/169

Josh Clark Example

121


Historically, we start with structure

61



63/169

Try hiding the structure

Try starting with intuition.

62



64/169

Its like a card game

125


Each card speaks its power

126


63



65/169

You win with a good hand

127


Pivoting people through information

128

Your Design Challenge!Step 3: Creating UIs thatspeak their power

64



66/169

Pivoting people through information

129

130

Create a winning hand.

1.# Translate a concept

from your half sheet into

a series of UI screens.2.# Each screen should

speak its power.

3 REMEMBER:The point of this exerciseis to hone your editing skillsand create UIs that feel

intuitive for users.

30 Minutes

65



67/169

131

Tips for Ruthless Editing

1. What is the primary purpose of this screen?

2. What are the 3-5 secondary actions this screen must provideto a user?

3. What is the most intuitive way to visualize this information?

4. Will users know how to interact with this screen within three

seconds?

5. Is the information on this screen too dense? What can be

removed?

6. How can I get users to the information they are looking for

in the least amount of time?

are uniquely mobile




speak their power3

1

2

3

66



68/169

LUNCH!12 1:30pm

I used to be a web designer, too

67



69/169

1

Mobile UX

From Principles to Prototypes

Rachel HinmanSenior Research ScientistNokia Research Lab

Palo Alto, California USA

Hinman

Part II

Q:

What makes mobile UX different?Q:

2



70/169

2

A

3

A :-(

4



71/169

3

A

5

?

6



72/169

4

77

Bad

Decision-Making

8



73/169

5

The final diamonds are where gooddesign decisions matter most

and where designers new tomobile have the least domainspecific skill and confidence.

9




10



74/169

6

11





ADesigners new to mobile

dont have the domainspecific skills or heuristics

to lean on.

12



75/169

7

PrototypePrototypePrototype

PrototypePrototype

PrototypePrototype

Prototype

13

A

PC Prototyping

is considered a

Luxury

14



76/169

8

AMobile Prototyping is

Essential

15

The best wayto develop those skillsis to prototype earlyand often.

16



77/169

9

A

Prototypes are the ultimate

decision-making aid

17

Our plan for todayReview the four whys of mobile prototyping

Identify the two genres of prototyping andoverview of six prototyping methods

Review the key differences between NUI

and GUI interfaces

Overview of animation principles that can beincorporated into your mobile experiences

Three hands-on activities

18



78/169

10

Our plan for today

Review the four whys of mobile prototyping

Identify the two genres of prototyping andoverview six prototyping methods

Review the key differences between NUIand GUI interfaces

Overview of animation principles that can be

incorporated into your mobile experiences


19




and GUI interfaces



20



79/169

11

Our plan for today

Review the four whys of mobile prototyping


Review the key differences between NUIand GUI interfaces

Overview of animation principles that can be

incorporated into your mobile experiences


21




and GUI interfaces



22



80/169

12

Okay, lets get started!

23

Prototyping

24



81/169

13

Explore the Unknowns

Whys of prototyping

Improve your design decision-making

stealthisslide!

Gather User Feedback

Communicate an Idea

Fine-tune an Idea

25

YouTube Video

Communicating an Idea or Experience

26



82/169

14

Gather User Feedback

27

Explore the Unknowns

28



83/169

15

Fine-Tune an Idea

29

Two Genres

30



84/169

16

Experiential Prototyping

31

Tactical Prototyping

32



85/169

17

You are working on a broader

mobile project.1

ExperientialPrototyping:Best suited for design explorations where:

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

2

stealthislide

The design space is relativelyunchartered.

3

33

You are working on a focusedmobile project.

1

TacticalPrototyping:Best suited for design explorations where:

Target mobile hardware and

software scope is known.2

stealthislide

The design space is relatively known.3

34



86/169

18


35

36



87/169

19

37

38

Context Matters



88/169

20

39

Context will likely be

your blindside

Context Framework

stealthislide

40



89/169

21

Context Frameworkstealthislide

41

42


will help you understandcontext



90/169

22

You are working on a broader

mobile project.

Experiential Prototyping:Best suited for design explorations where:

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

The design space is relativelyunchartered.

1

2

3

Concept Videos

Experiential Prototypes

Storyboarding

Speed Dating Prototypes

Body Storming



91/169

23

45

Bodystorming

Through Lines



92/169

24UX Immersion Conference, April 2012

All materials 2012


93/169


All materials 2012


94/169

26

In reality peoples lives are messy

52

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



95/169

27

Photo by Christian Crumlish (xian), 2009 on 53

1. Select groups of five to eightparticipants in a troupe.

54

1. Select groups of five to eightparticipants in a troupe.2. Identify 3-5 experience

scenarios for your troupe toperform.

Examples: Purchasing a cup ofcoffee with my iPhone, selectingwhich phone to purchase in

a carriers store.

Photo by Christian Crumlish (xian), 2009 on Flickr



96/169

28

55

3. Every player must have arole; there should be no

trees that are just forbackground. Use large

cards that label the rolespeople are playing.


56

4. Props can have feelings,thoughts, and the ability to

speak. Use thought-bubblecards to show what a

participant is thinkingversus saying.




97/169

29

57

5. Have a narrator or color commentator whocan explain things. The narrator can

pretend the scenario is like television,using a remote to stop action, rewind,

or fast-forward.


58

6. De-brief after each scenario. What didthe group learn? What was surprising?

What seemed important? Capture

what you learned from the exerciseand discuss how you can integrate itinto what happens next.




98/169

30

59

Bodystorming will help youcapture the emotional tenor of

mobile interactions

60

Design in Context



99/169

31

Concept Videos


Storyboarding


Body Storming

62


Illustration courtesy of Scott Davidoff

Rapidly Exploring Application Design through Speed Dating



100/169

32

63

Scott Davidoffof CMU

Few design toolsHigh Cost of FailureUnpredictable social consequences

Rapidly Exploring Application Design through Speed Dating

Abundance brings perspective.

Speed Dating PrototypesBuilds on three theories:

Need to cross boundaries to knowthey exist.

Multiple low-cost engagements withmultiple concepts enables a broader

perspective to emerge.

1

2

3

64



101/169

33

65

Step One

Identify most promisingconcepts

Illustration courtesy of Scott Davidoff

Rapidly Exploring Application Design through Speed Dating 66

Step TwoCreate storyboards thatdepict each concept



102/169

34

67

Step Three

Present storyboards tousers gather feedback

Photo courtesy of Scott Davidoff


Step Four

Create prototypes



103/169

35

Photo courtesy of Scott Davidoff


Step FiveConduct user enactmentswith prototypes

70

Speed Dating Prototypes are

especially well-suited forgathering user impressions ofa new-to-the-world experience



104/169

36

Concept Videos


Storyboarding


Body Storming

Concept Videos

Nokia 888 communicator concept phone design by Tamer Nakisci 72



105/169

37

73

7474



106/169

38

High ImpactHighly ShareableGood for High-LevelIdeas

Technology still indevelopment

Concept VideosPros

75

High ImpactHighly ShareableGood for High-LevelIdeas

Technology still indevelopment

Concept Videos

Pros

Resource Intensive!!!Skill IntensiveCultural FitConcept videos dontmake bad ideas good.

Cons

76



107/169

39

77

The first step of creating aconcept video is.

Concept Videos


Storyboarding


Body Storming

78



108/169

40

Storyboarding

79

80



109/169

41

Mobile UX Storyboarding

Identify the central idea(s) you aretrying to communicate.

81

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

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

82



110/169

42



Rough out a basic story.


83

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

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

Rough out a basic story.


84



111/169

43

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



Rough out the basic story


85

86



112/169

44

87

ActivityYour Design Challenge!Storyboarding

88



113/169

45

ActivityYour Design Challenge!Storyboarding: Ideas

89

ActivityYour Design Challenge!Storyboarding

Select one concept youd like to exploremore deeply using the storyboardingtechnique.

Storyboard one scenario using thetemplates provided.

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

1

2

3



114/169

46

Tactical Prototyping

Flash Prototype

Tactical Prototypes

In-Screen Mobile Prototypes

stealthislide

Keynote/Powerpoint Prototypes

Mobile Browser Prototypes

Platform Specific Prototype

Sketching/Paper Prototyping

92



115/169

47

Flash Prototype

Tactical Prototypes


stealthislide




Sketching/Paper Prototyping

93

Sketching

94



116/169

48

Great mobile UIs

speak their power

95

A Huh?Q:

96



117/169

49

97

98



118/169

50

99

100

We can annotate expectations

in the web world



119/169

51

Add to cart

Free two-dayshipping

Shipping

Collectible

Maybe a kindle

Look insidethe book

REALLYLook insidethe book

Get it newOR used

Sell mine

101

102



120/169

52

103

Design for partial attention and

interruption

A How do I createmobile interfaces thatspeak their power?

Q:

104



121/169

53

Edit!!!

105

Ruthless

Editing

106



122/169

54

107

A Brave NUIWorld

108



123/169

55

109




110

Were reaching the edgesof what GUI can do



124/169

56

111

Most mobile smartphoneshave touchscreens withNatural User Interfaces

112

GUIs Become Brittleon a Mobile Device



125/169


All materials 2012


126/169

58

115

116GUI/NUI Chasm



127/169

59

Key differences between

NUI and GUI

117

Defining Attributes of

GUIs

118



128/169

60

119

GUI Mental Model =Computer as tool

120

GUI = RecognitionWhat you seeis what you get



129/169

61

GUI = Metaphorics, containment and place

121

GUIs = Heavy Chrome, Icons & Buttons

122



130/169

62

Defining Attributes of

NUIs

123

124

NUI Mental Model =Computer as media



131/169

63

125

NUI = IntuitionWhat you dois what you get

126

NUI = Fluid, Unmediated, and Organic



132/169

64

NUIs = Content is the Star

127

128







133/169

65

GUI = Experiences are anchored

129

130

NUI = Experiences Unfold



134/169

66

131

NUIs Unfold Like a Game

NUIs Can Feel Anchor-less

132



135/169

67

133

The Nested Doll Pattern1

Mobile Experiences UnfoldPatterns for how mobile experiences unfoldand progressively reveal their nature

stealthislide

The Hub and Spoke Pattern2

The Bento Box Pattern3

The Filtered View Pattern4

134



136/169

68

135

Nested Doll Pattern

136

Hub and Spoke Pattern



137/169

69

137

Bento Box Pattern

138

Filtered View Pattern



138/169

70

A

139

Trick to unfolding =

Information boulders to pebbles

A

140



139/169

71

A

141

ActivityYour Design Challenge!From GUI to NUI

142



140/169

72

ActivityYour Design Challenge!From GUI to NUI

Identify an interaction sequence youd liketo recreate using NUI principles.

Sketch out the interaction using thetemplates provided.

Identify how youd like your mobileexperience to unfold.

1

2

3

143

144



141/169

73

145

146

ActivityREMEMBER!Its easy to go crazy and try to do it all.Instead, focus on applying what weve covered

Understanding the differences betweengraphical and natural user interfaces.

Experimenting with how your mobileexperience can unfold and and progressively

reveal its nature.

Play around with the unfolding patterns thathave been presented or invent some of yourown.



142/169

74

147

148

Paper In-Screen Prototypes

Following Process documented by Diego Pulido viaUX Magazine Paper In Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine



143/169

75

1. Sketchscreen layouts.

###

Photo courtesy of Diego Pulido and UX Magazine149

1. Sketch screen layouts.

2. Scan or photographthe sketches.




144/169

76

1. Sketch screen layouts.

2. Scan or photographthe sketches.

3. Making sizingadjustments to thefiles.

Photo courtesy of Diego Pulido and UX Magazine 151

4. Save the resizedimages in a file formatsupported by the mobiledevice. Be mindful of thesequencing of yourscreens and label filesaccordingly.




145/169

77

153

4. Save the resized

images in a file formatsupported by the mobiledevice. Be mindful ofthe sequencing of yourscreens and label filesaccordingly.

5. Import the files intothe mobile devices

photo gallery.

Photo courtesy of Diego Pulido and UX Magazine

154

4. Save the resizedimages in a file formatsupported by the mobiledevice. Be mindful of thesequencing of yourscreens and label filesaccordingly.

5. Import the files intothe mobile devicesphoto gallery.

6. Click and swipe away.

Photo courtesy of Diego Pulido and UX Magazine



146/169

78

155

ActivityYour Design Challenge!Create an in-screen prototype.

Hang your screen designs on the wall.

Photograph each design.

Transfer photos from the camera to computerand make any sizing adjustments.

Sync images to your mobile deviceand swipe away.

Flash Prototype

Tactical Prototypes


stealthislide




Sketching

156



147/169

79

157

Paper Prototyping

158



148/169

80

159


160




149/169

81

161

LOGOTagline

162Edit



150/169

82

LOGOTagline

163Edit

Sydney Opera HouseThere is no doubt that the Sydney Opera House is hismasterpiece. It is one of the great iconic buildings ofthe 20th century, an image of great beauty that has

become known throughout the world a symbol fornot only a city, but a whole country and continent.

LOGOTagline

164Edit

Sydney Opera HouseThere is no doubt that the Sydney Opera House is

his masterpiece. It is one of the great iconicbuildings 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 wholecountry and continent.



151/169

83

LOGOTagline

165Edit

Sydney Opera HouseThere is no doubt that the Sydney Opera House is

his masterpiece. It is one of the great iconicbuildings 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 wholecountry and continent.

LOGOTagline

166Edit

LOGOTagline

166Edit

Sydney Opera HouseThere is no doubt that the Sydney Opera House is hismasterpiece. It is one of the great iconic buildings ofthe 20th century, an image of great beauty that has

become known throughout the world a symbol fornot only a city, but a whole country and continent.



152/169

84

LOGOTagline

167Edit

Supports *some* gesturesand transitions.

Reasons for Prototypingin Keynote/Powerpoint

stealthislide

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

Its as close as you can get to the real thingwithout digging into code.

Its super efficient and fast!

168



153/169

85

Motion:New Design Material

169

Animation & TransitionsA new design elements that can:

stealthislide

Help users form a mental model of howinformation will unfold.

Help make your experience feel moreintuitive for users.

Reinforce cognition.

Provide cues for interaction.

170



154/169

86

Twelve Basic Principlesof Animation

171

Principle OneSquash and Stretch

172



155/169

87

Principle One

Squash and Stretch

173

Principle TwoAnticipation

174



156/169

88

Principle Two

Anticipation

175

Principle ThreeStaging

176



157/169

89

Principle Three

Staging

177

Principle FourStraight Aheadand Pose to Pose

178



158/169

90

Principle Four

Straight Aheadand Pose to Pose

179

Principle FiveFollow Throughand Overlapping Action

180



159/169

91

181

Principle Five

Follow Throughand Overlapping Action

Principle SixSlow in and Out

182



160/169

92

Principle Six

Slow in and Out

183

Principle SevenArcs

184



161/169

93

Principle Seven

Arcs

185

Principle EightSecondary Action

186



162/169

94

Principle Eight

Secondary Action

187

Principle NineTiming

188



163/169

95

Principle Nine

Timing

189

Principle TenExaggeration

190



164/169

96

Principle Ten

Exaggeration

191

Principle Eleven and TwelveSolid Drawing and Appeal

192



165/169

97

193

Sketches Courtesy of Greg Nudelmen

Storyboarding iPad Transitions

Specifying Transitions

Transitions and AnimationMethods for specifying motion:

Build a prototype of key motion phrasesusing PowerPoint, Keynote or other

prototyping tool.

Include specifications on wireframes.

194

Hand drawn sketches.



166/169

98

195

Motion is an Art.

There are no formulas.

196

Fidelity



167/169

99

197

Failure

198

Prototyping is not a Panacea



168/169

100

A

PC Prototyping

is considered a

Luxury

AMobile Prototyping is

Essential



169/169

Thank you!Email:[email protected]

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

mobile ux- from principles to prototypes

Documents