Mobile UX: From Principles to Prototypes

Rachel Hinman
Nokia

Monday, April 23, 2012

Mobile UX

From Principles to Prototypes

Part I

Rachel Hinman
Senior Research Scientist Nokia Research Lab Palo Alto, California USA

Hinman

2004

I used to be a web designer, too!

UX Immersion Conference, April 2012 All materials 2012

Q:

Where do I begin?

Where do I begin!

Q: Q:!

What can we do with mobile?

How can we streamline the checkout process!

2
UX Immersion Conference, April 2012 All materials 2012

Q:

Where do I begin?

Where do I begin!

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
Noon 1:30pm - LUNCH 1:30pm 5:30pm

Mobile prototyping essentials

Three Mobile Prototyping Exercises Storyboarding Translating GUI to NUI Creating an In-Screen Prototype

3
UX Immersion Conference, April 2012 All materials 2012

8:30am - Noon

What makes mobile UX different?

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

What makes mobile UX different?

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

4
UX Immersion Conference, April 2012 All materials 2012

8:30am - Noon

What makes mobile UX different?

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

What makes mobile UX different?

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

5
UX Immersion Conference, April 2012 All materials 2012

Okay, lets get started!

Okay let"s get started!

A! Q:

What are the similarities?

What are the similarities!

6
UX Immersion Conference, April 2012 All materials 2012

UX designers know how to work in a rapidly evolving eld

13!

Web designers know how to work in a rapidly evolving eld!

UX designers understand how to create experiences within technical constraints

14!

Ability to work within technical constraints!

7
UX Immersion Conference, April 2012 All materials 2012

UX designers use similar tools and processes

15!

Similar Tools Similar processes!

Q: Q: A ! !

What are the differences?

What are the differences?!

8
UX Immersion Conference, April 2012 All materials 2012

A mobile phone is not a computer

17!

A mobile phone is not a computer!

A!

umm. duh!

Um duh!!

9
UX Immersion Conference, April 2012 All materials 2012

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

19!

Differences in the mobile environment!

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

20!

Differences in the mobile environment!

10
UX Immersion Conference, April 2012 All materials 2012

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

21!

Differences in the mobile environment!

22!

Mobile phones started out as a one-to-one!

11
UX Immersion Conference, April 2012 All materials 2012

23!

They evolved!

24!

Mobile phones evolved from the landline phone!

12
UX Immersion Conference, April 2012 All materials 2012

26!

Smartphone added !

13
UX Immersion Conference, April 2012 All materials 2012

27! 27!

Smartphone added !

The Rearview Mirror Effect

14
UX Immersion Conference, April 2012 All materials 2012

Even Even in in situations situations inin which whichaaspirit spiritof of exploration exploration and and freedom freedomexist, exist, where wherewe faculty are free are to free experiment to experiment and to work work beyond beyond physical physical and social and constraints, social constraints, our cognitive habits our cognitive often habits get often in the get way. in" the way. Marshall Marshall McLuhan McLuhan called called it the it rear-view the mirror rear-view effect, noting mirror that effect, We noting see thethat world We see through the world a rear-view through mirror. a rear-view We march mirror. We march backwards backwards into into the future. the future. !

Mobile presents an opportunity to invent new ways for users to interact with information.

30!

15
UX Immersion Conference, April 2012 All materials 2012

Mobile phones arent really phones anymore

31!

iPhone!

Hypothesis vs. Agenda!

16
UX Immersion Conference, April 2012 All materials 2012

Hypothesis vs. Agenda!

Hypothesis vs. Agenda!

17
UX Immersion Conference, April 2012 All materials 2012

Hypothesis vs. Agenda!

AQ: !

Whats the rst step?

What are the differences?!

18
UX Immersion Conference, April 2012 All materials 2012

Steps

37

Step One: Become familiar with the medium youre designing for
38!

Shift your perspective and point of view!

19
UX Immersion Conference, April 2012 All materials 2012

NO EXCUSES!
Buy a modern mobile device
39!

Shift your perspective and point of view!

Step Two: Mobile culture indoctrination

40!

Shift your perspective and point of view!

20
UX Immersion Conference, April 2012 All materials 2012

Images needed!

