Cookie Banner Design – 10 Tipps für kreativen Datenschutz!

Sei kreativ bei der Gestaltung deines Cookie Banners

Spieglein, Spieglein an der Wand, wer hat das schönste (und zugleich datenschutzkonformste) Cookie Banner im ganzen Land?

Cookie Banner und der Datenschutz sind spätestens seit dem Urteil in der Rechtssache C-673/17 des EuGH (Opt-in Cookie Banner Pflicht) genauso unzertrennlich wie Pech und Schwefel. Wenn du dir unseren Artikel Was ist ein Cookie Banner? aufmerksam durchgelesen hast, hast du bereits einen guten Überblick über die rechtlichen Voraussetzungen von Cookie Pop-up-Fenstern und Bannern erhalten. Da du als Website-Betreiber jetzt weißt, wann überhaupt ein Cookie Consent Banner erforderlich ist und wofür du einen Cookie Banner benötigst, kommen wir nun zum kreativen Teil: dem Cookie Banner Layout.

Wir müssen darauf hinweisen, dass die folgenden Aussagen keine Rechtsberatung darstellen. Wir können dir daher nur Einschätzungen aus unserer intensiven Erfahrung mit den EU-Rechtsvorschriften in der Praxis und eine technische Einschätzung der Situation geben.

Weshalb ist die Gestaltung von Cookie Bannern wichtig?

Datenschutz im Internet ist ein heikles Thema, weshalb viele Website-Besucher auch Cookie Bannern gegenüber skeptisch eingestellt sind. Ein Banner oder Pop-up-Fenster, das den Zugriff auf die Website verweigert, bis man die Einwilligung in sogenannte Cookies erteilt hat – sieht auf den ersten Blick alles andere als vertrauenswürdig aus. Umso größer ist die Herausforderung für Website-Betreiber, ihre Besucher dazu zu animieren, ihre Zustimmung in das Setzen von Cookies und die Verarbeitung personenbezogener Daten zu erteilen. Die Kunst liegt demnach darin, mit visuellen Mitteln die Einwilligungsrate von Besuchern zu maximieren und zugleich im Rahmen des Rechtlichen zu bleiben.

Mindestens ebenso wichtig wie die Ästhetik ist ein korrekter Cookie-Hinweistext.

Ein mangelhafter Text im Cookie Hinweis kann für die nicht korrekte Einhaltung des Datenschutzes ausschlaggebend sein. Einen DSGVO-konformen Cookie Hinweis-Beispieltext findest du in unserem Artikel über Cookie Banner-Textbeispiele, in welchem wir unter anderem einen Cookie Hinweis-Mustertext zerpflücken und näher erläutern.

UX Design im Cookie Banner

User Experience ist der englische Begriff für „Nutzererlebnis“. User Experience Design (UXD) thematisiert folglich die Gestaltung des Nutzererlebnisses bzw. der Nutzererfahrung. UXD zielt darauf ab, etwa eine Website oder eine App so zu gestalten, dass die Erfahrung der spezifischen Zielgruppe verbessert oder optimiert wird. Kern des Ganzen ist das Zusammenspiel von Nützlichkeit, Funktionalität und Attraktivität.

Demnach nützt dir das schönste und originellste Cookie Banner Design nichts, wenn du deinen Besucher nicht gleichermaßen darüber informierst, zu welchem Zweck deine Website überhaupt Cookies verwendet. Der Cookie Banner sollte deinem Besucher also den Mehrwert bieten so einfach wie möglich darüber aufgeklärt zu werden, worin er einwilligen kann.

UI Design im Cookie Banner

Oftmals werden UI Design und UX Design fälschlicherweise gleichgesetzt. Auch wenn beide Begriffe sehr ähnlich klingen, bestehen essenzielle Unterschiede. Anders als UXD beschreibt User Interface Design (UID) die Gestaltung der grafischen Oberfläche, auf der Nutzer agieren (Austausch zwischen Mensch und Maschine). In puncto UID sind leichte Bedienbarkeit, Intuition und Effizienz wichtige Schlüsselbegriffe.

Dein Website-Besucher sollte demzufolge unter anderem in der Lage sein, alle wichtigen Buttons des Cookie Consent Banners sofort finden zu können, ohne sich durch ein Klick-Labyrinth kämpfen zu müssen. Allgemein sind Klick-Labyrinthe also zu vermeiden. Bei manchen Cookie Bannern im Internet wirst du sie dennoch finden. Und das ganz bewusst! Beispielsweise setzt der TCF Standard auf eine hohe Komplexität für den Nutzer, um ihn zur einfachsten Interaktion zu drängen: Allen Cookies zustimmen.

