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

afidalgo@gmail.com

Thank you!