Fitts‘ Law einfach erklärt: So groß müssen Buttons auf deiner Website sein

Fitts‘ Law ist eines der ältesten und am besten belegten Gesetze, auf die sich Webdesign stützt. Es erklärt, warum manche Buttons sofort sitzen und andere ständig danebengehen. Gerade auf dem Handy merkst du das jeden Tag. Jeder Fehlklick kostet Nerven und manchmal eine Anfrage. Dieser Beitrag ist Teil 1 meiner Serie UX-Gesetze. Dort findest du alle 25 Gesetze auf einen Blick. Am Ende gibt es eine Checkliste zum Abhaken, auch als PDF.

Was ist Fitts‘ Law?

Fitts‘ Law besagt: Je weiter ein Ziel entfernt und je kleiner es ist, desto länger brauchst du, um es zu treffen. Das gilt für den Mauszeiger genauso wie für den Finger auf dem Touchscreen. Ein großer Button in der Nähe ist schnell geklickt. Ein winziger Link am anderen Ende der Seite braucht Zeit und geht öfter daneben.

Für die Praxis reicht die Richtung: Doppelt so weit weg oder halb so groß macht das Treffen schwerer. Bei kleinen Buttons bringt etwas mehr Größe viel. Bei großen Buttons bringt es kaum noch etwas.

Woher Fitts‘ Law kommt

Das Gesetz stammt vom US-Psychologen Paul M. Fitts. Er hat es 1954 im Journal of Experimental Psychology veröffentlicht (Originalartikel als PDF). Fitts hat damals keine Bildschirme untersucht, sondern Handbewegungen. Die Versuchspersonen mussten mit einem Stift abwechselnd auf zwei Metallplatten tippen. Fitts hat dabei Abstand und Breite der Platten verändert und die Zeit gemessen.

In die Computerwelt kam das Gesetz Ende der 1970er-Jahre. Stuart Card, William English und Betty Burr haben bei Xerox PARC verschiedene Eingabegeräte verglichen (Bericht als PDF). In einer Fachzeitschrift ist die Studie 1978 erschienen. Die Maus war am schnellsten und hatte die wenigsten Fehler. Ihre Zeigezeiten ließen sich mit Fitts‘ Law gut vorhersagen. Seitdem gehört das Gesetz zu den Grundlagen der Mensch-Computer-Interaktion.

Was die Studien zu Fitts‘ Law sagen

Fitts‘ Law wurde über Jahrzehnte mit Maus, Touchpad, Stift und Finger bestätigt. Einen guten Überblick gibt der Informatiker I. Scott MacKenzie in seiner Arbeit von 1992.

Für Touchscreens ist eine Studie von Parhi, Karlson und Bederson aus 2006 interessant. Sie haben gemessen, wie groß Ziele für den Daumen sein müssen. Das Handy war dabei in einer Hand. Ihre Empfehlung: rund 1 cm. Genau sind es 9,2 mm für einzelne Tipps wie auf einen Button und 9,6 mm, wenn man mehrmals hintereinander tippt, etwa beim Schreiben. Größere Ziele wurden schneller getroffen. Ab einer gewissen Größe ist die Fehlerquote aber nicht mehr weiter gesunken.

Wie Menschen ihr Handy halten, hat Steven Hoober 2013 in der Praxis gezählt. Bei 1.333 Beobachtungen tippten 780 Personen gerade auf den Bildschirm. Davon bedienten 49 % das Handy mit einer Hand. 2017 hat Hoober die oft zitierten „Daumenzonen“ als falsch bezeichnet. Das sind Grafiken, die zeigen sollen, wohin der Daumen gut reicht. Am genauesten treffen Menschen in der Bildschirmmitte. Dort reichen Ziele ab etwa 7 mm. In den Ecken braucht es rund 12 mm.

Eine Grenze hat das Gesetz: Es misst nur die Bewegung. Wie lange die Suche nach dem richtigen Button dauert, sagt es nicht. Dafür gibt es andere Gesetze, zum Beispiel Hick’s Law.

Wo Fitts‘ Law Anwendung findet

Du begegnest dem Gesetz öfter, als du denkst:

• Menüleiste am Mac: Sie sitzt ganz oben am Bildschirmrand. Die Maus bleibt dort stehen. Du fährst einfach nach oben und triffst immer. Bruce Tognazzini hat das schon 1999 beschrieben.
• Rechtsklick-Menü: Es öffnet sich genau dort, wo der Mauszeiger ist. Die Entfernung ist null.
• „In den Warenkorb“ im Shop: groß und direkt beim Preis. Die wichtigste Aktion bekommt das größte Ziel.
• Button, der am Handy stehen bleibt: Viele Shops zeigen „Jetzt kaufen“ als breite Leiste am unteren Rand. Sie bleibt beim Scrollen sichtbar und ist über die ganze Breite treffbar.
• Formulare: Ist der Text neben einem Kästchen zum Ankreuzen klickbar, wird das Ziel so groß wie die ganze Zeile.
• Cookie-Banner: Hier wird das Gesetz oft gegen die Besucher eingesetzt. „Alle akzeptieren“ ist ein großer Button, „Ablehnen“ ein kleiner Link. Das ist Fitts‘ Law mit Absicht.