Observe the culture youre designing for

41!

Shift your perspective and point of view!

Step Three: Brace yourself for a fast and exciting ride

42!

Shift your perspective and point of view!

21
UX Immersion Conference, April 2012 All materials 2012

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 oor for something much larger -- and the soil beneath that ground oor is violently unstable.
-- Mobile Monday Amsterdam November 2008
43!

Rapid Evolution!

Great Mobile Experiences: 1 are uniquely mobile 2 are sympathetic to context 3 3! speak their power
Great Mobile user experiences!

22
UX Immersion Conference, April 2012 All materials 2012

Great Mobile Experiences: 1 are uniquely mobile 2 are sympathetic to context 3 3! speak their power
Great Mobile user experiences!

Q: A!

Do you remember a time when the web was new?

Do you remember a time!

23
UX Immersion Conference, April 2012 All materials 2012

!! A!

We need a web presence!

Do you remember a time!

Brochureware
48!

Solution: Brochure - online!

24
UX Immersion Conference, April 2012 All materials 2012

!! A!

We need online commerce!

we need a web presence!

What about shipping?

50!

Online commerce!

25
UX Immersion Conference, April 2012 All materials 2012

!! A!

Lets make our site like

Make it like the world!

52!

Southwest airlines!

26
UX Immersion Conference, April 2012 All materials 2012

Lessons Learned from Web

We borrowed broken models. Too focused on tactics. We confused the solution with the need. We didnt focus on what the web could do well.

What we learned from the web!

Q: A!

How do we NOT do that again?

How do we not do that again?!

27
UX Immersion Conference, April 2012 All materials 2012

Design Principles
Uniquely Mobile
Mobile is a unique & different medium - focus on what it can do well. Technology can guide, but should not be the focus. Focus on needs instead of tactics and solutions.
What we learned from the web!

VS.

28
UX Immersion Conference, April 2012 All materials 2012

Design Principle: Uniquely Mobile

Focus on what mobile can do well

What we learned from the web!

vs!

58!

Identify your assumptions!

29
UX Immersion Conference, April 2012 All materials 2012

vs!

59!

Identify your assumptions!

Design Principle: Uniquely Mobile

Technology can help guide, but should not be the focus

What we learned from the web!

30
UX Immersion Conference, April 2012 All materials 2012

Design Principle: Uniquely Mobile

Need vs. Solution

What we learned from the web!

Research Techniques
INVASIVE! Deprivation ! Study! Diary Studies! RESEARCHER! NOT PRESENT! Online! Survey! Trafc! Studies! Prototype! Testing!

Contextual! interviews!

RESEARCHER! PRESENT!

Shadowing!

Shop Alongs!

LESS INVASIVE!
62!

Identify your assumptions!

31
UX Immersion Conference, April 2012 All materials 2012

Research Techniques
INVASIVE! Deprivation ! Study! Diary Studies! Prototype! Testing!

RESEARCHER! NOT PRESENT!

Use Two Techniques

Contextual! interviews! Online! Survey! Trafc! Studies! Shadowing!

RESEARCHER! PRESENT!

Shop Alongs!

LESS INVASIVE!
63!

Identify your assumptions!

Solution Speak
Solution
Database of Dr. Names Map Calendar Email Facebook Updates LinkedIn Search Picassa

Need
Find a Doctor near me Get from point A to Point B I need to know what may happen I need to communicate I need to feel connected I need to manage my identity I need to answer a question I need to share
64!

Identify your assumptions!

32
UX Immersion Conference, April 2012 All materials 2012

Your Design Challenge!

Create a mobile experience for the Portland Marriott Hotel

65!

Identify your assumptions!

Your Design Challenge!

Step 1: Identifying Mobile Needs
1.# Divide into groups 2.# Develop a list of mobile needs 3.# Identify top 3-5 mobile needs

25 Minutes

66!

Identify your assumptions!

33
UX Immersion Conference, April 2012 All materials 2012

Great Mobile Experiences: 1 are uniquely mobile 2 are sympathetic to context 3 3! speak their power
Great Mobile user experiences!

Q: A!

What exactly do you mean by mobile context ?

Pictures of mobile contexts!

