Designing for tablets: Touch and Natural Interaction
88
Armando Fidalgo Designing for tablets: Touch and Natural Interaction
-
Upload
armando-fidalgo -
Category
Design
-
view
543 -
download
1
description
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
Armando Fidalgo
Designing for tablets: Touch and Natural Interaction
But... What is a tablet?
8.9”
10”
6.1”
5.5” 7”
8”
7”
Enjoying touch
Organize the interface for touch
At hand
Within reach for fingers
Multi-touch
Interaction and direct manipulation
Sense of realism
Immediate feedback
Animation
Design for touch
Define and organize the interface for touch too
Design depending on how users hold the device
Tablet posture
L. Wroblewski
Interaction areas
D. Saffer
L. Wroblewski
Danger actions or
secondary UI elements
Primary action buttons, high-frequency use and navigation controls
Make the important actions easy
It’s impossible to reach it without moving your hands
Avoid placing controls at the top centre
Easy reading
R. Hinman
Clipboard
R. Hinman
At hand
Boring et al.
Make motion easy
Within reach of the peripheral device for system data entry
for fingers
Finger pad: 10-14 mm
Fingertip: 8-10 mm
Adjust interface elements for finger size
Touch target sizes
7 mm
Recommended minimum 7 mm
Optimum for accuracy 9 mm
9 mm
To close, delete or for important actions
5 mm
5 mm
Optimum for small sizes If you need cram things to fit
+10
10
7
Space between targets
2 mm
2 mm (at least) visual separation reduces errors and perceived difficulty
Space between targets
30 S. Hoober
Touch targets should be at least 8 mm apart from the geometric center (preferably 10mm)
Target size influences error rate
Microsoft
Multi-touch interaction
Basic gestures
L. Wroblewski et al.
Allow multiple-finger interaction
L. Wroblewski et al.
Lorient
Let people use entire screen as the control
Entire screen as an alternative to precise taps
Let people use entire screen as the control
Emulate “natural” interactions
NUI exploits skills that we have acquired through a lifetime of living in the World
Bill Buxton, principal researcher at Microsoft
“ ”
Interaction and direct manipulation
1 2
3 4
Content should be primary
Dedicate as much screen space as possible to content
Minimize the use of chrome
Interact directly with the content
Interact directly with the content
Interact directly with the content
Interact directly with the content
Interact directly with the content
Sense of realism
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
”
“
Feedback: immediate answer to user touch
Manipulate content directly rather than controls
Simulate physical laws (inertia, resistence…) on objects
Touches of realism
Use metaphors from the real world
Use metaphors from the physical world
Visual realism = interactive realism
Skeuomorphism
Antique
Kitch
A.Zumbrunnen
Flat design Sskeuomorphism
Flat design/skeuomorphism is a aesthetic discussion, about styles, not a design debate
Immediate feedback in time and space
64
Look and Feel
Visual Sound Haptic
Visual feedback is the most important
Change color
Change size
Move elements
Immediate feedback: content should follow the fingers
Animation: more natural interaction
Animation can strengthen the physical metaphor
Kaist
Inertia
Sense of realism using real world effects
Acceleration and deceleration
Speed
Friction
Elasticity
Improves orientation
Visual transitions enhance the user’s understanding of what just happened
Show changes in the interface’s state
Show relationships between elements
Guide users´ attention
Smooth transitions add realism
Smooth animations feel natural
Add consistency and continuity
Transitions should be smooth and subtle, they should not be the focus of the user’s attention
Reducing screen changes can maintain flow.
Mantain continuity and flow
From discrete screens to continuous motion
Open, close, and refresh panes with gestures
Show content and media on the same page
Enjoying touch
The pleasure of touch, enjoying doing
Future: explore
Buttons are sometimes a lazy touch designer’s easy way out, but sometimes they’re a necessity
Suzanne Ginsburg
” “
Ensure basic
interaction
Encourage creativity
and innovation
Explore new languages
Loren Brichter
The future depends on us
of design
also
![A Set of Multi-touch Graph Interaction Techniques · Multi-touch Interaction Technique Sets. Multi-touch input is an active area of research with a history of several decades [6];](https://static.fdocuments.us/doc/165x107/5f58f4c28b0f2848652155b9/a-set-of-multi-touch-graph-interaction-techniques-multi-touch-interaction-technique.jpg)
