![Pop Quiz
Answer....
Wikipedia: The first touch screen was a capacitive touch screen developed by
E.A. Johnson at the Royal Radar Establishment, Malvern, UK. The inventor
briefly described his work in a short article published in 1965[5] and then more
fully - along with photographs and diagrams - in an article published in 1967.[6]
A description of the applicability of the touch technology for air traffic control
was described in an article published in 1968.[7]
Note: Contrary to many accounts,[8] while Dr. Sam Hurst played an important
role in the development of touch technologies, he neither invented the first
touch sensor, nor the first touch screen.
© 2011 Hot Studio, Inc. Proprietary & Confidential 37](https://image.slidesharecdn.com/web2tabletdesignworkshop-111011092734-phpapp01/85/Web2-0-Tablet-Experience-Design-Workshop-44-320.jpg)
![This stack can be closed by tapping the “Back to [courseName]” button in the upper right corner. Here, it is
shown with vertically scrollable content, but the size of the stack window could be made to vary to
accomodate up to a certain number of child objects.](https://image.slidesharecdn.com/web2tabletdesignworkshop-111011092734-phpapp01/85/Web2-0-Tablet-Experience-Design-Workshop-78-320.jpg)
Web2.0 Tablet Experience Design Workshop
- 1. Web 2.0 NYC Design for Tablet Experiences | Workshop | Henrik Olsen
- 2. Goals of this workshop Who: For designers that are new to design for web, mobile, and tablet, as well as those who are at an intermediate level. Why we’re doing this: Share a sense of what makes a good tablet experience, and how you can get started as a tablet app designer We’re all going to learn from each other © 2011 Hot Studio, Inc. Proprietary & Confidential 2
- 3. Agenda: • Who are we • The hardware and operating systems • Cool apps: top picks and why • When & where an app makes sense - exercise #1 • Top 10 design considerations BREAK • Use scenarios - exercise #2 • Features & functions & content- exercise #3 • Gestures • Tools for designers • Task flows & dashboards - exercise #4 • Project team & ‘a process’ 3
- 4. What are you hoping to learn, or experience, in this workshop? 4
- 5. Who are we? Who here has designed a tablet app before? Who here is a professional web designer? 5
- 6. Where I come from (an experience design firm) © 2011 Hot Studio, Inc. Proprietary & Confidential 6
- 7. 7
- 8. 8
- 9. Hot Studio is an experience design company that creates new ways for people to interact with products, services, and people 8
- 10. © 2010 Hot Studio, Inc. Proprietary & Confidential | 11/03/10 Electronic Arts + Hot Studios
- 11. © 2010 Hot Studio, Inc. Proprietary & Confidential
- 12. 11
- 13. © 2011 Hot Studio, Inc. Proprietary & Confidential
- 14. 13
- 15. 14
- 16. 15
- 17. 16
- 18. 17
- 19. © 2011 Hot Studio, Inc. Proprietary & Confidential
- 20. © 2011 Hot Studio, Inc. Proprietary & Confidential
- 21. © 2011 Hot Studio, Inc. Proprietary & Confidential
- 22. 21
- 23. 22
- 24. 23
- 25. 23
- 26. 23
- 27. 24
- 28. 25
- 29. 25
- 30. 25
- 31. 25
- 32. Tablets: the hardware and the operating systems (and important features to exploit!) © 2011 Hot Studio, Inc. Proprietary & Confidential 26
- 33. Motorola Xoom Galaxy iPad RIM Playbook Kindle Fire 27
- 34. HP TouchPad with Android! HTC Flyer (WebOS not totally dead) Dell Streak 28
- 35. HP TouchPad with Android! HTC Flyer (WebOS not totally dead) Dell Streak 28
- 36. Smart use of device hardware! Cameras (front & back) What are some Accelerometer & Gyroscope of the ways you can use these Speaker features? Headphone jack Microphone Multi-touch color display (‘Retina Display’ iPad 3) WiFi & 3G Home & Volume & Locking buttons Cover/stand 29
- 37. Smart use of device hardware! Cameras (front & back) • Augmented Reality • Photo/Video • Optical recognition What are some Accelerometer & Gyroscope of the ways you • Orientation • Motion detection • Speed based control can use these Speaker • Input response • Audio listening • Conferencing features? Headphone jack • Private listening • Video conferencing Microphone • Voice/sound commands • Audio Recording Multi-touch color display (‘Retina Display’ iPad 3) • System & custom gestures • Custom gestures • Reading WiFi & 3G • Dynamic content • txt, email, video Home & Volume & Locking buttons • Dynamic content • txt, email, video Cover/stand • Sit back experience • Hands free viewing 30
- 38. Operating systems - strengths & weaknesses iOS — Apple Strengths Weaknesses ‣ Quality control, from device thru OS ‣ Industry leader:~68% market share ‣ Tightly controlled & restricted (9.25M sold just last quarter!) ‣ Expensive device ‣ 100K+ apps already available ‣ No Flash support ‣ Growing support for developers ‣ Apple gets 30% of in app revenue ‣ iOS 5 expected any day! ‣ Cocoa developers are hard to find © 2011 Hot Studio, Inc. Proprietary & Confidential 31
- 39. Operating systems - strengths & weaknesses iOS — Apple “Apple and our customers place a high value on simple, refined, creative, well thought through interfaces. They take more work but are worth it... if your UI is Strengths complex device thru OS or less than very good, it may Weaknesses ‣Quality control, from ‣ Tightly controlled & restricted be rejected” ‣ Industry leader:~68% market share (9.25M sold just last quarter!) ‣ Expensive device — iTunes App Store review guidelines ‣ 100K+ apps already available ‣ No Flash support (as noted in ‘From Idea to App’: Shawn Welch) ‣ Growing support for developers ‣ Apple gets 30% of in app revenue ‣ iOS 5 expected any day! ‣ Cocoa developers are hard to find © 2011 Hot Studio, Inc. Proprietary & Confidential 32
- 40. Operating systems - strengths & weaknesses Android — Google Motorola Xoom Kindle Fire Strengths Weaknesses ‣ Runner up (~26% market share) ‣ True tablet OS still in infancy ‣ Open source ‣ Fewer tablet apps ‣ Available on range of devices & prices ‣ Fragmented UI and dev standards ‣ Can support Flash © 2011 Hot Studio, Inc. Proprietary & Confidential 33
- 41. Operating systems - strengths & weaknesses BlackBerry Tablet OS RIM Strengths Weaknesses ‣ Credibility of Blackberry ‣ So far only 5% of the market ‣ BlackBerry widely adopted in ‣ Limited apps business world © 2011 Hot Studio, Inc. Proprietary & Confidential 34
- 42. Browser based apps Safari, Firefox for Android, Opera for Tablets, etc. Strengths Weaknesses ‣ Build using html 5. Large developer base! ‣ Mostly does not perform as fast as native apps ‣ Outside Apple’s app store and it’s revenue sharing Control your marketing! ‣ Inconsistent user experience, and level of quality ‣ Not required to be within Apple’s design, content & build requirements ‣ Can not always use all hardware of the device ‣ Works across platforms - most laptops and tablets ‣ Avoids costs of building for multiple platforms © 2011 Hot Studio, Inc. Proprietary & Confidential 35
- 43. Pop Quiz Who invented touch technology? A) Sam Hurst B) E.A. Johnson C) Johnny Ives D) Thomas Edison E) Al Gore © 2011 Hot Studio, Inc. Proprietary & Confidential 36
- 44. Pop Quiz Answer.... Wikipedia: The first touch screen was a capacitive touch screen developed by E.A. Johnson at the Royal Radar Establishment, Malvern, UK. The inventor briefly described his work in a short article published in 1965[5] and then more fully - along with photographs and diagrams - in an article published in 1967.[6] A description of the applicability of the touch technology for air traffic control was described in an article published in 1968.[7] Note: Contrary to many accounts,[8] while Dr. Sam Hurst played an important role in the development of touch technologies, he neither invented the first touch sensor, nor the first touch screen. © 2011 Hot Studio, Inc. Proprietary & Confidential 37
- 45. Cool Apps! Five apps that kick ass © 2011 Hot Studio, Inc. Proprietary & Confidential 38
- 46. What is cool? Impact Context Craft • Practical purpose of app • The geography, • Design of the UI. situation, & culture in Presentation & emotional • Positive impact on which the app lives content people, society, the environment & business • The relevance of the • Elegance in language, problem it addresses, functionality & ease of the timeliness usability • Overall performance 39
- 47. Categories of apps • Books & magazines • Socializing • Educational/learning • Financial management • Health & exercise • Games • Sports & Entertainment • Business • Music: listening and composing • News and weather • Travel • Shopping • _________? 40
- 48. Flipboard DropList ABC Player Zillow 41
- 49. Discovery Channel Gilt: JetSetter 42
- 50. Google Earth App ESPN ScoreCenter XL 43
- 51. What, where, when, and why an app makes sense EXERCISE 1: Coming up with your big idea © 2011 Hot Studio, Inc. Proprietary & Confidential 44
- 52. Finding a need 45
- 53. Finding a need • What does a person want/need to do? 45
- 54. Finding a need • What does a person want/need to do? • Is a tablet app appropriate for the context of the user? Away from the o ce, home? (shopping, planning, playing, socializing) 45
- 55. Finding a need • What does a person want/need to do? • Is a tablet app appropriate for the context of the user? Away from the o ce, home? (shopping, planning, playing, socializing) • Content must fit the context Can they access content, and data, ‘just at the right time‘ 45
- 56. Finding a need • What does a person want/need to do? • Is a tablet app appropriate for the context of the user? Away from the o ce, home? (shopping, planning, playing, socializing) • Content must fit the context Can they access content, and data, ‘just at the right time‘ • Is there an even larger opportunity? Laptop, TV, mobile, tablet, appliance, as well as physical spaces. (a digital eco-system!) 45
- 57. Finding a need • What does a person want/need to do? • Is a tablet app appropriate for the context of the user? Away from the o ce, home? (shopping, planning, playing, socializing) • Content must fit the context Can they access content, and data, ‘just at the right time‘ • Is there an even larger opportunity? Laptop, TV, mobile, tablet, appliance, as well as physical spaces. (a digital eco-system!) • Can it be useful, engaging, and intuitive... from the very first time! 45
- 58. Exercise 1: defining a need 46
- 59. Exercise 1: defining a need 1. What problem does it solve? What is the opportunity? (what ‘un-met need’ have you identified) 46
- 60. Exercise 1: defining a need 1. What problem does it solve? What is the opportunity? (what ‘un-met need’ have you identified) 2. Who are the people that will use it? 46
- 61. Exercise 1: defining a need 1. What problem does it solve? What is the opportunity? (what ‘un-met need’ have you identified) 2. Who are the people that will use it? 3. Where is it used? In home, o ce, shopping, out & about? 46
- 62. Exercise 1: defining a need 1. What problem does it solve? What is the opportunity? (what ‘un-met need’ have you identified) 2. Who are the people that will use it? 3. Where is it used? In home, o ce, shopping, out & about? 4. How does it get paid for? What is the business model? 46
- 63. Big idea example: Example: Marathon Coach App 1. No great tablet apps that help people improve their running performance. People need a way to track and share their data with coaches and/or friends, get advice about techniques, work-outs, and equipment. Create a training plans and evaluate progress. 2. For new and experienced marathon runners, and coaches that have tablet, mobile & laptop 3. Home for planning, and at the track for coaching and data capture 4. App is free, but charge for training plans, coaching service, and advanced content. 47
- 64. Big idea example: Example: Marathon Coach App 1. No great tablet apps that help people improve their running performance. People need a way to track and share their data with coaches and/or friends, get advice about techniques, work-outs, and equipment. Create a training plans and evaluate progress. 2. For new and experienced marathon runners, and coaches that have tablet, mobile & laptop 3. Home for planning, and at the track for coaching and data capture 4. App is free, but charge for training plans, coaching service, and advanced content. You’ve got 10 minutes.... go! 47
- 65. Top 10 considerations for designing tablet experiences plus hundreds of others © 2011 Hot Studio, Inc. Proprietary & Confidential 48
- 66. Consideration: 10 Consistent interactions Take advantage of what people already know! • Established user interactions should be used... unless, an interaction requires something truly unique • Carefully consider when conforming or diverging from the native iOS UI elements 49
- 67. Consideration: 10 Consistent interactions Take advantage of what people already know! • Established user interactions should be used... unless, an interaction requires something truly unique • Carefully consider when conforming or diverging from the native iOS UI elements 49
- 68. Consideration: 9 Direct manipulation • Allow users to manipulate objects directly on the screen • Avoid editing palettes — and typing • Don’t overload the user with irrelevant options (keep it simple: hide anything that doesn’t apply) Image ‘borrowed’ from Ron Peterson 50
- 69. Consideration: 9 Direct manipulation • Allow users to manipulate objects directly on the screen • Avoid editing palettes — and typing • Don’t overload the user with irrelevant options (keep it simple: hide anything that doesn’t apply) Image ‘borrowed’ from Ron Peterson 50
- 70. Consideration: 8 A ordances There are no rollovers on tablets - links, buttons, and all other controls must have plenty of a ordance • Fingertips are larger than mouse cursors 51
- 71. Consideration: 7 Behaviors & Transitions User feedback is critical. Tablet UI’s are expected to be responsive. When a user does something, the interface should acknowledge the input. transition animation — gesture animation 52
- 72. Consideration: 7 Behaviors & Transitions User feedback is critical. Tablet UI’s are These are the little expected to be responsive. When a user does something, the interface should things that make it fun! acknowledge the input. transition animation — gesture animation 52
- 73. Consideration: 7 Behaviors & Transitions Aspects to consider: • How does it start and end? • What arc does it follow? • What are the levels of opacity? • Does it flip? • Does it rotate? • Does it pulse? • Does it wiggle? 53
- 74. 3. Opening/Closing Stacks This direction takes a different approach than the first for stacks. Tapping on a stack...
- 75. ...makes it appear centered in the screen...
- 77. ...and settling back into its final size.
- 78. This stack can be closed by tapping the “Back to [courseName]” button in the upper right corner. Here, it is shown with vertically scrollable content, but the size of the stack window could be made to vary to accomodate up to a certain number of child objects.
- 79. © 2011 Hot Studio, Inc. Proprietary & Confidential
- 80. Consideration: 6 Resolution & screen dimension Accommodating resolution of the device. Plus, how does it compare to your authoring environment? 60
- 81. Consideration: 6 Resolution & screen dimension Accommodating resolution of the device. Plus, how does it compare to your authoring environment? A few details: • Your assets will need to be both 163 ppi AND 326ppi for retina display. (and 72dpi for desktop displays) • Need high-resolution versions of bitmaps - or use vectors (adding @2x to the ends of your image names) • Image compression has to be done carefully due to high rez screens • Web based apps should have liquid interfaces to accommodate variety of device screen dimensions 61
- 82. Consideration: 6 Resolution & screen dimension Accommodating resolution of the device. Plus, how does it compare to your authoring environment? 62
- 83. Consideration: 5 Layout flexibility Are the functions, and content making the best use of the device orientation? • Work mode common in landscape. Lean-back read in portrait • ‘Responsive web’ design (new CSS & JS standards support SVG and bitmap) 63
- 84. Consideration: 4 Involve your users! Understand their needs & tasks Spend time showing your concepts and prototypes to your target users. • What is the user trying to do? • Analyze the users tasks and needs and keep your design focused 64
- 85. Consideration: 3 Audience motivation to learn UI The casual novice tablet user vs. the highly motivated tab geek. 65
- 86. Consideration: 2 Content delivery Keep your app alive with fresh content. You must know the source of the data. • Is your app connected? • Does it rely on live download? • Early on, you must know and secure your data source. (Open API, proprietary content, partnerships, etc.) 66
- 87. Consideration: 1 Backwards compatible Is your app on supported devices Does your app require device hardware that is not available on earlier versions of the device 67
- 88. Break time! ...be back at 10:40 sharp 10:20am - 10:40am 68
- 89. Obligatory Dilbert cartoon 69
- 90. Welcome back! ...letʼs keep working on your app 10:40am 70
- 91. User scenarios EXERCISE #2: Thinking through the full context of your app © 2011 Hot Studio, Inc. Proprietary & Confidential 71
- 92. Storyboard context App is just part of a bigger experience. Storyboarding the scenario: • Before — During — After — Repeat • The ‘eco-system’ around your app 72
- 93. 73
- 94. 74
- 95. 75
- 96. Exercise 2: Storyboard context Illustrate, as a storyboard, the full context of a person using your application. (location, people, situation, etc.) Consider: • Where they are in their day? • With whom they are interacting? • Are there other devices to sync with? • Is the data saved or shared or downloaded? 76
- 97. 77
- 98. You’ve got 10 minutes.... go! 77
- 99. Who wants to share what they’ve come up with? 78
- 100. Features, Functionality, and Content EXERCISE #3: The functions and content of your app © 2011 Hot Studio, Inc. Proprietary & Confidential 79
- 101. Exercise 3: The core features and content of your app • Yellow sticky = a feature • Orange sticky = a content ‘type’ 80
- 102. Exercise 3: The core features and content of your app • Yellow sticky = a feature • Orange sticky = a content ‘type’ You’ve got 12 minutes.... go! 80
- 103. Gestures Rather than mouse or keyboard events, the tablet experience is based on touch events. Let’s look at common and un-common ways to navigate. © 2011 Hot Studio, Inc. Proprietary & Confidential 81
- 104. Core iOS touches ‘gestures’: Custom gestures: (using the UITapGestureRecognizer) • Tap • Rotate • Drag • Bump • Flick • Long hold/press • Swipe • Multi-touch • Double-Tap • Pinch Open/Close • Touch & Hold • Shake 82
- 105. When to pan or scroll or swipe? How does information flow and overflow? (carding, scrolling, accordion) 83
- 106. When to pan or scroll or swipe? How does information flow and overflow? (carding, scrolling, accordion) 83
- 107. Annotation of gestures 84
- 110. Annotation of gestures 87
- 111. Tools for the designer Digital + Analog © 2011 Hot Studio, Inc. Proprietary & Confidential 88
- 112. Tools used for designing a tablet experience Experience Design • Whiteboard & sketch paper • Visio • OmniGra e • Illustrator • InDesign
- 113. Tools used for designing a tablet UI Experience Design • Whiteboard & sketch paper • Visio - from MicroSoft • OmniGra e • Illustrator • InDesign 90
- 114. Tools used for designing a tablet UI Experience Design • Whiteboard & sketch paper • Visio • OmniGra e 5 • Illustrator • InDesign 91
- 115. Tools used for designing a tablet UI Experience Design • Whiteboard & sketch paper • Visio • OmniGra e 5 • Illustrator • InDesign 92
- 116. Tools used for designing a tablet UI Experience Design • Whiteboard & sketch paper • Visio • OmniGra e 5 • Illustrator • InDesign 93
- 117. Tools used for designing a tablet UI Visual Design • Sketch Paper! • Photoshop • LiveView • AfterE ects • Fireworks 94
- 118. Tools used for designing a tablet UI Visual Design • Sketch Paper! • Photoshop • LiveView • AfterE ects • Fireworks 95
- 119. Tools used for designing a tablet UI Visual Design • Sketch Paper! • Photoshop • LiveView • AfterE ects • Fireworks 96
- 120. Tools used for designing a tablet UI Visual Design • Sketch Paper! • Photoshop • LiveView • AfterE ects • Fireworks 97
- 121. Tools used for designing a tablet UI Visual Design • Sketch Paper! • Photoshop • LiveView • AfterE ects • Fireworks 98
- 122. Why Prototype? Iterative design process: ideas make learn validate 99
- 123. Why Prototype? • Allows you to fine tune you ideas and interactions (Revealing those unexpected gaps) Iterative design process: ideas make learn validate 99
- 124. Why Prototype? • Allows you to fine tune you ideas and interactions (Revealing those unexpected gaps) • Bring your ideas to life.... quickly sketching Iterative design process: ideas make learn validate 99
- 125. Why Prototype? • Allows you to fine tune you ideas and interactions (Revealing those unexpected gaps) • Bring your ideas to life.... quickly sketching • See the choreography of your transitions and screen states Iterative design process: ideas make learn validate 99
- 126. Tools for prototyping GoodReader (PDFs) Picture Link - iPDF MinimalFolio + + ‘Wallaby’ Apple Keynote Fireworks Flash coming Catalyst soon: 100
- 127. Core UI resources are available 101
- 128. Resources for visual designers Core UI graphic assets available: teehanlax.com/blog 102
- 129. Resources for visual designers Core UI graphic assets available: teehanlax.com/blog 103
- 130. Resources for visual designers High quality visual interface stock sites: 104
- 131. Resources for visual designers High quality visual interface stock sites: 104
- 132. Resources for visual designers High quality visual interface stock sites: 104
- 133. Resources for visual designers High quality visual interface stock sites: 104
- 134. Development - very briefly! Important: Make friends with a developer! Someone who can work with Apple’s Software Development Kit (SDK): Xcode 4 (development environment) - Interface Builder - Instruments - iOS Simulator - See: developer.apple.com 105
- 135. Annotated wireframes & layered PSDs: 106
- 136. Annotated wireframes & layered PSDs: 106
- 137. Flows & wireframes EXERCISE 4: Tablet app interface sketch © 2011 Hot Studio, Inc. Proprietary & Confidential 107
- 138. User flow 108
- 139. 109
- 140. 110
- 141. 111
- 142. App map Load (animation) Share Network Home Search Dashboard Search for topics FB, Twitter, etc. (timeline view & select topics) Related Article News Article Profile (text, image, video) (text, image, video) Preferences, account info., Shopping Partner Sites related products additional content 112
- 143. 113
- 144. Sketching Magazine App for iPad features: Help Log In - Show new magazine titles - Magazine shop - Library of users magazines Featured User will swip through - Show upcoming events - Magazines a variety of covers calendar <- Cover shots -> - User generated content (reviews, comments, etc) - Facebook integration - Twitter stream Your Full Facebook Library Magazine Shop Twitter User can post to FB if they User can like an article or title. get to the Or, they can tweet if magazines they they an interesting already own point 114
- 145. Exercise #4: Features & Functionality mapping Step A: Organize the content and functions onto the provided ‘Post-its’— organize them on the blank sheet(s) Step B: With pencil, sketch on the ‘paper iPads’ the ‘main’ screen layouts — with appropriate functions & content. 115
- 146. Exercise #4: Features & Functionality mapping Step A: Organize the content and functions onto the provided ‘Post-its’— organize them on the blank sheet(s) Step B: With pencil, sketch on the ‘paper iPads’ the ‘main’ screen layouts — with appropriate functions & content. You’ve got about 15 minutes.... go! 115
- 147. Who wants to share what they’ve come up with? 116
- 148. Team & Process More than one way to approach © 2011 Hot Studio, Inc. Proprietary & Confidential 117
- 149. The team Collaboration of a Project Manager multi-disciplined team is critical User Experience Visual Designer Content Users Engineer Client 118
- 150. Process (waterfall) User Experience Visual Design Engineering Project Management Discovery Strategy Design Build • Customer / Market • Persona development • Screen schematics • Style guide Research • Content needs analysis • Visual design • Manage dev team • Stakeholder interviews • Feature prioritization • User testing • Collaborate with • Key schematics & IA • Design refinement dev team • Existing apps audit Visual design workshop • Design extension • QA & testing • Interview target users • Business & technical • Development throughout the • Competitive audit planning requirements development • Technology discovery • User concept testing process 119
- 151. Sample of project flow for simple tablet app • Conduct a Discovery work session to understand you business and design goals for the project • Review your content offering and develop a design approach that best leverages content • Conduct an evaluation of 5-7 competitors and/or other brands • Develop an interaction model for the content and high level interaction design • Wire frame review over the course of our strategy and design phases • Several visual design concepts that reflect a range of approaches • Based on the selection of 1 of the visual design directions extend that direction across the additional screens and dialogs the application will require. • Work with developer during development 120
- 152. IF we have time left... A few basics of getting your app into the app store © 2011 Hot Studio, Inc. Proprietary & Confidential 121
- 153. A few reasons for rejection from Apple App Store 122
- 154. A few reasons for rejection from Apple App Store • Not following Apple’s Interface Guidelines • Lack of rights to content or brands presented in your app • Insu cient error messaging. Spinning ball does not su ce! • Political lampooning • App crashing • Violating patented UI patterns... coverflow, for example • Contests and/or sweepstakes • Poor handling of user info • Apps that are primarily for serving ads • Objectionable content... nudity • Transactions outside the app store 122
- 155. Thank you! Hot Studio Inc. 585 Howard Street 1st Floor San Francisco, CA 94105 415.284.7250 520 Broadway, 8th Floor New York NY 10012 212.242.1082 hotstudio.com hottub.hotstudio.com twitter.com/hotstudio facebook.com/hotstudio