Slides from Mobile UX Essentials workshop at UX Australia, 2010

1. Mobile UX EssentialsUX Australia 2010 Rachel Hinman Senior Research Scientist Nokia Research Lab Palo Alto, California USA Title

2. 2004 I used to be a web designer, too

3. Where do I begin? Q: Where do I begin

4. How can we streamline the checkout process What can we do with mobile? Q: Q:

5. Where do I begin? Q: Where do I begin

6. Our plan for today… Our plan for today Similarities and differences between designing for web and mobile

7. Our plan for today… Our plan for today Similarities and differences between designing for web and mobile Three most important attributes of great mobile experiences

8. Our plan for today… Our plan for today Similarities and differences between designing for web and mobile Three most important attributes of great mobile experiences A set of mobile design principles

9. Our plan for today… Our plan for today 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. Along the way… Along the way Watch for slides with this orange label! Slides Worth Keeping Design Principles Design Activities Shameless Opinion

11. Okay, let’s get started! Okay… let’s get started

12. A What are the similarities What are the similarities? Q:

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

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

15. UX designers use similar tools and processes 15 Similar Tools… Similar processes

16. What are the differences? What are the differences? A Q:

17. A mobile phone is not a computer 17 A mobile phone is not a computer

18. umm…. duh! A Um… duh!

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

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

21. Differences in the mobile environment 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 Mobile phones started out as a one-to-one

23. They evolved 23

24. Mobile phones evolved from the landline phone 24

26. 26 Smartphone… added

27. 27 Smartphone… added Opinion! 27

28. Hypothesis vs. Agenda The Rearview Mirror

29. Hypothesis vs. Agenda 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.” 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.”

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

31. 31 iPhone Mobile phones aren’t really phones anymore

32. Hypothesis vs. Agenda

33. Hypothesis vs. Agenda

34. Hypothesis vs. Agenda

36. Hypothesis vs. Agenda

37. Hypothesis vs. Agenda

38. What are the differences? What’s the first step? A Q:

39. 39 Shift your perspective and point of view Step One: Know the medium you’re designing for

40. 40 Shift your perspective and point of view NO EXCUSES! Buy a modern mobile device

41. 41 Shift your perspective and point of view Mobile Culture Indoctrination

42. 42 Shift your perspective and point of view Mobile Culture Indoctrination

43. 43 Shift your perspective and point of view Images needed Step Two: Observe the culture you’re designing for

44. 44 Shift your perspective and point of view Step Three: Brace yourself for a fast and exciting ride

45. Shift your perspective and point of view “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 Rapid Evolution 45

46. 1 are uniquely mobile Great Mobile user experiences steal this slide! Great Mobile Experiences: 2 are sympathetic to context 3 speak their power

47. Great Mobile Experiences: 1 are uniquely mobile Great Mobile user experiences

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

49. Do you remember a time… “We need a web presence!” ! A

50. 50 Solution: Brochure - online Brochureware

51. “we need a web presence” “We need online commerce!” ! A

52. 52 Online commerce What about shipping?

53. Make it like the world “Let’s make our site like…” ! A A

54. 54 Southwest airlines

55. What we learned from the web 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.

56. How do we not do that again? How do we NOT do that again? Q: A A

57. What we learned from the web steal this slide! Design PrinciplesUniquely 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.

58. What we learned from the web Design Principle: Uniquely Mobile Focus on what mobile can do well

59. What we learned from the web Design Principle: Uniquely Mobile Technology can help guide, but should not be the focus

60. What we learned from the web Design Principle: Uniquely Mobile Need vs. Solution

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

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

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

64. 64 Identify your assumptions Your Design Challenge! Step 1: Identifying Mobile Needs Activity Divide into groups Read your design challenge Develop a list of mobile needs Identify top 3-5 mobile needs 20 Minutes

65. are uniquely mobile 1 Great Mobile user experiences Great Mobile Experiences: are sympathetic to context 2

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

67. Pictures of mobile contexts A

68. More pictures of mobile contexts

69. Social context

70. Context is complex Context is complex! ! A

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

72. 72 Context Framework Context Framework steal this slide!

73. 73 Context Framework Context Framework steal this slide!

74. 74 Relationships Chording Orchestration and Inflection

75. 75 Peanut butter

76. 76 Google: Facebook Spatial

77. 77 Temporal Temporal

78. Spatial - peanut butter Social 78

79. Google: Facebook Semantic 79

80. 80 Peanut butter in Denver Peanut butter in Melbourne right now?

81. The web is good at people and things. The web is good at semantic relationships. (and okay at social relationships) A Context is about understanding the relationships

82. Context Framework Mobile is good at places… steal this slide! 82

83. Context Framework Mobile is good at spatial and temporal relationships. steal this slide! 83

84. 84 Google maps - PC vs. Mobile

85. Temporal and spatial relationships are underserved There are currently not many technologiesthat help us understand place, and temporal and spatial relationships. 85

86. How do you get that understanding? How do we get that understanding? Q:

87. Design for partial attention and interruption 1 Sympathy to context principles Design Principles: Sympathy to Context steal this slide! 2 Reduce cognitive load and opportunity cost 3 Ideate in the wild

88. Design for partial attention and interruption 88 Text entry will never be easy

89. 89 Text entry will never be easy Design for partial attention and interruption

90. Opportunity cost 90