Im Gegensatz zu UX Design holt UI Design die Zielgruppe nicht auf einer emotionalen, sondern auf einer interaktiven Ebene ab.

Wie das Cookie Banner Design die Einwilligungsrate beeinflusst

Cookies im Internet – wahrscheinlich hat nicht einmal das Krümelmonster sie gern. In unserem Blog-Artikel Cookies im Internet – das solltest du unbedingt wissen! kannst du nachlesen, was es mit den kleinen Textdateien auf sich hat und weshalb sie eventuell doch nicht so böse sind, wie oft angenommen wird.

Nichtsdestotrotz ändert das nichts daran, dass viele Internetnutzer Cookies – geschweige denn Cookie Banner (auch Opt-in Banner genannt) – am liebsten aus dem World Wide Web verbannen würden. Cookies nerven einfach! Daher bedienen sich viele Website-Betreiber mittlerweile verschiedenen Methoden, um über den Einsatz von süßen Keks-Emojis in Cookie Bannern hinaus die Einwilligung aus ihren Besuchern herauskitzeln.

Aber Achtung! Der Grad zwischen rechtskonform und rechtswidrig ist hierbei äußert schmal. Den Grund erklären wir dir im Folgenden.

Dark Patterns – was ist das?

Dark side of the forceSolltest du Dark Patterns verwenden, haben wir dich offiziell an die dunkle Seite der Macht verloren 😉 Grob zusammengefasst verfolgen Dark Patterns beabsichtigt nutzerunfreundliche Designmuster, welche die Nutzer täuschen oder auch in eine Falle locken sollen – unter anderem einen unbeabsichtigten Kauf tätigen oder eine ungewollte Anmeldung durchzuführen. Und wo könnte man solche trügerischen Strategien super anwenden, um zahlreich Daten abgrasen? Glasklar: in Cookie Bannern.

Dark Patterns befinden sich in einer rechtlichen Grauzone, da das Gesetz meist nicht konkret dazu Stellung nimmt. Jedoch urteilen Gerichte immer wieder über diese Strategien. In der Tendenz fallen viele Urteile zugunsten des Datenschutzes aus. Folglich können Ideen, die sich heute noch in einer Grauzone befinden, morgen schon verboten sein. Folglich solltest du lieber die Finger von solchen Methoden lassen!

Ein Beispiel für Dark Patterns

Jetzt fragst du dich bestimmt, wie genau Dark Patterns Strategien in der Praxis aussehen. Die Dark-Patterns-Falle kann an vielen Berührungspunkten mit einer Website zuschnappen.

Bezüglich Aufbau, Schriftart, Textwahl und Buttons werden Cookie Consent Banner oft dahin gehend konzipiert, den Besuchern einer Website das Ablehnen von Cookies so schwer wie möglich zu gestalten bzw. sie dazu zu drängen, alle Cookies anzunehmen.

Beispiel: Website-Besucher müssen erst auf mehrere Buttons klicken, um nicht alle Cookies akzeptieren zu müssen.

Nudging – was ist das?

Ähnlich wie Dark Patterns ist auch das sogenannte "Nudging" eine ethisch umstrittene Methode, um sich Einwilligungen zu erschleichen. Nudging kann als Vorstufe von Dark Patterns gesehen werden. "Nudging" bedeutet so viel wie "Anstoßen" oder "Schubsen". Ziel ist es, den User in die "richtige" Richtung zu stoßen – sprich, seine Einwilligung in das Setzen von allen Cookies und die Verarbeitung personenbezogener Daten zu erhalten. Einfache Ja/Nein-Antwortmöglichkeiten gibt es nur noch in den seltensten Fällen. Vielmehr weisen viele Cookie Consent Banner mittlerweile einen Quiz-artigen Charakter mit vielen offenen Fragen und noch mehr schwammigen Aussagen auf.

Nudging in Cookie Bannern

Bekannte Nudging-Beispiele in Cookie Hinweisen sind unter anderem:

Cookie banner nudging example

  • Farbwahl: Ein in der Signalfarbe Grün (= alles in Ordnung) eingefärbter "Alle akzeptieren"-Button in Kontrast zu einem hellgrauen, kaum sichtbaren "Ablehnen" oder "Cookies konfigurieren"-Button
  • Voreinstellungen: Bereits angekreuzte Kästchen
  • Datenschutzunfreundliche One-Klick-Lösungen: Der Nutzer muss sich erst durch eine Flut an Klicks kämpfen, um datenschutzfreundliche Einstellungen vorzunehmen. Dem gegenüber steht ein einziger Klick auf einen großen "Alle akzeptieren" Button – und das nervige Cookie Banner ist vom Bildschirm verschwunden.

