UX & Design

Grundlage

Fitts' Law: Warum wichtige Buttons groß und nah sein müssen

Je größer und näher ein Ziel, desto schneller triffst du es. Fitts' Law erklärt, warum kleine, weit entfernte Buttons Klicks kosten.

von Josef KujawskiVeröffentlicht: 13. Oktober 20264 Min Lesezeit

Fitts' Law: Warum wichtige Buttons groß und nah sein müssen

Kurzantwort

Fitts' Law besagt: Die Zeit, um ein Ziel mit Maus oder Finger zu treffen, hängt von seiner Entfernung und seiner Größe ab. Große, nahe Ziele werden schneller und sicherer getroffen, kleine, weit entfernte langsamer und mit mehr Fehlklicks. Für Websites heißt das: Wichtige Buttons groß machen, in die Nähe der Aufmerksamkeit setzen und auf dem Smartphone in Daumenreichweite platzieren. Unwichtige oder destruktive Aktionen dürfen bewusst kleiner und weiter weg sein.

Das Problem: Der Button ist da, aber keiner trifft ihn

Du kennst das: Auf dem Smartphone willst du ein Formular absenden, der Button ist winzig, sitzt ganz oben rechts, und du tippst daneben. Oder am Desktop fährst du mit der Maus quer über den Bildschirm, um ein kleines Kreuz zu erwischen. Beides kostet Zeit, Nerven und manchmal die Anfrage, die du gerade gewinnen wolltest.

Dahinter steckt kein Zufall, sondern eines der am besten belegten Gesetze der Interaktionsgestaltung: Fitts' Law.

Das Prinzip: Größe und Entfernung bestimmen die Zeit

Der Psychologe Paul Fitts zeigte 1954, dass die Zeit für eine gezielte Bewegung von zwei Faktoren abhängt: wie weit das Ziel entfernt ist und wie groß es ist. ^[1] In der heute üblichen Form lautet die Formel:

T = a + b · log2(D/W + 1)

T ist die Zeit bis zum Treffer
D ist die Distanz zum Ziel
W ist die Breite des Ziels in Bewegungsrichtung
a und b sind Konstanten, abhängig von Gerät und Person

Die Kernaussage ist einfacher als die Formel: Doppelte Entfernung oder halbe Größe machen das Ziel schwerer erreichbar. Und weil der Zusammenhang logarithmisch ist, bringen die ersten Vergrößerungen kleiner Ziele am meisten. ^[2]

Schaubild zu Fitts' Law: Ein großes, nahes Ziel ist schneller erreichbar als ein kleines, weit entferntes — Groß und nah schlägt klein und weit: Fitts' Law auf einen Blick.

Kernaussage

Ein Ziel wird schneller getroffen, je größer und näher es ist. Die wichtigste Aktion einer Seite verdient deshalb die größte und am besten erreichbare Fläche.

Was das für Websites bedeutet

Situation	Typischer Fehler	Besser
Primärer Call-to-Action	Kleiner Textlink im Fließtext	Klar abgegrenzter Button, ganze Fläche klickbar
Formular absenden	Button weit weg vom letzten Feld	Button direkt unter dem letzten Feld
Mobile Navigation	Wichtige Aktion oben rechts	Aktion im unteren Bildschirmdrittel
Kleine Icons	Nur das Icon reagiert	Unsichtbare, größere Klickfläche drumherum
Löschen, Abbrechen	Gleich groß und direkt neben Absenden	Kleiner, mit Abstand, optisch zurückgenommen

Drei Regeln haben sich in der Praxis bewährt:

Wichtiges groß machen. Der primäre Button einer Seite ist die größte interaktive Fläche im Sichtbereich. Die gesamte Fläche reagiert, nicht nur das Wort darin.
Nah an die Aufmerksamkeit. Ein Button gehört dorthin, wo der Blick nach dem Lesen ohnehin landet: direkt unter den Text oder das Formular, auf das er sich bezieht.
Gefährliches bewusst schwerer machen. Fitts' Law funktioniert auch umgekehrt. Destruktive Aktionen wie Löschen dürfen kleiner und weiter weg sein, damit niemand sie aus Versehen trifft.

Smartphone: Der Daumen ist der Mauszeiger

Auf dem Smartphone gilt Fitts' Law mit einer zusätzlichen Bedingung: Die Bewegung startet meist am Daumen, der unten am Gerät liegt. Ziele im unteren Drittel sind leicht erreichbar, Ziele oben in den Ecken schwer. Deshalb wandern Navigationsleisten und wichtige Aktionen in vielen Apps nach unten.

Smartphone mit drei Zonen der Daumenreichweite: unten leicht, Mitte okay, oben schwer — Die Daumenzone: Je weiter oben ein Ziel liegt, desto aufwendiger wird der Griff.

Dazu kommt die Mindestgröße. Die Barrierefreiheitsrichtlinie WCAG 2.2 verlangt für Tippflächen mindestens 24 × 24 CSS-Pixel oder ausreichend Abstand zu benachbarten Zielen. ^[3] Für komfortable Bedienung sind 44 bis 48 Pixel eine gute Faustregel. Das hilft nicht nur Menschen mit motorischen Einschränkungen, sondern allen, die unterwegs mit einer Hand surfen.

