![\"Rechtslage](\"https:\/\/bernard.digital\/wp-content\/uploads\/2017\/10\/Rechtslage-Cookie-Hinweis-EU.jpg\")
Die Ergebnisse der aktueller Rechtsmpfehlungen dennoch kurz zusammengefasst:<\/strong>\r\n- \r\n \t
- Sicherster Weg (Cookie-Opt-In):<\/b> Einwilligung der Besucher einholen – der Nutzer muss Cookies mit einem Klick aktiv best\u00e4tigen.<\/span><\/li>\r\n \t
- Mittelweg (Cookie-Hinweis):<\/b> Informieren des Nutzers \u00fcber Verwendung von Cookies und Bieten einer Widerspruchsm\u00f6glichkeit (Opt-Out) – eine Einwilligung wird nicht aktiv eingeholt.<\/span><\/li>\r\n \t
- Grauzone:<\/b> Keinerlei Mitteilung – der Nutzer erf\u00e4hrt nichts \u00fcber die Verwendung von Cookies.<\/span><\/li>\r\n<\/ol>\r\n\r\nBei allen Varianten ist es unerl\u00e4sslich, eine Passage in der Datenschutzerkl\u00e4rung zu haben, die sich der Cookie-Thematik widmet. Ihr k\u00f6nnt daf\u00fcr aber auch gleich eine eigene URL zum Thema Cookies & Privatsph\u00e4re erstellen.\u00a0<\/span>Einen ausf\u00fchrlichen Artikel zur rechtlichen Dimension der <\/span>Umsetzung des Cookie-Hinweis<\/span> ist auf E-Recht24<\/a> zu finden.<\/span>\r\n\r\nIn seiner Umsetzung nimmt der Cookie-Hinweis unterschiedlichste Formen an. Logischerweise begegnet man fertigen CMS-L\u00f6sungen (Plugins) am h\u00e4ufigsten, doch es gibt auch zahlreiche Individuall\u00f6sungen, die sich dem Problem gestellt haben. Im nachfolgenden Artikel m\u00f6chte ich auf die Vor- und Nachteile der unterschiedliche Formate eingehen und ein pers\u00f6nliches Fazit ziehen.<\/span>\r\n\r\n \r\n
<\/i> Technische L\u00f6sungen<\/span><\/h2>\r\nHeute hat in der Regel jedes gr\u00f6\u00dfere CMS ein oder mehrere Plugins, die die Cookie-Hinweis-Thematik abdecken. WordPress, als meistverbreitetes CMS, bietet dabei die meisten L\u00f6sungen. Doch es gibt auch Anbieter, die plattformunabh\u00e4ngig \u00fcber ein kleines Code-Snippet einen Cookie-Hinweis integrieren. Und nicht zuletzt kann jedes Unternehmen sich nat\u00fcrlich auch eine individuelle L\u00f6sung bauen (lassen).<\/span>\r\n\r\n
\r\nF\u00fcr WordPress:<\/h3>\r\n
- \r\n \t
- Cookie-Notice<\/span><\/a> von dfactory<\/span><\/li>\r\n \t
- EU-Cookie-Law<\/span><\/a> von Ginger<\/span><\/li>\r\n \t
- Cookie-Consent<\/span><\/a>\u00a0Catapult-Themes<\/span><\/li>\r\n \t
- Cookie-Law-Info<\/a> von Richard Ashby<\/li>\r\n \t
- EU-Cookie-Law<\/a> von Alex Moss & Co.<\/li>\r\n<\/ul>\r\n<\/div>\r\n\r\n
\r\n\u00dcbergreifend:<\/h3>\r\n
- \r\n \t
- Cookie-Consent<\/a> by Insides<\/li>\r\n \t
- Cookie-Control <\/a><\/li>\r\n \t
- Cookie-Bot <\/a><\/li>\r\n \t
- Cookie-Choices<\/a><\/li>\r\n \t
- Cookie-Consent Kit<\/a> der Europ\u00e4ischen Union<\/li>\r\n<\/ul>\r\n<\/div>
<\/div>\r\n<\/h3>\r\n
<\/i> Visuelle Umsetzungen<\/span><\/h2>\r\n<\/i> Ich habe nachfolgend immer den ganzen Viewport meines 15\u2019\u2019 Macbook Pro verwendet, damit man als Leser auch ein Gef\u00fchl f\u00fcr die relative Gr\u00f6\u00dfe des Cookie-Hinweis auf der Seite erh\u00e4lt. Den Cookie-Hinweis habe ich zur besseren Erkennung immer gelb<\/strong><\/span> gerahmt.<\/span>\r\n\r\nMan unterscheidet folgende Eigenschaften:<\/span>\r\n
- \r\n \t
- Sticky<\/b> = bleibt am oberen\/unteren Rand der Seite haften, bis der Nutzer es best\u00e4tigt oder ablehnt<\/span><\/li>\r\n \t
- Non-Sticky <\/b>= bleibt nicht haften, sondern scrollt mit dem Content der Seite weiter nach oben oder unten und damit raus aus dem Sichtfeld des Nutzers<\/span><\/li>\r\n \t
- Staying<\/b> = bleibt an der Stelle, egal ob man eine weitere URL klickt oder scrollt. Es wird immer wieder an der gleichen Stelle auftauchen, bis der Nutzer es schlie\u00dft oder best\u00e4tigt<\/span><\/li>\r\n \t
- Non-Staying<\/b> = verschwindet nach Scroll oder durch Klick einer neuen URL<\/span><\/li>\r\n<\/ul>\r\n \r\n
Oberhalb des Contents – Top:<\/span><\/h3>\r\n
Beispiel 1 – Calvin Klein (non-sticky, non-staying)<\/span>\r\n<\/span><\/h4>\r\n
<\/span>![\"Calvin](\"https:\/\/bernard.digital\/wp-content\/uploads\/2017\/10\/Calvin-Klein-Cookie-Hinweis-Top-Bar-3.jpg\")
\r\n\r\nLive sehen<\/span><\/a> <\/div><\/div>\r\n\r\nDer Cookie-Hinweis von Calvin Klein legt sich \u00fcber fast \u2155 des ersten Viewports und ist damit „leider“ sehr aufmerksamkeitsstark. Schrift- und Hintergrundfarbe machen es hingegen nicht gerade \u201clesefreundlich\u201d \u00a0– fast so als wolle man auf der anderen Seite gar nicht, dass die Inhalte auch tats\u00e4chlich gelesen werden. Gr\u00f6\u00dfe und Schriftfarbe spielen hier also gegeneinander. Erfreulich ist einzig, dass das Cookie-Hinweis nach einem Klick oder weiterem Scrollen verschwindet und auch nicht wieder auftaucht (non-staying). Eine meiner Meinung nach eher mittelm\u00e4\u00dfige L\u00f6sung, die ich so nicht weiterempfehlen w\u00fcrde (no-offense).<\/span>\r\n\r\n \r\nBeispiel 2 – Zalando (non-sticky, staying)<\/span><\/h4>\r\n
<\/span>\r\n![\"Zalando](\"https:\/\/bernard.digital\/wp-content\/uploads\/2017\/10\/Zalando-Cookie-Hinweis-Top-Staying.jpg\")
Live sehen<\/span><\/a> <\/div><\/div>\r\n\r\nBei Zalando befindet sich der Cookie-Hinweis auch oberhalb aller Inhalte und informiert sehr dezent – sowohl in Gr\u00f6\u00dfe wie auch in Farbe (grau) ohne abzulenken – und dr\u00fcckt sich auch nicht aktiv in das Sichtfeld des Nutzers (keine Animation). Dass die Cookie-Hinweis-Bar auf jeder URL bis zum Schlie\u00dfen durch einen Klick sichtbar bleibt (staying), finde ich bei dieser dezenten L\u00f6sung absolut angemessen. Eine einfache und gelungene L\u00f6sung.<\/span>\r\n\r\n \r\nBeispiel 3 – BBC (non-sticky, non-staying)<\/span><\/h4>\r\n
<\/span>![\"Cookie-Hinweis](\"https:\/\/bernard.digital\/wp-content\/uploads\/2017\/10\/BBC-Cookie-Hinweis-Top-Non-Fixed.jpg\")
\r\n\r\nLive sehen<\/span><\/a> <\/div><\/div>\r\n\r\nDer Nachteil von BBCs Cookie-Hinweis ist zugleich ihr gr\u00f6\u00dfter Vorteil. Die BBC versucht nichts zu verstecken, sondern sagt ganz klar und deutlich: Wir verwenden Cookies und das hat seine guten Gr\u00fcnde. Mit maximaler Transparenz wird erkl\u00e4rt, worum es geht. Gleichzeitig wird aber auch die Option geboten, sich weiter zu informieren oder die Cookie-Einstellungen zu anzupassen. Das st\u00f6rt zwar das Surf-Verhalten, transportiert aber auch so viel Transparenz, dass es schon wieder f\u00fcr die Marke und ihre Werte spricht. Wer die Website von BBC erstmals besucht, kann seine Cookie-Einstellungen also seinen Pr\u00e4ferenzen entsprechend einstellen – eine wertvolle erste Nutzerinteraktion.<\/span>\r\n\r\n \r\nBeispiel 4 – Telekom (non-sticky, staying)<\/span><\/h4>\r\n
<\/span>![\"Umsetzung](\"https:\/\/bernard.digital\/wp-content\/uploads\/2017\/10\/Telekom-Cookie-Hinweis-Startseite.jpg\")
<\/span>\r\n\r\nLive sehen<\/span><\/a> <\/div><\/div><\/span>\r\n\r\nBei der Telekom befindet sich die Zwei-Zielen-breite-Cookie-Notice-Bar \u00fcber der Navigation, aber unter dem Top-Header und ist damit relativ gut in den gesamten Header-Bereich integriert. Sie ist farblich kaum vom Top-Header zu unterscheiden und einfach zu schlie\u00dfen. Da sie aber nicht durch den Klick auf eine weitere URL verschwindet, dr\u00fcckt sie dadurch den Inhalt jeder URL nach unten. <\/span>\r\n\r\n \r\nIm Content – Body:<\/span><\/h3>\r\n
Beispiel 1 – Asos (fly-in, non-staying):<\/span><\/h4>\r\n
<\/span>\r\n![\"Asos](\"https:\/\/bernard.digital\/wp-content\/uploads\/2017\/10\/Asos-Cookie-Hinweis-Startseite-Beispiel.jpg\")
<\/span>\r\n\r\nLive sehen<\/span><\/a> <\/div><\/div><\/span>\r\n\r\nAsos hat sich entschieden, den Nutzer aktiv auf den Cookie-Hinweis hinzuweisen. Der Cookie-Hinweis l\u00e4dt vor den restlichen Inhalten der Website im unteren rechten Teil des Viewports und legt sich dabei \u00fcber den Website-Content. Beim Scrollen bleibt das Cookie-Hinweis vorerst fixiert, bis ein pl\u00f6tzlicher \u201creload\u201d den Cookie-Hinweis entfernt, auch wenn man nicht scrollt. Die Ideen, den Cookie-Hinweis ab einer gewissen Scrollltiefe auszublenden, halte ich aber f\u00fcr sinnvoll, da man davon ausgehen kann, dass der Nutzer es wahrgenommen hat, auch wenn er es nicht an- oder weggeklickt hat.<\/span>\r\n\r\n \r\nBeispiel 2 – Puma (pop-up):<\/span><\/h4>\r\n
<\/span>\r\n![\"Cookie-Hinweis](\"https:\/\/bernard.digital\/wp-content\/uploads\/2017\/10\/Puma-Cookie-Hinweis-EU-Beispiel.jpg\")
<\/span>\r\n\r\nLive sehen<\/span><\/a> <\/div><\/div>\r\n\r\nPuma hat sich f\u00fcr die aufmerksamkeitsst\u00e4rkste Version des Cookie-Hinweis entschieden: ein Pop-Up, das den Benutzer ganz klar auf die verwendeten Cookies aufmerksam macht, noch bevor irgendein Seiteninhalt richtig betrachtet werden kann. <\/span>\r\n\r\nDem 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\u00f6rt den Nutzer aktiv im Surf-Verhalten und legt sich \u00fcber ggf. wichtige Inhalte. Sie zwingt den Nutzer \u201cgef\u00fchlt\u201d zum Klick, falls dieser nicht direkt weiternavigiert. Rechtlich gesehen die wohl sicherste Variante, in der Surf-Erfahrung aber die st\u00f6rendste.<\/span>\r\n\r\n \r\nUnterhalb des Contents – Bottom:<\/span><\/h3>\r\n
Beispiel 1 – The Register (sticky, staying):<\/span><\/h4>\r\n
<\/span>![\"The](\"https:\/\/bernard.digital\/wp-content\/uploads\/2017\/10\/Cookie-Hinweis-TheRegister-Website-Beispiel.jpg\")
\r\nLive sehen<\/span><\/a> <\/div><\/div>\r\n\r\nAuff\u00e4llig unauff\u00e4llig ist bei \u201cThe Register\u201d die sehr geringe Einschr\u00e4nkung des Viewports durch das Cookie-Hinweis. Es ist insgesamt sehr dezent, da nicht im oberen, prim\u00e4ren Sichtfeld des Nutzers verortet – trotzdem aber dauerhaft sicht- und wahrnehmbar, da sticky. Nur das \u201cClose\u201d, also das \u201cSchlie\u00dfen\u201d des Cookie-Hinweis, h\u00e4tte ich durch einen (X)-Button ersetzt oder erg\u00e4nzt und auch ein paar Worte mehr zu den Gr\u00fcnden f\u00fcr die Nutzung von Cookies verloren: \u201cUm die Sucherfahrung (Search Experience) auf unserer Website zu verbessern \u2026 \u201c. 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\u00e4ferierte Darstellungsform. <\/span>\r\n\r\nWichtig zu beachten ist, dass die Cookie-Bar aber niemals relevante Seiten wie Impressum, Datenschutz & Co. versperren darf. Denn diese m\u00fcssen immer mit nur einem Klick erreichbar bleiben.<\/span>\r\n\r\n \r\n<\/i> Zusammenfassung\/Fazit:<\/span><\/h3>\r\n
![\"Empfehlung](\"https:\/\/bernard.digital\/wp-content\/uploads\/2017\/10\/Presentable-Cookies-and-Muffins.jpg\")
<\/strong>\r\n\r\nEs gibt verschiedene Herangehensweisen an die Cookie-Hinweis-Thematik. Diese lassen sich jedoch ganz klar in zwei Parteien bzw. sich gegen\u00fcberliegende Enden aufteilen. Entweder m\u00f6chte man den Besucher ganz klar und deutlich auf die Cookies hinweisen (Puma, BBC) und macht das so pr\u00e4sent wie m\u00f6glich oder man integriert den Cookie-Hinweis sehr beil\u00e4ufig und st\u00f6rt den Nutzer praktisch gar nicht in seinem Surfverhalten (TheRegister, Zalando, Telekom). <\/strong>\r\n\r\nGerade diese beiden Extreme sind f\u00fcr mich nachvollziehbar und schl\u00fcssig und beschreiben damit die Spektren einer Grundsatzfrage. Alle L\u00f6sungen dazwischen sind meiner Meinung nach verbesserungsw\u00fcrdig, denn sie sind weder das eine, noch das andere, und damit schlichtweg st\u00f6rend oder l\u00e4stig. <\/span>\r\n4 wichtige Do\u2019s:<\/h4>\r\n
- \r\n \t
- Sprecht \u00a0mit 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.<\/span><\/li>\r\n \t
- Entscheidet euch bei der visuellen Darstellung f\u00fcr eine der beiden Varianten: Bindet den Cookie-Hinweis entweder so beil\u00e4ufig und subtil wie m\u00f6glich ein oder maximal pr\u00e4sent, dann aber bitte auch professionell bis zum letzten Schritt.<\/span><\/li>\r\n \t
- Passt den Cookie-Hinweis dem Corporate Design der Website an. Je mehr es heraussticht, umso mehr \u201cunterbricht\u201d man Nutzer bei seinem Surf-Verhalten. Au\u00dferdem kann es, wenn es wie ein \u201cfremdes\u201d Element wirkt, das Corporate Design st\u00f6ren und damit die Markenwahrnehmung beim Besucher verschlechtern.<\/span><\/li>\r\n \t
- Macht den Cookie-Hinweis einfach schlie\u00df- und oder wegklickbar. <\/span><\/li>\r\n<\/ul>\r\n
3 wichtige Dont\u2019s:<\/h4>\r\n
- \r\n \t
- Verschwendet keinen Wei\u00dfraum (Leerraum). Wenn man schon \u201cfreiwillig\u201d den Viewport seiner gesamten Seite verringert, dann sollte man versuchen, ihn doch so klein wie m\u00f6glich zu halten. Ein Negativbeispiel ist hier das Magazin <\/span>\u201cThe Verge\u201d<\/span><\/a>. <\/span><\/li>\r\n \t
- Vernachl\u00e4ssigt nicht eure Datenschutz-URL. Sorgt auch hier f\u00fcr eine optimale Nutzererfahrung und gliedert die URL ansprechend und \u00fcbersichtlich. <\/span><\/li>\r\n \t
- Macht keine Experimente, haltet euch an gelernte Webstandards und\/oder verwendet einen g\u00e4ngigen Cookie-Hinweis. <\/span>\f<\/span><\/li>\r\n<\/ul>\r\n
Leserumfrage:<\/h4>\r\n[totalpoll id=“7979″]\r\n\r\n \r\n
<\/i> Extra: Datenschutz-URL:<\/span><\/h3>\r\nWer nun einen tollen Cookie-Hinweis erstellt hat, aber auf der Datenschutz-Seite miserabel performt, schafft f\u00fcr einige wenige Nutzer einen klaren Bruch in der Transparenz und Markenwahrnehmung.<\/span>\r\n
How NOT-To: Negativ-Beispiel<\/h4>\r\nNach dem Klick auf die Privatsph\u00e4re-Infos erscheint leider eine Textw\u00fcste – das m\u00f6chte und wird kaum einer lesen (s.u.)\r\n\r\n
- Vernachl\u00e4ssigt nicht eure Datenschutz-URL. Sorgt auch hier f\u00fcr eine optimale Nutzererfahrung und gliedert die URL ansprechend und \u00fcbersichtlich. <\/span><\/li>\r\n \t
- Entscheidet euch bei der visuellen Darstellung f\u00fcr eine der beiden Varianten: Bindet den Cookie-Hinweis entweder so beil\u00e4ufig und subtil wie m\u00f6glich ein oder maximal pr\u00e4sent, dann aber bitte auch professionell bis zum letzten Schritt.<\/span><\/li>\r\n \t
- Non-Sticky <\/b>= bleibt nicht haften, sondern scrollt mit dem Content der Seite weiter nach oben oder unten und damit raus aus dem Sichtfeld des Nutzers<\/span><\/li>\r\n \t
- Cookie-Control <\/a><\/li>\r\n \t
- EU-Cookie-Law<\/span><\/a> von Ginger<\/span><\/li>\r\n \t
- Mittelweg (Cookie-Hinweis):<\/b> Informieren des Nutzers \u00fcber Verwendung von Cookies und Bieten einer Widerspruchsm\u00f6glichkeit (Opt-Out) – eine Einwilligung wird nicht aktiv eingeholt.<\/span><\/li>\r\n \t
![\"How](\"https:\/\/bernard.digital\/wp-content\/uploads\/2017\/10\/Calvin-Klein-Privatsphaere-URL.jpg\")
<\/span>![\"BBC](\"https:\/\/bernard.digital\/wp-content\/uploads\/2017\/10\/BBC-Privatsphaere-URL.jpg\")
<\/span>