Was ist das Fittssche Gesetz?

Das Gesetz besagt, dass die Zeit, um auf ein Ziel zu zeigen, mit der Entfernung wächst und mit der Größe des Ziels sinkt. Paul Fitts veröffentlichte es 1954.

Wie lautet die Formel des Fittsschen Gesetzes?

Die von MacKenzie vertretene Shannon-Form lautet MT = a + b × log2(D / W + 1). D ist die Entfernung, W die Breite des Ziels, a und b sind empirisch bestimmte Konstanten. In Fitts' eigener Formel stand log2(2D / W).

Gilt das Fittssche Gesetz auch auf dem Handy?

Ja, auch das Zeigen mit dem Finger ist eine Zeigebewegung. Den Vorteil des Bildschirmrands gibt es auf Touch aber nicht. NN/g berichtet, dass Ziele am Rand auf Touch länger dauern.

Wie viele Pixel sollte ein Button mindestens haben?

Das Fittssche Gesetz nennt keine Zahl. Fürs Web verlangt Kriterium 2.5.8 der WCAG 2.2 auf Stufe AA mindestens 24 × 24 CSS-Pixel, mit einer Abstandsausnahme für kleine Ziele.

Fittssches Gesetz: Formel, Beispiele, Demo

Kurz gesagt

Ein kleines Ziel in der Ferne zu drücken, dauert länger als ein großes in der Nähe. Das Fittssche Gesetz, englisch Fitts's Law, macht aus dieser Intuition eine messbare Formel.

Der Zeiger kann der Mauszeiger sein, aber auch Finger oder Hand. Deshalb erklärt NN/g das Gesetz für Desktop und Touch zusammen.

Messen Sie es im Spiel unten selbst. Probieren Sie zuerst ein paarmal das kleine, ferne Ziel, dann das große, nahe.

Live-Demo: Drücken Sie das Ziel

Drücken Sie Start. In der Fläche erscheint ein oranges Ziel, drücken Sie es so schnell wie möglich. Drücken Sie daneben, zählt das als Fehlklick.

Klick-Tempo-Spiel

Dieses Spiel braucht JavaScript. Ist es aus, erklärt der Text unten dieselbe Idee mit Formel und Beispielen.

Gemessen wird die Zeit vom Drücken auf Start bis zum Drücken auf das Ziel. Die Schwierigkeit wird mit MacKenzies Shannon-Formel in Pixeln berechnet. Das ist kein kontrolliertes Experiment, machen Sie ein paar Versuche und schauen Sie auf den Schnitt. Mit der Tastatur wechseln Sie nach Start mit Tab zum Ziel und drücken Enter. Dann ändert die Entfernung die Zeit fast gar nicht.

Beim kleinen, fernen Ziel ist Ihre Zeit sehr wahrscheinlich länger, und Ihre Fehlklicks nehmen zu. Laut der Notiz von Laws of UX bringt schnelles Ansteuern eines kleinen Ziels mehr Fehler. Je schneller Sie werden, desto mehr verlieren Sie an Treffsicherheit.

Die Formel: Was wird gemessen?

Auf dieser Seite und in der Demo nutze ich die Shannon-Formel, die MacKenzie 1992 vertrat.

MT = a + b × log₂(D / W + 1)

MT: Bewegungszeit.
D: Entfernung zum Ziel. MacKenzie nennt sie Amplitude (A).
W: Breite des Ziels. MacKenzie diskutiert, dass sich diese Breite bei rechteckigen Zielen mit der Annäherungsrichtung ändert.
a und b: empirisch bestimmte Konstanten. Laut NN/g hängen sie von der Art des Zeigegeräts ab.

Den Teil log₂(D / W + 1) nennt man Schwierigkeitsindex (ID). Seine Einheit ist Bit. Der Kasten „Schwierigkeit“ in der Demo zeigt diesen Wert.