So wendest du Fitts‘ Law auf deiner Website an

• Wichtige Buttons groß machen. Der Haupt-Button einer Seite darf deutlich größer sein als der Rest.
• Klickfläche größer als das Sichtbare. Dein Entwickler kann um ein kleines Symbol einen unsichtbaren Rand legen. Die Klickfläche wird größer, das Design bleibt gleich.
• Text und Kästchen verbinden. Dann setzt auch ein Klick auf den Text das Häkchen. Für deinen Entwickler ist das eine Kleinigkeit.
• Abstand zwischen Zielen. Zwei kleine Links direkt nebeneinander führen zu Fehlklicks.
• Wege kurz halten. Der „Weiter“-Button gehört direkt unter das Formular und nicht in eine Ecke.
• Am Handy Wichtiges in die Mitte. Dort wird am genauesten getroffen. Ziele am Rand und in den Ecken brauchen mehr Größe.

Der einfachste Gewinn steckt oft im Formular. Ist der Text mit dem Kästchen verbunden, wird die Klickfläche vielfach größer:

Ein Beispiel aus der Praxis

Ein Fall, der bei Prüfungen auf Barrierefreiheit oft auftaucht: Die mobile Navigation öffnet sich über ein kleines Menü-Symbol in der oberen Ecke. Das Symbol ist 18 × 18 Pixel groß, direkt daneben sitzt das Logo als Link zur Startseite. Wer das Menü öffnen will, landet regelmäßig auf der Startseite.

Für deinen Entwickler sind das ein paar Zeilen Code. Das Design ändert sich nicht, die Fehlklicks verschwinden.

/* CSS: Menü-Symbol mit Klickfläche 44 × 44 CSS-Pixel, Symbol bleibt klein (WCAG 2.5.8, 2.5.5) */
.menu-toggle {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px; /* Abstand zum Logo */
}

<!-- HTML: Text mit Kästchen verbinden, ein Klick auf den Text setzt das Häkchen -->
<input type="checkbox" id="ds" name="ds">
<label for="ds">Ich habe die Datenschutzerklärung gelesen</label>

Fitts‘ Law und Barrierefreiheit

Hier wird das Gesetz auch rechtlich wichtig. Die WCAG sind die internationalen Regeln für barrierefreie Websites. Für manche Unternehmen sind sie Pflicht. In Deutschland regelt das das Barrierefreiheitsstärkungsgesetz (BFSG), in Österreich das Barrierefreiheitsgesetz (BaFG). Als technischer Maßstab dient dabei die europäische Norm EN 301 549. Ihre derzeit gültige Fassung beruht auf WCAG 2.1. Eine neue Fassung mit WCAG 2.2 ist seit September 2026 fertig. Sie gilt, sobald die EU sie offiziell bekannt gibt. Erwartet wird das Ende 2026, einen offiziellen Termin gibt es noch nicht. In der Schweiz gelten eigene Regeln. Ob ein Gesetz für dich gilt, erkläre ich im Ratgeber Barrierefreiheit & Recht.

Seit WCAG 2.2 ist die Größe von Klickflächen eine eigene Anforderung. Die WCAG bestehen aus einzelnen Anforderungen mit Nummern, etwa 2.5.8. Jede hat eine Stufe: A ist die Grundstufe, AA die nächste, AAA die höchste. Gefordert sind A und AA.

• 2.5.8 Zielgröße (Minimum), Stufe AA, neu in WCAG 2.2: Klickbare Ziele müssen mindestens 24 × 24 Pixel groß sein. Kleinere Ziele sind erlaubt, wenn genug Abstand zum nächsten Ziel da ist. Ausnahmen gibt es unter anderem für Links mitten im Fließtext.
• 2.5.5 Zielgröße (erweitert), Stufe AAA: Hier sind es 44 × 44 Pixel. Keine Pflicht, aber ein guter Zielwert für wichtige Buttons.

2.5.8 ist noch nicht Teil der derzeit gültigen Norm. Mit der neuen Fassung ändert sich das. Es lohnt sich deshalb, es jetzt schon umzusetzen.

Laut W3C, dem Gremium hinter den WCAG, profitieren davon besonders Menschen mit Zittern in den Händen oder eingeschränkter Feinmotorik. Aber auch alle, die das Handy mit einer Hand bedienen oder im fahrenden Zug unterwegs sind. Fitts‘ Law erklärt, warum: Wer die Hand nicht ganz ruhig halten kann, braucht ein größeres Ziel.

Ein Hinweis zu den Zahlen: 24 Pixel sind die Untergrenze. 44 Pixel sind am Handy rund 7 mm. Die Touch-Studie von 2006 empfiehlt sogar etwas mehr, rund 9 bis 10 mm. Apple und Google empfehlen für Apps eine ähnliche Größe. Auf einer Website entspricht das etwa 44 bis 48 Pixeln. 44 × 44 Pixel sind also ein guter Zielwert. Für die wichtigsten Buttons am Handy darf es mehr sein.

Warum es Sinn macht und wann du es anwendest

