Skip to main content

A better UI/UX for Cookie consent banners

I'm sure you've seen them before; those pesky, inescapable Cookie consent banners!  They typically appear at the top or bottom of websites -- often obscuring important content.  For example, if you were to visit CNNZara, or Unicef today; or, any other news, e-commerce, or charitable website for that matter -- especially those with an international presence -- you'd likely see one; a UI/UX eyesore.  Such Cookie consent banners, ubiquitous and omnipresent, have become the defacto solution for complying with an important part of the European Union's (EU) ePrivacy Directive (ePD).

If you're unfamiliar with the ePD, it basically mandates that websites first obtain a user's consent before storing and/or retrieving any Personally Identifiable Information (PII) about them in and/or from HTTP cookies.  (HTTP Cookies are small pieces of data stored by websites in a user's web browser for easier retrieval later.)  The Cookie Law, as the ePD has become known, not only requires a website to notify its users about any PII it stores; but, also any PII its vendors might store too.  As a result, users have been getting bombarded with Cookie consent notices from every website that they visit.

But are those Cookie consent banners even necessary?  The original intent of the Cookie Law was to protect users' privacy; however, its implementation has actually had the opposite effect.  Rather than increasing awareness, the Cookie Law's instead led to users just blindly closing the banners due to information overload -- often without even reading them first.  In addition, the banners have created numerous UI/UX issues for websites in terms of their placement, copy/language, look & feel, etc.  One major issue with the banners is that they introduce unnecessary friction into the browsing/purchasing path of users.  This is especially true on mobile devices where the banners are often placed at the top of a webpage, taking up valuable screen real estate.

To address such problems, websites such as The Guardian and Amazon UK have started to experiment with novel ways of displaying their Cookie consent banners.  By far the best solution I've come across is ShakeShack's Privacy Badge (see http://prntscr.com/o1xzdf), a small icon that's affixed to the lower-left hand corner of its webpages.  (It's akin to the way in which a back-top-top link is typically displayed.)  Clicking on the Privacy Badge brings up a modal window from which a user can learn more about Shake Shack's privacy policies.  The UI for the badge is dead simple; and, the UX for the subsequent modal is minimal; it's an approach that more websites ought to consider.  An even simpler solution though would be to embed a Cookie consent banner directly into a website's footer, thereby saving users any unnecessary aggrevation from having to interact with it.  After all, the footer's where most websites' Privacy Policy and Terms of Use are located anyway, so it makes sense to put the banner there too.

Regardless of whether any website chooses to adopt ShakeShack's Privacy Badge, most should seriously reevaluate their implementation of the Cookie consent banner -- if only to prevent users from bouncing from their sites or abandoning their shopping carts.  For example, a simple check of the "navigator.language" property in JavaScript to suppress the banner for non-EU countries could be enough for most websites.  (Remember, the Cookie Law only applies to websites that do business in EU countries).  For other websites, remember that nowhere in the ePD does it state that all Cookie consent banners must be implemented in the exact same way; nor has any website ever been sued by the EU over their implementation of a Cookie consent banner.  So, stop following the crowd; put your UI/UX designers to work on a better solution for your website (that still complies with the law).

Comments

  1. Wow, your post is really very useful thanks for sharing for UX Service Agency in USA . It's really informative. keep sharing more with us.

    ReplyDelete
  2. This is excellent information about Professional Website Designer In Usa which is shared by you. This information is meaningful and magnificent for us to increase our knowledge about it. Keep sharing this kind of information. Thank you.

    ReplyDelete
  3. Wow, your post is really very useful thanks for sharing about $1 Web Hosting. It's really informative. keep sharing more with us.

    ReplyDelete
  4. It is truly a well-researched content and excellent wording. I got so engaged in this material that I couldn’t wait to read. I am impressed with your work and skill. Thanks. UI and UX Design Company

    ReplyDelete
  5. This post is Awesome. It’s helped me a lot. Please keep up your good work. We are always with you and Waiting for your new interesting post. Visit also Cloud Vps Hosting Services Provider

    ReplyDelete
  6. Du har en ægte kapacitet til at sammensætte et stof, der er nyttigt for os. Du har delt et fantastisk indlæg om Markedsføringsbureau Danmark. Vi er meget taknemmelige for din indsats for at dele sådanne oplysninger med os.

    ReplyDelete
  7. I would like to thank you for the efforts you had made for writing this awesome article. Custom WordPress Development Company This article inspired me to read more. keep it up.

    ReplyDelete
  8. I will share it with my other friends as the information is really very useful. Keep sharing your excellent work. finance app development

    ReplyDelete
  9. Loved your blog page!!! The stuff that you have remarked up here is superbly wonderful and I vigorously thank you for the same… social media marketing services india

    ReplyDelete
  10. Wow, your post is really very useful thanks for sharing about Nanotechnology Based Company In India. It's really informative. keep sharing more with us.

    ReplyDelete
  11. This post is very nice and informative. Thanks for sharing Info about IT consultant London. I am waiting for your next post. Keep it up.

    ReplyDelete
  12. You can also check this one and can share your opinions on Sports Wear Online Shopping

    ReplyDelete
  13. We appreciate you sharing such excellent information with us. You are working so hard, and it shows. Everyone can benefit greatly from this information. Keep going. Thanks. Find out more details about art framing miami

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. This post is Awesome. It’s helped me a lot. Please keep up your good work. We are always with you and Waiting for your new interesting post. Visit also Credit Repair Software White Label

    ReplyDelete
  16. In addition to expressing my gratitude for writing such an informative article, I would like to thank you for providing some useful information React Native Developer. Keep up the excellent work.

    ReplyDelete
  17. All of the beneficial casinos right here are|listed below are} respectable websites that maintain players secure. They respect playing guidelines and age restrictions, offering a superb real cash gaming expertise in a secure surroundings dedicated to players' welfare and security on-line. After security and legitimacy, you wish to 토토사이트 a glance at|have a look at} the payout percentage of an online slot.

    ReplyDelete

Post a Comment

Popular posts from this blog

The Crucial Role of Service Level Agreements (SLAs) and Service Level Objectives (SLOs) in Software Applications

In today's digital era, software applications are at the heart of business operations and customer experiences. From e-commerce platforms to enterprise solutions, the performance and reliability of software applications can make or break an organization's success. To ensure seamless operations and meet customer expectations, having robust Service Level Agreements (SLAs) and Service Level Objectives (SLOs) in place has become paramount. In this blog post, we will explore the importance of SLAs and SLOs and how they contribute to the success of software applications. Defining SLAs and SLOs A Service Level Agreement (SLA) is a contractual agreement between a service provider and a customer that defines the level of service expected. It outlines the metrics and targets the service provider commits to achieving, such as uptime, response times, and resolution times. SLAs establish a mutual understanding between the parties involved and provide a framework for measuring and managing s

Using HTML tables for website layout

I first became a front-end web developer in the year of our Lord, 1998.  Back then, the HTML specification had just reached version 4.0; Internet Explorer 7 was the dominant browser; and, the mantra of separation-of-concerns  was still being preached to web developers.  (Back then merely uttering the phrase CSS-in-JS  would've gotten you killed, professionally speaking.)  What's more, back then, HTML tables were still de rigueur; in fact, many websites used them for layout purposes ( DIV-itis hadn't caught on with the masses as yet; that would happen several years later.) Yes, it was the stone ages of the web -- in comparison to today.  Today, there's a wealth of newer technologies for developers to choose from when building websites, i.e. HTML5 , CSS4 , ES9 , etc.  Long gone is the mantra of separation-of-concerns and in its place sits CSS-in-JS, mockingly.  And, long gone are table-based layouts too; they gave way to the aforementioned DIV-itis phenomenon and t