![48
Press
Touch surface for extended period of
time.
Press & Drag
Press surface with one finger and move second finger over surface without losing
contact.
Press & Tap
Press surface with one finger and briefly
touch surface with second finger.
“Avoid [these] because they are often
triggered accidentally and difficult to time
correctly.”
Source: http://www.lukew.com/touch
Source: http://bit.ly/yJ3N2d](https://image.slidesharecdn.com/designingfortouch03012013-220928205326-6678d526/85/designingfortouch_03012013-pdf-48-320.jpg)
designingfortouch_03012013.pdf
- 1. 1 DESIGNING FOR TOUCH LUKE WROBLEWSKI CONVEY UX 2013 @lukew
- 2. 2 3” SMARTPHONE TABLET 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” LAPTOP DESKTOP TOUCH/GESTURES CURSOR/KEYBOARD
- 3. 3 Google Nexus 7 7.0” 9.7” Apple iPad 4.0” HTC Windows Phone 8S SMARTPHONE TABLET
- 4. 4 3” SMARTPHONE TABLET 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” LAPTOP DESKTOP TOUCH/GESTURES CURSOR/KEYBOARD
- 5. 5 LAPTOP 11.6” Lenovo IdeaTab Lynx 12.5” Lenovo ThinkPad Twist
- 6. 6 11.6” Lenovo IdeaTab Lynx 13.3” Lenovo IdeaPad Yoga 12.5” Lenovo ThinkPad Twist
- 7. 7
- 9. 9
- 10. 10 Source: http://zd.net/WJhY6C Source: http://tcrn.ch/Vs5Zyt 40M licenses sold Dec 2012 6% Surface share of Windows 8 devices 6% of notebook sales are hybrids
- 11. 11 11.6” Lenovo IdeaTab Lynx 13.3” Lenovo IdeaPad Yoga 12.5” Lenovo ThinkPad Twist
- 12. 12 3” SMARTPHONE TABLET 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” LAPTOP DESKTOP TOUCH/GESTURES CURSOR/KEYBOARD
- 13. 13 3” SMARTPHONE TABLET 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” LAPTOP DESKTOP TOUCH/GESTURES CURSOR/KEYBOARD
- 15. 15
- 16. 16
- 17. 17
- 21. 21 Source: http://live.leapmotion.com/about.html Will be bundled with Asus computers.
- 22. 22 3” SMARTPHONE TABLET 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” LAPTOP DESKTOP TOUCH/GESTURES CURSOR/KEYBOARD
- 23. 23 3” SMARTPHONE TABLET 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” LAPTOP DESKTOP CURSOR/KEYBOARD TOUCH/GESTURES
- 24. 24 3” SMARTPHONE TABLET 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” LAPTOP DESKTOP TOUCH/GESTURES CURSOR/KEYBOARD
- 25. 25 TOUCH MATTERS How do we design for it?
- 26. 26
- 27. 27 • Content is the UI (the action) • Enable direct manipulation of objects & content • Reduce the distance as much as possible between user & content • Reduce visuals that are not content • Guessable, predictable, physical Source: http://bit.ly/zAUYfa PRINCIPLES TOUCH
- 28. 28 WINDOWS ICN x File Edit View Window B I U abc Italic Text CTRL + I ICONS Item B1 Item B2 Item B3 Item A Item C Item E Item F Menu Item Item B > Item D ctrl + 1 MENUS POINTERS GUI Paradigm
- 29. 29 Touch Paradigm Source: http://bit.ly/cCHvER Content Direct Manipulation Gestures Feedback
- 30. 30 Touch Target Sizes 23x23px minimum control size (6mm) 40x40px commonly used control size (10mm) Source: http://bit.ly/yJ3N2d TOUCHABLE TOUCH-ENABLED 5px minimum spacing between (2mm) 19px 23px
- 31. 31 Target Size Influences Error Rate Source: http://bit.ly/yJ3N2d % OF MISSED TAPS 25% 20% 15% 10% 5% 3 mm 5 mm 7 mm 9 mm 11 mm Target size 1 in 30 taps (3%) will miss the target 1 in 100 (1%) 1 in 200 (0.5%)
- 32. Basketball Player Baby 32 Fat Fingers 15 16 17 18 19 mm 12 13 14 10 11 Average index finger width 8 mm 9 Source: http://bit.ly/yJ3N2d
- 33. 33 Source: http://bit.ly/yJ3N2d 5mm minimum control size 7mm recommended size 10mm common controls size 7mm minimum control size 10mm recommended size 2mm minimum spacing between 10mm+ common, errors, edge size KEYBOARD/MOUSE FIRST TOUCH FIRST
- 35. 35 Source: http://bit.ly/yJ3N2d Keyboard/Mouse First TOUCH MODE (CONTEXT)
- 36. 36 Touch First TOUCH OPTIMIZED Source: http://bit.ly/yJ3N2d
- 37. 37 Redesigning for Touch Adapt existing desktop application to be touch- optimized Tweester
- 38. 38 77% touchscreen 12% mouse 8% keyboard 3% trackpad Device Interaction “Having a laptop with touch is having a laptop with an extra gear.” Source: http://intel.ly/KlJ4Lv
- 40. 40 Large Targets Content as UI
- 41. 41 Small Targets Text, not Touch Optimized
- 42. 42
- 43. 43 But I have lots to fit on the screen...” “ • Touch forces simplification & reduction • Decide which actions are most important • What stays on the screen, what goes away • Big targets work for mouse, small targets don’t work for touch
- 44. 44 TOUCH TARGETS • Use appropriately sized targets • Maintain spacing between targets • Consider touch optimized controls • Embrace simplification
- 45. 45 Tap Briefly touch surface with fingertip. Double Tap Rapidly touch surface twice with fingertip. Source: http://www.lukew.com/touch
- 46. 46 Swipe/Drag Move fingertip over surface without losing contact. Flick Quickly brush surface with fingertip. Source: http://www.lukew.com/touch
- 47. 47 Pinch Touch surface with two fingers and bring them closer together. Spread Touch surface with two fingers and move them apart. Source: http://www.lukew.com/touch
- 48. 48 Press Touch surface for extended period of time. Press & Drag Press surface with one finger and move second finger over surface without losing contact. Press & Tap Press surface with one finger and briefly touch surface with second finger. “Avoid [these] because they are often triggered accidentally and difficult to time correctly.” Source: http://www.lukew.com/touch Source: http://bit.ly/yJ3N2d
- 49. 49 Rotate Touch surface with two fingers and move them in a clockwise or counterclockwise direction. Source: http://www.lukew.com/touch
- 50. 50 press Change mode double tap Open tap Select user action gesture description BASIC ACTIONS Touch surface for extended period of time Rapidly touch surface twice with fingertip Briefly touch surface with fingertip Source: http://www.lukew.com/touch
- 51. 51 drag (across item or off-screen) Delete Move user action gesture description OBJECT-RELATED ACTIONS Move fingertip over surface without losing contact drag (and drop) Move fingertip over surface without losing contact multi-finger drag Move two to five fingertips over surface without losing contact OR OR OR Source: http://www.lukew.com/touch
- 52. 52 Scroll user action gesture description NAVIGATING ACTIONS Move two fingers up or down across surface press Touch scrollbar for extended period of time flick Quickly brush surface with fingertip in the direction you want to scroll two-finger drag drag Move fingertip over scrollbar without losing contact Scroll (fast) Source: http://www.lukew.com/touch
- 54. 54
- 55. 55 Allow any number of fingers • People often touch with more than one finger • Touch interactions shouldn’t change radically based on the number of fingers Source: http://bit.ly/yJ3N2d
- 56. 56
- 57. 57
- 58. 58 Gestures as keyboard shortcuts in touch interfaces • Consider gesture-based access to common actions or information • Maintain non-gesture support Source: http://bit.ly/MqXTvQ
- 59. 59
- 60. 60 Provide feedback • Immediate visual feedback for touch gestures • Change color, size, or move interactive elements Source: http://bit.ly/yJ3N2d
- 61. 61
- 62. 62 Content follows fingers • Elements that can be moved or dragged should follow touch gestures Source: http://bit.ly/yJ3N2d Browsing content with touch • Use large canvases that support panning & zoom
- 63. 63 “But how will anyone know these gesture- based interactions are possible?”
- 64. 64 Discovering Gestures 1. Removal of Options 2. Content Teases 3. Animation Cues 4. Just-in-time Education
- 65. 65
- 66. 66
- 67. 67
- 68. 68 Just pinch anywhere to leave the gallery Ok, Thanks
- 69. 69
- 70. 70
- 71. 71
- 72. 72 Big screens invite big gestures • Let people use entire screen as control • Swipe and paw instead of precise tapping Source: http://bit.ly/MqXTvQ
- 73. 73 TOUCH GESTURES • Don’t be afraid to experiment • But be aware of discoverability issues • Use affordances (teases, just in time education) appropriately