Wie lässt sich bei der Prüfung der Mobilfreundlichkeit ein zu geringer Abstand zwischen Schaltflächen beheben?

Wenn Nutzer auf dem Smartphone auf „Anfrage senden“ tippen, dabei aber das WhatsApp-Symbol daneben treffen oder beim Öffnen eines Menüs versehentlich den benachbarten Menüpunkt auswählen, sollten Sie drei Aspekte prüfen: den tatsächlich anklickbaren Bereich, den Abstand zu benachbarten Bereichen und das Seitenlayout. Ein sichtbarer Abstand zwischen Schaltflächen bedeutet nicht zwangsläufig, dass sich ihre Touch-Bereiche nicht überschneiden. Auch ein optisch kleines Symbol kann bereits eine ausreichend große Klickfläche haben.

Wenn Sie nach „check for mobile friendly“ suchen, um Prüfmethoden zu finden, sollten Sie sich nicht auf die Ergebnisse „bestanden“ oder „Fehler“ eines Tools beschränken. Ermitteln Sie zunächst, auf welcher Seite, bei welcher Bildschirmbreite und in welchem Interaktionszustand es leicht zu Fehleingaben kommt. Prüfen Sie dann die Elementabmessungen im Browser und testen Sie abschließend auf einem echten Gerät. So lässt sich feststellen, ob Sie die Innenabstände vergrößern, den Abstand vergrößern oder die Anordnung der gesamten Schaltflächengruppe ändern sollten.

Ermitteln Sie, wo und in welchem Zustand Fehleingaben auftreten

Bei der Prüfung einer Exportwebsite oder einer Marketing-Landingpage können Sie mit Aktionen beginnen, die Anfragen und Käufe unmittelbar beeinflussen: Hauptnavigation, Produktfilter, Formularübermittlung, Mengensteuerung im Warenkorb sowie die am unteren Rand fixierten Schaltflächen für Anrufe, Chat und Anfragen. Achten Sie besonders darauf, wenn ein schwebendes Kundenservice-Widget, ein Cookie-Hinweis und eine untere Aktionsleiste gleichzeitig angezeigt werden. Diese Elemente können Schaltflächen verdecken, die sonst problemlos anklickbar wären.

Prüfen Sie nicht nur die anfängliche Ansicht der Startseite. Öffnen Sie eine Produktdetailseite, klappen Sie ein Menü auf, öffnen Sie das Filterfeld und lassen Sie eine Formularvalidierungsmeldung erscheinen. Der Abstand zwischen Schaltflächen kann im Standardzustand ausreichend sein, während neu eingeblendete Inhalte sie im geöffneten Zustand zusammendrängen. Prüfen Sie bei mehrsprachigen Websites auch Sprachversionen mit längeren Texten, damit Schaltflächen nach der Übersetzung nicht umbrechen und benachbarte Links nicht zu dicht beieinanderliegen.

Halten Sie bei der Dokumentation des Problems mindestens die Seitenadresse, die Bildschirmbreite, die Schritte und das versehentlich ausgewählte Element fest. Zum Beispiel ist „Nach dem Öffnen der Anfrageleiste am unteren Rand der Produktdetailseite löst ein Tippen auf die Schaltfläche zum Schließen leicht den Chat-Einstieg aus“ für Entwickler einfacher nachzustellen als „Die Schaltflächen auf Mobilgeräten sind zu dicht beieinander“.

Prüfen Sie die Klickgrenzen und beurteilen Sie dann die Abmessungen

Wechseln Sie in den Entwicklertools des Browsers zur simulierten Mobilgeräteansicht, wählen Sie die Schaltfläche mit dem Elementauswahlwerkzeug aus und prüfen Sie ihr Box-Modell, ihre Breite und Höhe sowie die umgebenden Elemente. Messen Sie das Element, das den Klick tatsächlich entgegennimmt. Orientieren Sie sich nicht nur am darin enthaltenen Symbol oder Text und setzen Sie auch nicht die Abmessungen eines dekorativen äußeren Containers mit der Klickfläche gleich.

Befindet sich beispielsweise ein Symbol in der Mitte einer großen Farbfläche, ist die Farbfläche dadurch nicht Teil der Touch-Fläche, wenn nur das Symbol selbst anklickbar ist. Wird die Schaltfläche hingegen durch Innenabstände vergrößert, lässt sie sich auch dann leichter mit dem Finger treffen, wenn das Symbol unverändert bleibt. Prüfen Sie außerdem absolut positionierte Elemente und transparente Überlagerungen, um festzustellen, ob vermeintlich freie Bereiche von anderen Steuerelementen belegt werden.

Bei der Beurteilung der Abmessungen können Sie sich an der Anforderung „Mindestgröße von Zielen“ der WCAG 2.2 orientieren: Ziele für Zeiger-Eingaben sollten grundsätzlich mindestens 24 × 24 CSS-Pixel groß sein; es gibt jedoch Ausnahmen, etwa für Abstände und Inline-Links. Ob ein kleineres Ziel unter die Abstands-Ausnahme fällt, muss anhand des in der Norm festgelegten kreisförmigen Bereichs beurteilt werden. Es lässt sich nicht einfach so verstehen, dass ein fester Abstand von wenigen Pixeln zwischen zwei Schaltflächen automatisch ausreicht.

Bei häufig verwendeten Aktionen wie dem Absenden einer Anfrage oder dem Hinzufügen zum Warenkorb können Sie 44 × 44 CSS-Pixel oder annähernd diese Größe als Gestaltungsziel anstreben, damit genügend Platz zum Tippen mit dem Finger bleibt. Eine ausreichende Größe ersetzt nicht die Überprüfung der Bedienbarkeit: Je leichter sich die Aktionen benachbarter Schaltflächen verwechseln lassen, desto wichtiger sind ein klarer Abstand und eine deutliche visuelle Unterscheidung.

