Cookie-Banner auf Smartphones: Besonderheiten mobiler Ansichten

Mehr als die Hälfte des Web-Traffics kommt heute von Mobilgeräten. Cookie-Banner, die auf dem Desktop gut aussehen und funktionieren, scheitern auf Smartphones oft an grundlegenden Problemen: zu kleine Schrift, überlappende Buttons, schlecht erreichbare Ablehnungsoptionen oder Banner, die den Bildschirm so stark überlagern, dass nichts mehr bedienbar ist. Diese Probleme sind nicht nur eine Frage der Nutzerfreundlichkeit, sondern berühren direkt die Gültigkeit der eingeholten Einwilligungen.

Warum Mobile anders ist

Ein Smartphone-Display hat eine deutlich kleinere Auflösung und wird mit dem Finger bedient, nicht mit einer präzisen Maus. Das hat Konsequenzen für die Gestaltung eines Cookie-Banners:

Berührbare Elemente müssen groß genug sein. Die W3C empfiehlt eine Mindestgröße von 44x44 CSS-Pixeln für Schaltflächen und Links. Zu kleine Buttons führen zu Fehleingaben, bei denen Nutzer aus Versehen Zustimmen drücken, obwohl sie Ablehnen meinten. Solche unbeabsichtigten Einwilligungen sind rechtlich wertlos.

Text muss ohne Zoomen lesbar sein. Wenn der Nutzer hineinzoomen muss, um den Bannertext zu lesen, fehlt die informierte Grundlage für eine gültige Einwilligung.

Layout-Anforderungen auf Mobile

Auf kleinen Displays sollten Zustimmen- und Ablehnen-Schaltflächen untereinander angeordnet werden, nicht nebeneinander. Nebeneinander angeordnete Buttons sind auf schmalen Bildschirmen oft so klein, dass keiner davon ordentlich bedienbar ist.

Der Ablehnungsbutton darf weder kleiner noch schwerer zu erreichen sein als der Zustimmungsbutton. Datenschutzbehörden haben in mehreren Entscheiden klargestellt, dass die Ablehnung genauso einfach sein muss wie die Zustimmung. Ein Zustimmen-Button in voller Breite und ein kleiner Ablehnungstext darunter in Grauton ist ein typisches Muster, das als unzulässig bewertet wird.

Wenn der Banner das gesamte Bildschirm überlagert, muss er dennoch scrollbar sein, falls der Inhalt länger ist als der sichtbare Bereich. Nutzer dürfen nicht gezwungen sein, zuzustimmen, nur weil sie die vollständigen Informationen nicht sehen konnten.

Umgang mit dem virtuellen Keyboard

Auf mobilen Geräten kann das virtuelle Keyboard einen erheblichen Teil des Bildschirms bedecken. Wenn der Cookie-Banner an einer Position fixiert ist, die das Keyboard überlagert oder verdeckt, entstehen Probleme. Das passiert besonders dann, wenn Eingabefelder in der Nähe des Banners vorhanden sind und das Keyboard aufgeht.

Dieses Problem betrifft zwar die meisten Cookie-Banner nicht direkt, weil sie keine Eingabefelder enthalten. Aber Banner, die in Verbindung mit einem Newsletter-Formular oder einer Suche auftauchen, können davon betroffen sein.

Performance und Ladezeit

Auf mobilen Geräten ist die Verbindungsgeschwindigkeit oft geringer als auf dem Desktop. Ein Cookie-Banner, der schwere Skripte oder große Bilddateien lädt, verzögert den Seitenaufbau und erhöht den Cumulative Layout Shift (CLS), einen Wert, den Google in die Seitenbewertung einbezieht.

Ein gut optimierter Cookie-Banner sollte keine eigenen Hintergrundbilder laden, keine großen Abhängigkeiten mitbringen und so schnell wie möglich rendern, um den Seitenaufbau nicht zu blockieren. Das gilt auf dem Desktop, ist auf Mobile aber noch kritischer.

Dark Patterns auf Mobilgeräten

Die Europäische Datenschutzbehörde (EDSA) hat in ihren Leitlinien zu Dark Patterns explizit auch Mobile-Szenarien angesprochen. Auf kleinen Displays sind bestimmte Muster besonders wirkungsvoll, weil Nutzer mit dem Finger durch Inhalte scrollen und dabei leicht Buttons drücken, die sie nicht drücken wollten.

Zu den problematischen Mustern zählen: Banner, die durch Wischen weggeschoben werden können (wobei Wischen als Zustimmung interpretiert wird), versteckte Ablehnungsoptionen hinter einem kleinen “Mehr anzeigen”-Link, oder Designs, bei denen der Kontrast der Ablehnungsoption so gering ist, dass sie auf kleineren Displays kaum sichtbar ist.

Testen auf echten Geräten

Simulationen im Browser-Entwickler-Tool sind nicht ausreichend. Ein Cookie-Banner sollte auf echten Mobilgeräten mit verschiedenen Bildschirmgrößen getestet werden. Wer den Banner mit dem Generator auf dieser Website erstellt, erhält einen responsiven Basis-Code, der auf gängigen Smartphone-Bildschirmbreiten getestet werden sollte, bevor er auf der Produktionsseite eingesetzt wird.

Fazit

Ein Cookie-Banner für Mobile zu optimieren bedeutet nicht nur, ihn kleinzuskalieren. Es bedeutet, Schaltflächengrößen, Lesbarkeit, Gleichwertigkeit von Zustimmung und Ablehnung sowie die Gesamtbedienbarkeit auf Touchscreens aktiv zu gestalten. Unzureichende Mobile-Banner führen entweder zu ungültigen Einwilligungen oder zu negativer Nutzererfahrung. Beides schadet dem Website-Betreiber.