Cookie-Hinweis vs. UX – informieren ohne zu stören

Das erwartet euch in diesem Artikel

  • Was für Möglichkeiten habt ihr, um auf Cookies hinzuweisen?
  • Welche Arten der Cookie-Hinweise sind zu empfehlen?
  • Welche Arten der Cookie-Hinweise sind nicht empfehlenswert?

Wer viel im Web surft, wird bereits festgestellt haben: er begegnet dem sogenannten „Cookie-Hinweis“ mit zunehmender Häufigkeit. Der Cookie-Hinweis ist die Benachrichtigung darüber, dass die Website Cookies, also Nutzerdaten zur Verbesserung des Surf-Erlebnisses, zwischenspeichert. Dieser Trend wird bis Mitte 2018 weiter zunehmen, wenn die Cookie-Richtlinie der EU, im Rahmen der Datenschutz-Grundverordnung, im Mai 2018 in Kraft tritt. In diesem Artikel soll es jedoch nicht um die “korrekte” Umsetzung der Richtlinie gehen. Zu diesem Thema gibt es bereits zahlreiche Artikel im Web, die hier einen guten Diskurs bieten, z.B. E-Recht24, IT-Recht-Kanzlei und 1&1.

Mir ist die Frage wichtig: Was ist der UX-freundlichste Cookie-Hinweis? Wie könnt ihr den Nutzer über Cookies informieren, ohne sein Surf-Erlebnis dabei merklich zu stören? Im Folgenden findet ihr daher eine Gegenüberstellung der aktuellen Lösungen.

Welche Arten gibt es?

Zu Beginn erst einmal eine Zusammenfassung der aktuell empfohlenen Hinweisarten:

  1. Sicherster Weg (Cookie-Opt-In): Einwilligung der Besucher einholen – der Nutzer muss Cookies mit einem Klick aktiv bestätigen.
  2. Mittelweg (Cookie-Hinweis): Informieren des Nutzers über Verwendung von Cookies und Bieten einer Widerspruchsmöglichkeit (Opt-Out) – eine Einwilligung wird nicht aktiv eingeholt.
  3. Grauzone: Keinerlei Mitteilung – der Nutzer erfährt nichts über die Verwendung von Cookies.

Bei allen Varianten ist es unerlässlich, eine Passage in der Datenschutzerklärung zu haben, die sich der Cookie-Thematik widmet. Ihr könnt dafür aber auch gleich eine eigene URL zum Thema Cookies & Privatsphäre erstellen.

In seiner Umsetzung nimmt der Cookie-Hinweis unterschiedlichste Formen an. Logischerweise begegnet man fertigen CMS-Lösungen (Plugins) am häufigsten, doch es gibt auch zahlreiche Individuallösungen, die sich dem Problem gestellt haben. Im nachfolgenden Artikel möchte ich auf die Vor- und Nachteile der unterschiedliche Formate eingehen und ein persönliches Fazit ziehen.

Welche technischen Lösungen gibt es?

Heute gibt es in der Regel für jedes größere CMS ein oder mehrere Plugins, welche die Cookie-Hinweis-Thematik abdecken. WordPress als meistverbreitetes CMS bietet dabei die meisten Lösungen. Doch es gibt auch Anbieter, die plattformunabhängig über ein kleines Code-Snippet einen Cookie-Hinweis integrieren. Und nicht zuletzt kann jedes Unternehmen sich natürlich auch eine individuelle Lösung bauen (lassen).

WordPress-Plugins

Plattformunabhängige Anbieter

Welche visuellen Umsetzungen gibt es?

Ich werde nachfolgend immer den ganzen Viewport meines 15’’ Macbook Pro verwenden, damit ihr als Leser auch ein Gefühl für die relative Größe des Cookie-Hinweises auf der Seite erhaltet. Man unterscheidet folgende Eigenschaften:

Sticky: Bleibt am oberen/unteren Rand der Seite haften, bis der Nutzer es bestätigt oder ablehnt.

Non-Sticky: Bleibt nicht haften, sondern scrollt mit dem Content der Seite weiter nach oben oder unten und damit raus aus dem Sichtfeld des Nutzers.

Staying: Bleibt an der jeweiligen Stelle, egal, ob man scrollt oder eine weitere URL anklickt. Es wird so lange immer wieder an der gleichen Stelle auftauchen, bis der Nutzer es schließt oder bestätigt.

Non-Staying: verschwindet nach Scroll oder durch den Klick auf eine neue URL.

Oberhalb des Contents – Top

Screenshot: Hinweis groß am oberen Rand

Abb. 1: Calvin Klein – non-sticky, non-staying.

Der Cookie-Hinweis von Calvin Klein legt sich über fast ⅕ des ersten Viewports und ist damit leider sehr aufmerksamkeitsstark. Schrift- und Hintergrundfarbe machen es hingegen nicht gerade “lesefreundlich” – fast so als wolle man auf der anderen Seite gar nicht, dass die Inhalte auch tatsächlich gelesen werden. Größe und Schriftfarbe spielen hier also gegeneinander. Erfreulich ist einzig, dass der Cookie-Hinweis nach einem Klick oder weiterem Scrollen verschwindet und auch nicht wieder auftaucht (non-staying). Eine meiner Meinung nach eher mittelmäßige Lösung, die ich so nicht weiterempfehlen würde (no offense).

