Upload
andypillip
View
524
Download
1
Embed Size (px)
Citation preview
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
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]
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
Abhängig von:
§ Gewicht und Größe § Unterlage § Eigener Posi@on § App (Wechselwirkung)
Tablethaltung
© Luke Wroblewski 2013
§ 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
§ 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
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
Erreichbarkeit auf Smartphones [Hoober 2013a]
Für Ziele in orangen Bereichen muss man die Finger strecken, für rote Bereiche umgreifen.
Daumen rechts
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
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)
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
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
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.
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