The document discusses the essentials of mobile prototyping, focusing on the unique challenges of mobile user experience (UX) design, and the necessity of early and frequent prototyping. It outlines two genres of mobile prototyping: tactical and experiential, each suitable for different project contexts, and reviews various prototyping methods. The speaker emphasizes the importance of effective design decisions and user feedback in creating intuitive mobile interfaces.

1. TitleMobile Prototyping EssentialsWeb Directions UnpluggedRachel HinmanSenior Research Scientist Nokia Research Lab Palo Alto, California USA

2. I used to be a web designer, too

3. How can we streamline the checkout processWhat makes mobile UX different?Q:Q:

4. Where do I begin

5. Where do I begin“I would have made different choices.”

6. Where do I beginKey Difference = Different Design Choices

7. Our plan for today…Our plan for todayIdentify where things usually go wrong during the mobile UX process

8. Our plan for today…Our plan for todayIdentify where things usually go wrong during the mobile UX processReview the four “whys” of prototyping

9. Our plan for today…Our plan for todayIdentify where things usually go wrong during the mobile UX processReview the four “whys” of prototypingIdentify the two genres of mobile prototyping

10. Our plan for today…Our plan for todayIdentify where things usually go wrong during the mobile UX processReview the four “whys” of prototypingIdentify the two genres of mobile prototypingOverview/how-to of six mobile prototyping methods

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

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

13. AWhat are the similarities

14. AWhat are the similarities

15. AWhat are the similarities

16. ?16Web designers know how to work in a rapidly evolving field

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

18. Bad Decision-Making18Web designers know how to work in a rapidly evolving field

19. The final diamond is where good design decisions matter most…19

20. The final diamond is where good design decisions matter most……and where designers new to mobile have the least domain specific skill and confidence.20Web designers know how to work in a rapidly evolving field

21. PrototypePrototypePrototypePrototypePrototypePrototype21Prototype

22. PC Prototypingis considered a LuxuryAUm… duh!

23. Mobile Prototyping isEssentialAUm… duh!

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

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

26. Designers new to mobile don’t have the domain specific skills or heuristics to lean on.AUm… duh!

27. The best way to develop those skills is to prototype early and often.AUm… duh!

28. Prototypes are the ultimate decision-making aid. AUm… duh!

29. What we learned from the websteal this slide!“Whys” of prototypingImprove your design decision-makingCommunicate an IdeaGather User FeedbackExplore the “Unknowns”Fine-tune an Idea

30. Communicating an Idea or ExperienceYouTube Video

31. Hypothesis vs. AgendaGather User Feedback

32. Hypothesis vs. AgendaExploring the Unknowns

33. Hypothesis vs. AgendaFine-Tune an Idea

34. Two Genres34Web designers know how to work in a rapidly evolving field

35. Tactical Prototyping

36. Hypothesis vs. AgendaExperiential Prototyping

37. You are working on a “focused” mobile project.1Sympathy to context principlesTactical Prototyping:Best suited for design explorations where:steal this slide!2Target mobile hardware and software scope is known.3The design space is relatively known.

38. You are working on a “broader” mobile project.1Sympathy to context principlesExperiential Prototyping:Best suited for design explorations where:steal this slide!2Target mobile hardware and software scope is unknown.(perhaps being created).3The design space is relatively unchartered.

39. Hypothesis vs. AgendaTactical Prototyping

40. What we learned from the websteal this slide!Tactical PrototypesSketchingIn-Screen Mobile PrototypesMobile Browser PrototypesKeynote/Powerpoint PrototypesFlash PrototypePlatform Specific Prototype

41. What we learned from the websteal this slide!Tactical PrototypesSketchingIn-Screen Mobile PrototypesMobile Browser PrototypesKeynote/Powerpoint PrototypesFlash PrototypePlatform Specific Prototype

42. Hypothesis vs. AgendaSketching

43. Hypothesis vs. AgendaGreat Mobile UIs Speak their Power

44. Speak their power?Huh?Q:A

45. A light switch

46. Shopping cart46

47. Shopping cart47

48. We can annotate expectations in the web world48We can annotate expectations in the web world

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

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

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

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

53. Edit!!!53Web designers know how to work in a rapidly evolving field

54. RuthlessEditing54Web designers know how to work in a rapidly evolving field

55. Each card speaks it’s power55It’s like a game of cards

56. Let the Content be the Star56It’s like a game of cards

57. Pivoting people through information57

58. Pivoting people through informationClaiming you can’t draw get’s you labeled a “whiner”58

59. What we learned from the websteal this slide!Tips for Ruthless EditingWhat’s the primary purpose of this screen?What are the 3-5 secondary actions this screen must support?What is the most intuitive way to visualize this information?Will users know how to interact with the screen within three seconds?Is the information on this screen too dense? What can be removed?

60. Paper In-Screen PrototypesFollowing Process documented by Diego Pulidovia UX Magazine – Paper In-Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine60http://www.uxmag.com/design/paper-in-screen-prototyping

61. Paper Prototype example1. Sketch screen layouts. 61Photo courtesy of Diego Pulido and UX Magazine

62. Paper Prototype example1. Sketch screen layouts. 2. Scan or photograph the sketches. 62Photo courtesy of Diego Pulido and UX Magazine

63. Paper Prototype example1. Sketch screen layouts. 2. Scan or photograph the sketches. 3. Making sizing adjustments to the files. 63Photo courtesy of Diego Pulido and UX Magazine

