Designing for tablets: Touch and Natural Interaction

959 views
841 views

Published on

English slides of a talk at the User Experience Day 2013 at the Open University of Catalunya

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
959
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
15
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Designing for tablets: Touch and Natural Interaction

  1. 1. Designing for tablets: Touch and Natural Interaction Armando Fidalgo
  2. 2. But... What is a tablet?
  3. 3. 7” 5.5” 7” 6.1” 10” 8” 8.9”
  4. 4. 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
  5. 5. Design for touch
  6. 6. Define and organize the interface for touch too
  7. 7. Design depending on how users hold the device
  8. 8. Tablet posture L. Wroblewski
  9. 9. Interaction areas Danger actions or secondary UI elements Primary action buttons, high-frequency use and navigation controls L. Wroblewski D. Saffer
  10. 10. Make the important actions easy
  11. 11. It’s impossible to reach it without moving your hands
  12. 12. Avoid placing controls at the top centre
  13. 13. Easy reading R. Hinman
  14. 14. Clipboard R. Hinman
  15. 15. At hand
  16. 16. Make motion easy Boring et al.
  17. 17. Within reach of the peripheral device for system data entry for fingers
  18. 18. Adjust interface elements for finger size Fingertip: 8-10 mm Finger pad: 10-14 mm
  19. 19. 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
  20. 20. Space between targets 2 mm 2 mm (at least) visual separation reduces errors and perceived difficulty
  21. 21. Space between targets Touch targets should be at least 8 mm apart from the geometric center (preferably 10mm) S. Hoober 30
  22. 22. Target size influences error rate Microsoft
  23. 23. Multi-touch interaction
  24. 24. Basic gestures L. Wroblewski et al.
  25. 25. Allow multiple-finger interaction L. Wroblewski et al.
  26. 26. Lorient
  27. 27. Let people use entire screen as the control
  28. 28. Entire screen as an alternative to precise taps
  29. 29. Let people use entire screen as the control
  30. 30. Emulate “natural” interactions
  31. 31. “ NUI exploits skills that we have acquired through a lifetime of living in the World ” Bill Buxton, principal researcher at Microsoft
  32. 32. Interaction and direct manipulation
  33. 33. 3 1 4 2
  34. 34. Content should be primary
  35. 35. Dedicate as much screen space as possible to content
  36. 36. Minimize the use of chrome
  37. 37. Interact directly with the content
  38. 38. Interact directly with the content
  39. 39. Interact directly with the content
  40. 40. Interact directly with the content
  41. 41. Interact directly with the content
  42. 42. Sense of realism
  43. 43. “ 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
  44. 44. 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
  45. 45. Use metaphors from the physical world
  46. 46. Visual realism = interactive realism
  47. 47. Skeuomorphism Antique Kitch
  48. 48. A.Zumbrunnen
  49. 49. Flat design Sskeuomorphism Flat design/skeuomorphism is a aesthetic discussion, about styles, not a design debate
  50. 50. Immediate feedback in time and space
  51. 51. Look and Feel  Visual  Sound  Haptic 64
  52. 52. Visual feedback is the most important
  53. 53. Change color Change size Move elements
  54. 54. Immediate feedback: content should follow the fingers
  55. 55. Animation: more natural interaction
  56. 56. Animation can strengthen the physical metaphor Kaist
  57. 57. Sense of realism using real world effects Inertia Speed Acceleration and deceleration Elasticity Friction
  58. 58. Improves orientation Visual transitions enhance the user’s understanding of what just happened Show changes in the interface’s state Show relationships between elements
  59. 59. Guide users´ attention
  60. 60. 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
  61. 61. 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
  62. 62. Enjoying touch
  63. 63. The pleasure of touch, enjoying doing
  64. 64. Future: explore
  65. 65. “ Buttons are sometimes a lazy touch designer’s easy way out, but sometimes they’re a necessity Suzanne Ginsburg ”
  66. 66. Ensure basic interaction Encourage creativity and innovation
  67. 67. Explore new languages Loren Brichter
  68. 68. of design The future depends on us also
  69. 69. Thank you! afidalgo@gmail.com

×