Collab space: Cookie banner

Patterns In progress patterns
1

Hi everyone,

We are currently in the process of creating a cookie banner component.

Background:

We’ve had requests regarding creating a standardised cookie banner component to help clearly partition users that don’t want to be tracked vs. those that don’t mind. The solution piggybacks off European implementation of the component where GDPR has governed a necessity around the user’s control over their privacy, and although not mandated in Australia (from what we understand), it is likely a similar mandate may reach Australia, so the value is high for this component being a standardised inclusion in the NSW Design System.

It also means analytics tooling like heatmapping (like Hotjar) that are commonly used, that record user sessions can safely be used when user consent is obtained.

Potential solution:

The closest implementation we’re imagining is similar to the GOV.UK cookie banner which is WCAG-aligned and has accessibility front of mind.

image
image1437×462 19.2 KB

Notes:

  • When the user clicks the “Accept” button, a secondary notice will appear in the banner, making it thinner, that shows their choice to confirm it and allows them to change their decision on allowing or rejecting the cookies.

    image
    image1437×95 4.11 KB

  • There will be guidance around providing a cookies information page outlining the cookies used and other information around cookie consent and what it means.

  • This solution targets all cookies and doesn’t partition different types of cookies (allowing the user to pick and choose which cookies they do/do not accept).

See it in action

We’d love to hear your thoughts. Do you have any ideas on how it could be presented differently?
Can you think of any potential challenges?

2 Likes
2

Progress Update

Building on our initial findings, we have made some improvements to the cookie banner.

Tiers

Speaking with multiple privacy SME’s we have identified three tiers of privacy settings:

It also highlighted the need for a heavier tier for GDPR and CCPA compliance, especially for agencies interacting with European organisations.

  • Tier 3: Strong for sites that comply with GDPR regulations (must get the user’s consent before you set any cookies that are not strictly necessary.)
    image
    image1080×352 13.9 KB

Design

Button placement

Since we need to display multiple buttons and the width is based on the button text (not fixed), we have moved them to the bottom - under the banner text. They now display horizontally along the bottom of the screen, allowing for a wider range of use cases while maintaining their form.

Banner placement

At the moment especially given the importance of accessibility the consensus is that the banner would appear relative as the first element on the page. Even though we found that around 80% of the banners were fixed to the screen, we didn’t want to run the risk of obstructing any content, and disrupting the reading order for users who rely on tabbing to navigate the page. Part of we also looked at other UI elements such as the Global Alert, which could potentially be displayed at the same time, in the same position so we considered the display priority and other potential conflicts, such as micro-interactions and color use.

Example with ‘Global alert’:

image
image997×457 102 KB

Secondary confirmation notice

We will not be including the secondary confirmation notice at this stage as our research indicates that this strength of privacy in not needed in our context.

Cookie page guidance

Additionally, following best practices for managing settings, we assume there is a need to include a separate cookies page next to the privacy page. This would provide information on how cookies are being used, what cookies are being stored, and allow users to manage their settings. As part of the component guidelines, we would include a separate cookie guidance page on how to write a cookies page.

Next steps

We will be further evaluating the cookies guidance page.

In the meantime, your feedback is greatly appreciated and will help identify any additional areas of improvement. Please let us know what you like about it, what you would change or any other suggestions you may have.