Designing for tablets: Touch and Natural Interaction
- 1. Designing for tablets: Touch and Natural Interaction Armando Fidalgo
- 2. But... What is a tablet?
- 8. Organize the interface for touch At hand Interaction and direct manipulation Sense of realism Immediate feedback Within reach for fingers Multi-touch Animation Enjoying touch
- 10. Define and organize the interface for touch too
- 11. Design depending on how users hold the device
- 13. Interaction areas Danger actions or secondary UI elements Primary action buttons, high-frequency use and navigation controls L. Wroblewski D. Saffer
- 16. It’s impossible to reach it without moving your hands
- 18. Avoid placing controls at the top centre
- 21. At hand
- 22. Make motion easy Boring et al.
- 26. Within reach of the peripheral device for system data entry for fingers
- 27. Adjust interface elements for finger size Fingertip: 8-10 mm Finger pad: 10-14 mm
- 28. Touch target sizes 9 mm +10 9 mm Optimum for accuracy To close, delete or for important actions 7 mm 10 7 mm Recommended minimum 7 Optimum for small sizes 5 mm 5 mm If you need cram things to fit
- 29. Space between targets 2 mm 2 mm (at least) visual separation reduces errors and perceived difficulty
- 30. Space between targets Touch targets should be at least 8 mm apart from the geometric center (preferably 10mm) S. Hoober 30
- 31. Target size influences error rate Microsoft
- 33. Basic gestures L. Wroblewski et al.
- 34. Allow multiple-finger interaction L. Wroblewski et al.
- 35. Lorient
- 36. Let people use entire screen as the control
- 37. Entire screen as an alternative to precise taps
- 38. Let people use entire screen as the control
- 40. “ NUI exploits skills that we have acquired through a lifetime of living in the World ” Bill Buxton, principal researcher at Microsoft
- 42. 3 1 4 2
- 43. Content should be primary
- 44. Dedicate as much screen space as possible to content
- 45. Minimize the use of chrome
- 46. Interact directly with the content
- 47. Interact directly with the content
- 48. Interact directly with the content
- 49. Interact directly with the content
- 50. Interact directly with the content
- 51. Sense of realism
- 52. “ When appropriate, add a realistic, physical dimension to your application. Often, the more true to life your application looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it ” iOS Human Interface Guidelines
- 53. Touches of realism Manipulate content directly rather than controls Feedback: immediate answer to user touch Simulate physical laws (inertia, resistence…) on objects Use metaphors from the real world
- 54. Use metaphors from the physical world
- 55. Visual realism = interactive realism
- 57. A.Zumbrunnen
- 60. Flat design Sskeuomorphism Flat design/skeuomorphism is a aesthetic discussion, about styles, not a design debate
- 61. Immediate feedback in time and space
- 64. Look and Feel Visual Sound Haptic 64
- 65. Visual feedback is the most important
- 66. Change color Change size Move elements
- 67. Immediate feedback: content should follow the fingers
- 69. Animation can strengthen the physical metaphor Kaist
- 70. Sense of realism using real world effects Inertia Speed Acceleration and deceleration Elasticity Friction
- 72. Improves orientation Visual transitions enhance the user’s understanding of what just happened Show changes in the interface’s state Show relationships between elements
- 76. Smooth animations feel natural Smooth transitions add realism Add consistency and continuity Transitions should be smooth and subtle, they should not be the focus of the user’s attention
- 79. Mantain continuity and flow Reducing screen changes can maintain flow. From discrete screens to continuous motion Open, close, and refresh panes with gestures Show content and media on the same page
- 81. Enjoying touch
- 82. The pleasure of touch, enjoying doing
- 83. Future: explore
- 84. “ Buttons are sometimes a lazy touch designer’s easy way out, but sometimes they’re a necessity Suzanne Ginsburg ”
- 85. Ensure basic interaction Encourage creativity and innovation
- 86. Explore new languages Loren Brichter
- 87. of design The future depends on us also