NN/g beschreibt die Bewegung in zwei Teilen. Zuerst kommt ein schneller, grober Sprung zum Ziel, den vor allem die Entfernung beeinflusst. Dann folgt eine langsame Korrektur für die Treffsicherheit. Je kleiner das Ziel, desto länger dauert dieser zweite Teil.

Herkunft: Paul Fitts, 1954

Die Quelle des Gesetzes ist Paul M. Fitts' Aufsatz von 1954: „The information capacity of the human motor system in controlling the amplitude of movement“. Er erschien im Journal of Experimental Psychology, Band 47, Seiten 381 bis 391.

Laut MacKenzie machte Fitts vier Experimente. In zweien klopften die Versuchspersonen mit einem Stift zwischen zwei Zielen hin und her, einmal mit leichtem, einmal mit schwerem Stift. Die anderen beiden waren Aufgaben zum Umsetzen von Scheiben und Stiften.

In Fitts' eigener Formel war die Schwierigkeit log₂(2D / W). MacKenzie schreibt, dass der Faktor 2 eine willkürliche Anpassung von Fitts war. Fitts hatte die Formel in Anlehnung an Theorem 17 aus Shannons Informationstheorie aufgestellt.

MacKenzie vertrat 1992 in der Zeitschrift Human-Computer Interaction die Shannon-Formel. Einer seiner Gründe: In der alten Formel kann die Schwierigkeit negativ werden, wenn die Entfernung im Verhältnis zum Ziel sehr kurz ist. Die Shannon-Formel verhindert das und passt laut MacKenzie auch etwas besser zu den Daten.

Das Gesetz gilt nicht nur für die Maus. MacKenzie schreibt, dass es auch für verschiedene Gliedmaßen und Muskelgruppen gute Ergebnisse liefert. Die Zusammenfassung seines Aufsatzes nennt diese Geräte: Maus, Trackball, Joystick, Touchpad, helmmontiertes Visier und Eyetracker.

Anwendung in der Oberfläche: Beispiele

Die Beispiele sind typisch und zielen auf keine bestimmte App. Bei jedem stelle ich zwei Fragen: Wie groß ist das Ziel, wie weit ist der Zeiger des Nutzers davon entfernt?

1. Der Button „Bestellung bestätigen“ im Checkout

In einem Onlineshop gibt der Nutzer zuletzt den Sicherheitscode seiner Karte ein. Steht der Bestätigen-Button im Zusammenfassungskasten ganz oben auf der Seite, muss er das ganze Formular wieder nach oben.

Die Empfehlung von NN/g ist klar: Der Absende-Button gehört neben das letzte Formularfeld. Der Artikel kritisiert auch mobile Designs, die den Button ganz oben auf die Seite setzen.

Auch hier gewinnen Buttons mit Label. Laut NN/g bilden Icon und Label zusammen ein größeres Ziel, solange die ganze Fläche klickbar ist. Steht im Warenkorb neben „Entfernen“ ein Mülleimer-Icon, aber klickbar ist nur die Zeichnung, ist diese Bedingung verletzt.

2. Das untere Menü einer mobilen App

In einer Banking-App liegen häufige Aufgaben wie „Überweisen“ in der Tab-Leiste unten. Aus Sicht von Fitts kommt die Stärke der Leiste von der Nähe zum Daumen. Dass sie am Rand des Screens liegt, bringt auf Touch keinen zusätzlichen Gewinn.

Stehen die Tabs zu dicht, entsteht ein anderes Risiko. NN/g schreibt, dass dicht gedrängte Ziele zum Überschießen und zur falschen Auswahl führen, besonders wenn sie klein sind.

Auch bei Kontextmenüs zählt die Entfernung. Laut NN/g verschwendet ein Unterpanel, das weit weg vom angetippten Element aufgeht, Bewegungszeit. Die Optionen sollten neben dem Label erscheinen, das sie öffnet.

3. Bildschirmrand und Ecke

