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.