34
UX Immersion Conference, April 2012 All materials 2012

A!

Pictures of mobile contexts!

More pictures of mobile contexts!

35
UX Immersion Conference, April 2012 All materials 2012

Social context!

!! A!

Context is complex!

Context is complex!

36
UX Immersion Conference, April 2012 All materials 2012

A!

Context is about understanding human relationships to the people, places and things in the world.

Context is about understanding the relationships!

Context Framework

74!

Context Framework!

37
UX Immersion Conference, April 2012 All materials 2012

Context Framework

75!

Context Framework!

Orchestration and Inection

76!

Relationships Chording!

38
UX Immersion Conference, April 2012 All materials 2012

77!

Peanut butter!

Spatial
78!

Google: Facebook!

39
UX Immersion Conference, April 2012 All materials 2012

Temporal
79!

Temporal!

Social
80!

Spatial - peanut butter!

40
UX Immersion Conference, April 2012 All materials 2012

Semantic
81!

Google: Facebook!

Peanut butter in Melbourne right now?

82!

Peanut butter in Denver!

41
UX Immersion Conference, April 2012 All materials 2012

The web is good at people and things.

A!

The web is really good at semantic relationships.

(and okay at social relationships)

Context is about understanding the relationships!

Mobile is good at places

84!

Context Framework!

42
UX Immersion Conference, April 2012 All materials 2012

Mobile is good at spatial and temporal relationships.

85!

Context Framework!

86!

Google maps - PC vs. Mobile!

43
UX Immersion Conference, April 2012 All materials 2012

There are currently not many technologies that help us understand place, and temporal and spatial relationships.

87!

Temporal and spatial relationships are underserved!

Q:

How do we get that understanding?

How do you get that understanding?!

44
UX Immersion Conference, April 2012 All materials 2012

Design Principles:
Sympathy to Context

Design for partial attention and interruption Reduce cognitive load and opportunity cost Ideate in the wild
Sympathy to context principles!

Design for partial attention and interruption

90!

Text entry will never be easy!

45
UX Immersion Conference, April 2012 All materials 2012

Design for partial attention and interruption

91!

Text entry will never be easy!

Cognitive Load

92!

46
UX Immersion Conference, April 2012 All materials 2012

Opportunity cost
93!

Ideate in the wild

94!

Text entry will never be easy!

47
UX Immersion Conference, April 2012 All materials 2012

Your Design Challenge!

Create a mobile experience for the Portland Marriott Hotel

95!

Identify your assumptions!

Currently you have

Mobile Needs

96!

Identify your assumptions!

48
UX Immersion Conference, April 2012 All materials 2012

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 identied

35 Minutes
97!

Wand in the world!

Go outside and brainstorm ideas

98!

in the wild ideation!

49
UX Immersion Conference, April 2012 All materials 2012

Anatomy of a concept

99!

in the wild ideation!

35 Minutes

100!

in the wild ideation!

50
UX Immersion Conference, April 2012 All materials 2012

Mobile is good at places

101!

Context Framework!

Mobile is good at places

102!

Context Framework!

51
UX Immersion Conference, April 2012 All materials 2012

Great Mobile Experiences: 1 are uniquely mobile 2 are sympathetic to context 3 3! speak their power
Great Mobile user experiences!

Q:! A!

Huh?

Speak their power?!

52
UX Immersion Conference, April 2012 All materials 2012

105!

A light switch!

106!

Shopping cart!

53
UX Immersion Conference, April 2012 All materials 2012

107!

Shopping cart!

We can annotate expectations in the web world

108

We can annotate expectations in the web world!

54
UX Immersion Conference, April 2012 All materials 2012

Look inside the book Add to cart Shipping! REALLY! Look inside the book Free two-day shipping

Get it new OR used! Maybe a kindle!

Collectible! Sell mine

109

We can annotate expectations in the web world!

110

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

55
UX Immersion Conference, April 2012 All materials 2012

Q:! A!

How do I create mobile interfaces that speak their power?

How do you make interfaces that speak their power!

Edit!!!

112!

Web designers know how to work in a rapidly evolving eld!

56
UX Immersion Conference, April 2012 All materials 2012

Ruthless Editing
113!