Mit der Maus wirkt der Bildschirmrand wie eine Wand. Der Zeiger bleibt am Rand stehen und kann nicht über das Ziel hinaus. NN/g nennt Ziele entlang des Rands deshalb „unendliche Ziele“. Die Menüleiste oben in macOS und die Taskleiste unten in Windows stehen aus diesem Grund dort.

NN/g erinnert auch daran, dass der Start-Button in Windows mindestens bis Windows 8 in der linken unteren Ecke saß. Auf einer Webseite im Browser erwarte ich diesen Vorteil kaum. Der Rand der Seite ist meist nicht der Rand des Bildschirms.

Auf dem Touchscreen dreht sich das um. NN/g berichtet, gestützt auf eine Studie von Avrahami, dass Ziele am Rand auf Touch länger dauern. Der Finger bleibt nicht wie ein Zeiger am Rand stehen, er kann darüber hinausgehen.

Grenzen und Missverständnisse

Es liefert keine Pixelmaße. Das Gesetz vergleicht zwei Designs, es sagt nicht „so groß soll es sein“. Auch der NN/g-Artikel nennt keine Zahl. Fürs Web setzt Kriterium 2.5.8 der WCAG 2.2 die Untergrenze: Auf Stufe AA sind Ziele mindestens 24 × 24 CSS-Pixel groß. Für kleinere Ziele gibt es eine Abstandsausnahme und einige weitere Ausnahmen.

Vergrößern hat eine Obergrenze. Machen Sie jeden Button größer, wird der Screen eng, und die Ziele rücken zusammen. Laut NN/g erhöhen dicht gedrängte Ziele falsche Auswahlen.

Unsichtbares Padding ist eine halbe Lösung. Die klickbare Fläche größer als das sichtbare Icon zu halten, hilft. NN/g warnt aber: Bemerkt der Nutzer das Padding nicht, zielt er auf die sichtbare Zeichnung und wird trotzdem langsamer.

Die Randregel gilt nicht für Touch. Mit der Maus ist der Rand ein Vorteil, auf dem Handy nicht. Die Desktop-Regel ins mobile Design zu kopieren, führt deshalb in die Irre.

Tastatur- und Screenreader-Nutzer deckt es nicht ab. Das Gesetz misst das Zeigen. Für jemanden, der mit der Tastatur navigiert, kosten nicht Pixel, sondern wie oft er bis zum Ziel Tab drückt. Das sehen Sie, wenn Sie die Demo mit der Tastatur spielen.

Es ist nicht die einzige Erklärung. Wird ein Button schnell gedrückt, kann das an seiner Position oder seinem Namen liegen, nicht nur an der Größe. Ob der Nutzer weiß, wohin er schauen soll, ist ein eigenes Thema, das Fitts nicht misst.

Meine Notiz

Der häufigste Fitts-Fehler in meinen Audits: Der primäre Button steht losgelöst vom Formular. Der Nutzer füllt das letzte Feld aus und sucht den Button an einer anderen Stelle der Seite. Den Button direkt unter das letzte Feld zu setzen, ist meist eine Änderung von einer Zeile.

Auf Platz zwei stehen kleine Icon-Buttons im Text. Icons wie Bearbeiten und Löschen sind kleine Zeichnungen, und oft ist die klickbare Fläche nur die Zeichnung selbst. Ohne das Icon zu vergrößern, erweitere ich diese Fläche mindestens auf die Größe, die Kriterium 2.5.8 verlangt.

Ich nutze das Gesetz nicht allein als Designregel. Beim Prüfen eines Screens lässt es mich zwei Fragen stellen. Ist das, was am häufigsten gedrückt wird, am leichtesten zu drücken? Stehen gefährliche Buttons zu nah an häufig gedrückten?

Wenn Sie diese Prüfungen in Ihrem Produkt machen lassen wollen: Der UX Audit enthält auch Zielgröße und Anordnung. Die Methode beschreibe ich im Ratgeber zum UX-Audit.

Das Fittssche Gesetz (Fitts's Law)