Kleiner Tipp am Rande: Wenn du richtig Bock darauf hast, Dark Patterns spielerisch zu durchleben, solltest du dir dieses kostenlose Game auf gar keinen Fall entgehen lassen! 🎮

Im folgenden Video siehst du Paradebeispiele dafür, wie du die Einwilligung deiner Besucher auf gar keinen Fall einholen solltest 🙃

In dem Video von giant_grapefruit siehst du, wie Cookie Banner angezeigt werden. Sie haben verschiedene Animationen, mit denen der "Ablehnen" Button automatisch bei einer Mausbewegung immer so verschoben wird, dass man ihn nie klicken kann. Das ist rechtlich selbstverständlich zulässig - nicht 😄

Wo hört Beeinflussung auf und wo fängt gezielte Manipulation an? Wie du merkst, ist es als Website-Betreiber nicht einfach, eigene Interessen und Rechtskonformität unter einen Hut zu bringen – wobei wir im Zweifelsfall immer zur Einhaltung von Letzterem raten. Während du also deiner kreativen Ader in der Gestaltung von Hingucker Cookie Bannern freien Lauf lässt, solltest du sicherstellen, dass du stets die Kriterien einer informierten Einwilligung erfüllst.

Wie muss ein Cookie Banner aussehen? – Dos and Don'ts!

Im Folgenden zeigen wir dir anhand verschiedener Cookie Banner Beispiele, welche Cookie Banner bereits gut durchdacht sind und an welchen Stellen es bei der Ausführung noch hapert.

Beispiel 1: Kein "Ablehnen"-Button auf der ersten Ansichtsseite

DHL cookie banner

In diesem Beispiel wird erläutert, weshalb Cookies überhaupt gesetzt werden. Des Weiteren ist die Einteilung in die einzelnen Cookie-Gruppen direkt einsehbar – ohne, dass der Nutzer sich mehrere Male durch das Banner klicken muss. Kein Ablehnen Button ist hier vermutlich erlaubt, denn standardmäßig sind alle nicht notwendigen Gruppen auswählbar und deaktiviert. Der Nutzer kann also über den Button "Nur Auswahl bestätigen" einfach ablehnen. Das einzige, was bei diesem Beispiel auffällig ist, ist, dass in den Details der Drittanbieter Cookies nicht angegeben ist, welcher Anbieter die Cookies setzt und dessen Datenschutzerklärung fehlt. Abgesehen davon fehlt lediglich der Hinweis auf den Jugendschutz.

Beispiel 2: Verlinkung der Cookie Richtlinie

Facebook cookie banner

Auch hier fehlt wieder der Button zum Ablehnen der Cookies. Allerdings kann die Sprache des Cookie Banners direkt im Banner selbst eingestellt werden. Datenschutzerklärung und Impressum sind in diesem Fall nicht verlinkt – allerdings die Cookie Richtlinie, welche den Nutzer detailliert über die Verwendung von Cookies und die Cookie-Einstellungen aufklärt. Wichtig zu wissen: Datenschutzerklärung und Impressum müssen nicht im Cookie Banner verlinkt sein, solange sie direkt zugänglich sind. Häufig – wie auch in dem Fall – verdeckt das Cookie Banner die eigentlichen Links. Deswegen sollten Datenschutzerklärung und Impressum woanders - am sinnvollsten im Cookie Banner - verlinkt sein.

Beispiel 3: Keine Nudging-Strategien

Netflix cookie banner

Der Nutzer erhält Informationen darüber, weshalb Cookies überhaupt gesetzt werden. Außerdem hat er direkten Zugriff auf den "Ablehnen"-Button, welcher nicht aufgrund manipulativer visueller Mittel in den Hintergrund gestellt wird.

Beispiel 4: Bezahlfunktion

Zeit Online cookie banner

An diesem Cookie Banner kommst du nicht vorbei, bis du entweder deine Zustimmung erteilt hast oder ein monatliches Abonnement abschließt. Diese Art von Cookie Hinweisen findest du bei Online-Zeitungen o.Ä. des Öfteren vor, denn sie finanzieren sich mitunter durch Werbeeinnahmen. Normalerweise darf man den Nutzer nicht zur Einwilligung zwingen, aber in dem Fall schon. Denn nach der EDSA darf eine solche "Cookie-Wall" verwendet werden. Solche Portale finanzieren sich durch Werbeeinnahmen, um die qualitativ hochwertige journalistische Arbeit zu gewährleisten – welche dir einen kurzen Klick auf "Alle akzeptieren" wert sein sollte 🙂

