Cookie-Banner: Designbeispiele

Ein gutes Cookie-Banner-Design bietet verständliche Auswahlmöglichkeiten, funktioniert auf einem kleinen Bildschirm und lässt einen klaren Weg zurück zu den Einstellungen offen. Jedes Beispiel unten zeigt, wann das Layout nützlich ist, eine Designentscheidung, auf die es ankommt, und einen Punkt, den Sie auf dem Smartphone oder im Besucherpfad testen sollten.

Die sechs Layouts sind eigene Entwürfe, die für diesen Artikel gezeichnet wurden. Es sind keine Screenshots von Kunden-Websites und keine getesteten Conversion-Sieger.

1. Der unabhängige Shop: eine kompakte Karte am unteren Rand

Eine weiße Karte mit dünnem Rahmen sitzt am unteren Bildschirmrand, klar abgesetzt von der Seite dahinter. Die Erklärung ist kurz, und die wichtigsten Auswahlmöglichkeiten stehen beieinander.

• Nützlich, wenn: die Produktfotos bereits die visuelle Persönlichkeit tragen und viele Besucher direkt auf Produktseiten landen.
• Designentscheidung: Platzieren Sie „Alle akzeptieren“ und „Alle ablehnen“ nebeneinander, in gleicher Größe und gleichem Stil, und lassen Sie sie auf Mobilgeräten gleich breit untereinander rutschen. Halten Sie „Einstellungen verwalten“ als dritte Option sichtbar.
• Test: Prüfen Sie auf einer echten Produktseite auf dem Smartphone, dass die Karte weder „In den Warenkorb“ noch die Warenkorbsumme oder einen Chat-Button verdeckt. Prüfen Sie mit der Tastatur, dass der Fokus nie hinter der Karte verschwindet; die W3C-Hinweise zu verdecktem Fokus nennen Cookie-Banner als Beispiel.

2. Die B2B-Dienstleister-Website: eine dezente Leiste über die volle Breite

Eine zurückhaltende Leiste am unteren Seitenrand nutzt die neutralen Farben der Website und eine Akzentfarbe. Die Zwecke werden in der einfachen Sprache erklärt, die Sie auch in einem Verkaufsgespräch verwenden würden.

• Nützlich, wenn: Besucher eine Dienstleistung verstehen wollen und dann zu einem Kontakt- oder Demo-Formular gelangen, sodass das Banner nicht mit dem Angebot konkurrieren sollte.
• Designentscheidung: Nutzen Sie den Platz für klare Beschreibungen der Zwecke, etwa was Analytics misst und ob Sie Werbung einsetzen, statt für eine große Überschrift.
• Test: Gehen Sie den Weg eines Leads auf dem Smartphone durch, von der Landingpage bis zum abgeschickten Formular. Überschrift und Formular-Button sollten erreichbar bleiben, und das Conversion-Tag des Formulars sollte die getroffene Entscheidung respektieren.

3. Die Kreativagentur: ausdrucksstarker Rahmen, neutrale Optionen

Auch eine farbenfrohe Website kann eine ruhige Einwilligungsoberfläche haben. Die Persönlichkeit steckt im Hintergrund der Karte, im Rahmen oder in der Überschrift; die Beschriftungen der Aktionen bleiben schlicht.

• Nützlich, wenn: die Marke kräftig auftritt und ein schlichter grauer Kasten fehl am Platz wirken würde.
• Designentscheidung: Setzen Sie die Markenfarbe im Rahmen ein, nicht bei einem einzelnen Button. Beide Hauptoptionen werden gleich behandelt; unser Überblick über Dark Patterns zeigt die Fallen, die Sie vermeiden sollten.
• Test: Prüfen Sie jede Beschriftung auf dem Markenhintergrund anhand der W3C-Hinweise zum Kontrast und sehen Sie sich das Banner dann auf dem Smartphone über dem unruhigsten Bereich Ihrer Startseite an.

4. Der Publisher: Platz für Details ohne Textwand

Publisher arbeiten oft mit vielen Anbietern und Zwecken. Die erste Ebene stellt die Entscheidung klar dar; eine Detailansicht enthält die Informationen zu Anbietern und Zwecken.

