Buttons groß machen

Digitale Interfaces erfordern präzise Interaktionen – Klicks, Taps, Swipes. Designer optimieren Farbkontraste, Schriftgrößen, Layouts. Doch viele übersehen eine fundamentale physikalische Dimension: die motorische Bewegung selbst. Nutzer klagen über mühsame Bedienung, versehentliche Klicks, ermüdende Navigation. Die Frage ist: Welche physikalischen Gesetzmäßigkeiten bestimmen die Geschwindigkeit und Präzision von Zeigerbewegungen, wie lassen sich diese mathematisch modellieren – und welche Evidenz ist dazu bekannt?

Studien

Das Original-Experiment mit Stiften und Scheiben

Paul Fitts führte 1954 an der Ohio State University das grundlegende Experiment zur motorischen Kontrolle durch. Versuchspersonen mussten mit einem Stift abwechselnd zwei Metallscheiben antippen – mal nah beieinander, mal weit auseinander, mal große Scheiben, mal kleine. Fitts variierte systematisch die Distanz (2 bis 16 Zoll) und die Zielbreite (0.25 bis 2 Zoll). Er maß die Zeit für jede Bewegung mit einer Stoppuhr. Das verblüffende Ergebnis: Die Bewegungszeit folgte präzise einer logarithmischen Funktion. Wenn die Distanz verdoppelt oder die Zielgröße halbiert wurde, stieg die Zeit um einen konstanten Faktor. Die Formel MT = a + b × log₂(2D/W) erklärte 96% der Varianz. Menschen verarbeiten motorische Informationen mit etwa 10-12 bits pro Sekunde – eine Konstante, die über verschiedene Aufgaben und Personen erstaunlich stabil blieb.

Fitts' Law für Computermäuse

Jean-Daniel Accot und Shumin Zhai testeten 1997 bei IBM Research, ob Fitts' Gesetz auch für moderne Computer-Interfaces gilt. 12 Versuchspersonen klickten mit einer Maus auf kreisförmige Ziele auf einem Bildschirm. Die Forscher variierten die Distanz von 64 bis 512 Pixeln und die Zielgröße von 8 bis 64 Pixeln. Zusätzlich testeten sie verschiedene Input-Devices: Maus, Trackball, Touchpad. Das Ergebnis: Fitts' Gesetz galt präzise für alle Geräte, allerdings mit unterschiedlichen Konstanten. Die Maus erreichte 10.7 bits/Sekunde, der Trackball nur 7.2 bits/Sekunde. Besonders verblüffend: Ein Ziel mit 8 Pixeln Durchmesser in 512 Pixeln Entfernung brauchte durchschnittlich 1.2 Sekunden – ein identisches Ziel in nur 64 Pixeln Entfernung nur 0.6 Sekunden. Die Halbierung der Distanz halbierte die Interaktionszeit, auch 43 Jahre nach Fitts' Original-Experiment.

Prinzip

Welches Prinzip für Customer Experience Design lässt sich daraus ableiten? Wichtige Aktionen brauchen große, nahe Klickflächen – Interaktionsgeschwindigkeit folgt physikalischen Gesetzen, nicht subjektiven Präferenzen. Das Fitts'sche Gesetz zeigt, dass die Effizienz digitaler Interfaces messbar von der Größe und Position interaktiver Elemente abhängt, wobei eine Verdopplung der Button-Größe die Klickzeit um etwa 15-20% reduzieren kann. Besonders kritisch wird dies bei mobilen Geräten, wo kleine Touchflächen und ungünstige Positionen zu Frustration und Abbrüchen führen, sowie bei älteren Nutzern oder Personen mit motorischen Einschränkungen. Das Prinzip funktioniert jedoch nur bei zielgerichteten Aktionen – bei explorativen Interfaces oder wenn bewusste Verlangsamung gewünscht ist (etwa bei irreversiblen Aktionen), können kleinere Elemente durchaus sinnvoll sein. Die folgenden Guidelines zeigen, wie sich dieses Prinzip konkret umsetzen lässt.

Guidelines

Primäre Aktionen groß und nah platzieren

Call-to-Action-Buttons für wichtige Aktionen sollten mindestens 44×44 Pixel (Touch) oder 32×32 Pixel (Desktop) groß sein und nahe am wahrscheinlichen Cursor-Standort liegen. In Formularen bedeutet das: Der Submit-Button direkt unter dem letzten Eingabefeld, nicht am Seitenrand. In Modals: Primäraktion rechts unten, wo der Blick endet. Die Interaktionsgeschwindigkeit hängt vom Produkt aus Distanz und inverser Größe ab – optimiere beide Faktoren.

Bildschirmecken für Hauptnavigation nutzen

Ecken und Ränder sind unendlich große Ziele – der Cursor kann nicht darüber hinaus. Deshalb sind Menüs in der oberen linken Ecke (Windows Start) oder oberen rechten Ecke (macOS Systemmenü) optimal erreichbar. Für Web-Interfaces: Logo links oben, Warenkorb rechts oben, Footer-Links am unteren Rand. Diese Positionen senken die motorische Schwierigkeit dramatisch, weil Nutzer nicht präzise zielen müssen. Ein Link am Bildschirmrand ist faktisch doppelt so groß wie ein identischer Link mittendrin.

Kontextmenüs am Cursor öffnen

Rechtsklick-Menüs sollten direkt am Cursor erscheinen, nicht an einer festen Bildschirmposition. Jeder Pixel Distanz zwischen Cursor und erstem Menüeintrag kostet Zeit. Software wie Adobe oder Figma macht das richtig: Das Menü öffnet mit dem ersten Element direkt unter dem Cursor. Falsch: Menüs die in der Bildschirmmitte oder am Objektrand erscheinen. Das erzwingt eine zweite Bewegung. Bei häufigen Aktionen summiert sich dieser Zeitverlust zu spürbarer Ineffizienz.

Destruktive Aktionen klein und fern platzieren

Fitts' Law funktioniert in beide Richtungen: Was schwer erreichbar ist, wird seltener versehentlich geklickt. Deshalb sollten destruktive Aktionen wie 'Löschen', 'Abbrechen', 'Konto schließen' kleiner sein und weiter entfernt vom primären Flow. In Dialogen: Primäraktion groß und rechts (nah am Lesefluss), destruktive Aktion klein und links. In Settings: Account-Löschung nicht prominent oben, sondern klein am Seitenende. Die erhöhte motorische Schwierigkeit erzwingt bewusstes Handeln und reduziert Fehler.