Desktop: Ränder und Ecken sind Gold wert

Am Desktop gibt es eine Besonderheit: Der Mauszeiger bleibt am Bildschirmrand stehen. Ein Ziel am Rand hat dadurch in Bewegungsrichtung praktisch unendliche Tiefe. Betriebssysteme nutzen das seit Jahrzehnten, etwa für Menüleisten oder Startmenüs in den Ecken. Im Browser ist dieser Effekt schwächer, weil die Website nicht am Bildschirmrand endet. Das Prinzip bleibt aber gültig: Große, klar begrenzte Flächen sind schneller als kleine Inseln mitten im Layout.

Kernaussage

Auf dem Smartphone zählt die Daumenreichweite, am Desktop die Distanz zum Mauszeiger. In beiden Fällen gilt: wichtige Aktionen groß, nah und gut abgegrenzt.

Fitts' Law im Zusammenspiel mit anderen Prinzipien

Fitts' Law erklärt die Bewegung, nicht die Entscheidung. Wie lange jemand überlegt, bevor er klickt, beschreibt Hick's Law. Und warum zu viele Optionen lähmen, zeigt das Paradox of Choice. Gute Oberflächen reduzieren beides: wenige klare Optionen, gut erreichbar platziert. Wie sich das am Ende in messbarer Geschwindigkeit niederschlägt, erklären wir bei den Core Web Vitals.

Wenn eine Seite nicht konvertiert, schauen wir zuerst auf den wichtigsten Button. Erstaunlich oft ist er zu klein, zu weit weg oder sieht aus wie alles andere. Das zu korrigieren kostet wenig und wirkt sofort.

– Josef Kujawski, Geschäftsführer Maluure GmbH

Kurz-Check für deine Website

Ist der wichtigste Button die größte interaktive Fläche im ersten Sichtbereich?
Reagiert die ganze Button-Fläche, nicht nur der Text?
Sitzt der Absende-Button direkt unter dem letzten Formularfeld?
Sind Tippflächen auf dem Smartphone mindestens 44 Pixel groß?
Liegen destruktive Aktionen mit Abstand zu den wichtigen?

Wenn du mehrmals mit Nein antwortest, lohnt sich ein genauer Blick. Bei einer neuen Maluure-Page™ planen wir Größen, Abstände und Daumenzonen von Anfang an mit.

Häufige Fragen

Was besagt Fitts' Law?+

Fitts' Law beschreibt, dass die Zeit zum Treffen eines Ziels mit der Entfernung wächst und mit der Größe des Ziels sinkt. Große, nahe Ziele sind schneller erreichbar als kleine, weit entfernte.

Wer hat Fitts' Law entdeckt?+

Der US-Psychologe Paul Fitts veröffentlichte das Gesetz 1954. Ursprünglich ging es um Handbewegungen, heute ist es eine Grundlage der Interaktionsgestaltung.

Wie lautet die Formel von Fitts' Law?+

In der verbreiteten Shannon-Form lautet sie T = a + b · log2(D/W + 1). T ist die Bewegungszeit, D die Distanz zum Ziel, W die Breite des Ziels, a und b sind Konstanten.

Was bedeutet Fitts' Law für Buttons auf Websites?+

Primäre Buttons sollten groß genug, gut abgegrenzt und nahe am Inhalt platziert sein, auf den sie sich beziehen. Die ganze Fläche sollte klickbar sein, nicht nur der Text.

Gilt Fitts' Law auch auf dem Smartphone?+

Ja. Auf Touchscreens zählt zusätzlich die Daumenreichweite. Wichtige Aktionen gehören in den unteren, gut erreichbaren Bereich und brauchen ausreichend große Tippflächen.

Wie groß sollte eine Tippfläche mindestens sein?+

WCAG 2.2 fordert mindestens 24 × 24 CSS-Pixel oder genügend Abstand. Für Touch sind etwa 44 bis 48 Pixel eine gängige, komfortable Empfehlung.

Warum sind Bildschirmränder bei Fitts' Law besonders?+

Am Desktop stoppt der Mauszeiger am Bildschirmrand. Ziele an Rändern und Ecken wirken dadurch quasi unendlich tief und sind besonders leicht zu treffen.

Wie hängen Fitts' Law und Hick's Law zusammen?+

Hick's Law beschreibt die Zeit für die Entscheidung, Fitts' Law die Zeit für die Bewegung. Gute Oberflächen reduzieren beides: wenige klare Optionen, gut erreichbar platziert.

Quellen

The information capacity of the human motor system in controlling the amplitude of movement, Journal of Experimental Psychology (1954)
Fitts's Law and Its Applications in UX, Nielsen Norman Group (2022)
Target Size (Minimum), WCAG 2.2 Success Criterion 2.5.8, W3C (2023)

#UX#Usability#Interaktion#Conversion

Autor

Josef Kujawski

Geschäftsführer & Creative Director bei Maluure

Josef leitet die strategische und gestalterische Entwicklung von Marken bei Maluure. Seit über einem Jahrzehnt begleitet er mittelständische Unternehmen von der Markenpositionierung bis zur digitalen Umsetzung.

Geschäftsführer der Maluure GmbH, Köln. Spezialisiert auf Corporate Design, Markenstrategie und digitale Markenerlebnisse.

LinkedIn Website