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?
Two Design/Mobile UX Exercises:
• Identifying Mobile Needs
• Ideating in the Wild
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 devices
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. Design Principle: Uniquely Mobile
Focus on what mobile can do well

57. A mobile phone is not a computer
57

60. 60

62. Design Principle: Uniquely Mobile
Focus on what mobile can do well
• Small form factor • Gesture
• Limited battery • Sound/Voice
• Inconsistent network • Image/Video
access • GPS
• Vast and unpredictable • Animation
contexts of use • Facial Recognition
• Highly personal • Sensors
• Microphone and
• Touchscreen
Speaker

63. VS.

64. vs
64

65. vs
65

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

67. Design Principle: Uniquely Mobile
Need vs. Solution

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

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

70. 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 identit
Search I need to find information
70

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

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

73. A

76. !
A
Context is complex!

77. Context Matters
77

78. Context will likely be
your blindside
78

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

80. Context Framework
80

81. Context Framework
81

82. Orchestration and Inflection
82

83. 83

84. Spatial
84

85. Temporal
85

86. Social
86

87. Semantic
87

88. Peanut butter in Melbourne right now?
88

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

90. Mobile is good at places…
90

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

92. 92

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

94. Q:
How do we get that
understanding?

101. A

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

103. Go to the Gemba

104. Go to the Gemba

105. Go to the Gemba

106. Ideate in the wild…
106

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

108. Your Design Challenge!
Step 1: Identifying Needs
1. Divide into groups
2. Head to the nearest
Starbucks.
3. Observe mobile users in a
mobile context
4. Develop a list of
customer needs based on
your observations using the
needs worksheet.
30 Minutes
108

109. 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
30 Minutes
109

110. Go outside and brainstorm ideas
110

111. 25 Minutes
111

112. 112

113. Mobile is good at places…
113

114. Mobile is good at places…
114

115. One Hour!
115

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

117. Q:
A
Huh?

118. 118

119. 119

120. 120

121. We can annotate expectations
in the web world
121

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

123. 123

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

125. Edit!!!
125

126. Ruthless
Editing
126

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

128. A
128

129. 129

131. 131

132. A
132

133. A
133

134. A
134

139. Josh Clark Example
139

140. Josh Clark Example
140

141. Historically, we start with structure…

142. Try hiding the structure…

143. Try starting with instinct and intuition

144. More on this after lunch…

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

146. LUNCH!
12 – 1pm