Ändern Sie die Ursache, statt durch Vergrößern noch mehr Enge zu schaffen

Wenn der Abstand zwischen Schaltflächen zu gering ist, muss nicht unbedingt nur der Außenabstand vergrößert werden. Stellen Sie zunächst fest, ob die Touch-Fläche zu klein ist, der Platz im Container nicht ausreicht oder eine Überlagerung etwas verdeckt, und wählen Sie dann die passende Änderung.

• Nur ein sehr kleiner Bereich des Symbols oder Textes ist anklickbar: Vergrößern Sie vorzugsweise die Innenabstände des Links oder der Schaltfläche und legen Sie geeignete Mindestbreite und -höhe fest. Der freie Bereich um das Symbol sollte ebenfalls zur selben Klickfläche gehören.
• Eine Reihe von Schaltflächen füllt den Bildschirm bereits vollständig aus: Lassen Sie die Elemente umbrechen, ordnen Sie sie vertikal an oder reduzieren Sie die Zahl der weniger wichtigen Elemente, die gleichzeitig angezeigt werden. Ein weiteres Vergrößern der Schaltflächen kann zu horizontalem Überlauf führen.
• Benachbarte Ziele lassen sich leicht verwechseln: Vergrößern Sie den Abstand mithilfe des Layouts oder der Außenabstände und prüfen Sie zugleich, ob sich die Klickflächen nach dem Vergrößern überschneiden. Nur den Abstand zwischen den Texten zu vergrößern, verbessert die Klickgrenzen möglicherweise nicht.
• Ein schwebender Einstieg verdeckt Aktionen auf der Seite: Passen Sie Position, reservierten Platz oder Anzeigebedingungen an, damit Kundenservice-Einstieg, untere Leiste und Sicherheitsbereich des Systems sinnvoll aufeinander abgestimmt sind.

Für Betreiber werden kleine Links in Navigationsmenüs, Seitennummerierungen und in der Nähe von Formularen leicht übersehen. Für Inline-Links in Fließtext gelten andere Beurteilungskriterien; sie müssen nicht pauschal in große Schaltflächen umgewandelt werden. Unabhängige, nebeneinander angeordnete Aktionen wie „Zurück“, „Absenden“ und „Leeren“ sollten jedoch jeweils einzeln auf ihre Klickfläche geprüft werden.

Achten Sie bei Änderungen außerdem auf eine klare Hierarchie der Aktionen. Wenn „Absenden“ und „Zurücksetzen“ in einem Anfrageformular dicht beieinanderliegen, kann das Risiko von Fehlbedienungen selbst dann steigen, wenn beide Schaltflächen vergrößert werden. Prüfen Sie zunächst, ob die weniger wichtige Aktion überhaupt erforderlich ist, und passen Sie dann das Layout an. Vergrößern Sie nicht einfach alle Schaltflächen einheitlich und beenden Sie die Arbeit, sobald das Prüftool keine Beanstandungen mehr meldet.

Prüfen Sie echte Interaktionen erneut, nicht nur Screenshots

Die Browsersimulation eignet sich dazu, Layoutprobleme zu finden, doch die Präzision eines Mausklicks unterscheidet sich von der eines Fingertipps. Führen Sie nach der Änderung die wichtigsten Abläufe auf einem echten Gerät durch: Öffnen Sie die Navigation, wechseln Sie Produkte, füllen Sie ein Formular aus, schließen Sie ein Dialogfeld und senden Sie es ab. Achten Sie darauf, wo sich eine fixierte Leiste nach dem Scrollen befindet und ob beim Einblenden der Bildschirmtastatur die Schaltfläche zum Absenden verdeckt wird.

Die erneute Prüfung sollte schmale und breitere Smartphone-Bildschirme sowie Sprachversionen mit längeren Texten einschließen. Prüfen Sie horizontales Scrollen, Zeilenumbrüche in Schaltflächentexten sowie das Layout nach dem Zoomen und beim Wechsel zwischen Hoch- und Querformat. Ist der Viewport nicht korrekt festgelegt oder wird die gesamte Anzeige verkleinert, um mehr Inhalte unterzubringen, sollten auch diese grundlegenden Probleme behoben werden. Andernfalls lässt sich die Benutzerfreundlichkeit selbst durch lokale Abstandsänderungen nur schwer verbessern.

Automatische Prüfberichte können dabei helfen, einige Probleme mit Abmessungen und Layout zu erkennen. Sie können jedoch das Bediengefühl bei der Nutzung mit dem Finger nicht vollständig beurteilen und übersehen möglicherweise Elemente, die erst nach einer Interaktion erscheinen. Das in älteren Anleitungen erwähnte Google-Tool zum Testen der Mobilgerätefreundlichkeit wird nicht mehr angeboten. Für die Prüfung können Sie Entwicklertools des Browsers, Werkzeuge zur Barrierefreiheitsprüfung und Tests auf echten Geräten kombinieren.

Ersetzen Sie bei der Abnahme die Aussage „Der Abstand zwischen den Schaltflächen wurde angepasst“ durch ein reproduzierbares Prüfergebnis: auf welchen Seiten, bei welchen Bildschirmbreiten und in welchen Sprachversionen welche Aktionen durchgeführt wurden und ob die ursprünglichen Fehleingaben nicht mehr auftreten. Bei Seiten, die für Anzeigenaufrufe oder die Umwandlung in Anfragen wichtig sind, sollten Sie zunächst Hindernisse beim Absenden, Kontaktieren und Kaufen beheben und erst danach weniger wichtige Einstiege bearbeiten. So entspricht die Reihenfolge der Änderungen eher den geschäftlichen Auswirkungen.