The document provides an overview of a presentation on mobile UX essentials. Some key points: - It discusses similarities and differences between designing for web and mobile, noting mobile's unique context of environment and limited input. - Three important attributes of great mobile experiences are outlined: being uniquely mobile, sympathetic to context, and allowing interfaces to "speak their power". - Design principles are proposed such as focusing on what mobile can do well and understanding relationships of place, time and context. - Activities are presented to prototype concepts that pivot users through information and allow for exploration based on identified user needs.

1. Mobile UX EssentialsUX Australia 2010Rachel HinmanSenior Research Scientist Nokia Research Lab Palo Alto, California USATitle

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

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

4. How can we streamline the checkout processWhat 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 todaySimilarities and differences between designing for web and mobile

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

8. Our plan for today…Our plan for todaySimilarities and differences between designing for web and mobileThree most important attributes of great mobile experiencesA set of mobile design principles

9. Our plan for today…Our plan for todaySimilarities and differences between designing for web and mobileThree most important attributes of great mobile experiencesA set of mobile design principlesThree mobile design activities

10. Along the way…Along the wayWatch for slides with this orange label!Slides Worth KeepingDesign PrinciplesDesign ActivitiesShameless Opinion

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

12. AWhat are the similaritiesWhat are the similarities?Q:

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

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

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

16. What are the differences?What are the differences?AQ:

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

18. umm…. duh!AUm… duh!

19. 19Differences in the mobile environmentSeated in a relatively predictable environmentLarge screen enables multi-taskingKeyboard and a mouse for input

20. 20Differences in the mobile environmentSeated in a relatively predictable environmentLarge screen enables multi-taskingKeyboard and a mouse for input

21. Differences in the mobile environmentHighly 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 lost21

22. 22Mobile phones started out as a one-to-one

23. They evolved23

24. Mobile phones evolved from the landline phone24

26. 26Smartphone… added

27. 27Smartphone… added Opinion!27

28. Hypothesis vs. AgendaThe Rearview Mirror

29. Hypothesis vs. AgendaEven 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. 30Mobile presents an opportunity to invent new ways…Opinion!Mobile presents an opportunity to invent new ways for users to interact with information.

31. 31iPhoneMobile 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?AQ:

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

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

41. 41Shift your perspective and point of viewMobile Culture Indoctrination

42. 42Shift your perspective and point of viewMobile Culture Indoctrination

43. 43Shift your perspective and point of viewImages neededStep Two: Observe the culture you’re designing for

44. 44Shift your perspective and point of viewStep 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 2008Rapid Evolution45

46. 1are uniquely mobileGreat Mobile user experiencessteal this slide!Great Mobile Experiences:2are sympathetic to context3speak their power

47. Great Mobile Experiences:1are uniquely mobileGreat 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. 50Solution: Brochure - onlineBrochureware

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

52. 52Online commerceWhat about shipping?

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

54. 54Southwest airlines

55. What we learned from the webLessons Learned from WebWe 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:AA

57. What we learned from the websteal this slide!Design PrinciplesUniquely MobileMobile 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 webDesign Principle: Uniquely Mobile Focus on what mobile can do well

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

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

61. Identify your assumptionsResearch TechniquesINVASIVEPrototype TestingDeprivation StudyContextualinterviews Diary StudiesRESEARCHERPRESENTRESEARCHERNOT PRESENTOnlineSurveyShadowingShop AlongsTrafficStudiesLESS INVASIVE61

62. Identify your assumptionsResearch TechniquesINVASIVEPrototype TestingDeprivation StudyUse Two TechniquesContextualinterviews Diary StudiesRESEARCHERPRESENTRESEARCHERNOT PRESENTOnlineSurveyShadowingShop AlongsTrafficStudiesLESS INVASIVE62

63. Identify your assumptionsResearch TechniquesINVASIVEPrototype TestingDeprivation StudyContextualinterviews Diary StudiesRESEARCHERPRESENTRESEARCHERNOT PRESENTOnlineSurveyShadowingShop AlongsTrafficStudiesLESS INVASIVE63

64. 64Identify your assumptionsYour Design Challenge!Step 1: Identifying Mobile NeedsActivityDivide into groupsRead your design challengeDevelop a list of mobile needsIdentify top 3-5 mobile needs20 Minutes

65. are uniquely mobile1Great Mobile user experiencesGreat Mobile Experiences:are sympathetic to context2

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

