Laws of UX. Jon Yablonski
postulierte, dass die erforderliche Zeit, um sich zügig zu einem Zielgebiet zu bewegen, eine Funktion des Verhältnisses aus der Entfernung zum Ziel und der Breite des Ziels ist (Abbildung 2-1). Heute gilt dies als eines der erfolgreichsten und bedeutendsten mathematischen Modelle für die menschliche Bewegung und wird in der Ergonomie und in der Mensch-Computer-Interaktion weithin eingesetzt, um Zeigevorgänge (sowohl physischer als auch virtueller Natur) zu modellieren.2
Abbildung 2-1: Diagramm zur Darstellung des Fitts’schen Gesetzes
Fitts schlug auch einen Schwierigkeitsindex vor, um die Schwierigkeit einer Zielauswahl-Aufgabe zu quantifizieren, wobei der Abstand zur Zielmitte (D) wie ein Signal und die Toleranz oder Breite des Ziels (W) wie Rauschen aufgefasst werden kann.
Schlüsselüberlegung
Touch-Targets
Fitts’ Gesetz wurde vor der Erfindung der grafischen Benutzeroberfläche als Modell zum Verständnis menschlicher Bewegungen in der physischen Welt aufgestellt, aber es lässt sich auch auf Bewegungen innerhalb einer digitalen Benutzeroberfläche anwenden. Drei wesentliche Überlegungen können wir aus dem Gesetz ableiten. Erstens sollten die Touch-Targets so groß sein, dass die Benutzer sie leicht erkennen und präzise auswählen können. Zweitens sollten Touch-Targets einen ausreichenden Abstand zueinander haben. Schließlich sollten Touch-Targets in Bereichen einer Schnittstelle platziert werden, die der Benutzer leicht erfassen und ansteuern kann.
Auch wenn es vielleicht offensichtlich ist, ist die Bemessung von Touch-Targets von entscheidender Bedeutung: Sind die Zielflächen zu klein, brauchen die Benutzer länger, um sie auszulösen. Die empfohlene Größe variiert (Tabelle 2-1), aber in allen Vorschlägen wird die Bedeutung der Dimensionierung deutlich.
Empfohlene Mindestgrößen für Touch-Elemente:
| Unternehmen/Organisation | Größe |
| Human Interface-Richtlinien (Apple) | 44 × 44 pt |
| Material Design-Richtlinien (Google) | 48 × 48 dp |
| Web Content Accessibility Guidelines (WCAG) | 44 × 44 CSS px |
| Nielsen Norman Group | 1 × 1 cm |
Denken Sie daran, dass es sich hierbei um empfohlene Mindestgrößen handelt. Als Designer sollten wir bestrebt sein, die Touch-Targets wann immer möglich noch größer zu wählen, um die Anforderungen an die Genauigkeit herunterzuschrauben. Ausreichend dimensionierte Touch-Elemente sorgen nicht nur für leicht auswählbare interaktive Elemente, sondern können dem Nutzer auch den Eindruck vermitteln, dass die Schnittstelle leicht zu bedienen ist. Kleine Touch-Targets verstärken eher den Eindruck einer weniger benutzerfreundlichen Schnittstelle. Das gilt selbst dann, wenn der Benutzer in der Lage ist, Fehler beim Auswählen eines Elements zu vermeiden.
Eine weitere Überlegung zur Benutzerfreundlichkeit von interaktiven Elementen ist der Abstand dazwischen. Ist der Abstand zwischen den Elementen zu klein, erhöht sich die Wahrscheinlichkeit von Fehlbedienungen. Eine Studie des MITTouch Lab zeigte, dass die durchschnittliche Fingerkuppe eines erwachsenen Menschen einen Durchmesser von 10-14 mm und die durchschnittliche Fingerspitze einen Durchmesser von 8-10 mm hat.3 Es ist unvermeidlich, dass ein Benutzer zumindest manchmal auch teilweise neben die Touch-Targets tippt. Und wenn dann weitere Touch-Elemente zu nahe liegen, könnten diese versehentlich ausgewählt werden, was zu Frustration führt und die vom Nutzer empfundene Usability der Schnittstelle beeinträchtigt. Um möglichen Fehlaktivierungen durch zu nahe beisammenliegende Elemente vorzubeugen, empfehlen die Material-Design-Richtlinien von Google, »Touch-Targets durch mindestens 8dp [dichteunabhängige Pixel] Abstand voneinander zu trennen, um eine gute Balance aus Informationsdichte und Benutzerfreundlichkeit zu gewährleisten«.
Neben Größe und Abstand entscheidet auch die Platzierung der Touch-Targets darüber, wie leicht sie auswählbar sind. Befinden sich dieTouch-Elemente in schwer zugänglichen Bildschirmbereichen, erschwert dies auch deren Auswahl. Es ist nicht immer ganz klar, wo genau solche schwer zugänglichen Bildschirmbereiche liegen, da sie sich je nach Benutzer- und Gerätekontext usw. verändern. Smartphones beispielsweise haben verschiedene Formfaktoren und die Nutzer halten sie je nach Aufgabe und Verfügbarkeit einer oder beider Hände auf unterschiedliche Weise. Einige Bildschirmbereiche sind schlechter zu erreichen, wenn man das Gerät in der Hand hält und Elemente mit dem Daumen auswählt. Hält man das Handy dagegen in der einen Hand und wählt die Elemente mit der anderen Hand aus, wird diese Schwierigkeit erheblich verringert. Selbst bei einhändigem Gebrauch steigt die Genauigkeit nicht linear von rechts unten nach links oben auf dem Bildschirm an. Laut einer Untersuchung von Steven Hoober ziehen es die Nutzer vor, die Mitte des Smartphone-Bildschirms zu betrachten und zu berühren, und hier ist auch die Genauigkeit am höchsten (Abbildung 2-2).4 Sie konzentrieren sich zudem meist eher auf die Mitte des Bildschirms, statt diesen von links oben nach rechts unten abzuscannen, wie es bei Desktop-Geräten üblich ist.
Abbildung 2-2: Touch-Genauigkeit bei Smartphones (Abbildung auf der Grundlage von Untersuchungen von Steven Hoober)
Beispiele
Durch die Zuordnung eines Beschriftungselements zu einem Eingabefeld können Designer und Entwickler sicherstellen, dass das Tippen oder Klicken auf die Beschriftung die gleiche Funktion wie die Auswahl des Eingabefelds erfüllt (Abbildung 2-3). Diese native Funktion vergrößert effektiv die Oberfläche des Eingabefelds und erleichtert es den Benutzern durch die geringere Präzisionsanforderung, sich auf die Eingabe zu konzentrieren. Unterm Strich ergibt sich so eine bessere User Experience sowohl für Desktop- als auch für Mobilgeräteanwender.
Abbildung 2-3: Formularbeschriftung und Formularfeld ergeben zusammen ein größeres Touch-Element.
Die Platzierung der Senden-Schaltflächen ist ein weiteres gängiges Beispiel für Fitts’ Gesetz. Diese Buttons werden meist in unmittelbarer Nähe des letzten Eingabefelds platziert (Abbildung 2-4), da Schaltflächen zum Abschließen einer Aktion (wie dem Ausfüllen eines Formulars) in der Nähe des aktiven Elements platziert werden sollten. Diese Positionierung stellt nicht nur sicher, dass die beiden verschiedenen Eingaben eine visuelle Verbindung zueinander erhalten, sondern sorgen auch dafür, dass der Benutzer vom letzten Formularfeld bis zum Senden-Button nur eine minimale Entfernung zurücklegen muss.
Abbildung 2-4: Schaltflächen zum Übermitteln von Formulardaten befinden sich in unmittelbarer Nähe des letzten Eingabefelds.
Der Abstand zwischen interaktiven Elementen ist ebenfalls ein wichtiger Gesichtspunkt. Nehmen Sie etwa den Bildschirm zur Bestätigung oder zum Ablehnen der Verbindungsanfrage in der iOS-App von LinkedIn