Web designers know how to work in a rapidly evolving eld!

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

~Jason Grigsby

57
UX Immersion Conference, April 2012 All materials 2012

A!

115!

116!

58
UX Immersion Conference, April 2012 All materials 2012

A!

117!

How do you make interfaces that speak their power!

A!

118!

How do you make interfaces that speak their power!

59
UX Immersion Conference, April 2012 All materials 2012

A!

119!

How do you make interfaces that speak their power!

Josh Clark Example

120!

It$s like a game of cards!

60
UX Immersion Conference, April 2012 All materials 2012

Josh Clark Example

121!

It$s like a game of cards!

Historically, we start with structure

61
UX Immersion Conference, April 2012 All materials 2012

Try hiding the structure

Try starting with intuition.

62
UX Immersion Conference, April 2012 All materials 2012

Its like a card game

125!

It$s like a game of cards!

Each card speaks its power

126!

It$s like a game of cards!

63
UX Immersion Conference, April 2012 All materials 2012

You win with a good hand

127!

It$s like a game of cards!

Your Design Challenge!

Step 3: Creating UIs that speak their power

128!

Pivoting people through information!

64
UX Immersion Conference, April 2012 All materials 2012

129!

Pivoting people through information!

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 exercise is to hone your editing skills and create UIs that feel intuitive for users.

30 Minutes
130!

65
UX Immersion Conference, April 2012 All materials 2012

Tips for Ruthless Editing

1. What is the primary purpose of this screen? 2. What are the 3-5 secondary actions this screen must provide to 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?

131!

Great Mobile Experiences: 1 are uniquely mobile 2 are sympathetic to context 3 3! speak their power
Great Mobile user experiences!

66
UX Immersion Conference, April 2012 All materials 2012

LUNCH!
12 1:30pm

I used to be a web designer, too!

67
UX Immersion Conference, April 2012 All materials 2012

Mobile UX

From Principles to Prototypes

Part II

Rachel Hinman
Senior Research Scientist Nokia Research Lab Palo Alto, California USA

Hinman

Q:

What makes mobile UX different?

Q:!

1!
UX Immersion Conference, April 2012 All materials 2012

A!

A!

UX Immersion Conference, April 2012 All materials 2012

