Mobile prototyping essentials workshop with Rosenfeld Media - May 24th

1. Mobile Prototyping Essentials
Part I
Rachel Hinman
Senior Research Scientist
Nokia Research Lab
Palo Alto, California USA
Hinman

2. 2004

3. Q:
Where do I begin?

4. Q:
What can we do with
Q:
mobile?

5. Q:
Where do I begin?

6. 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
• Practice Ruthless Editing/Translating GUI to NUI
• Creating an In-Screen Prototype

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

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

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

11. Okay, let’s get started!

12. A
Q:
What are the similarities?

13. UX designers know how to work
in a rapidly evolving field
13

14. UX designers understand how to create
experiences within technical constraints
14

15. UX designers use similar
tools and processes
15

16. QQ:
A:
What are the differences?

17. A mobile phone is not a computer
17

18. A
umm…. duh!

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

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

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
21

22. 22

23. 23

24. 24

26. 26

27. 27
27

28. The Rearview Mirror Effect

29. Even in situations in which aa spirit of
Even in situations in which spirit of
exploration and freedom exist, where we are
exploration and freedom exist, where faculty
free free to experiment to work beyond physical
are to experiment and work beyond physical
and social constraints, our cognitive habits
and social constraints,
our cognitive habits often get in the way.
often get in the way.
Marshall McLuhan called called it
Marshall McLuhan it “the rear-view
mirrorrear-view mirror effect,” noting that
“the effect,” noting that “We see the world
“We see the world through a rear-view mirror.
through a rear-view mirror. We march
We march backwards into future.”
backwards into the the future.”

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

31. Mobile phones aren’t really phones anymore
31

36. AQ:
What’s the first step?

37. 3
Steps
37

38. Step One: Become familiar
with the medium you’re designing for
38

39. NO
EXCUSES!
Buy a modern mobile device
39

40. Step Two: Mobile culture indoctrination
40

41. Images needed
Observe the culture you’re designing for
41

42. Step Three: Brace yourself
for a fast and exciting ride
42

43. “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.”
Rapid Evolution
-- Mobile Monday Amsterdam – November 2008
43

44. Great Mobile Experiences:
1 are uniquely mobile
2 are sympathetic to context
3 speak their power
3

45. Great Mobile Experiences:
1 are uniquely mobile
2 are sympathetic to context
3 speak their power
3

46. Q:
A
Do you remember a time
when the web was new?

47. !
A
“We need a web presence!”

48. Brochureware
48

49. !
A
“We need online commerce!”

50. What about shipping?
50

51. !
A
“Let’s make our site like…”

52. 52

53. Lessons Learned from Web
We borrowed broken models.
Too focused on tactics.
We confused the solution with the need.
We didn’t focus on what the web
could do well.

54. Q:
A
How do we NOT
do that again?

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

56. VS.

57. Design Principle: Uniquely Mobile
Focus on what mobile can do well

58. vs
58

59. vs
59

60. Design Principle: Uniquely Mobile
Technology can help guide,
but should not be the focus

61. Design Principle: Uniquely Mobile
Need vs. Solution

62. Research Techniques
INVASIVE
Prototype
Deprivation
Testing
Study
Diary Studies Contextual
interviews
RESEARCHER RESEARCHER
NOT PRESENT PRESENT
Online
Survey Shadowing
Traffic Shop Alongs
Studies
LESS INVASIVE
62

63. Research Techniques
INVASIVE
Prototype
Deprivation
Testing
Study
Use Two Techniques
RESEARCHER
Diary Studies Contextual
interviews
RESEARCHER
NOT PRESENT PRESENT
Online
Survey Shadowing
Traffic Shop Alongs
Studies
LESS INVASIVE
63

64. Solution Speak…
Solution Need
Database 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 64

65. Great Mobile Experiences:
1 are uniquely mobile
2 are sympathetic to context
3 speak their power
3

66. Q:
What exactly do you mean by
A
mobile “context” ?

67. A

70. !
A
Context is complex!

71. Context is about
A
understanding
human relationships to the
people, places and
thingsin the world.

72. Context Framework
72

73. Context Framework
73

74. Orchestration and Inflection
74

75. 75

76. Spatial
76

77. Temporal
77

78. Social
78

79. Semantic
79

80. Peanut butter in Melbourne right now?
80

81. The web is good at people
and things.
A
The web is really good at
semantic relationships.
(and okay at social relationships)

82. Mobile is good at places…
82

83. Mobile is good at spatial
and temporal relationships.
83

84. 84

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

86. Q:
How do we get that
understanding?

87. Design Principles:
Sympathy to Context
Design for partial attention
and interruption
Reduce cognitive load
and opportunity cost
Ideate in the wild

88. Design for partial attention and interruption
88

89. Design for partial attention and interruption
89

90. Cognitive Load
90

91. Opportunity cost
91

92. Ideate in the wild…
92

93. Your Design Challenge!
How might Starbucks use mobile devices to
improve their customer experience?
93

94. Your Design Challenge!
Step 1: Identifying Needs
1. Divide into groups
2. Head to the nearest
Starbucks.
3. Develop a list of
customer needs based on
your observations using the
needs worksheet.
25 Minutes
94

95. Go outside and brainstorm ideas
95

96. Your Design Challenge!
Step 2: Sympathy to the mobile context
1. Head to the streets
2. Ideate in the wild –
Create 2-3 concepts
based on the needs
your team identified
25 Minutes
96

97. 25 Minutes
97

98. 98

99. Mobile is good at places…
99

100. Mobile is good at places…
100

101. One Hour!
101

102. Great Mobile Experiences:
1 are uniquely mobile
2 are sympathetic to context
3 speak their power
3

103. Q:
A
Huh?

104. 104

105. 105

106. 106

107. We can annotate expectations
in the web world
107

108. Look inside
the book
Add to cart
Shipping! Free two-day
shipping
REALLY! Get it new
Look inside OR used! Collectible!
the book
Sell mine
Maybe a kindle!
108

109. 109

110. Q:
A
How do I create
mobile interfaces that
“speak their power”?

111. Edit!!!
111

112. Ruthless
Editing
112

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

114. A
114

115. 115

116. A
116

117. A
117

118. A
118

119. Josh Clark Example
119

120. Josh Clark Example
120

121. Historically, we start with structure…

122. Try hiding the structure…

123. Try starting with intuition.

124. It’s like a card game…
124

125. Each card speaks it’s power
125

126. You win with a good hand
126

127. Great Mobile Experiences:
1 are uniquely mobile
2 are sympathetic to context
3 speak their power
3

128. LUNCH!
12 – 1pm