• Nützlich, wenn: die Website durch Werbung finanziert wird, mit mehreren Werbepartnern arbeitet oder ein Framework wie IAB TCF nutzt.
• Designentscheidung: Halten Sie die Schrift gut lesbar und lassen Sie die Detailansicht ihre Arbeit tun, statt eine lange Anbietererklärung in eine kleine Karte zu quetschen. Wenn Sie IAB TCF nutzen, prägen dessen vorgeschriebene Texte und Bedienelemente das Design; klären Sie diese also, bevor Sie gestalten.
• Test: Öffnen Sie auf dem Smartphone die Details, suchen Sie einen Anbieter, ändern Sie einen Zweck und speichern Sie. Öffnen Sie dann die Einstellungen erneut und prüfen Sie, dass die Änderung erhalten geblieben ist.

5. Das Mobile-first-Unternehmen: gestapelte Aktionen und sichtbarer Fokus

Gestalten Sie zuerst für den kleinsten Bildschirm, den Sie unterstützen. Ordnen Sie die Aktionen in voller Breite untereinander an und geben Sie jeder genug Raum.

• Nützlich, wenn: die meisten Besucher mit dem Smartphone kommen, zum Beispiel über Social-Media-Kampagnen oder um einen lokalen Service zu buchen.
• Designentscheidung: Machen Sie jede Option zu einer bequemen Touch-Fläche und halten Sie die Option zum Ablehnen so leicht erreichbar wie die zum Akzeptieren, ohne Scrollen innerhalb des Banners. Die W3C-Mindestgröße für Zielflächen beträgt 24 × 24 CSS-Pixel; größere Flächen lassen sich leichter antippen.
• Test: Zoomen Sie hinein und drehen Sie das Smartphone ins Querformat; alle Optionen sollten erreichbar bleiben. Bedienen Sie das Banner dann auf einem Desktop nur mit der Tastatur und prüfen Sie, dass der Fokus immer sichtbar ist.

Ein sauberes Mock-up ist kein Barrierefreiheitstest. Prüfen müssen Sie die funktionierende Seite auf echten Geräten.

6. Die internationale Website: ein Layout, das die Übersetzung übersteht

Kurze englische Beschriftungen können in einer anderen Sprache deutlich länger werden. Lassen Sie flexiblen Raum, statt den Originaltext in eine schmale feste Breite zu setzen.

• Nützlich, wenn: die Website Besucher in mehreren Sprachen bedient, etwa ein Shop, der in ganz Europa liefert.
• Designentscheidung: Wählen Sie ein Layout, in dem Buttons umbrechen oder sich untereinander anordnen können, wenn die Beschriftungen länger werden, und übersetzen Sie das gesamte Panel: Zwecke, Einstellungen, Buttons und Links zu Richtlinien.
• Test: Prüfen Sie jede unterstützte Sprache in der Vorschau auf einem Smartphone, dessen Browser auf diese Sprache eingestellt ist. Eine übersetzte Überschrift über nicht übersetzten Bedienelementen hinterlässt bei Besuchern einen unvollständigen Eindruck.

Sprache und Geografie lösen unterschiedliche Probleme. Ein deutschsprachiger Besucher ist nicht automatisch in Deutschland, und ein Besucher aus den USA bevorzugt vielleicht Spanisch. Halten Sie die Sprachauswahl getrennt von der regionalen Einwilligungskonfiguration.

Ein Design-Check, den Sie in einem Durchgang schaffen

• Lesen Sie jede Beschriftung auf dem Smartphone, ohne zu zoomen.
• Vergleichen Sie, wie sichtbar Akzeptieren und Ablehnen sind.
• Prüfen Sie den Textkontrast auf jedem Button und jedem Hintergrund.
• Durchlaufen Sie die Einstellungen nur mit der Tastatur.
• Öffnen Sie die Einstellungen erneut, nachdem sich das Banner geschlossen hat.
• Prüfen Sie jede unterstützte Sprache auf fehlende oder abgeschnittene Texte.
• Stellen Sie sicher, dass die wichtigen Bedienelemente der Website nutzbar bleiben.

Bitten Sie dann jemanden, der das Banner nicht gestaltet hat, zu erklären, was jede Option bedeutet. Dieses Gespräch zeigt oft mehr als eine weitere Runde Farbanpassungen.