Die "Wurstfinger-Zone": Warum auf dem Handy die falschen Buttons gedrückt werden

Sie erhalten Nachrichten von Kunden, die sagen „ich habe den falschen Button erwischt" oder „auf dem Handy lässt sich das schlecht bedienen". Sie sind nicht ungeschickt, und Ihr Handy ist auch nicht defekt. Das Problem ist, dass der Button zu klein oder zu nah an einem anderen Element ist, und der Finger – der kein Mauszeiger ist – eine viel größere Fläche bedeckt, als Sie denken.

Im Design nennt man das das „Fat-Finger-Problem": Die Fingerspitze berührt den Bildschirm auf einer Fläche von einigen Millimetern, und wenn der Button kleiner ist als diese Fläche, „rutscht" die Berührung auf das Nachbarelement ab. Die gute Nachricht: Das ist keine Geschmackssache, sondern folgt ein paar messbaren Regeln, die Sie selbst in wenigen Minuten überprüfen können.

Warum der Finger keine Maus ist

Am Desktop haben Sie einen ein Pixel großen Cursor: Sie zielen exakt auf die Ecke eines Icons und klicken. Am Handy berührt der Finger den Bildschirm auf einer breiten Fläche, und Sie sehen im Moment der Berührung nicht einmal, was darunter liegt – der Finger verdeckt den Button.

Daher kommen drei Arten von Fehlern, über die Kunden berichten:

• Sie tippen neben den Button und nichts passiert;
• Sie tippen auf den Nachbar-Button (z. B. „Abbrechen" statt „Senden");
• Sie tippen mehrmals, weil die erste Berührung „nicht angekommen" ist.

Alle haben dieselbe Ursache: Das Ziel ist zu klein oder zu nah an anderen Zielen. Es ist nicht die Schuld des Nutzers – es ist ein Dimensionierungsproblem, das Sie im CSS lösen.

Die richtige Größe eines Buttons: die tatsächlichen Zahlen

Es gibt klare Standards, veröffentlicht von den Herstellern der Betriebssysteme:

• Apple empfiehlt eine Tippfläche von mindestens 44 × 44 Punkten.
• Google (Material Design) empfiehlt mindestens 48 × 48 dp.
• WCAG, der Barrierefreiheits-Standard, verlangt mindestens 44 × 44 px für die Stufe AAA und mindestens 24 × 24 px als Basisschwelle (AA).

Merken Sie sich einen wichtigen Punkt: Es geht um die Tippfläche, nicht unbedingt darum, wie groß der Button optisch aussieht. Ein kleiner Textlink kann eine große Tippfläche haben, wenn Sie ihm Padding drumherum geben. Selbst wenn ein Icon visuell nur 24 px groß ist, können Sie ihm durch unsichtbaren Raum drumherum eine Tippfläche von 44–48 px geben. Die einfache Regel, die ich Kunden gebe: Wenn ein Erwachsener nicht bequem mit dem Daumen tippen kann, ist es zu klein.

Der Abstand zählt genauso viel wie die Größe

Sie können ausreichend große Buttons haben, und trotzdem werden die falschen gedrückt, wenn sie aneinander kleben. Wenn zwei Ziele zu eng beieinander liegen, trifft der leicht abrutschende Finger den Nachbarn.

Einige praktische Regeln:

• Lassen Sie mindestens 8 px Abstand zwischen zwei tippbaren Elementen, und zwischen wichtigen Aktionen (wie „Löschen" neben „Speichern") noch mehr.
• Platzieren Sie keine Aktionen mit entgegengesetzter Wirkung nebeneinander. „Bestellung senden" und „Warenkorb leeren" gehören nicht aneinander.
• Machen Sie bei Menüs und Listen jede Zeile hoch genug, damit man sie antippen kann, ohne die Zeile darüber oder darunter zu treffen.

Leerer Raum ist keine Platzverschwendung. Auf dem Handy macht dieser Raum den Unterschied zwischen einem korrekten Klick und Frustration.

Die Daumenzone: wo die Hand schwer hinkommt

Die meisten Menschen halten das Handy in einer Hand und navigieren mit dem Daumen. Das bedeutet, dass manche Bereiche des Bildschirms leicht zu erreichen sind, während andere – vor allem die Ecke oben, gegenüber der Hand – ein unbequemes Umgreifen des Handys erfordern.

Die Schlussfolgerung für Ihre Website:

• Platzieren Sie Hauptaktionen (anrufen, Nachricht senden, reservieren, in den Warenkorb legen) unten und in Reichweite, nicht oben in der Ecke versteckt.
• Eine fixierte Leiste unten mit einem klaren Aktionsbutton funktioniert viel besser als ein verlorener Button im Header.
• Vergraben Sie die Telefonnummer oder den WhatsApp-Button nicht in einem Menü, das erst geöffnet werden muss.

Der beste Test ist der echte: Nehmen Sie Ihr Handy in eine Hand, halten Sie es normal und versuchen Sie, das zu tun, was ein Kunde tun würde. Wenn Sie die zweite Hand zu Hilfe nehmen müssen, ist etwas schlecht platziert.

Wie Sie es selbst in fünf Minuten überprüfen

Sie brauchen keine teuren Werkzeuge, um das Problem zu erkennen:

• Öffnen Sie die Website auf Ihrem echten Handy, nicht nur am Computer. Der Emulator im Browser täuscht beim Tippgefühl.
• Versuchen Sie jede wichtige Aktion mit dem Daumen, während Sie das Handy in einer Hand halten.
• Geben Sie die Website einer älteren Person oder jemandem mit größeren Fingern und beobachten Sie, wo Fehler passieren. Das ist der ehrlichste Test überhaupt.
• Schauen Sie, ob Sie jemals gleich beim ersten Mal falsch oder doppelt tippen – dort liegt der zu reparierende Button.

Bei MPO Web Studio testen wir eine Website auf einem echten Handy, bevor wir sie übergeben, genau damit Sie kein solches Feedback bekommen. Wir können Ihnen sogar kostenlos eine Demo auf Basis Ihres Unternehmens erstellen, damit Sie vor der Bezahlung sehen, wie sie sich auf dem Handy anfühlt. Wenn Sie eine Meinung zu Ihrer aktuellen Website möchten, schreiben Sie uns auf WhatsApp – wir sagen Ihnen ehrlich, welche Buttons zu klein sind, ohne Ihnen etwas zu verkaufen, das Sie nicht brauchen.