The Cookie Law and UX
How to balance compliance and design
Cookies are a foundation of our daily lives. From remembering our preferences on websites, to serving us targeted ads on Facebook, cookies are the glue that hold together our browsing experiences. These small text files, downloaded onto your computer, serve to deliver a tailored web experience to each customer, based on their previous browsing history.
But from 2011 onwards, an EU directive has required website owners to obtain informed consent from users in cases where cookies are being used. As an EU directive, member states were forced to make their own provision as to how this ruling was implemented. This meant that the cookies enforcement directive got off to inauspicious start, being implemented severely in some countries and not at all in others.
In the past year or so, cookies notifications have become more commonplace. You’re probably familiar with some of the intrusive and disruptive implementations of the ruling — modal overlays , pop-outs or large banners, obscuring content and asking for ‘agreement’ before you can continue. What we’ve seen have largely been quick fixes to get the user’s attention and agreement. In fact, the opposite is often true with users either dismissing the notification straight away, either believing it to be a form of advertising or as an obstacle to browsing freely. A client I work with saw that 67% of people dismissed the notification on mobile —perhaps unsurprising in a case where it took up almost a quarter of the screen.
But if cookie notifications are now a mandated legal requirement, how do we balance the need for compliance with those of the user? How do we notify users of the use of cookies, without distracting them from their primary tasks?
What’s required?
Let’s start by establishing what’s actually required in terms of notification for websites registered in Ireland. According to the Office of the Data Protection Commissioner:
‘the minimum requirement is that clear communication to the user as to what he/she is being asked to consent to in terms of cookies usage and a means of giving or refusing consent is required.’
This consent can then be obtained explicitly, via means of a checkbox, or implicitly, by notifying users that by using the site, consent is granted. Visually, the notification should be ‘prominent’ and should include a link to the cookies policy statement, where ‘clear, comprehensive information’ on what types of cookies are being used, how they are being applied and instructions on how they can be disabled can be found
The Article 29 Working Group, an umbrella group made up of data commissioner representatives from across Europe, goes into more detail, and seeks to provide guidance on what represents valid consent to the use of cookies in a Europe wide-context.
Consent must be:
- Specific: Consent must be ‘specific and based on appropriate information’, that is, blanket consent by an organisation or group of individuals is not permitted.
- Timing: Consent must be given before the processing starts.
- Unambiguous: Consent must leave no doubt as to the data subject’s intention. It should be an active indication of the user’s wishes.
- Freely given: Consent can only be valid if the data subject is able to exercise a real choice.
The missing context
What the Data Commissioner and the Working Group don’t advise on is context. Interpretation of the law and subsequent implementation should be informed by the level of risk that a company is willing to take, as well as the nature of the business itself. For example, explicit consent to the agreement of cookies in the form of a checkbox may be overkill for a university’s website that only uses session cookies, but may be appropriate in the case of a large financial institution, where a user’s sensitive information is being stored, or a large e-commerce provider, who uses targeted marketing via third party cookies. Much depends on the type of cookie being used as well as the importance of cookies to the business in question. Internet advertising is a $117.2 billion industry, with cookies playing a fundamental part of how businesses target and advertise to their customers. For organisations where targeted ads are a cornerstone of their advertising strategy, more explicit effort is required in terms of notification. Compliance is rarely optional for large organisations — it’s a fundamental part of the product development process and one that has to adhered to. However, legal requirements are rarely fed into the design process early, with cookie notifications usually remaining an afterthought, tacked on at the end in order to tick a box marked ‘compliance’.
While the right means for achieving consent can only be informed by the cookies being used, as well as advice from your legal dept, I’ve put together a short guide on how you can address the law without sacrificing user experience.
Start with the filling
Lengthy content, by and large, is one of the main reasons that the cookies notifications appear so obtrusive. Copied and pasted from a legal document, they’re rarely passed through an editorial process, sounding both long-winded and overly technical.
Like any content, whether it’s a push notification or an error message, cookies notifications should be matched to your user’s feelings, and carry the correct voice of your brand.
While voice may be constant, tone is an ever-shifting variable. It changes depending on situation. As online privacy is a delicate subject, care should be taken to avoid confusing or startling users when there’s little to worry about. With regards a cookie notification, where consent is required, it is important to inform, while taking care not to alarm.
To establish this tone, try identifying the audience(s) of your website, and intended outcomes when users encounter the notification. With a financial institution, the audience may be risk-averse, and more interested in how their information is being stored. Users such as these this will need clear steps to your cookies statement in full. For a universities’ website, where the audience may be looking for informational content, they’re likely to be more concerned in accomplishing their goals, than any in depth information about how your website is run. This may lead you to err on the side of brevity in your notification.
Audiences are far from analogous, but drawing up audiences and outcomes can help you develop a cookies notification that is in keeping with the rest of the content on your site and that, crucially, gives the majority of your users exactly what they want to know about cookies— whether that’s a lot or nothing at all.
But it’s not just a question of semantics. Colour and icons play a huge part in how notifications are received, and any icons used should be carefully chosen. As the purpose of a cookie notification is to inform, the icons should exclusively serve to aid the user’s capacity to understand the accompanying information. Error icons or warning icons may draw attention to the notification, but they do little to enhance a user’s understanding of the notification itself.
You should also provide a prominent way for users to close the notification. This may seem obvious, but a subtle ‘X’ icon in the top-right corner of the message box, with little or no affordance, can take users longer than necessary to recognize. Ask yourself whether your users have a clear actionable path for those who want to get rid of the notification. (Bear in mind, there will be a plenty who want to do so).
Colour too can play an important part in how a cookies notification is received. Much depends on how a notification contrasts with the rest of your colour scheme but in general, bright reds should be avoided.
Employing the traffic light analogy, red is commonly used for error and warning messages, leading users to believe that they have made a mistake. Orange and yellows are more commonly used for informational messages, and can add a similar affordance without causing alarm. In the event that the cookies notification is to be a permanent fixture on your site, consistency with other notifications is extremely important, allowing for familiarity and therefore faster recognition, allowing the cookies statement to be registered more quickly.
What tray should I use?
Though the EU directive makes no provision to the size, colour or content of the notification itself, modal overlays, requesting specific consent to the cookies agreement, should be avoided in all cases unless explicitly specified by the legal department. Not only will they annoy your users, but they are poor in terms of accessibility, meaning that you’re really not addressing the requirement to notify all visitors to your site of your use of cookies.
What seems to have become the norm in terms of notification is placing the cookies statement in the header or footer. The header is the most common implementation, perhaps a relic of ‘above the fold’ mode of thinking, which states that if you want something to be noticed, you put it above the fold. The difficulty with placing notifications close to the header is that it is likely to distract users from the header itself. As the header helps readers parse the content they are looking for, notifications, unless critical to the user, serve only to distract.
Moreover, quite often a cookies notification may be competing with banner ads (also usually positioned in the header), meaning that users landing on your homepage on mobile, for example, may only get a small snippet of relevant content.
Regardless what your product or service is, the main focus of a website should always be its content. As designers, we should always aim to stop readers from being distracted by things other than useful, meaningful content.
Caution too should be paid to placing notifications (especially ones that you are intended to interact with) close to interface inputs. This often leads to inadvertent interaction with the cookies notification for those who wish to ignore the statement (Again, there will plenty of these).
Having the cookies notification fixed to the bottom of the screen, or even in the footer, can be a less obtrusive option than in the header. Cool Blue use a great example of this. Fixed to the bottom of the browser, the cookie notification continues to hug the bottom of the screen as the user scrolls.
As the notification is always present on the screen, it can deemed prominent in all scenarios, while at the same time is less likely to distract your users from navigation. The footer has the added advantage of being the standard location for links to privacy policies and terms and conditions.
Whatever placement is chosen, in terms of size the notification should not be a given a greater share of the screen at the expense of useful content and navigation. It is always worth remembering that the prominence of the notification is not dictated by its size or its colour. It’s dictated by it’s importance to the individual. As such, we should assume that if it’s not important to a customer, they won’t read it.
It’s unclear whether cookies notifications are here to for the long term, but given that the directive is enshrined in EU law, it’s unlikely to simply disappear overnight. There’s talk that the law that could be reworked to target specifically those who use cookies for profiling and advertising, rather than requiring compliance from any website that uses cookies for it’s day to day running. In the short term, however, it’s important that designers ensure that the methods of presenting a cookie notification outweighs the associated costs of distraction, that interrupting a user with a cookies statement will create sufficient payoff in terms of useful information. Compliance to a rule aiming to protect an individual’s privacy shouldn’t have to result in a broken experience for your customers.
