Zum Inhalt springen
InsideUX Design

UX-Glossar

Fitts’ Law

Fitts’ Law beschreibt, wie lange es dauert, ein Ziel mit einer Bewegung zu treffen: Je größer und näher ein Ziel ist, desto schneller und sicherer erreichst du es. Im UX-Design hilft das, Buttons und Links richtig zu dimensionieren und zu platzieren.

Stell dir vor, du stehst in einer vollen Straßenbahn, hältst dich mit einer Hand fest und willst mit dem Daumen der anderen eine Nachricht löschen. Der Papierkorb ist ein winziges Symbol ganz oben in der Ecke, direkt neben „Archivieren“. Du tippst zweimal daneben und triffst beim dritten Versuch das falsche Symbol.

Dass das kein Zufall ist, beschreibt ein Gesetz aus der Bewegungsforschung: Fitts’ Law.

Einfach erklärt

Fitts’ Law sagt: Wie lange du brauchst, um ein Ziel zu treffen, hängt von zwei Dingen ab. Von der Entfernung zum Ziel und von seiner Größe. Je weiter weg und je kleiner das Ziel, desto länger dauert die Bewegung und desto häufiger gehst du daneben.

Ein Vergleich aus dem Alltag: Einen Ball in einen Wäschekorb zu werfen, der einen Meter entfernt steht, schaffst du fast blind. Denselben Ball aus fünf Metern in eine Tasse zu werfen, braucht Zeit, Konzentration und meistens mehrere Versuche.

Benannt ist das Gesetz nach dem US-Psychologen Paul Fitts, der es 1954 im Journal of Experimental Psychology veröffentlichte. Er ließ Versuchspersonen mit einem Stift zwischen zwei Zielflächen hin und her tippen. Die Nielsen Norman Group fasst die Formel so zusammen: Die Zeit wächst mit dem Logarithmus des Verhältnisses von Entfernung zu Zielgröße. Wichtig für die Praxis ist vor allem die Richtung: größer und näher ist schneller.

Was das für Interfaces bedeutet

Auf Bildschirmen sind die Ziele Buttons, Links, Icons und Formularfelder. Daraus ergeben sich drei Hebel. Erstens die Größe: Wichtige Aktionen brauchen eine großzügige Klickfläche. Zweitens die Nähe: Aktionen sollten dort liegen, wo Maus oder Daumen gerade sind, etwa ein Button „Weiter“ direkt unter dem letzten Formularfeld. Drittens die Bildschirmränder: Mit der Maus wirken sie wie unendlich große Ziele, weil der Zeiger dort stoppt. Darum lassen sich die Menüleiste am oberen Rand unter macOS oder die Taskleiste unter Windows so schnell erreichen. Auf Touchscreens gilt dieser Vorteil laut Nielsen Norman Group nicht, weil der Finger über den Rand hinausrutschen kann.

Wie groß ist groß genug?

Die WCAG 2.2 geben zwei Werte vor. Kriterium 2.5.8 (Stufe AA) verlangt mindestens 24 × 24 CSS-Pixel oder genug Abstand zu anderen Zielen. Kriterium 2.5.5 (Stufe AAA) setzt 44 × 44 CSS-Pixel an. Apple empfiehlt in den Human Interface Guidelines eine Trefferfläche von mindestens 44 × 44 Punkten, Android mindestens 48 × 48 dp. Wichtig: Die Trefferfläche darf größer sein als das sichtbare Icon, zum Beispiel durch Innenabstand.

Ein Beispiel

Ein Beispiel: Eine Banking-App zeigt beim Überweisen ganz oben rechts ein kleines Häkchen zum Bestätigen und gleich daneben ein X zum Abbrechen. Viele Menschen müssen dafür umgreifen, und Fehltipper landen auf der falschen Aktion.

Nach der Überarbeitung sitzt unten ein breiter Button „Jetzt überweisen“, gut erreichbar mit dem Daumen. „Abbrechen“ ist ein Textlink mit deutlichem Abstand. Die Hauptaktion ist damit groß und nah, die riskante Aktion bewusst etwas weiter weg.

In der Praxis

  • Mach die Hauptaktion zum größten Ziel. Was Menschen am häufigsten tun, bekommt die größte Fläche. Ganze Karten oder Listenzeilen klickbar zu machen, vergrößert das Ziel ohne optischen Mehraufwand.
  • Halte Abstand bei riskanten Aktionen. „Löschen“ gehört nicht direkt neben „Speichern“. Etwas mehr Entfernung ist hier ausnahmsweise gewollt.
  • Denk an Daumen und Ränder. Am Smartphone erreicht der Daumen den unteren Bildschirmbereich am leichtesten. Mehr zu Navigationsmustern auf kleinen Screens im Artikel Die 4 meistgestellten Fragen zum Burger-Menü. Weitere Gesetze dieser Art sammelt die Ressource Laws of UX.

Verwandte Begriffe

Hick’s Law, Barrierefreiheit, WCAG

Quellen

Weitere Begriffe

Ganzes Glossar