Screenshot: Unauffälliger Hinweis am oberen Rand

Abb. 2: Zalando – non-sticky, staying.

Bei Zalando befindet sich der Cookie-Hinweis auch oberhalb aller Inhalte und informiert sehr dezent – sowohl in Größe wie auch in Farbe (grau) ohne abzulenken – und drückt sich auch nicht aktiv in das Sichtfeld des Nutzers (keine Animation). Dass die Cookie-Hinweis-Bar auf jeder URL bis zum Schließen durch einen Klick sichtbar bleibt (staying), finde ich bei dieser dezenten Lösung absolut angemessen. Eine einfache und gelungene Lösung.

Screenshot: Ausführlicher Hinweis am oberen Rand

Abb. 3: BBC – non-sticky, non-staying.

Der Nachteil des Cookie-Hinweises der BBC ist zugleich ihr größter Vorteil. Die BBC versucht nichts zu verstecken, sondern sagt ganz klar und deutlich: Wir verwenden Cookies und das hat seine guten Gründe. Mit maximaler Transparenz wird erklärt, worum es geht. Gleichzeitig wird aber auch die Option geboten, sich weiter zu informieren oder die Cookie-Einstellungen zu anzupassen. Das stört zwar das Surf-Verhalten, transportiert aber auch so viel Transparenz, dass es schon wieder für die Marke und ihre Werte spricht. Wer die Website von BBC erstmals besucht, kann seine Cookie-Einstellungen also seinen Präferenzen entsprechend einstellen – eine wertvolle erste Nutzerinteraktion.

Screenshot: Hinweis der Telekom

Abb. 4: Telekom – non-sticky, staying.

Bei der Telekom befindet sich die zwei Zielen breite Cookie-Hinweis-Bar über der Navigation, aber unter dem Top-Header und ist damit relativ gut in den gesamten Header-Bereich integriert. Sie ist farblich kaum von Top-Header zu unterscheiden und einfach zu schließen. Da sie aber nicht durch den Klick auf eine weitere URL verschwindet, drückt sie dadurch den Inhalt jeder URL nach unten.

Im Content – Body

Screenshot: Hinweis überlagert den Hinweis bei Asos

Abb. 5: Asos – fly-in, non-staying.

Asos hat sich entschieden, den Nutzer aktiv auf den Cookie-Hinweis aufmerksam zu machen. Der Cookie-Hinweis lädt vor den restlichen Inhalten der Website im unteren rechten Teil des Viewports und legt sich dabei über den Website-Content. Beim Scrollen bleibt der Cookie-Hinweis vorerst fixiert, bis ein plötzlicher “reload” den Cookie-Hinweis entfernt, auch wenn man nicht scrollt. Die Idee, den Cookie-Hinweis ab einer gewissen Scrollltiefe auszublenden, halte ich aber für sinnvoll, da man davon ausgehen kann, dass der Nutzer es wahrgenommen hat, auch wenn er es nicht an- oder weggeklickt hat.

Screenshot: Hinweis als Pop-Up

Abb. 6: Puma – Pop-Up.

Puma hat sich für die aufmerksamkeitsstärkste Variante entschieden: ein Pop-Up, das den Benutzer ganz klar auf die Cookies aufmerksam macht, noch bevor irgendein Seiteninhalt betrachtet werden kann. Dem Pop-Up und der Fly-In- oder Box-Darstellung im Body begegnet man im Web wahrscheinlich am seltensten. Das hat auch seinen guten Grund, denn sie stört den Nutzer aktiv im Surf-Verhalten und legt sich über ggf. wichtige Inhalte. Sie zwingt den Nutzer „gefühlt” zum Klick, falls dieser nicht direkt weiternavigiert.

Unterhalb des Contents – Bottom

Screenshot: Hinweis am unteren Rand

Abb. 7: The Register – sticky, staying.

Auffällig unauffällig ist bei The Register die sehr geringe Einschränkung des Viewports durch den Cookie-Hinweis. Er ist insgesamt sehr dezent, da nicht im oberen, primären Sichtfeld des Nutzers verortet – trotzdem aber dauerhaft sicht- und wahrnehmbar, da sticky. Nur das “Close”, also das “Schließen” des Cookie-Hinweises, hätte ich durch einen (X)-Button ersetzt oder ergänzt und auch ein paar Worte mehr zu den Gründen für die Nutzung von Cookies verloren: “Um die Sucherfahrung auf unserer Website zu verbessern … “. Da der Fixed-Bottom-Cookie-Hinweis am wenigsten zum Klick auffordert und auch am wenigsten von den Inhalten der Website ablenkt, ist es meine präferierte Darstellungsform.