64. Paper Prototype example 4. Save the resized images in a file format supported by the mobile device. Be mindful of the sequencing of your screens and label files accordingly. 64Photo courtesy of Diego Pulido and UX Magazine

65. 4. Save the resized images in a file format supported by the mobile device. Be mindful of the sequencing of your screens and label files accordingly5. Import the files into the mobile device’s photo gallery. 65Photo courtesy of Diego Pulido and UX Magazine

66. Paper Prototype example4. Save the resized images in a file format supported by the mobile device. Be mindful of the sequencing of your screens and label files accordingly5. Import the files into the mobile device’s photo gallery. 6. Click and swipe away. 66Photo courtesy of Diego Pulido and UX Magazine

67. Paper Prototype examplePaper Prototyping67

68. 68

69. Paper Prototype exampleMobile Browser Prototypes69

70. Paper Prototype exampleKeynote/Powerpoint Prototypes70

71. Paper Prototype example71

72. What we learned from the websteal this slide!Reasons for Prototyping in Keynote/PowerpointIt’s super efficient and fast!Level of fidelity is high – gives you an end result that looks and feels like a real app.Supports *some* gestures and transitions.It’s as close as you can get to the real thing without digging into code.

73. What we learned from the websteal this slide!Reasons for Prototyping in Keynote/PowerpointIt’s super efficient and fast!Level of fidelity is high – gives you an end result that looks and feels like a real app.Supports *some* gestures and transitions.It’s as close as you can get to the real thing without digging into code.

74. Paper Prototype exampleSCROLLGUI = “Desktop” and “Pages” as Anchors74

75. NUIs Can Feel Anchor-less75

76. Paper Prototype example[]+=76

77. Paper Prototype example=77

78. What we learned from the webAnimation & TransitionsA new design elements that can:steal this slide!Reinforce cognition.Help users form a mental model of how information will “unfold”.Provide cues for interaction.Help make your experience feel more intuitive for users.

79. Paper Prototype example79

80. Practice80

81. How to prototype interactive iPad applications in 30 minutes or less using Apple KeynoteBy Amir KhellaPhoto courtesy of Amir Khella81

82. Hypothesis vs. AgendaExperiential Prototyping

83. 83Context FrameworkContext Frameworksteal this slide!

84. 84Context FrameworkContext Frameworksteal this slide!

85. 85Relationships ChordingOrchestration and Inflection

86. You are working on a “broader” mobile project.1Sympathy to context principlesExperiential Prototyping:Best suited for design explorations where:steal this slide!2Target mobile hardware and software scope is unknown.(perhaps being created).3The design space is relatively unchartered.

87. What we learned from the webExperiential PrototypesStoryboardingBody StormingSpeed Dating PrototypesConcept Videos

88. Paper Prototype exampleStoryboarding88

89. 89“in the wild” ideation

90. What we learned from the webMobile UX StoryboardingIdentify the central idea(s) you are trying to communicate.

91. What we learned from the webMobile UX StoryboardingIdentify the central idea(s) you are trying to communicate. Create a character and identify the key issues he/she currently faces.

92. What we learned from the webMobile UX StoryboardingIdentify 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

93. What we learned from the webMobile UX StoryboardingIdentify 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 filling in the cells. Rough out the complete story, then fill in details.

94. What we learned from the webMobile UX StoryboardingIdentify 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 filling in the cells. Rough out the complete story, then fill in details.

95. Paper Prototype example95

96. Paper Prototype example96

97. Paper Prototype exampleBodystorming97

98. Through LinesCompany Secret© 2010 Nokia August 2010 Hinman98

103. In reality… people’s lives are messy

104. Paper Prototype exampleSimilar 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.104

105. Select groups of five to eight participants in a troupe. Photo by Christian Crumlish (xian), 2009 on Flickr105

106. Paper Prototype exampleSelect groups of five to eight participants in a troupe. 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 carrier’s store. Photo by Christian Crumlish (xian), 2009 on Flickr106

107. Paper Prototype example3. 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. 107Photo by Christian Crumlish (xian), 2009 on Flickr

108. Paper Prototype example 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 Flickr108

109. Paper Prototype example5. 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 Flickr109

110. Paper Prototype example6. 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 Flickr110

111. Paper Prototype exampleDesign in Context111

112. Paper Prototype exampleSpeed Dating PrototypesIllustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating112

113. Paper Prototype exampleScott Davidoff of CMUFew design tools

114. High Cost of Failure

115. Unpredictable social consequencesRapidly Exploring Application Design through Speed Dating113

116. Speed Dating PrototypesBuilds on three theories:Abundance brings perspective.1Sympathy to context principles2Need to cross boundaries to know they exist.3Multiple low-cost engagements with multiple concepts enables a broader perspective to emerge.

117. 115“in the wild” ideation

118. Paper Prototype example1. Need ValidationIllustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating116

119. Paper Prototype example1. Need Validation117

120. Paper Prototype example2. User EnactmentsPhoto courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating118

121. Paper Prototype example2. User EnactmentsPhoto courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating119

122. Paper Prototype exampleConcept VideosNokia 888 communicator concept phone design by Tamer Nakisci120

123. Paper Prototype example121

124. Paper Prototype example122

125. Paper Prototype exampleConcept VideosProsHigh Impact

126. Highly Shareable

127. Good for High-Level Ideas

128. Technology still in development 123

129. Paper Prototype exampleConcept VideosProsConsHigh Impact

130. Highly Shareable

131. Good for High-Level Ideas

132. Technology still in development

133. Resource Intensive!!!

134. Skill intensive

135. Cultural Fit