Beispiel 5: Altershinweis

ING cookie banner

Was dir bei diesem Cookie Banner vielleicht aufgefallen ist, ist die Frage nach dem Alter. Gemäß Artikel 8 DSGVO kann die Zustimmung zu Diensten, die personenbezogene Daten verarbeiten und/oder Cookies setzen, erst ab einem Alter von 16 Jahren (in einigen EU-Ländern unterschiedlich) oder zusammen mit einem Erziehungsberechtigten erteilt werden.

Beispiel 6: Sonderfall Altershinweis

Cookie banner at adult website

Websites, die sich an ein Ü18-Publikum richten (z.B. Erotik-Seiten oder Seiten, die Glücksspiel anbieten) müssen von vornherein sicherstellen, dass ihre Besucher alt genug sind, um Zugriff auf die Seite erhalten zu können – beispielsweise mittels einer Verifizierung des Personalausweises. Daher ist der Altershinweis im Cookie Hinweistext selbst nicht Pflicht. In vielen Fällen wird jedoch nicht erlaubterweise ganz auf den Einsatz eines Opt-in Banners verzichtet.

Beispiel 7: TCF-Standard

gutefrage.net cookie banner

Ein perfektes Beispiel dafür, wie sich die Corporate Identity auch im Cookie Banner Layout umsetzen lässt. Zusätzlich hält sich die Website an die Vorgaben des TCF (Transparency and Consent Framework). Allerdings fällt auch in diesem Beispiel wieder auf, dass der "Ablehnen"-Button auf der ersten Seite fehlt.

Beispiel 8: Fehlende Informationen

Prowebgr cookie banner

Dieser Cookie Hinweis sieht zwar super stylisch aus, punktet allerdings fehlen essenzielle Informationen und er ist daher auch nicht rechtskonform. Es wird weder über den Nutzen der Verwendung von Cookies informiert, noch, um welche Cookies es sich handelt. Auch wenn der Button zum Ablehnen der Cookies in diesem Beispiel sehr kreativ umgesetzt wurde, ist jedoch fraglich, ob das überhaupt rechtskonform ist. Ein "Ablehnen"-Button soll laut mehrerer Urteile eindeutig beschriftet sein.

Beispiel 9: Click-Labyrinth

Google cookie banner

Wer hätte es gedacht: Auch Big Player im Internet-Business sind nicht fehlerfrei. Im Gegenteil: Cookies ablehnen? Fehlanzeige! Dieses Cookie Banner ist das perfekte Beispiel für ein Click-Labyrinth mit Türsteher-Charakter. Positiv hervorzuheben ist jedoch, dass auch hier wieder Zugriff auf rechtlich relevante Seiten gewährleistet ist. Zudem werden detaillierte Informationen über die Verwendung der Cookies geliefert.

Beispiel 10: Verweis auf Drittanbieter

Jetbrains cookie banner

Layout-technisch passt sich das Cookie Banner wieder super an die Zielgruppe an. Darüber hinaus wird der Zweck des Einholens der Zustimmung, die Möglichkeit des Ablehnens der Cookies und der Verweis auf Drittanbieter angezeigt.

Erstelle mit Real Cookie Banner deinen perfekten Cookie Consent

Du bist jetzt bestimmt ganz schön baff von all den Eindrücken und Regeln, die das Erstellen einer ästhetisch-ansprechenden Cookie Hinweis-Vorlage mit sich bringt. Nicht nur hinsichtlich Layout können schnell Fehler passieren. Typische Fehler treten schneller auf, als du denkst!

Damit du dir nicht den Kopf darüber zerbrechen musst, wie genau deine Farbwahl aussehen muss, welche Texte und Buttons dein Cookie Banner enthalten muss, um die Anforderungen des Gesetzgebers zu erfüllen, bieten wir dir in Real Cookie Banner mehr als 20 bereits vorgefertigte Design-Vorlagen - natürlich anpassbar. Du kannst dein datenschutzkonformes Cookie Banner also je nach individuellen Präferenzen gestalten.

Also, worauf wartest du? Erstelle jetzt dein DSGVO-konformes Eye-Catcher-Cookie-Banner und bringe deine Einwilligungen zum Qualmen🔥 – und das ganz ohne fiese Tricks 😉