Wichtig zu beachten ist dabei, dass die Cookie-Bar aber niemals relevante Seiten wie Impressum, Datenschutz & Co. versperren darf. Denn diese müssen immer mit nur einem Klick erreichbar bleiben.

Zusammenfassung

Es gibt verschiedene Herangehensweisen an die Cookie-Hinweis-Thematik. Diese lassen sich jedoch ganz klar in zwei Parteien bzw. sich gegenüberliegende Enden aufteilen. Entweder möchte man den Besucher ganz klar und deutlich auf die Cookies hinweisen (Puma, BBC) und macht das so präsent wie möglich – oder man integriert den Cookie-Hinweis sehr beiläufig und stört den Nutzer praktisch gar nicht in seinem Surfverhalten (The Register, Zalando, Telekom). Gerade diese beiden Extreme sind für mich nachvollziehbar und schlüssig und beschreiben damit die Spektren einer Grundsatzfrage. Alle Lösungen dazwischen sind meiner Meinung nach verbesserungswürdig, denn sie sind weder das eine, noch das andere, und damit schlichtweg störend oder lästig.

Do’s

  • Sprecht mit eurer Rechtsabteilung oder informiert euch ausreichend, ob ein Cookie-Opt-In oder nur ein Cookie-Hinweis verwendet werden soll und passt die Darstellung entsprechend an.
  • Entscheidet euch bei der visuellen Darstellung für eine der beiden Varianten: Bindet den Cookie-Hinweis entweder so beiläufig und subtil wie möglich ein oder maximal präsent, dann aber bitte auch professionell bis zum letzten Schritt.
  • Passt den Cookie-Hinweis dem Corporate Design der Website an. Je mehr er heraussticht, umso mehr “unterbricht” man den Nutzer bei seinem Surf-Verhalten. Außerdem kann es, wenn es wie ein “fremdes” Element wirkt, das Corporate Design stören und damit die Markenwahrnehmung beim Besucher verschlechtern.
  • Macht den Cookie-Hinweis einfach schließ- und oder wegklickbar.

Dont’s

  • Verschwendet keinen Weißraum (Leerraum). Wenn man schon “freiwillig” den Viewport seiner gesamten Seite verringert, dann sollte man versuchen, ihn doch so klein wie möglich zu halten. Ein Negativbeispiel ist hier das Magazin The Verge.
  • Vernachlässigt nicht eure Datenschutz-URL. Sorgt auch hier für eine optimale Nutzererfahrung und gliedert die URL ansprechend und übersichtlich.
  • Macht keine Experimente, haltet euch an gelernte Webstandards und/oder verwendet einen gängigen Cookie-Hinweis.

Umsetzung der Datenschutz-URL

Wer nun einen tollen Cookie-Hinweis erstellt hat, aber auf der Datenschutz-Seite miserabel performt, schafft für einige wenige Nutzer einen klaren Bruch in der Transparenz und Markenwahrnehmung. Ein negatives Beispiel ist hier leider wieder Calvin Klein (no offense). Nach dem Klick auf die Privatsphäre-Infos erscheint leider eine Textwüste – das möchte und wird kaum einer lesen.

Screenshot: Datenschutzseite bei Calvin Klein

Abb. 8: Die unübersichtliche Datenschutzseite von Calvin Klein.

Die mit Abstand beste mir bekannte Datenschutz-Seite ist die von der BBC. Nicht nur, dass dort ausführlich und übersichtlich über die Nutzung von Cookies informiert wird. Auch die Einstellungen der Cookies lassen sich dort einfach bearbeiten. Daumen hoch!

Screenshot: Datenschutzseite der BBC

Abb. 9: Die übersichtliche Datenschutzseite der BBC.

Disclaimer: Die unterschiedlichen Darstellungsformen nutzen selbstverständlich auch unterschiedlich “sichere” Darstellungsvarianten (-Hinweis, – Opt-In, – Opt-Out) aber auch Rechtstexte. Mein Artikel versucht nicht die Sicherheit zu beleuchten, sondern die Wahrnehmung des Cookie-Hinweises beim Nutzer/Besucher. Jedem Website-Betreiber bleibt selbst überlassen, welche Sicherheitsstufe und Darstellungsform er wählen möchte. Mit diesem Artikel soll euch aber ein weiterer Aspekt – die Nutzerwahrnehmung – zumindest näher gebracht werden.

Wie immer freue ich mich über Anregungen, Ergänzungen und andere Meinungen in den Kommentaren!

Über den Autor

Bernard Zitzer

Gastautor
Ich bin Search Experience Consultant aus Köln und repräsentiere selbstbewusst das neue SEO, welches den Nutzer ins Zentrum der Optimierung rückt. Vorher war ich SEO Manager bei der Online-Marketing-Agentur netspirits und berate seit Mitte 2016 selbstständig Unternehmen aller Art und Größe bei der Sucherfahrungsoptimierung, der Schnittstelle von SEO und UX (SXO). Zu diesen und ähnlichen Themen veröffentliche ich Artikel, werde für Workshops gebucht und halte auch Fachvorträge bei Konferenzen wie der Campixx Week in Berlin.
Kommentare