Fitts' Law

Fitts' Law ist ein prädiktives Modell der menschlichen Bewegungszeit, das besagt: Je kleiner und weiter entfernt ein Ziel ist, desto länger dauert es, es zu treffen.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UX/UI Design · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Fitts'sches Gesetz, Pointing Law, Zeigerbewegungsgesetz

Was ist Fitts' Law?

Paul Fitts, ein US-amerikanischer Psychologe, formulierte 1954 ein mathematisches Modell der menschlichen Zeigerbewegung, das heute zu den wichtigsten wissenschaftlichen Grundlagen des Interaktionsdesigns gehört. Die Kernaussage ist intuitiv verständlich: Große Ziele und nah gelegene Ziele sind einfacher zu treffen als kleine, weit entfernte. Die mathematische Formalisierung erlaubt jedoch quantitative Vorhersagen.

Fittss Law gilt für alle Zeigerbewegungen — Maus, Stylus, und (mit Modifikationen) für Touch-Interaktionen auf Mobilgeräten.

Erklärung

Die mathematische Grundformel

Fitts' Index of Difficulty (ID) beschreibt die Schwierigkeit einer Zeigerbewegung:

ID = log₂(2D / W)

Dabei gilt:

• D = Distanz vom aktuellen Zeiger zum Ziel
• W = Breite (Größe) des Ziels in der Bewegungsrichtung

Je höher der ID-Wert, desto länger dauert die Bewegung und desto höher ist die Fehlerrate.

Praktische Konsequenzen:

• Verdopplung der Distanz = ID steigt um 1 Punkt = Bewegung dauert messbar länger
• Halbierung der Zielgröße = ID steigt ebenso um 1 Punkt
• Zielgröße = Distanz = ID ≈ 1 = sehr leicht zu treffen
• Zielgröße → unendlich groß = ID → 0 = kein Aufwand (z. B. Vollbild-Klickfläche)

Praktische Designkonsequenzen

Konsequenz 1: Primäre Aktionen groß und nah platzieren Der wichtigste Button einer Seite sollte der größte und am nächsten zum natürlichen Cursorposition gelegene sein. In Dialogen: Der primäre Aktionsbutton wird üblicherweise rechts oder unten platziert, weil der Cursor dort nach dem Lesen eines Textes natürlich landet.

Konsequenz 2: Abstandsreduzierung ist genauso wichtig wie Größenerhöhung Ein Button muss nicht riesig sein, wenn er strategisch nah am Cursor-Ausgangspunkt liegt. Die Corner-Regel in Fitts' Law: Bildschirmecken haben effektiv unendliche Größe, weil der Cursor dort von selbst "steckenbleibt" (kein Overshooting möglich). Das macht Ecken ideal für häufig genutzte Elemente — macOS Menüleiste (oben), Windows Start-Button (unten links) nutzen dies bewusst.

Konsequenz 3: Touch Targets auf Mobile Bei Touch-Interaktionen ist die "Zeigerspitze" nicht präzise wie ein Mauszeiger — der Finger hat einen Auftreffradius von 7–14 mm. Apple Human Interface Guidelines und Google Material Design setzen daher Mindestgrößen:

• Apple HIG: Mindestens 44 × 44 pt (was auf einem iPhone bei normalem Scaling ca. 44 × 44 px entspricht)
• Google Material Design: Mindestens 48 × 48 dp für interaktive Elemente
• WCAG 2.5.5 (Level AAA): Mindestens 44 × 44 CSS-Pixel

Diese Mindestwerte sind nicht beliebig — sie basieren auf anthropometrischen Studien der durchschnittlichen Fingerkuppengröße.

Konsequenz 4: Abstand zwischen Touch-Targets Nicht nur die absolute Größe eines Targets zählt — auch der Abstand zum nächsten Target beeinflusst die Fehlerrate (falsche Targets werden getroffen). Empfehlung: Mindestens 8 px Abstand zwischen interaktiven Elementen, besser 12–16 px.

Fitts' Law und die Ecken-Regel

Die strategisch wichtigste Schlussfolgerung aus Fitts' Law für Bildschirm-Design ist die Corner-Regel: Bildschirmecken sind die am schnellsten erreichbaren Bereiche des gesamten Bildschirms. Ein Cursor, der über eine Ecke hinausgeht, landet immer genau in der Ecke — eine Fläche von "null Pixeln" hat effektiv unendliche Größe, weil kein Overshooting möglich ist.

Deshalb befinden sich auf Betriebssystemebene wichtigste Elemente immer in Ecken:

• macOS: Apple-Menü (oben links), Benachrichtigungen (oben rechts), Launchpad (unten links)
• Windows: Start-Menü (unten links), Uhr (unten rechts)

Fitts' Law auf Touch-Screens: Einschränkungen

Auf Touch-Screens gilt Fitts' Law nicht 1:1. Touch-Interaktionen haben andere Charakteristika:

• Keine Hover-Phase (Nutzer sieht Finger nicht, bevor er aufsetzt)
• Physikalisches Gewicht des Fingers beeinflusst Präzision
• "Fat Finger"-Problem: Finger verdeckt das Ziel beim Antippen
• Keine Ecken-Regel: Bildschirmrand ist oft durch Betriebssystem-Gesten belegt

