Touchscreen UX Design Workshop
3 likes1,174 views
A 2.5-hour workshop I created and shared with my colleagues at Razorfish Austin in October 2012. Inspired by Dan Saffer's half-day workshop on the same topic, presented at Webvisions 2012.
![Easy vs. reach
Some of the best [touchscreen apps] have placed controls in ways that best match the ergonomics
of our hands while holding [the devices] Put the high-use controls in the Easy zones, and controls
that are less used (and certainly those you dont want accidentally pressed) in the Reach zones.
(Dan in a kickerstudio.com blog post)
17](https://image.slidesharecdn.com/touchscreenworkshop2012-10-05-141229155820-conversion-gate01/85/Touchscreen-UX-Design-Workshop-19-320.jpg)
![Easy vs. reach
Some of the best [touchscreen apps] have placed controls in ways that best match the ergonomics
of our hands while holding [the devices] Put the high-use controls in the Easy zones, and controls
that are less used (and certainly those you dont want accidentally pressed) in the Reach zones.
(Dan in a kickerstudio.com blog post)
17](https://image.slidesharecdn.com/touchscreenworkshop2012-10-05-141229155820-conversion-gate01/85/Touchscreen-UX-Design-Workshop-20-320.jpg)
![Easy vs. reach
Some of the best [touchscreen apps] have placed controls in ways that best match the ergonomics
of our hands while holding [the devices] Put the high-use controls in the Easy zones, and controls
that are less used (and certainly those you dont want accidentally pressed) in the Reach zones.
(Dan in a kickerstudio.com blog post)
17](https://image.slidesharecdn.com/touchscreenworkshop2012-10-05-141229155820-conversion-gate01/85/Touchscreen-UX-Design-Workshop-21-320.jpg)
More Related Content
What's hot (18)
Similar to Touchscreen UX Design Workshop (20)
Recently uploaded (20)
Touchscreen UX Design Workshop
- 1. Touchscreen Design Workshop Kirsten Miller ~ October 5, 2012 ~ Razor鍖sh Austin 1
- 2. Credit where credit is due... Dan Saffer Director, Interaction Design Smart Design Follow @odannyboy on Twitter to learn about his upcoming book, Microinteractions, to be published next spring by OReilly. 2
- 3. Keeping it basic What we'll be covering: Some guiding principles for creating touchscreen experiences, with a focus on smartphones and tablets (capacitive technology) Fingers and hands Activity zones Common app structures Multitouch and gestures Prototyping tools What we won't be covering: Devices using touch technologies like infrared beams, cameras, ultrasonic waves, resistance Platform differences Resolution differences and responsive design Strategy Coding, development 3
- 4. Workshop activities Fun warm-up Smartphone sketch activity Tablet activity focusing on multitouch/gesture http://genelu.com/2011/04/nike-plus-dogs/ 4
- 5. Warm-up exercise! Sketch a touchscreen version of a simple household thermostat. (10 minutes) Requirements: Accessed via whatever touchscreen interface(s) you choose See current temperature Set desired temperature See whether system is heating or cooling Turn system off or on Not required for this exercise: Programming dates/times, controlling multiple rooms 5
- 6. Fingers and hands touch targets and coverage 6
- 7. Lets talk about 鍖ngers Theyre far less accurate than a screen cursor. 1 mm 8-10 mm diameter (鍖ngertip) 7
- 8. Touch target sizes Saffers minimum size guidelines for touch targets: 8 mm 1 cm 2 mm Option3Selected Option2 8
- 9. Touch target sizes 8 mm 1 cm 2 mm Option3Selected Option2 Physical keyboard: 8 mm 15 mm 4 mm 15 mm Saffers minimum size guidelines for touch targets: 9
- 10. Touch target sizes 5 mm 6.5 mm 1 mm iOS keyboard, landscape: Discuss. 8 mm 1 cm 2 mm Option3Selected Option2Saffers minimum size guidelines for touch targets: 10
- 11. Touch target size tricks* OK * Require coordination with development! Iceberg tips: (responsive area larger than visual) 11
- 12. Touch target size tricks* Adaptive targets: (anticipates your next move) Iceberg tips: (responsive area larger than visual) OK * Require coordination with development! 12
- 13. Touch target size tricks Forthcoming from Steven Hoober, 4ourth Mobile Design 13
- 14. Lets talk about hands Those pesky 鍖ngers are always attached to something that often blocks the view of much of the interface. Avoid putting essential features or information like a label below an interface element that can be touched, as it may become hidden by the users own hand. (quote from Dan) 14
- 15. Lets talk about hands Those pesky 鍖ngers are always attached to something that often blocks the view of much of the interface. Avoid putting essential features or information like a label below an interface element that can be touched, as it may become hidden by the users own hand. (quote from Dan) 16-20 mm wide 14
- 16. Lets talk about hands Those pesky 鍖ngers are always attached to something that often blocks the view of much of the interface. Avoid putting essential features or information like a label below an interface element that can be touched, as it may become hidden by the users own hand. (quote from Dan) 16-20 mm wide much bigger 14
- 17. Dont talk to the hand! TitleBack Save My Selection Hey! This action is undoable. Are you sure you want to proceed? OK Cancel TitleBack Save Hey! This action is undoable. Are you sure you want to proceed? OK Cancel My Selection TitleBack Save 15
- 18. Activity zones easy vs. reach 16
- 19. Easy vs. reach Some of the best [touchscreen apps] have placed controls in ways that best match the ergonomics of our hands while holding [the devices] Put the high-use controls in the Easy zones, and controls that are less used (and certainly those you dont want accidentally pressed) in the Reach zones. (Dan in a kickerstudio.com blog post) 17
- 20. Easy vs. reach Some of the best [touchscreen apps] have placed controls in ways that best match the ergonomics of our hands while holding [the devices] Put the high-use controls in the Easy zones, and controls that are less used (and certainly those you dont want accidentally pressed) in the Reach zones. (Dan in a kickerstudio.com blog post) 17
- 21. Easy vs. reach Some of the best [touchscreen apps] have placed controls in ways that best match the ergonomics of our hands while holding [the devices] Put the high-use controls in the Easy zones, and controls that are less used (and certainly those you dont want accidentally pressed) in the Reach zones. (Dan in a kickerstudio.com blog post) 17
- 23. Easy vs. reach What about lefties? 18
- 24. Easy vs. reach What about these people? 19
- 25. A brief survey Thumbs Fingers phone: 20
- 26. A brief survey Thumbs Fingers tablet: 21
- 27. Common app structures 鍖at, star, decentralized 22
- 28. Flat Detail Detail Detail Detail Detail 23
- 29. Flat 24
- 32. Decentralized Overview Overview Overview Overview Detail Detail Detail Detail Detail Detail Detail persistent menu: 27
- 33. Decentralized Overview Overview Overview Overview Detail Detail Detail Detail Detail Detail Detail persistent menu: Strive for a single entryway into any screen. (quote from Dan) 27
- 34. Decentralized 28
- 36. Too many taps? Counting taps is often a pointless exercise. Taps arent as odious as clicks. But watch for excess taps around high-frequency actions. Dan the Man 29
- 37. Whats wrong? 30
- 38. Whats wrong? 30
- 39. Keep app chrome to a minimum 31
- 40. Keep app chrome to a minimum 31
- 41. Smartphone exercise! Sketch a smartphone app that quickly updates a users multiple Google calendars with out-of-of鍖ce status. (15 minutes) Requirements: Set start and end dates Set status as all-day or as speci鍖c hours Option to decline meeting requests automatically Choose which Google calendars to apply status to Ack! Susie always forgets to put something in her Google calendar to let her co-workers know shes out of the of鍖ce! Not required for this exercise: Naming events, custom replies Tip: Consider smart defaults 32
- 42. Multitouch and gestures careful now 33
- 43. Ground rules Use multitouch sparingly, i.e., only when a tap or swipe wont do. Use multitouch as you would use common command key shortcuts in a desktop app. Dont try to reinvent standard gestures. Dont use an established gesture to do something very different from the established use. 34
- 44. Do we need it? What is the task that must be performed? Is there a standard gesture for this task within the OS? Is there a familiar gesture we could extend? Is the proposed custom gesture easy for the human hand to perform? 35
- 45. Complexity The more important the task, the more discoverable the interaction should be. Attract and instruct. Match the complexity of the gesture to the complexity of the task. Do make it dif鍖cult to perform certain gestures (to protect the user). 36
- 46. Multitouch/gesture exercise! Youre working on a tablet app for creating simple architectural drawings. Identify touches and gestures for the following tasks: (10 minutes) Add a window or door on an existing wall Remove a window or door on an existing wall Remove a wall to combine two rooms into one Switch between 2D (鍖oorplan) and 3D (elevation) views Rotate the 3D view When in 3D view, make a wall invisible (to see through) and then visible again Not required for this exercise: Adding rooms/walls, sizing anything Tip: Dont overlook the simplest options 37
- 47. Prototyping tools to check out 38
- 48. Prototyping tools Stencils for Omnigraf鍖e and Visio Export to clickable PDF 39
- 49. Prototyping tools Keynotopia with Keynote and PowerPoint Export to clickable PDF Watch the 19-minute video at the bottom of the page at keynotopia.com! 40
- 50. Prototyping tools TAP plugin with Fireworks Multitouch/gesture 41
- 51. Prototyping tools Adobe Proto The tablet app that creates tablet app wireframes, prototypes 42
- 52. Prototyping tools And many more... iMockups for iPad Flairbuilder Axure with libraries App Press Invision App App Cooker PhoneGap 43
- 53. Credit where credit is due... Dan Saffer Director, Interaction Design Smart Design Follow @odannyboy on Twitter to learn about his upcoming book, Microinteractions, to be published next spring by OReilly. 44