--- title: "Fitts’ Law" url: "https://insideuxdesign.com/de/glossar/fitts-law" language: "de" description: "Was ist Fitts’ Law? Einfach erklärt mit Beispiel, Zielgrößen nach WCAG, Apple und Android. Lies, wie du Buttons so gestaltest, dass sie leicht zu treffen sind." published: "2026-10-14T09:50:31+02:00" updated: "2026-10-14T13:07:52+02:00" --- # 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. - **Buchstabe:** F 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](https://insideuxdesign.com/de/glossar/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ü](https://insideuxdesign.com/de/blog/die-4-meistgestellten-fragen-zum-burger-menue). Weitere Gesetze dieser Art sammelt die Ressource [Laws of UX](https://insideuxdesign.com/de/ressourcen/laws-of-ux). ## Verwandte Begriffe [Hick’s Law](https://insideuxdesign.com/de/glossar/hicks-law), [Barrierefreiheit](https://insideuxdesign.com/de/glossar/barrierefreiheit), [WCAG](https://insideuxdesign.com/de/glossar/wcag) ## Quellen - [Paul M. Fitts: The Information Capacity of the Human Motor System in Controlling the Amplitude of Movement. Journal of Experimental Psychology, 1954](https://pubmed.ncbi.nlm.nih.gov/13174710/) - [Raluca Budiu: Fitts’s Law and Its Applications in UX. Nielsen Norman Group, 2022](https://www.nngroup.com/articles/fitts-law/) - [W3C: Understanding Success Criterion 2.5.8: Target Size (Minimum). W3C, 2024](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) - [Apple: Human Interface Guidelines: Buttons. Apple Developer, 2025](https://developer.apple.com/design/human-interface-guidelines/buttons) - [Android Developers: Make Apps More Accessible. Google, 2026](https://developer.android.com/guide/topics/ui/accessibility/apps) ## Weitere Begriffe [ ### A/B-Test Ein A/B-Test ist ein Experiment, bei dem zwei Varianten einer Seite oder eines Elements gleichzeitig an zufällig aufgeteilte Besuchende ausgespielt werden. So entscheidest du anhand echter Daten, welche Variante besser funktioniert. ](https://insideuxdesign.com/de/glossar/a-b-test) [ ### ARIA ARIA ist ein W3C-Standard, der HTML um Rollen, Zustände und Eigenschaften ergänzt. So erfahren Screenreader, was ein Element ist und wie es sich gerade verhält. ](https://insideuxdesign.com/de/glossar/aria) [ ### Affordance Eine Affordance beschreibt, welche Handlung ein Objekt möglich macht und ob Menschen das erkennen: Ein Button lädt zum Drücken ein, ein Griff zum Ziehen. ](https://insideuxdesign.com/de/glossar/affordance) [ ### Alternativtext Ein Alternativtext ist eine kurze Textfassung eines Bildes im HTML-Attribut alt. Screenreader lesen ihn vor, damit Menschen, die das Bild nicht sehen, dieselbe Information bekommen. ](https://insideuxdesign.com/de/glossar/alternativtext) [ ### Arbeitsgedächtnis Das Arbeitsgedächtnis hält Informationen für kurze Zeit fest, damit du mit ihnen arbeiten kannst. Es fasst nur wenig, deshalb sollten Interfaces möglichst wenig Merkarbeit verlangen. ](https://insideuxdesign.com/de/glossar/arbeitsgedaechtnis) [ ### Atomic Design Atomic Design ist eine Methode, Benutzeroberflächen aus kleinen, wiederverwendbaren Bausteinen aufzubauen: von einzelnen Elementen wie Buttons bis zu ganzen Seiten. ](https://insideuxdesign.com/de/glossar/atomic-design) [ ### BFSG Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet seit dem 28. Juni 2025 viele Unternehmen, bestimmte Produkte und digitale Dienstleistungen wie Onlineshops barrierefrei zu gestalten. ](https://insideuxdesign.com/de/glossar/bfsg) [ ### Barrierefreiheit Barrierefreiheit bedeutet, dass Websites, Apps und digitale Dokumente so gestaltet sind, dass alle Menschen sie nutzen können, auch mit einer Seh-, Hör-, motorischen oder kognitiven Behinderung. ](https://insideuxdesign.com/de/glossar/barrierefreiheit) [ ### Card Sorting Card Sorting ist eine Research-Methode, bei der Menschen Begriffe auf Karten in Gruppen sortieren. So siehst du, wie sie Inhalte gedanklich ordnen, und kannst eine verständliche Navigation planen. ](https://insideuxdesign.com/de/glossar/card-sorting) [ ### Cognitive Load Cognitive Load ist die geistige Anstrengung, die nötig ist, um eine Oberfläche zu verstehen und zu bedienen. Je weniger unnötige Denkarbeit ein Design verlangt, desto leichter fällt die eigentliche Aufgabe. ](https://insideuxdesign.com/de/glossar/cognitive-load) [ ### Contextual Inquiry Contextual Inquiry ist eine Research-Methode, bei der du Menschen in ihrem echten Arbeitsumfeld beobachtest und befragst. So siehst du, wie sie Aufgaben tatsächlich erledigen, nicht nur, wie sie davon erzählen. ](https://insideuxdesign.com/de/glossar/contextual-inquiry) [ ### Conversion Eine Conversion ist eine gewünschte Aktion auf einer Website oder in einer App, etwa ein Kauf oder eine Anmeldung. Die Conversion Rate zeigt, welcher Anteil der Besuche dazu führt. ](https://insideuxdesign.com/de/glossar/conversion)