Optimale Größe von Links oder Schaltflächen auf Mobilgeräten einhalten

Diese Regel gilt, wenn PageSpeed Insights feststellt, dass bestimmte Tippziele, wie z. B. Schaltflächen, Links oder Formularfelder, zu klein sind oder zu dicht beieinander liegen, als dass Nutzer auf einem Touchscreen problemlos darauf tippen könnten.

Übersicht

Kleine oder dicht beieinander liegende Links und Schaltflächen lassen sich von Nutzern auf einem Touchscreen schwieriger betätigen als bei Verwendung eines herkömmlichen Mauszeigers. Um Nutzer nicht dadurch zu frustrieren, dass sie versehentlich auf die falschen Ziele tippen, sollten diese groß genug sein und weit genug auseinander liegen, sodass ein Nutzer auf sie tippen kann, ohne gleichzeitig andere Links oder Schaltflächen zu berühren. Die Fingerspitzen eines Erwachsenen sind durchschnittlich etwa 10 mm breit. In den Richtlinien für Android-Benutzeroberflächen wird für Links oder Schaltflächen auf Mobilgeräten eine Mindestgröße von etwa 7 mm bzw. 48 CSS-Pixeln auf einer Website mit korrekt festgelegtem Darstellungsbereich für Mobilgeräte empfohlen.

Empfehlungen

Achten Sie darauf, dass die wichtigsten Tippziele auf Ihrer Website – jene, die Ihre Nutzer am häufigsten verwenden, – groß genug für die problemlose Betätigung sind. Dazu sollten sie bei richtiger Konfiguration Ihres Darstellungsbereichs mindestens 48 CSS-Pixel hoch oder breit sein. Weniger oft verwendete Links können kleiner sein, sollten aber immer noch weit genug von anderen Links entfernt sein, sodass man mit einer 10 mm breiten Fingerspitze nicht versehentlich zwei Links betätigt. Nutzer sollten für ein problemloses Tippen auf die gewünschten Schaltflächen und Links nicht durch Auseinander- und Zusammenziehen der Finger zoomen müssen. Sie sollten dafür auch keine anderen Funktionen der Browserbenutzeroberfläche wie die Pop-up-Lupe von Chrome benötigen.

Wichtige Tippziele groß genug für ein einfaches Betätigen gestalten

Dies gilt für die am häufigsten von Nutzern verwendeten Tippziele, z. B. Schaltflächen für oft ausgeführte Aktionen, Suchleisten und andere wichtige Formularfelder sowie primäre Navigationslinks. Diese Tippziele sollten mindestens 7 mm bzw. bei richtiger Konfiguration Ihres Darstellungsbereichs mindestens 48 CSS-Pixel groß sein. Wenn sie kleiner als 7 mm sind, sollten sie genug Abstand zu anderen Tippzielen haben.

Ausreichend Abstand zwischen kleineren Tippzielen gewährleisten

Es ist sinnvoll, selten verwendete Links und Schaltflächen kleiner als die empfohlenen 7 mm zu gestalten. Dann sollten andere Tippziele in horizontaler und vertikaler Richtung aber mindestens 5 mm bzw. 32 CSS-Pixel entfernt sein, damit Nutzer beim Tippen auf ein Ziel nicht versehentlich ein weiteres Tippziel betätigen.