Читать книгу Laws of UX - Jon Yablonski - Страница 19
Оглавление| 2
Minimaler Aufwand für maximalen Erfolg – Fitts’ Gesetz
Die Zeitdauer bis zum Erreichen eines Ziels ist eine Funktion der Entfernung und der Größe des Ziels.
Wichtige Erkenntnisse
Touch-Targets sollten so groß sein, dass sie vom Benutzer korrekt ausgewählt werden können.
Zwischen einzelnen Touch-Targets sollte ein ausreichender Abstand bestehen.
Touch-Targets sollten in leicht erreichbaren Schnittstellenbereichen platziert werden.
Überblick
Usability ist ein entscheidender Aspekt von gutem Design. Sie impliziert Benutzerfreundlichkeit, die Schnittstelle sollte also für die Benutzer leicht verständlich und navigierbar sein. Die Interaktion sollte mühelos und unkompliziert vonstattengehen und nur minimalen Aufwand erfordern. Die Zeit, die die Benutzer brauchen, um ein interaktives Objekt anzusteuern und damit in Interaktion zu treten, ist eine entscheidende Messgröße. Als Designer müssen wir die interaktiven Objekte unbedingt angemessen dimensionieren und platzieren, sodass sie sich leicht auswählen lassen und die Erwartungen der Anwender hinsichtlich des auswählbaren Bereichs erfüllen – eine Herausforderung, die durch die verschiedenen Genauigkeiten der heute verfügbaren Eingabemethoden (Maus, Finger usw.) noch verstärkt wird.
Um dies zu unterstützen, können wir Fitts’ Gesetz anwenden, das besagt, dass die Zeit, die ein Benutzer braucht, um mit einem Objekt zu interagieren, im Verhältnis zu dessen Größe und Entfernung steht. Wird ein Objekt größer, sinkt also die für seine Auswahl benötigte Zeit. Außerdem nimmt die zum Auswählen eines Objekts benötigte Zeit mit der Entfernung ab, die der Nutzer dafür zurücklegen muss. Natürlich gilt auch der Umkehrschluss: Je kleiner und je weiter entfernt ein Objekt ist, desto länger braucht der Nutzer, um es auszuwählen. Dieses recht offensichtliche Konzept hat weitreichende Auswirkungen, die ich in diesem Kapitel aufzeige. Wir werfen auch einen Blick auf einige passende Beispiele.
Ursprung
Fitts’ Gesetz lässt sich bis ins Jahr 1954 zurückverfolgen: Der amerikanische Psychologe Paul Fitts 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 (Abbildung 2-5). Hier sind die beiden Optionen gemeinsam rechts von einem Dialog platziert. Sie liegen so nahe beieinander, dass die Benutzer sich deutlich auf die Auswahl der gewünschten Aktion konzentrieren müssen, um nicht versehentlich die andere auszuwählen. Jedes Mal, wenn ich diesen Bildschirm sehe, weiß ich, dass ich nun mit beiden Händen arbeiten muss, um nicht versehentlich mit meinem Daumen eine nicht gewünschte Vernetzungsanfrage zu akzeptieren.
Smartphones, Laptops und Desktop-Computer sind nicht die einzigen Schnittstellen, die wir tagtäglich benutzen. Nehmen Sie zum Beispiel die Infotainment-Systeme in Autos. Das Modell 3 von Tesla verfügt über ein 15-Zoll-Display direkt im Armaturenbrett. Die meisten Bedienelemente des Fahrzeugs befinden sich auf diesem Bildschirm und liefern dem Benutzer kein haptisches Feedback. Demzufolge muss der Fahrer seine Aufmerksamkeit natürlich von der Straße auf den Bildschirm lenken, um diese Bedienelemente nutzen zu können, und daher ist Fitts’ Gesetz von so entscheidender Bedeutung.
Abbildung 2-5: Mangelnder Abstand zwischen den Aktionen verschlechtert die Nutzbarkeit (Quelle: LinkedIn, 2019).
Das Modell 3 folgt Fitts’Gesetz und bietet reichlich Platz zwischen den Elementen in der unteren Navigationsleiste (Abbildung 2-6). Dies verringert das Risiko der versehentlichen Auswahl benachbarter Aktionen.
Zusammen mit den größeren iPhone-Modellen 6 und 6 Plus führte Apple eine Funktion ein, die die einhändige Bedienung erleichtern sollte. Dieser auch als Reachability bezeichnete Einhandmodus ermöglicht es den Benutzern, Elemente am oberen Bildschirmrand durch eine einfache Geste schnell in die untere Bildschirmhälfte zu bringen (Abbildung 2-7). Auf diese Weise wird ein einfacher Zugang zu Bildschirmbereichen ermöglicht, in denen einhändige Benutzer sonst nur schwer arbeiten könnten.
Abbildung 2-6: Ausreichender Abstand zwischen den Elementen steigert die Benutzerfreundlichkeit und minimiert das Risiko der Fehlbedienung (Quelle: Tesla, 2019).
Abbildung 2-7: Der Einhandmodus des iPhones ermöglicht einen einfachen Zugriff auf die obere Bildschirmhälfte (Quelle: Apple, 2019).
Fazit
Als Designer tragen wir auch eine wichtige Verantwortung dafür, dass die von uns geschaffenen Schnittstellen die menschlichen Fähigkeiten und Erfahrungen erweitern, statt ablenkend oder abschreckend zu wirken. Auf Mobilgeräteschnittstellen ist Fitts’ Gesetz wegen der begrenzten verfügbaren Bildschirmfläche besonders wichtig. Wir können sicherstellen, dass interaktive Elemente leicht auswählbar sind, indem wir sie so groß anlegen, dass die Benutzer sie sowohl erkennen als auch richtig treffen können. Dazu ist ausreichend Platz zwischen den Bedienelementen nötig, um eine versehentliche Auswahl benachbarter Aktionen zu vermeiden. Außerdem sollten sie in Bereichen der Benutzeroberfläche platziert werden, die eine einfache Auswahl ermöglichen.