:-(
4

2!

A!

?
6

3!
UX Immersion Conference, April 2012 All materials 2012

7!

Bad Decision-Making

4!
UX Immersion Conference, April 2012 All materials 2012

The nal diamonds are where good design decisions matter most and where designers new to mobile have the least domain specic skill and condence.

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

10

5!
UX Immersion Conference, April 2012 All materials 2012

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

11

A!

Designers new to mobile dont have the domain specic skills or heuristics to lean on.

12

6!
UX Immersion Conference, April 2012 All materials 2012

Prototype Prototype Prototype Prototype Prototype Prototype Prototype Prototype

13

A!

Luxury
14

PC Prototyping is considered a

7!
UX Immersion Conference, April 2012 All materials 2012

A!

Essential
15

Mobile Prototyping is

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

8!
UX Immersion Conference, April 2012 All materials 2012

A!

Prototypes are the ultimate decision-making aid

17

Our plan for today

Review the four whys of mobile prototyping Identify the two genres of prototyping and overview of six prototyping methods Review the key differences between NUI and GUI interfaces Overview of animation principles that can be incorporated into your mobile experiences Three hands-on activities
18

9!
UX Immersion Conference, April 2012 All materials 2012

Our plan for today

Review the four whys of mobile prototyping Identify the two genres of prototyping and overview six prototyping methods Review the key differences between NUI and GUI interfaces Overview of animation principles that can be incorporated into your mobile experiences Three hands-on activities
19

Our plan for today

Review the four whys of mobile prototyping Identify the two genres of prototyping and overview six prototyping methods Review the key differences between NUI and GUI interfaces Overview of animation principles that can be incorporated into your mobile experiences Three hands-on activities
20

10!
UX Immersion Conference, April 2012 All materials 2012

Our plan for today

Review the four whys of mobile prototyping Identify the two genres of prototyping and overview six prototyping methods Review the key differences between NUI and GUI interfaces Overview of animation principles that can be incorporated into your mobile experiences Three hands-on activities
21

Our plan for today

Review the four whys of mobile prototyping Identify the two genres of prototyping and overview six prototyping methods Review the key differences between NUI and GUI interfaces Overview of animation principles that can be incorporated into your mobile experiences Three hands-on activities
22

11!
UX Immersion Conference, April 2012 All materials 2012

Okay, lets get started!

23

Prototyping

24

12!
UX Immersion Conference, April 2012 All materials 2012

Whys of prototyping
Communicate an Idea Gather User Feedback Explore the Unknowns Fine-tune an Idea

stea lt slid his e!

Improve your design decision-making

25

Communicating an Idea or Experience

YouTube Video!

26

13!
UX Immersion Conference, April 2012 All materials 2012

Gather User Feedback

27

Explore the Unknowns

28

14!
UX Immersion Conference, April 2012 All materials 2012

Fine-Tune an Idea

29

Two Genres

30

15!
UX Immersion Conference, April 2012 All materials 2012

Experiential Prototyping

31

Tactical Prototyping

32

16!
UX Immersion Conference, April 2012 All materials 2012

Experiential Prototyping:
Best suited for design explorations where:

stea lt slid his e!

1 2 3

You are working on a broader mobile project. Target mobile hardware and software scope is unknown.
(perhaps being created).

The design space is relatively unchartered.

33

Tactical Prototyping: 1 2 3

Best suited for design explorations where:

stea lt slid his e!

You are working on a focused mobile project. Target mobile hardware and software scope is known. The design space is relatively known.
34

17!
UX Immersion Conference, April 2012 All materials 2012

Experiential Prototyping

35

36

18!
UX Immersion Conference, April 2012 All materials 2012

37

Context Matters

38

19!
UX Immersion Conference, April 2012 All materials 2012

Context will likely be your blindside

39

Context Framework

stea lt slid his e!

40

20!
UX Immersion Conference, April 2012 All materials 2012

Context Framework

stea lt slid his e!

41

Experiential Prototyping will help you understand context

42

21!
UX Immersion Conference, April 2012 All materials 2012

Experiential Prototyping:
Best suited for design explorations where:

1 2 3

You are working on a broader mobile project. Target mobile hardware and software scope is unknown.
(perhaps being created).

The design space is relatively unchartered.

Experiential Prototypes
Body Storming Speed Dating Prototypes Concept Videos Storyboarding

22!
UX Immersion Conference, April 2012 All materials 2012

Bodystorming

45!

Through Lines

23!
UX Immersion Conference, April 2012 All materials 2012

24!
UX Immersion Conference, April 2012 All materials 2012

25!
UX Immersion Conference, April 2012 All materials 2012

In reality peoples 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.
52!

26!
UX Immersion Conference, April 2012 All materials 2012

1." Select groups of ve to eight participants in a troupe.

Photo by Christian Crumlish (xian), 2009 on Flickr

53!

1." Select groups of ve 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 carriers store.

Photo by Christian Crumlish (xian), 2009 on Flickr

54!

27!
UX Immersion Conference, April 2012 All materials 2012

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.

Photo by Christian Crumlish (xian), 2009 on Flickr

55!

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

Photo by Christian Crumlish (xian), 2009 on Flickr

56!

28!
UX Immersion Conference, April 2012 All materials 2012

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
57!

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
58!

29!
UX Immersion Conference, April 2012 All materials 2012

Bodystorming will help you capture the emotional tenor of mobile interactions

59

Design in Context

60!

30!
UX Immersion Conference, April 2012 All materials 2012

Experiential Prototypes
Body Storming Speed Dating Prototypes Concept Videos Storyboarding

Speed Dating Prototypes

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

62!

31!
UX Immersion Conference, April 2012 All materials 2012

Scott Davidoff of CMU

" Few design tools " High Cost of Failure " Unpredictable social consequences

Rapidly Exploring Application Design through Speed Dating

63!

Speed Dating Prototypes

Builds on three theories:

1 2 3

Abundance brings perspective. Need to cross boundaries to know they exist. Multiple low-cost engagements with multiple concepts enables a broader perspective to emerge.
64!

32!
UX Immersion Conference, April 2012 All materials 2012

Step One

Identify most promising concepts

65!

Step Two

Create storyboards that depict each concept

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

66!

33!
UX Immersion Conference, April 2012 All materials 2012

Step Three

Present storyboards to users & gather feedback

67!

Step Four

Create prototypes

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

68!

34!
UX Immersion Conference, April 2012 All materials 2012

Step Five

Conduct user enactments with prototypes

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

69!

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

70

35!
UX Immersion Conference, April 2012 All materials 2012

Experiential Prototypes
Body Storming Speed Dating Prototypes Concept Videos Storyboarding

Concept Videos

Nokia 888 communicator concept phone design by Tamer Nakisci

72!

36!
UX Immersion Conference, April 2012 All materials 2012

73!

74! 74!

37!
UX Immersion Conference, April 2012 All materials 2012

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

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

Cons
" Resource Intensive!!! " Skill Intensive " Cultural Fit " Concept videos dont make bad ideas good.
76!

38!
UX Immersion Conference, April 2012 All materials 2012

The rst step of creating a concept video is.

77

Experiential Prototypes
Body Storming Speed Dating Prototypes Concept Videos Storyboarding

78

39!
UX Immersion Conference, April 2012 All materials 2012

Storyboarding

79!

80

40!
UX Immersion Conference, April 2012 All materials 2012

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

81

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.

82

41!
UX Immersion Conference, April 2012 All materials 2012

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 a basic story.

83

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 a basic story. Start lling in the cells. Rough out the complete story, then ll in details.
84

42!
UX Immersion Conference, April 2012 All materials 2012

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 Start lling in the cells. Rough out the complete story, then ll in details.
85

86

43!
UX Immersion Conference, April 2012 All materials 2012

87

Your Design Challenge!

Storyboarding

Act

ivity

88

44!
UX Immersion Conference, April 2012 All materials 2012

Your Design Challenge!

Storyboarding: Ideas

Act

ivity

89

Your Design Challenge!

Storyboarding

Act

ivity

1 Select one concept youd like to explore

more deeply using the storyboarding technique. templates provided.

2 Storyboard one scenario using the 3 Remember to identify the key issues the
character faces and rough out the complete story before lling in details.

45!
UX Immersion Conference, April 2012 All materials 2012

Tactical Prototyping

Tactical Prototypes
Sketching/Paper Prototyping In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specic Prototype

stea lt slid his e!

92

46!
UX Immersion Conference, April 2012 All materials 2012

Tactical Prototypes
Sketching/Paper Prototyping In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specic Prototype

stea lt slid his e!

93

Sketching

94

47!
UX Immersion Conference, April 2012 All materials 2012

Great mobile UIs speak their power

95

Q:! A!

Huh?

96

48!
UX Immersion Conference, April 2012 All materials 2012

97

98

49!
UX Immersion Conference, April 2012 All materials 2012

99

We can annotate expectations in the web world

100

50!
UX Immersion Conference, April 2012 All materials 2012

Look inside the book Add to cart Shipping! REALLY! Look inside the book Free two-day shipping

Get it new OR used! Maybe a kindle!

Collectible! Sell mine

101

102

51!
UX Immersion Conference, April 2012 All materials 2012

Design for partial attention and interruption

103!

Q:! A!

How do I create mobile interfaces that speak their power?

104!

52!
UX Immersion Conference, April 2012 All materials 2012

Edit!!!

105!

Ruthless Editing
106!

53!
UX Immersion Conference, April 2012 All materials 2012

A Brave NUI World

107!

108!

54!
UX Immersion Conference, April 2012 All materials 2012

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

109!

Were reaching the edges of what GUI can do

110!

55!
UX Immersion Conference, April 2012 All materials 2012

Most mobile smartphones have touchscreens with Natural User Interfaces

111!

GUIs Become Brittle on a Mobile Device

112!

56!
UX Immersion Conference, April 2012 All materials 2012

57!
UX Immersion Conference, April 2012 All materials 2012

115!

GUI/NUI Chasm
116!

58!
UX Immersion Conference, April 2012 All materials 2012

Key differences between NUI and GUI

117!

Dening Attributes of

GUIs
118!

59!
UX Immersion Conference, April 2012 All materials 2012

GUI Mental Model = Computer as tool

119!

GUI = Recognition What you see is what you get

120!

60!
UX Immersion Conference, April 2012 All materials 2012

GUI = Metaphorics, containment and place

121!

GUIs = Heavy Chrome, Icons & Buttons

122!

61!
UX Immersion Conference, April 2012 All materials 2012

Dening Attributes of

NUIs
123!

NUI Mental Model = Computer as media

124!

62!
UX Immersion Conference, April 2012 All materials 2012

NUI = Intuition What you do is what you get

125!

NUI = Fluid, Unmediated, and Organic

126!

63!
UX Immersion Conference, April 2012 All materials 2012

NUIs = Content is the Star

127!

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

128

64!
UX Immersion Conference, April 2012 All materials 2012

GUI = Experiences are anchored

129!

NUI = Experiences Unfold

130!

65!
UX Immersion Conference, April 2012 All materials 2012

NUIs Unfold Like a Game

131!

NUIs Can Feel Anchor-less

132!

66!
UX Immersion Conference, April 2012 All materials 2012

133

Mobile Experiences Unfold

stea lt slid his e!

Patterns for how mobile experiences unfold and progressively reveal their nature

1 The Nested Doll Pattern 2 The Hub and Spoke Pattern 3 The Bento Box Pattern 4 The Filtered View Pattern
134!

67!
UX Immersion Conference, April 2012 All materials 2012

Nested Doll Pattern

135!

Hub and Spoke Pattern

136!

68!
UX Immersion Conference, April 2012 All materials 2012

Bento Box Pattern

137!

Filtered View Pattern

138!

69!
UX Immersion Conference, April 2012 All materials 2012

A!

Trick to unfolding = Information boulders to pebbles

139!

A!

140

70!
UX Immersion Conference, April 2012 All materials 2012

A!

141

Your Design Challenge!

From GUI to NUI

Act

ivity

142!

71!
UX Immersion Conference, April 2012 All materials 2012

Your Design Challenge!

From GUI to NUI

Act

ivity

1 Identify an interaction sequence youd like

to recreate using NUI principles. templates provided.

2 Sketch out the interaction using the 3 Identify how youd like your mobile
experience to unfold.

143!

144!

72!
UX Immersion Conference, April 2012 All materials 2012

145!

REMEMBER!
Understanding the differences between graphical and natural user interfaces.

Act

ivity

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

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.

146!

73!
UX Immersion Conference, April 2012 All materials 2012

147

Paper In-Screen Prototypes

Following Process documented by Diego Pulido via UX Magazine Paper In-Screen Prototypes
Photos courtesy of Diego Pulido and UX Magazine
148!

74!
UX Immersion Conference, April 2012 All materials 2012

1. Sketch screen layouts. ! #! ##! ! !

Photo courtesy of Diego Pulido and UX Magazine

149

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

Photo courtesy of Diego Pulido and UX Magazine

150

75!
UX Immersion Conference, April 2012 All materials 2012

1. Sketch screen layouts. 2. Scan or photograph the sketches. 3. Making sizing adjustments to the les.

Photo courtesy of Diego Pulido and UX Magazine!

151

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

Photo courtesy of Diego Pulido and UX Magazine

152

76!
UX Immersion Conference, April 2012 All materials 2012

4. Save the resized images in a le format supported by the mobile device. Be mindful of the sequencing of your screens and label les accordingly. 5. Import the les into the mobile devices photo gallery.

Photo courtesy of Diego Pulido and UX Magazine!

153!

4. Save the resized images in a le format supported by the mobile device. Be mindful of the sequencing of your screens and label les accordingly. 5. Import the les into the mobile devices photo gallery. 6. Click and swipe away.
Photo courtesy of Diego Pulido and UX Magazine 154!

77!
UX Immersion Conference, April 2012 All materials 2012

Your Design Challenge!

Create an in-screen prototype. Hang your screen designs on the wall. Photograph each design.

Act

ivity

Transfer photos from the camera to computer and make any sizing adjustments. Sync images to your mobile device and swipe away.
155!

Tactical Prototypes
Sketching In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specic Prototype

stea lt slid his e!

156

78!
UX Immersion Conference, April 2012 All materials 2012

Paper Prototyping

157!

158!

79!
UX Immersion Conference, April 2012 All materials 2012

Mobile Browser Prototypes

159!

Keynote/Powerpoint Prototypes

160!

80!
UX Immersion Conference, April 2012 All materials 2012

161

LOGO
Tagline

Edit

162

81!
UX Immersion Conference, April 2012 All materials 2012

LOGO
Tagline
Sydney Opera House
There 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.

Edit

163

LOGO
Tagline

Sydney Opera House

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

Edit

164

82!
UX Immersion Conference, April 2012 All materials 2012

LOGO
Tagline

Sydney Opera House

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

Edit

165

LOGO
Tagline
Sydney Opera House
There 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.

Edit

166

83!
UX Immersion Conference, April 2012 All materials 2012

LOGO
Tagline

Edit

167

Reasons for Prototyping in Keynote/Powerpoint

Its super efficient and fast!

stea lt slid his e!

Level of delity is high gives you an end result that looks and feels like a real app. Supports *some* gestures and transitions. Its as close as you can get to the real thing without digging into code.
168

84!
UX Immersion Conference, April 2012 All materials 2012

Motion: New Design Material

169

Animation & Transitions

A new design elements that can:
Reinforce cognition.

stea lt slid his e!

Help users form a mental model of how information will unfold. Provide cues for interaction. Help make your experience feel more intuitive for users.
170

85!
UX Immersion Conference, April 2012 All materials 2012

Twelve Basic Principles of Animation

171

Principle One

Squash and Stretch

172

86!
UX Immersion Conference, April 2012 All materials 2012

Principle One

Squash and Stretch

173

Principle Two

Anticipation

174

87!
UX Immersion Conference, April 2012 All materials 2012

Principle Two

Anticipation

175

Principle Three

Staging

176

88!
UX Immersion Conference, April 2012 All materials 2012

Principle Three

Staging

177

Principle Four

Straight Ahead and Pose to Pose

178

89!
UX Immersion Conference, April 2012 All materials 2012

Principle Four

Straight Ahead and Pose to Pose

179

Principle Five

Follow Through and Overlapping Action

180

90!
UX Immersion Conference, April 2012 All materials 2012

Principle Five

Follow Through and Overlapping Action

181

Principle Six

Slow in and Out

182

91!
UX Immersion Conference, April 2012 All materials 2012

Principle Six

Slow in and Out

183

Principle Seven

Arcs

184

92!
UX Immersion Conference, April 2012 All materials 2012

Principle Seven

Arcs

185

Principle Eight

Secondary Action

186

93!
UX Immersion Conference, April 2012 All materials 2012

Principle Eight

Secondary Action

187

Principle Nine

Timing

188

94!
UX Immersion Conference, April 2012 All materials 2012

Principle Nine

Timing

189

Principle Ten

Exaggeration

190

95!
UX Immersion Conference, April 2012 All materials 2012

Principle Ten

Exaggeration

191

Principle Eleven and Twelve

Solid Drawing and Appeal

192

96!
UX Immersion Conference, April 2012 All materials 2012

Specifying Transitions

Sketches Courtesy of Greg Nudelmen Storyboarding iPad Transitions

193

Transitions and Animation

Methods for specifying motion:
Hand drawn sketches. Include specications on wireframes. Build a prototype of key motion phrases using PowerPoint, Keynote or other prototyping tool.

194!

97!
UX Immersion Conference, April 2012 All materials 2012

Motion is an Art. There are no formulas.

195

Fidelity

196!

98!
UX Immersion Conference, April 2012 All materials 2012

Failure

197!

Prototyping is not a Panacea

198!

99!
UX Immersion Conference, April 2012 All materials 2012

A!

Luxury

PC Prototyping is considered a

A!

Essential

Mobile Prototyping is

100!
UX Immersion Conference, April 2012 All materials 2012

Thank you!
Email: [email protected]

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

Oh! By the way, Im writing a book..

The Mobile Frontier

A Guide for Designing Mobile Experiences

Expected Publication: April 2011

Follow along

101!
UX Immersion Conference, April 2012 All materials 2012