Presentation on mobile prototyping presented at Web Directions Unplugged in Seattle, May 12 - 13, 2011

1. Title Mobile Prototyping EssentialsWeb Directions Unplugged Rachel Hinman Senior 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 process What 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 begin Key Difference = Different Design Choices

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

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

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

10. Our plan for today… Our plan for today Identify where things usually go wrong during the mobile UX process Review the four “whys” of prototyping Identify the two genres of mobile prototyping Overview/how-to of six mobile prototyping methods

11. Along the way… Along the way Watch for slides with this orange label! Slides Worth Keeping Design Principles Design Activities Shameless Opinion

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

13. A What are the similarities

14. A What are the similarities

15. A What are the similarities

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

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

18. Bad Decision-Making 18 Web 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. 20 Web designers know how to work in a rapidly evolving field

21. Prototype Prototype Prototype Prototype Prototype Prototype 21 Prototype

22. PC Prototypingis considered a Luxury A Um… duh!

23. Mobile Prototyping is Essential A Um… duh!

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

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

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

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

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

29. What we learned from the web steal this slide! “Whys” of prototyping Improve your design decision-making Communicate an Idea Gather User Feedback Explore the “Unknowns” Fine-tune an Idea

30. Communicating an Idea or Experience YouTube Video

31. Hypothesis vs. Agenda Gather User Feedback

32. Hypothesis vs. Agenda Exploring the Unknowns

33. Hypothesis vs. Agenda Fine-Tune an Idea

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

35. Tactical Prototyping

36. Hypothesis vs. Agenda Experiential Prototyping

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

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

39. Hypothesis vs. Agenda Tactical Prototyping

40. What we learned from the web steal this slide! Tactical Prototypes Sketching In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype

41. What we learned from the web steal this slide! Tactical Prototypes Sketching In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype

42. Hypothesis vs. Agenda Sketching

43. Hypothesis vs. Agenda Great Mobile UIs Speak their Power

44. Speak their power? Huh? Q: A

45. A light switch

46. Shopping cart 46

47. Shopping cart 47

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

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

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

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

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

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

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

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

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

57. Pivoting people through information 57

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

59. What we learned from the web steal this slide! Tips for Ruthless Editing What’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 Prototypes Following Process documented by Diego Pulidovia UX Magazine – Paper In-Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine 60 http://www.uxmag.com/design/paper-in-screen-prototyping

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

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

63. Paper Prototype example 1. Sketch screen layouts. 2. Scan or photograph the sketches. 3. Making sizing adjustments to the files. 63 Photo 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. 64 Photo 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 accordingly 5. Import the files into the mobile device’s photo gallery. 65 Photo courtesy of Diego Pulido and UX Magazine

66. 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 5. Import the files into the mobile device’s photo gallery. 6. Click and swipe away. 66 Photo courtesy of Diego Pulido and UX Magazine

67. Paper Prototype example Paper Prototyping 67

68. 68

69. Paper Prototype example Mobile Browser Prototypes 69

70. Paper Prototype example Keynote/Powerpoint Prototypes 70

71. Paper Prototype example 71

72. What we learned from the web steal this slide! Reasons for Prototyping in Keynote/Powerpoint It’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 web steal this slide! Reasons for Prototyping in Keynote/Powerpoint It’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 example SCROLL GUI = “Desktop” and “Pages” as Anchors 74

75. NUIs Can Feel Anchor-less 75

76. Paper Prototype example [ ] + = 76

77. Paper Prototype example = 77

78. What we learned from the web Animation & 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 example 79

80. Practice 80

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

82. Hypothesis vs. Agenda Experiential Prototyping

83. 83 Context Framework Context Framework steal this slide!

84. 84 Context Framework Context Framework steal this slide!

85. 85 Relationships Chording Orchestration and Inflection

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

87. What we learned from the web Experiential Prototypes Storyboarding Body Storming Speed Dating Prototypes Concept Videos

88. Paper Prototype example Storyboarding 88

89. 89 “in the wild” ideation

90. What we learned from the web Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate.

91. What we learned from the web Mobile UX Storyboarding Identify 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 web Mobile UX Storyboarding Identify 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 web Mobile UX Storyboarding Identify 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 web Mobile UX Storyboarding Identify 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 example 95

96. Paper Prototype example 96

97. Paper Prototype example Bodystorming 97

98. Through Lines Company Secret © 2010 Nokia August 2010 Hinman 98

103. In reality… people’s lives are messy

104. Paper Prototype example Similar 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 Flickr 105

106. Paper Prototype example Select 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 Flickr 106

107. Paper Prototype example 3. 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. 107 Photo 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 Flickr 108

109. Paper Prototype example 5. 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 Flickr 109

110. Paper Prototype example 6. 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 Flickr 110

111. Paper Prototype example Design in Context 111

112. Paper Prototype example Speed Dating Prototypes Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 112

114. High Cost of Failure

115. Unpredictable social consequencesRapidly Exploring Application Design through Speed Dating 113

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

117. 115 “in the wild” ideation

118. Paper Prototype example 1. Need Validation Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 116

119. Paper Prototype example 1. Need Validation 117

120. Paper Prototype example 2. User Enactments Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 118

121. Paper Prototype example 2. User Enactments Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 119

122. Paper Prototype example Concept Videos Nokia 888 communicator concept phone design by Tamer Nakisci 120

123. Paper Prototype example 121

124. Paper Prototype example 122

126. Highly Shareable

127. Good for High-Level Ideas

128. Technology still in development 123

130. Highly Shareable

131. Good for High-Level Ideas

132. Technology still in development

133. Resource Intensive!!!

134. Skill intensive

135. Cultural Fit

136. Concept videos don’t make bad ideas good.124

137. Paper Prototype example Things to remember… 125

138. Paper Prototype example Fidelity 126

139. Paper Prototype example Failure 127

140. Paper Prototype example Prototyping is not a Panacea 128

141. Our plan for today… Our plan for today Identify where things usually go wrong during the mobile UX process Review the four “whys” of prototyping Identify the two genres of mobile prototyping Overview/how-to of six mobile prototyping methods

142. PC Prototypingis considered a Luxury A Um… duh!

143. Mobile Prototyping is Essential A Um… duh!

144. Good luck Good luck!

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

146. Oh! By the way, I’m writing a book.. The Mobile Frontier A Guide for Designing Mobile Experiences Expected Publication: late 2011 Follow along…

147. Q? Q&A: final break