Fitts‘ Law lohnt sich überall dort, wo jemand etwas tun soll. Bei Buttons, Formularen, Menüs und im Warenkorb. Weniger Fehlklicks heißen weniger Frust. Und sie heißen mehr Anfragen und Bestellungen. Wer den Anruf-Button am Handy nicht trifft, ruft nicht an.

Du kannst das Gesetz auch umgekehrt nutzen. Aktionen, die man nicht aus Versehen auslösen soll, gehören nicht groß und direkt neben den Hauptbutton. „Konto löschen“ sollte nicht dort sitzen, wo man sonst „Speichern“ klickt.

Wo es nicht hilft: Ein riesiger Button nützt nichts, wenn niemand versteht, was er tut. Und wenn jeder Button groß ist, sticht keiner mehr heraus. Größe ist ein Werkzeug für Wichtiges, nicht für alles.

Ob deine Klickflächen reichen, zeigt am schnellsten der Daumentest aus der Checkliste unten. Andere häufige Barrieren wie schwache Kontraste oder leere Buttons findet mein kostenloser Barrierefreiheits-Schnellcheck. Mehr zu Formularen steht im Beitrag zu barrierefreien Formularen, weitere Grundlagen in den Top 10 der WCAG-Kriterien.

Checkliste: Fitts‘ Law auf deiner Website

Hake ab, was auf deiner Website schon passt. Dein Stand bleibt in diesem Browser gespeichert.

1. Die wichtigste Aktion ist das größte Ziel. Schau die Seite drei Sekunden an. Fällt der Haupt-Button sofort auf?
2. Klickflächen sind mindestens 24 × 24 Pixel groß (WCAG 2.5.8). Am Handy mit dem Daumen tippen. Triffst du, ohne zu zielen? Genau messen kann dein Entwickler.
3. Wichtige Buttons und das Menü-Symbol haben 44 × 44 Pixel. Die Klickfläche darf größer sein als das sichtbare Symbol. Messen kann dein Entwickler.
4. Kleine Ziele haben genug Abstand zueinander. Am Handy mit dem Daumen durchtippen. Landest du öfter beim Nachbarn?
5. Bei Kästchen zum Ankreuzen ist auch der Text klickbar. Auf den Text neben dem Kästchen klicken. Wird das Häkchen gesetzt?
6. Weiter- und Senden-Buttons stehen direkt beim Formular. Ist der Weg vom letzten Feld zum Button kurz?
7. Gefährliche Aktionen liegen nicht direkt neben dem Haupt-Button. Stehen „Löschen“ oder „Abbrechen“ getrennt von „Speichern“?

PDF, 2 Seiten, 28 KB · barrierefrei nach PDF/UA · Kästchen am Bildschirm abhakbar · frei, ohne Anmeldung

Häufige Fragen

Wie groß muss ein Button laut WCAG sein?

WCAG 2.2 verlangt auf Stufe AA mindestens 24 × 24 Pixel. Kleinere Ziele gehen nur mit genug Abstand. Rechtlich maßgeblich wird das mit der neuen Fassung der Norm EN 301 549, erwartet für Ende 2026. Empfehlenswert sind 44 × 44 Pixel, das entspricht der Stufe AAA.

Gilt Fitts‘ Law auch am Handy?

Ja. Das Gesetz wurde mit Maus, Stift und Finger bestätigt. Am Touchscreen ist es sogar wichtiger, weil der Finger breiter ist als ein Mauszeiger und das Ziel beim Tippen verdeckt.

Muss ich dafür mein Design ändern?

Meist nicht. Die Klickfläche kann größer sein als das, was man sieht. Dein Entwickler legt dafür einen unsichtbaren Rand um das Symbol. Die Optik bleibt gleich.

Zählen Links im Fließtext auch?

Links mitten im Satz sind von 2.5.8 ausgenommen. Ihre Größe hängt von der Zeilenhöhe ab. Links im Menü, ganz unten auf der Seite (Footer) oder in Listen zählen aber sehr wohl.

Du willst wissen, wo es auf deiner Website klemmt? Schau dir meine Leistungen zur Barrierefreiheit an oder schreib mir direkt über die Kontaktseite. Weiter in der Serie geht es mit Jakob’s Law.

Quellen

• Fitts, P. M. (1954): The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47(6)
• Card, S. K., English, W. K. & Burr, B. J. (1978): Evaluation of Mouse, Rate-Controlled Isometric Joystick, Step Keys, and Text Keys for Text Selection on a CRT. Ergonomics, 21(8), 601–613
• MacKenzie, I. S. (1992): Fitts‘ law as a research and design tool in human-computer interaction
• Parhi, P., Karlson, A. K. & Bederson, B. B. (2006): Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices. MobileHCI ’06, 203–210
• Hoober, S. (2013): How Do Users Really Hold Mobile Devices? UXmatters
• Hoober, S. (2017): Design for Fingers, Touch, and People, Part 1. UXmatters
• Tognazzini, B. (1999): A Quiz Designed to Give You Fitts
• W3C: Understanding Success Criterion 2.5.8 Target Size (Minimum)
• Jon Yablonski: Laws of UX – Fitts’s Law