Designing for Tablet Experiences (Henrik Olsen)

25,841 views
24,526 views

Published on

Henrik Olsen's presentation from Web 2.0 Expo New York:

If you’re ready to jump into designing for tablets, this will be a great two-part workshop for you. Given the mass adoption of tablet devices over this past year,this workshop has been created to present the fundamentals of designing tablet applications as well as tablet optimized web sites. Learn from a leader in adopting classic design principles to the rapidly evolving world of tablets.

Published in: Design, Technology, Business
3 Comments
26 Likes
Statistics
Notes
No Downloads
Views
Total views
25,841
On SlideShare
0
From Embeds
0
Number of Embeds
1,127
Actions
Shares
0
Downloads
368
Comments
3
Likes
26
Embeds 0
No embeds

No notes for slide

Designing for Tablet Experiences (Henrik Olsen)

  1. Web 2.0 NYCDesign 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 designerWe’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 considerationsBREAK• 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 companythat creates new ways for people to interactwith 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 iPadRIM 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 & Gyroscopeof the ways youcan use these Speakerfeatures? 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 recognitionWhat are some Accelerometer & Gyroscopeof the ways you • Orientation • Motion detection • Speed based controlcan use these Speaker • Input response • Audio listening • Conferencingfeatures? 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 & weaknessesiOS — AppleStrengths 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 & weaknessesiOS — 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 isStrengths 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 & weaknessesAndroid — GoogleMotorola Xoom Kindle FireStrengths 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 & weaknessesBlackBerry Tablet OSRIMStrengths 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 appsSafari, 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 QuizWho invented touch technology?A) Sam HurstB) E.A. JohnsonC) Johnny IvesD) Thomas EdisonE) Al Gore © 2011 Hot Studio, Inc. Proprietary & Confidential 36
  44. Pop QuizAnswer....Wikipedia: The first touch screen was a capacitive touch screen developed byE.A. Johnson at the Royal Radar Establishment, Malvern, UK. The inventorbriefly described his work in a short article published in 1965[5] and then morefully - along with photographs and diagrams - in an article published in 1967.[6]A description of the applicability of the touch technology for air traffic controlwas described in an article published in 1968.[7]Note: Contrary to many accounts,[8] while Dr. Sam Hurst played an importantrole in the development of touch technologies, he neither invented the firsttouch 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 DropListABC 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 senseEXERCISE 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 need1. What problem does it solve? What is the opportunity? (what ‘un-met need’ have you identified) 46
  60. Exercise 1: defining a need1. 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 need1. 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 need1. 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 experiencesplus hundreds of others © 2011 Hot Studio, Inc. Proprietary & Confidential 48
  66. Consideration: 10Consistent interactionsTake advantage of whatpeople 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: 10Consistent interactionsTake advantage of whatpeople 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: 9Direct 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: 9Direct 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: 8A ordancesThere are no rollovers on tablets - links,buttons, and all other controls must haveplenty of a ordance• Fingertips are larger than mouse cursors 51
  71. Consideration: 7Behaviors & TransitionsUser feedback is critical. Tablet UI’s areexpected to be responsive. When a userdoes something, the interface shouldacknowledge the input. transition animation — gesture animation 52
  72. Consideration: 7Behaviors & TransitionsUser feedback is critical. Tablet UI’s are These are the littleexpected to be responsive. When a userdoes something, the interface should things that make it fun!acknowledge the input. transition animation — gesture animation 52
  73. Consideration: 7Behaviors & TransitionsAspects 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...
  76. ...overshooting....
  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 isshown with vertically scrollable content, but the size of the stack window could be made to vary toaccomodate up to a certain number of child objects.
  79. © 2011 Hot Studio, Inc. Proprietary & Confidential
  80. Consideration: 6Resolution & screen dimensionAccommodating resolution of the device. Plus, howdoes it compare to your authoring environment? 60
  81. Consideration: 6Resolution & screen dimensionAccommodating resolution of the device. Plus, howdoes 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: 6Resolution & screen dimensionAccommodating resolution of the device. Plus, howdoes it compare to your authoring environment? 62
  83. Consideration: 5Layout flexibilityAre the functions, and content making the bestuse 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: 4Involve your users!Understand their needs &tasksSpend time showing your conceptsand 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: 3Audience motivation to learn UIThe casual novice tablet user vs. thehighly motivated tab geek. 65
  86. Consideration: 2Content deliveryKeep 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: 1Backwards compatibleIs your app on supported devicesDoes your app require devicehardware that is not available onearlier 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 scenariosEXERCISE #2: Thinking through the full context of your app © 2011 Hot Studio, Inc. Proprietary & Confidential 71
  92. Storyboard contextApp is just part of a biggerexperience.Storyboarding the scenario:• Before — During — After — Repeat• The ‘eco-system’ around your app 72
  93. 73
  94. 74
  95. 75
  96. Exercise 2: Storyboard contextIllustrate, as a storyboard, the full context of a personusing 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 ContentEXERCISE #3: The functions and content of your app © 2011 Hot Studio, Inc. Proprietary & Confidential 79
  101. Exercise 3:The core features andcontent of your app• Yellow sticky = a feature• Orange sticky = a content ‘type’ 80
  102. Exercise 3:The core features andcontent of your app• Yellow sticky = a feature• Orange sticky = a content ‘type’You’ve got 12 minutes.... go! 80
  103. GesturesRather than mouse or keyboard events, the tabletexperience 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
  108. Annotation of gestures
  109. Annotation of gestures 87
  110. Tools for the designerDigital + Analog © 2011 Hot Studio, Inc. Proprietary & Confidential 88
  111. Tools used for designing a tablet experienceExperience Design• Whiteboard & sketch paper• Visio• OmniGra e• Illustrator• InDesign
  112. Tools used for designing a tablet UIExperience Design• Whiteboard & sketch paper• Visio - from MicroSoft• OmniGra e• Illustrator• InDesign 90
  113. Tools used for designing a tablet UIExperience Design• Whiteboard & sketch paper• Visio• OmniGra e 5• Illustrator• InDesign 91
  114. Tools used for designing a tablet UIExperience Design• Whiteboard & sketch paper• Visio• OmniGra e 5• Illustrator• InDesign 92
  115. Tools used for designing a tablet UIExperience Design• Whiteboard & sketch paper• Visio• OmniGra e 5• Illustrator• InDesign 93
  116. Tools used for designing a tablet UIVisual Design• Sketch Paper!• Photoshop• LiveView• AfterE ects• Fireworks 94
  117. Tools used for designing a tablet UIVisual Design• Sketch Paper!• Photoshop• LiveView• AfterE ects• Fireworks 95
  118. Tools used for designing a tablet UIVisual Design• Sketch Paper!• Photoshop• LiveView• AfterE ects• Fireworks 96
  119. Tools used for designing a tablet UIVisual Design• Sketch Paper!• Photoshop• LiveView• AfterE ects• Fireworks 97
  120. Tools used for designing a tablet UIVisual Design• Sketch Paper!• Photoshop• LiveView• AfterE ects• Fireworks 98
  121. Why Prototype?Iterative design process: ideas make learn validate 99
  122. Why Prototype? • Allows you to fine tune you ideas and interactions (Revealing those unexpected gaps)Iterative design process: ideas make learn validate 99
  123. Why Prototype? • Allows you to fine tune you ideas and interactions (Revealing those unexpected gaps) • Bring your ideas to life.... quickly sketchingIterative 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 • See the choreography of your transitions and screen statesIterative design process: ideas make learn validate 99
  125. Tools for prototypingGoodReader (PDFs) Picture Link - iPDF MinimalFolio + + ‘Wallaby’Apple Keynote Fireworks Flash coming Catalyst soon: 100
  126. Core UI resources are available 101
  127. Resources for visual designersCore UI graphic assets available: teehanlax.com/blog 102
  128. Resources for visual designersCore UI graphic assets available: teehanlax.com/blog 103
  129. Resources for visual designersHigh quality visual interface stock sites: 104
  130. Resources for visual designersHigh quality visual interface stock sites: 104
  131. Resources for visual designersHigh quality visual interface stock sites: 104
  132. Resources for visual designersHigh quality visual interface stock sites: 104
  133. 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
  134. Annotated wireframes & layered PSDs: 106
  135. Annotated wireframes & layered PSDs: 106
  136. Flows & wireframesEXERCISE 4: Tablet app interface sketch © 2011 Hot Studio, Inc. Proprietary & Confidential 107
  137. User flow 108
  138. 109
  139. 110
  140. 111
  141. 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
  142. 113
  143. 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 ifmagazines they they an interesting already own point 114
  144. Exercise #4: Features & Functionality mappingStep 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
  145. Exercise #4: Features & Functionality mappingStep 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
  146. Who wants to share what they’ve come up with? 116
  147. Team & ProcessMore than one way to approach © 2011 Hot Studio, Inc. Proprietary & Confidential 117
  148. The teamCollaboration of a Project Managermulti-disciplinedteam is critical User Experience Visual Designer Content Users Engineer Client 118
  149. Process (waterfall) User Experience Visual Design Engineering Project ManagementDiscovery 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
  150. 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
  151. IF we have time left...A few basics of getting your app into the app store © 2011 Hot Studio, Inc. Proprietary & Confidential 121
  152. A few reasons for rejection from Apple App Store 122
  153. 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
  154. Thank you!Hot Studio Inc.585 Howard Street1st FloorSan Francisco, CA 94105415.284.7250520 Broadway, 8th FloorNew York NY 10012212.242.1082hotstudio.comhottub.hotstudio.comtwitter.com/hotstudiofacebook.com/hotstudio

×