91. 91 Text entry will never be easy Ideate in the wild…

92. 92 Wand in the world Your Design Challenge! Step 2: Sympathy to the mobile context Activity Divide into groups Head to the streets Ideate in the wild – Create 2-3 concepts based on the needs your team identified 20-30 Minutes

93. 93 “in the wild” ideation Activity Go outside and brainstorm ideas

94. 94 “in the wild” ideation Activity 20-30 Minutes

95. Context Framework Mobile is good at places… steal this slide! 95

96. Context Framework Mobile is good at places… steal this slide! 96

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

98. Speak their power? Huh? Q: A

99. A light switch 99

100. Shopping cart 100

101. Shopping cart 101

102. We can annotate expectations in the web world 102 We can annotate expectations in the web world

103. We can annotate expectations in the web world Free two-day shipping Look inside the book REALLY!Look inside the book Get it new OR used! Sell mine Add to cart Shipping! Collectible! Maybe a kindle! We can annotate expectations in the web world 103

104. Options in mobile have to be readily apparent 104 Options have to be apparent and intuitive in mobile for people to

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

106. Say good bye to done steal this slide! Design Principles: Interfaces that speak their power Understand the characteristics of GUI, NUI, OUI interfaces 1 2 Grow ruthless editing skills 3 Say good-bye to done

107. steal this slide! 107 Wireframe

108. 108 Wireframe We’re reaching the edges of what GUI can do

109. 109 Wireframe It’s not longer “what you see it what you get…”

110. 110 Wireframe …now it’s “what you do is what you get”

111. 111 Wireframe Different platforms express characteristics differently

112. steal this slide! 112 Wireframe

113. 113 Wireframe Ruthless editing is part of the NUI design process

114. Say Goodbye do done 114 Wireframe

115. This should look familiar… 115 Wireframe

116. 116 Wireframe This should look familiar… The web has evolved around a task-efficiency model. Mobile is different.

117. Mobile is different…. 117 Mobile is different

118. Mobile is different…. 118 Mobile is different

119. 119 Mobile is different Mobile is different…. Mobile is about pivoting people through information quickly. It’s about exposing possibilities.

120. What’s the point? “What can happen?” “What’s the point?” TASK POSSIBILITIES

121. Tasks are about completion… 121 Tasks are about completion

122. 122 Tasks are about completion Tasks are about completion… Possibilities are interactions that accrue over time…

123. Tasks are about completion Tasks are about completion… Possibilities are interactions that accrue over time… … or facilitate exploration… 123

124. … or facilitate exploration… 124 Tasks are about completion Tasks are about completion… Possibilities are interactions that accrue over time… ..or are about SENSING INTENT!

125. 125 Example -

126. 126 Example -

127. 127 Example -

128. 128 Example -

129. 129 Example -

130. 130 Example -

131. How do you make interfaces that speak their power How do I design for possibilities? Q: A

132. How do you make interfaces that speak their power A 132

133. How do you make interfaces that speak their power A 133

134. How do you make interfaces that speak their power A 134

135. It’s like a card game… 135 It’s like a game of cards

136. Each card speaks it’s power 136 It’s like a game of cards

137. You win with a good hand 137 It’s like a game of cards

138. Pivoting people through information Your Design Challenge! Step 3: Creating a good hand Activity 138

139. Pivoting people through information 139

140. Pivoting people through information Create a winning hand. Activity 140

141. Pivoting people through information Create a winning hand. Activity Stitch cards together to answer the question Allow people to pivot through information quickly 141

142. Prototype Prototype Prototype Prototype Prototype Prototype 142 Prototype

143. 143 Analogy of cards Process Prototype at every stage

144. 144 Analogy of cards Process Prototyping “Swirl”

145. Pivoting people through information 145

146. Pivoting people through information 146

147. Paper Prototype example 147

148. Pivoting people through information 148

149. High fidelity prototype example

150. Can users grok it? Can users grok it? Does each screen speak it’s power? Can I simplify this? Is this intuitive? Q: Q: Q: Q: 150

151. Analogy of cards steal this slide! Tips for mobile prototyping Plan for a lot of it! 1 Work at scale and print it out! 2 Get it on the device as soon as you can. 2 151

152. Analogy of cards Some info about mobile web/ and app programming: iPhone Apps = Xcode 1 Android Apps = Java (managed code) 2 Mobile Web Sites = Mobile Design and Development: Practical Concepts and Techniques for Creating Mobile Sites andWeb Apps by Brian Fling 152

153. Where do I begin? Where do I begin? Q:

154. are uniquely mobile 1 Great Mobile user experiences steal this slide! Great Mobile Experiences: are sympathetic to context 2 speak their power 3

155. Everybody starts somewhere Everybody starts somewhere….

156. Good luck Good luck!

157. Thank you! Email: rachel.hinman@nokia.com Thanks, and next up…

158. Resources: MOBILE RESOURCESUltimate iPhone Stencil for Omnigrafflehttp://graffletopia.com/stencils/413 mooTools http://mootools.netiUI iPhone navigation (javascript):http://code.google.com/p/iui/ jQuery (javascript):http://jquery.com/ TweenMax (actionscript):http://blog.greensock.com/tweenmaxas3/ Bruce Sterling speaks on the future of mobilehttp://tinyurl.com/6m7kwc RESOURCES

159. Q? Q&A: final break