Designing for tablets: Touch and Natural Interaction

download Designing for tablets: Touch and Natural Interaction

of 88

  • date post

  • Category


  • view

  • download


Embed Size (px)


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

Transcript of Designing for tablets: Touch and Natural Interaction

  • 1.Designing for tablets: Touch and Natural Interaction Armando Fidalgo

2. But... What is a tablet? 3. 7 5.576.11088.9 4. Organize the interface for touch At handInteraction and direct manipulation Sense of realismImmediate feedback Within reach for fingersMulti-touchAnimation Enjoying touch 5. Design for touch 6. Define and organize the interface for touch too 7. Design depending on how users hold the device 8. Tablet postureL. Wroblewski 9. Interaction areas Danger actions or secondary UI elementsPrimary action buttons, high-frequency use and navigation controls L. WroblewskiD. Saffer 10. Make the important actions easy 11. Its impossible to reach it without moving your hands 12. Avoid placing controls at the top centre 13. Easy readingR. Hinman 14. ClipboardR. Hinman 15. At hand 16. Make motion easyBoring et al. 17. Within reach of the peripheral device for system data entry for fingers 18. Adjust interface elements for finger size Fingertip: 8-10 mmFinger pad: 10-14 mm 19. Touch target sizes 9 mm+10 9 mmOptimum for accuracy To close, delete or for important actions7 mm10 7 mmRecommended minimum7Optimum for small sizes5 mm5 mm If you need cram things to fit 20. Space between targets2 mm2 mm (at least) visual separation reduces errors and perceived difficulty 21. Space between targetsTouch targets should be at least 8 mm apart from the geometric center (preferably 10mm) S. Hoober30 22. Target size influences error rateMicrosoft 23. Multi-touch interaction 24. Basic gesturesL. Wroblewski et al. 25. Allow multiple-finger interactionL. Wroblewski et al. 26. Lorient 27. Let people use entire screen as the control 28. Entire screen as an alternative to precise taps 29. Let people use entire screen as the control 30. Emulate natural interactions 31. NUI exploits skills that we have acquired through a lifetime of living in the WorldBill Buxton, principal researcher at Microsoft 32. Interaction and direct manipulation 33. 3142 34. Content should be primary 35. Dedicate as much screen space as possible to content 36. Minimize the use of chrome 37. Interact directly with the content 38. Interact directly with the content 39. Interact directly with the content 40. Interact directly with the content 41. Interact directly with the content 42. Sense of realism 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 itiOS Human Interface Guidelines 44. Touches of realismManipulate content directly rather than controlsFeedback: immediate answer to user touchSimulate physical laws (inertia, resistence) on objectsUse metaphors from the real world 45. Use metaphors from the physical world 46. Visual realism = interactive realism 47. SkeuomorphismAntiqueKitch 48. A.Zumbrunnen 49. Flat designSskeuomorphismFlat design/skeuomorphism is a aesthetic discussion, about styles, not a design debate 50. Immediate feedback in time and space 51. Look and Feel Visual Sound Haptic 64 52. Visual feedback is the most important 53. Change colorChange sizeMove elements 54. Immediate feedback: content should follow the fingers 55. Animation: more natural interaction 56. Animation can strengthen the physical metaphorKaist 57. Sense of realism using real world effects InertiaSpeedAcceleration and decelerationElasticityFriction 58. Improves orientationVisual transitions enhance the users understanding of what just happenedShow changes in the interfaces stateShow relationships between elements 59. Guide users attention 60. Smooth animations feel naturalSmooth transitions add realismAdd consistency and continuityTransitions should be smooth and subtle, they should not be the focus of the users attention 61. Mantain continuity and flow Reducing screen changes can maintain flow.From discrete screens to continuous motionOpen, close, and refresh panes with gesturesShow content and media on the same page 62. Enjoying touch 63. The pleasure of touch, enjoying doing 64. Future: explore 65. Buttons are sometimes a lazy touch designers easy way out, but sometimes theyre a necessity Suzanne Ginsburg 66. Ensure basic interactionEncourage creativity and innovation 67. Explore new languagesLoren Brichter 68. of designThe future depends on us also 69. Thank you!