Apple's Studie zeigt: Die optimale Touch-Target-Größe für minimale Fehlerrate liegt bei 44 × 44 pt — kleiner erhöht die Fehlerrate exponentiell, größer bringt kaum mehr Verbesserung.

Beispiele

1. Apple Menüleiste (macOS): Die Menüleiste erstreckt sich über den kompletten oberen Bildschirmrand — ein infinit großes Target nach Fitts' Law. Egal wie schnell der Cursor nach oben bewegt wird, er landet immer in der Menüleiste. Bewusstes Ausnutzen der Eckenregel.
2. Google Search: Der "Google Suche"-Button ist sehr groß und zentriert direkt unter dem Suchfeld. Nach dem Tippen einer Anfrage ist der Button nah und groß genug für einen schnellen Klick.
3. Airbnb Mobile App: Bottom Navigation Bar mit 5 Tab-Items à 44 × 44+ px Touchfläche. Korrekte Implementierung der Apple-HIG-Mindestwerte, optimal erreichbar im Daumenbereich.
4. Spotify Play-Button: Der zentrale Play-Button auf Alben und Playlists ist 56 × 56 px — deutlich über dem Minimum. Spotify priorisiert die häufigste Aktion (Abspielen) durch maximale Target-Größe.
5. Amazon "In den Warenkorb"-Button: Der Call-to-Action-Button ist der prominenteste, größte Button auf der Produktseite. Auf Mobile: volle Breite minus Padding — deutlich über dem Minimum, um Conversion zu maximieren.

In der Praxis (Figma-Umsetzung)

Touch-Target-Checks in Figma:

1. Erstelle einen "Touch Target Checker"-Overlay-Frame: Ein rotes Rechteck 44 × 44 px
2. Platziere es über jedem interaktiven Element: Wenn das Element kleiner ist → Fix it
3. Alternativ: Figma Plugin "Stark" hat einen eingebauten Touch-Target-Checker

Unsichtbare Klickflächen vergrößern: Wenn ein Button-Icon nur 20 × 20 px ist, aber das umgebende Touch-Target 44 × 44 px sein soll:

• Option A: Padding um das Icon so setzen, dass Gesamtgröße 44 × 44 px
• Option B: Transparenter Hintergrundframe 44 × 44 px mit Icon zentriert

Abstandsregeln dokumentieren: In Figma Spacing Tokens: spacing/touch-target-gap: 8px (minimal) und spacing/touch-target-comfortable: 12px (empfohlen). Diese Werte als Annotations in Component-Dokumentationen.

Primäre vs. sekundäre Buttons: Primärer Button: Mindestens 48 px Höhe, volle Breite oder prominent groß. Sekundärer Button: 40–44 px. Destruktiver Button (Löschen): Nicht riesig — größe signalisiert Wichtigkeit, ein zu großer Löschen-Button erhöht versehentliche Klicks.

Vergleich & Abgrenzung

Fitts' Law vs. Hick-Hyman-Gesetz: Fitts' Law beschreibt die motorische Seite (Wie schnell/genau kann ich ein Ziel treffen?). Hick-Hyman beschreibt die kognitive Seite (Wie lange brauche ich, um zwischen Optionen zu entscheiden?). Beide zusammen beschreiben die Gesamtinteraktionszeit.

Fitts' Law (Desktop) vs. Touch: Auf Desktop gilt Fitts' Law exakt. Auf Touch gilt es qualitativ, aber die quantitativen Werte sind anders (mehr Fläche nötig). WCAG 2.5.5 formalisiert die Touch-Mindestgröße.

Häufige Fragen (FAQ)

Gilt die 44×44 px Regel für alle Betriebssysteme gleich? Apple HIG: 44 × 44 pt (Points, nicht Pixel). Material Design: 48 × 48 dp. Points und dp sind geräteunabhängige Einheiten, die auf modernen Displays mit 2× oder 3× Pixeldichte zu 88 × 88 bzw. 144 × 144 physischen Pixeln werden. Für CSS-basierte Webdesigns sind 44 CSS-Pixel eine gute Faustregel, da CSS-Pixel geräteunabhängig sind.

Was tun, wenn ein Button nicht 44 px hoch sein darf (visuell zu groß)? Die visuelle Größe und die Touch-Target-Größe müssen nicht identisch sein. Ein Textlink kann visuell 16 px hoch erscheinen, aber eine unsichtbare Klickfläche von 44 × 44 px haben. Diese Technik ist weit verbreitet und vollständig akzeptiert — die Touch-Fläche wird nicht sichtbar, nur funktional vergrößert.

Verwandte Einträge

• Affordance — Visuelle Kommunikation von Klickbarkeit
• Hick-Hyman-Gesetz — Kognitive Komplexität bei Entscheidungen
• Navigation Patterns — Navigationsdesign mit Fitts' Law

Weiterführend

• Fitts, P. M. (1954). The Information Capacity of the Human Motor System in Controlling the Amplitude of Movement. Journal of Experimental Psychology, 47(6), 381–391.
• Norman, D. A. (2013). The Design of Everyday Things (überarbeitete Ausgabe). Basic Books.
• Apple Inc. (2023). Human Interface Guidelines: Layout. developer.apple.com.
• W3C (2023). WCAG 2.5.5: Target Size. w3.org.