IAD 5 - les 4 - Design for Touch

Interaction Design 201 Vragen of feedback? @ferrydendopper
Designing Gestural
Interfaces

The Mouseover is dead

Ergonomics of Interactive Gestures
 Limitations due to anatomy, physiology and mechanics of the
human body (kinesiology)
 Left-handedness (7-10%)
 Fingernails
 Screen Coverage

Fat fingers
While it might seem counter-intuitive, the
success of small-screen interfaces relies on
big elements, chunky buttons, and airy
spacing. The screens may be tiny, but our
fingers (and often, our attention spans) are not.
Design with fat fingers in mind.
http://www.creativebloq.com/design/designing-touch-2123037

Fat fingers
If buttons get too big, users start having
problems perceiving them as clickable buttons
— and sometimes even discerning them as
discrete elements.
http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php

Fat fingers
No smaller than 1x1cm in an ideal world
In a not so ideal world:
Iceberg Tips
controls that have larger target than visible
Adaptive Targets
guessing the next item the user will touch, then
increasing the touch target appropriately
http://www.dsource.in/course/touch-screen-gestures/touch-targets/index.html

iPhone grid: 44 pt

Designing Touch Targets
http://www.lukew.com/ff/entry.asp?1085

Hot zones

Met één hand (49%)

Omsluiten met twee handen (36%)
72% 28%

Met 2 handen bedienen
90% 10%

Tablet

Voorkom controls midden-boven
Controls should never go
immediately above the
content they aim to affect.
Be careful that your hand
doesn’t cover the content.

Boven of onder?
Desktop software conventions
put menus at the top of the
screen or window, and
websites typically position
primary navigation at the top of
pages.
Our limited thumbspan,
however, flips that convention
around, and navigation and
primary tap targets sink to the
bottom.

Boven, onder, links, rechts
The screen-bottom bias of
the thumb is more
important than left vs right.
Turns out most of us easily
flip between left and right
hands when we use our
phones. Right-handed users
often favour or switch to their
left hands (when writing, for
example), and lefties likewise
often go with their right.

Linkshandig

Stacking controls vs fat-finger problem
Navigation
on Android
Navigation
on iOS

Houd de zij-randen vrij van controls
Mensen hebben wat meer moeite elementen
aan te raken die helemaal tegen de zij-randen
aangeplakt zitten.

Gestures

Bladeren in een boek

Gestures
Sommige gestures zijn onmiddellijk duidelijk (intuïtief)
of worden snel ontdekt, zoals:
 Tap (indrukken van een knop)
 Drag (slepen, scrollen)
 Swipe (bladzijde omslaan)
 Pinch (in- en uitzoomen)

Gestures
Andere gestures zijn (veel) minder
intuïtief of moeilijk te ontdekken:
 Single Two-Finger Tap (uitzoomen)
 Twist (kompas draaien in Google Maps)
 Kantelen naar landscape voor andere
weergave

Gestures
 Neem niet aan dat mensen de gestures in je app
wel zullen ontdekken, ongeacht hoe simpel,
standaard of consistent.
 Behandel gestures als shortcuts voor acties die je
ook op een andere (vaak langzamere) manier kunt
uitvoeren. Zo heb je altijd een backup.

Wat voor gestures kennen we?
• Tap
• Double-tap
• Touch and Hold
• Drag
• Swipe
• Flick
• Pinch
• Twist
• …
• Rotate
• Tilt
• Shake
• Proximity
• …

Patterns for Touchscreens and Interactive
Surfaces
Tap to open/activate

Surfaces
Tap to select

Surfaces
Drag to move object

Surfaces
Slide to scroll

Surfaces
Spin to scroll

Surfaces
Pinch to shrink and spread to enlarge

Patterns for Touchscreens & Free-Form
Interactive Gestures
Two-finger tap & shake

Patterns for Free-Form Interactive
Gestures
Proximity activates/deactivates

Gestures
Shake to change

Gestures
Rotate to change state

Gestures
Tilt

Voorzichtig: niet te veel schudden
 Schudden is een leuke gimmick
(vooral voor casual apps), maar
iets te verstoort vaak de flow;
 Niet low-profile: ziet er wat raar uit
voor andere mensen;
 Vestigt aandacht op de hardware
ipv de taak;
 Kan gemakkelijk per ongeluk
getriggerd worden (bv. tijdens
rennen)

Voorzichtig met 2-vinger gestures
 Zijn lastiger dan 1-vinger gestures;
 Nagenoeg onmogelijk om met 1
hand te bedienen;

Touch Gesture Reference Guide

Geef tips in de context

Hints

Native controls = touch friendly

Hé, deze user controls ken ik!

iOS, Android, e.d. bevatten ook gewoon
 Buttons
 Toolbars
 Text Fields
 List Views
 Checkboxes
 e.d.
Saai? Nee: essentieel, want intuïtief!

Touch friendly controls

Be a scroll SKEPTIC

Scrolling vs Tapping
Scrolling is easier than tapping.
Scrolling is a continuation; tapping is a
decision.
http://bokardo.com/archives/scrolling-easier-clicking/

Hoe scrollen?

Niet beschikbaar = niet zichtbaar?

Denk ook aan touch feedback
 Visueel
• Glow, kleur verandert, enz.
 Geluid
 Trilling
• bv. Bij iedere toetsaanslag op het toetsenbord

Lezen
 Reader, hst. 3
Handig:
 Touch Gesture Reference Guide

Vragen? Feedback?
f.den.dopper@hr.nl
@ferrydendopper

IAD 5 - les 4 - Design for Touch

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (8)

Semelhante a IAD 5 - les 4 - Design for Touch

Semelhante a IAD 5 - les 4 - Design for Touch (20)

Mais de Ferry den Dopper

Mais de Ferry den Dopper (20)

Último

Último (20)

IAD 5 - les 4 - Design for Touch