Welche Bereiche sind am Smartphone oder Tablet schnell und einfach zu erreichen, ohne dass man das Gerät hinlegen oder kompliziert halten muss? Vortrag von Pillip vs. Eichinger auf der Webinale hands-on im Dezember 2013. Die Workshop-Ergebnisse finden sich auch in unserem Blog: http://pvse.com/blogeintrag/items/thumbs-up.html

1. Andy
Pillip,
Thomas
Eichinger
|
Pillip
vs.
Eichinger
Thumbs
up?

2. Responsive
Layouts
aus
CSS
Frameworks
§ Passen
sich
an
unterschiedliche
Bildschirmgrößen
an
§ Berücksich@gen
mit
entsprechend
großen
Elementen
Touch-­‐Bedienung
§ Doch
ist
auch
die
Posi@on
der
Elemente
für
Touch
geeignet?
Für
Touch
gestalten

3. Haltung
Grundhaltung
Varia@on
Einhändig
49
%
Daumen
links
33
%
Daumen
rechts
67
%
In
der
Hand
+bedienende
Hand
36
%
+
Zeigefinger
28
%
+
Daumen
72
%
Beide
Hände
15
%
Portrait
90
%
Landscape
10
%
49
%
halten
ihr
Smartphone
in
einer
Hand
[Hoober
2013a]

4. Haltung
Portrait
Landscape
Einhändig
Daumen
links
Daumen
rechts
Abgestellt
Beide
Hände
Abgestellt
Freihändig
Abgelegt
Angelehnt
Wie
sieht‘s
bei
größeren
Geräten
aus?
Teilnehmer
mit
8“
Tablets

5. Abhängig
von:
§ Gewicht
und
Größe
§ Unterlage
§ Eigener
Posi@on
§ App
(Wechselwirkung)
Tablethaltung
© Luke Wroblewski 2013

6. § Aufgaben
müssen
ohne
Haltungswechsel
erledigt
werden
können
§ Fast
alle
Haltungen
benutzen
den
Daumen
als
Touch-­‐Finger
§ Also
müssen
wir
für
den
Daumen
gestalten
Thumb
Flow

7. § Nicht
alle
Punkte
sind
gleich
gut
zu
erreichen,
besonders
nicht
mit
dem
Daumen
§ Bei
größeren
Geräten
muss
eine
andere
Haltung
eingenommen
werden
§ Umgreifen
erfordert
kogni@ve
Leistung
und
unterbricht
den
Flow
Erreichbarkeit

8. Prototyp
Deckt
ab
Aufwand
Papier
Verständnis,
Click-­‐Flow
gering
pro
Screen,
gering
pro
Gerät
Karton
+
Papier
Ergonomie
in
2
geometrischen
Dimensionen
gering
pro
Screen,
gering
pro
Gerät
Holz
+
Papier
Ergonomie
ohne
Kontraste
Gering
pro
Screen,
mäßig
pro
Gerät
Klick-­‐Prototyp
Volle
Programm
Aufwändig
pro
Screen,
wenig
spontan
EvaluaWonsmethoden

9. Erreichbarkeit
auf
Smartphones
[Hoober
2013a]
Für
Ziele
in
orangen
Bereichen
muss
man
die
Finger
strecken,
für
rote
Bereiche
umgreifen.
Daumen
rechts

10. Erreichbarkeit
auf
iPads
in
Portrait

11. Erreichbarkeit
auf
Smartphones
Landscape

13. 1983
vs.
Heute

14. 1983
vs.
Heute

15. Bildschirm
entsperren
–
iOS
vs.
Android

16. Bildschirm
entsperren
–
iOS
vs.
Android

17. Und
was
ist
mit
den
Pa^erns?

18. Toggle
NavigaWon
>

19. Gerät
angenehm
mäßig
umständlich
Telefon
1
9
1
Oranges
7“
Tablet
1
5
2
10“
Tablet
3
6
EvaluaWon:
Toggle
NavigaWon
...
Thumbs
Up
Thumbs
Down

20. Ist
NavigaWon
primär
oder
sekundär?
§ Anders:
Ist
Naviga@on
die
zentrale
Aufgabe?
§ Hängt
von
der
Webseite
ab
§ Naviga@on
ist
in
allen
Frameworks
offensichtlich
sekundär
(versteckt,
schlecht
erreichbar)

21. Speed-­‐accuracy-­‐tradeoff
§ Fijs‘
Gesetz:
Zielgröße
und
Distanz
gegen
Geschwindigkeit
und
Treffsicherheit
§ Für
gleiche
Treffsicherheit
müssen
also
Ziele
in
schlecht
zu
erreichenden
Bereichen
größer
sein

22. Touch
by
Zones
[Hoober2013b]

23. Alles
ist
relaWv!
§ Schlechte
Erreichbarkeit
kann
posi@v
genutzt
werden
§ Die
Bewertung
hill
Posi@onen
für
sekundäre
oder
gar
gefährliche
Funk@onen
zu
finden

24. Thumb
Flow
im
Kontext

25. Thumb
Flow
im
Kontext

26. Thumb
Flow
im
Kontext

27. Thumb
Flow
im
Kontext

28. Thumb
Flow
im
Kontext

29. Thumb
Flow
im
Kontext

30. Thumb
Flow
vs.
ÄstheWk
Lücken
nutzen:
§ Für
Informa@on
staj
Interak@on
§ Für
gefährliche
Ak@onen
(z.B.
Löschen)
Nutzer
ziehen
sich
Touch
Ziele
auch
unter
den
Daumen.

31. Danke
und
Servus!
hjp://pvse.com
Pillip
vs.
Eichinger

32. Quellenangaben
1
§ Hoober,
Steven
(2013a)
How
Do
Users
Really
Hold
Mobile
Devices?
hjp://www.uxmajers.com/mt/archives/2013/02/how-­‐do-­‐users-­‐
really-­‐hold-­‐mobile-­‐devices.php
§ Hoober,
Steven
(2013b)
Design
for
Fingers
and
Thumbs
Instead
of
Touch
hjp://www.uxmajers.com/mt/archives/2013/11/design-­‐for-­‐fingers-­‐
and-­‐thumbs-­‐instead-­‐of-­‐touch.php
§ Wroblewski,
Luke
(2013)
New
Layouts
for
the
Mul@-­‐
Device
Web
hjp://www.lukew.com/ff/entry.asp?1721

33. § Frost,
Brad
(2012)
Responsive
Pajerns
hjp://bradfrost.github.io/this-­‐is-­‐responsive/pajerns.html
Quellenangaben
2