67. Pictures of mobile contextsA

68. More pictures of mobile contexts

69. Social context

70. Context is complexContext is complex!!A

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

72. 72Context FrameworkContext Frameworksteal this slide!

73. 73Context FrameworkContext Frameworksteal this slide!

74. 74Relationships ChordingOrchestration and Inflection

75. 75Peanut butter

76. 76Google: FacebookSpatial

77. 77TemporalTemporal

78. Spatial - peanut butterSocial78

79. Google: FacebookSemantic79

80. 80Peanut butter in DenverPeanut 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)AContext is about understanding the relationships

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

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

84. 84Google maps - PC vs. Mobile

85. Temporal and spatial relationships are underservedThere 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 interruption1Sympathy to context principlesDesign Principles:Sympathy to Contextsteal this slide!2Reduce cognitive load and opportunity cost3Ideate in the wild

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

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

90. Opportunity cost90

91. 91Text entry will never be easyIdeate in the wild…

92. 92Wand in the worldYour Design Challenge!Step 2: Sympathy to the mobile contextActivityDivide into groupsHead to the streetsIdeate in the wild – Create 2-3 concepts based on the needs your team identified20-30 Minutes

93. 93“in the wild” ideationActivityGo outside and brainstorm ideas

94. 94“in the wild” ideationActivity20-30 Minutes

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

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

97. Great Mobile Experiences:are uniquely mobile1Great Mobile user experiencesare sympathetic to context2speak their power3

98. Speak their power?Huh?Q:A

99. A light switch99

100. Shopping cart100

101. Shopping cart101

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

103. We can annotate expectations in the web worldFree two-day shippingLook inside the bookREALLY!Look inside the bookGet it new OR used!Sell mineAdd to cartShipping!Collectible!Maybe a kindle!We can annotate expectations in the web world103

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

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

106. Say good bye to donesteal this slide!Design Principles:Interfaces that speak their powerUnderstand the characteristics of GUI, NUI, OUI interfaces 12Grow ruthless editing skills3Say good-bye to done

107. steal this slide!107Wireframe

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

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

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

111. 111WireframeDifferent platforms express characteristics differently

112. steal this slide!112Wireframe

113. 113WireframeRuthless editing is part of the NUI design process

114. Say Goodbye do done114Wireframe

115. This should look familiar…115Wireframe

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

117. Mobile is different….117Mobile is different

118. Mobile is different….118Mobile is different

119. 119Mobile is differentMobile 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?”TASKPOSSIBILITIES

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

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

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

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

125. 125Example -

126. 126Example -

127. 127Example -

128. 128Example -

129. 129Example -

130. 130Example -

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

132. How do you make interfaces that speak their powerA132

133. How do you make interfaces that speak their powerA133

134. How do you make interfaces that speak their powerA134

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

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

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

138. Pivoting people through informationYour Design Challenge!Step 3: Creating a good handActivity138

139. Pivoting people through information139

140. Pivoting people through informationCreate a winning hand.Activity140

141. Pivoting people through informationCreate a winning hand.ActivityStitch cards together to answer the questionAllow people to pivot through information quickly141

142. PrototypePrototypePrototypePrototypePrototypePrototype142Prototype

143. 143Analogy of cardsProcessPrototype at every stage

144. 144Analogy of cardsProcessPrototyping “Swirl”

145. Pivoting people through information145

146. Pivoting people through information146

147. Paper Prototype example147

148. Pivoting people through information148

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 cardssteal this slide!Tips for mobile prototypingPlan for a lot of it!1Work at scale and print it out!2Get it on the device as soon as you can.2151

152. Analogy of cardsSome info about mobile web/ and app programming:iPhone Apps = Xcode1Android Apps = Java (managed code) 2Mobile Web Sites = Mobile Design and Development: Practical Concepts and Techniques for Creating Mobile Sites andWeb Apps by Brian Fling152

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

154. are uniquely mobile1Great Mobile user experiencessteal this slide!Great Mobile Experiences:are sympathetic to context2speak their power3

155. Everybody starts somewhereEverybody starts somewhere….

156. Good luckGood luck!

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

158. Resources:MOBILE RESOURCESUltimate iPhone Stencil for Omnigrafflehttp://graffletopia.com/stencils/413mooTools 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/6m7kwcRESOURCES

159. Q?Q&A: final break