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

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

2. But...
What is a tablet?

4. 7”
5.5”
7”
6.1”
10”
8”
8.9”

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

9. Design for touch

10. Define and organize the interface
for touch too

11. Design depending on how
users hold the device

12. Tablet posture
L. Wroblewski

13. Interaction areas
Danger actions or
secondary UI elements
Primary action buttons, high-frequency
use and navigation controls
L. Wroblewski
D. Saffer

14. Make the
important
actions easy

16. It’s impossible to
reach it without
moving your hands

18. Avoid placing
controls at the
top centre

19. Easy reading
R. Hinman

20. Clipboard
R. Hinman

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

32. Multi-touch interaction

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

39. Emulate “natural” interactions

40. “
NUI exploits skills that we
have acquired through a
lifetime of living in the
World
”
Bill Buxton, principal researcher
at Microsoft

41. Interaction and direct
manipulation

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

56. Skeuomorphism
Antique
Kitch

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

68. Animation: more natural
interaction

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

75. Guide users´ attention

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

88. Thank you!
afidalgo@gmail.com