In this blog post, we explain the design of the 1st layer of Signatu’s Cookie Consent Banner. We use CNIL’s draft recommendation on "cookies and other trackers" as benchmark for the design of Signatu’s Cookie Consent Banner.

The 1st layer of Signatu’s Cookie Consent Banner is designed like this:

The design of the 1st layer of Signatu’s Cookie Consent Banner.

Design rationale

What are the set of reasons that justify the design of the 1st layer of Signatu’s Cookie Consent Banner?

Company Name

At the top of the banner, the introductory text says in the first sentence:

At ACME Company we use cookies on our site.

It is the website publisher that is responsible for informing end users about the cookies etc and asking end users for their consent.

Hence, it is essential that the website publisher informs the end user about the identity of the company that asks for consent.

Thus, Signatu automatically feeds the name of the website publisher into the cookie banner text where "ACME Company" appears.

CNIL’s draft recommendation on "cookies and other trackers" says that:

The user must be able to find out the identity of all those responsible for the processing operation(s) before being able to give consent or refuse to give his or her consent. He or she must therefore be fully aware of the effective scope of his or her consent.
The design of the 1st layer of Signatu’s Cookie Consent Banner.

Third party name

Also, it is the website publisher that is responsible for informing end users about the cookies set and resources loaded from third parties. Signatu automatically feeds the name of the third parties into the cookie banner text in a deeper layer of the banner.

On this point, CNIL’s draft recommendation on "cookies and other trackers" says that:

Pursuant to this requirement, the exhaustive list of controllers of the processing operation(s) should be made available to the user upon obtaining consent and permanently made easily accessible.

We will comment on this in an upcoming blog post.

At the top of the banner, the introductory text says in the first sentence:

At ACME Company we use cookies (?) on our site.
The design of the 1st layer of Signatu’s Cookie Consent Banner.

After the word "cookies", there is a tooltip in the form of a question mark that end users can hover, without clicking it, to view the tooltip content.

The tooltip content explains the meaning of the word "cookies" and looks like this:

The design of the 1st layer of Signatu’s Cookie Consent Banner.

Required Cookies

At the top of the banner, the introductory text says in the second sentence:

Required cookies are used to make our site work.

The expression "required cookies" are used to express that some cookies are always in use (since they are exempted from the consent requirement).

On this point, CNIL’s draft recommendation on "cookies and other trackers" says that:

the consent requirement does not apply to operations whose exclusive purpose is to carry out the transmission of a communication over an electronic communications network or which are strictly necessary for the provision of an online communication service explicitly requested by the user.
The design of the 1st layer of Signatu’s Cookie Consent Banner.

Optional Cookies

The third sentence in the introductory text says:

Optional cookies are used to improve the site performance for the purposes described below.

The expression "optional cookies" are used to express that some cookies are not exempted from the consent requirement.

The banner says that these cookies are cookies whose purposes are described below.

Hence, the banner prepares the end user to make a choice with regard cookies whose purposes follow below.

The design of the 1st layer of Signatu’s Cookie Consent Banner.

Privacy Policy

At the top of the banner, the introductory text says in the fourth sentence:

Find out more in our Privacy Policy.

It is the website publisher´s Privacy Policy link that is linked to in the introductory text, whereas the Privacy Policy links to the third parties are presented in a deeper layer (that we will comment on in another blog post).

On this point, CNIL’s draft recommendation on "cookies and other trackers" says that:

In practice, in order to reconcile the requirements of clarity and conciseness of information with the need to identify all those responsible for the processing operation(s), specific information on these entities (identity, link to their privacy policy) may be given on a second level of information. They can be made available on the first level via, for example, a hyperlink or a button accessible from this level.

The design of the 1st layer of Signatu’s Cookie Consent Banner.

Preparing the end user to make a choice

Beneath the introductory text (at the top of the banner), a sentence asks the end user a question that says:

We ask for your acceptance for these purposes

Hence, the banner prepares the end user to make a choice with regard to the purposes that follow below.

The design of the 1st layer of Signatu’s Cookie Consent Banner.

Purpose Titles/Categories

Beneath the introductory text (at the top of the banner) and the question to the end user, the banner presents in the left side column the purpose titles/categories.

CNIL’s draft recommendation on "cookies and other trackers" says that:

In order to facilitate the reading for the user, the Commission recommends that each purpose be highlighted in a short and prominent title (...) .

CNIL’s draft recommendation on "cookies and other trackers" says that:

In the case of a website, the fact that the trackers are deposited via the domain to which the site in question belongs, or via a sub- domain of the same publisher, or via the domain of a third party, has no effect on the obligations arising from Article 82 of the "French Data Protection Act" law. The obligation to obtain consent is attached to the purpose of the tracker and not to the technical characteristics of its implementation.
The design of the 1st layer of Signatu’s Cookie Consent Banner.

Purpose Title/Category Descriptions

Beneath the introductory text (at the top of the banner) and the question to the end user, the banner presents in the right side column the purpose title/category descriptions that correspond to the purpose titles/categories in the left side column.

CNIL’s draft recommendation on "cookies and other trackers" says that:

In order to facilitate the reading for the user, the Commission recommends that each purpose be highlighted in a short and prominent title, which would be accompanied by a brief description.
The design of the 1st layer of Signatu’s Cookie Consent Banner.

Lines to Separate Each Purpose

With a horizontal line, the banner separates each purpose title/category and description from any other purpose title/category and description in order not to bundle them together, which is prohibited.

The design of the 1st layer of Signatu’s Cookie Consent Banner.

Buttons for choice

Underneath the purpose titles/categories and descriptions, the banner presents buttons at the same level, in the same format and with no visual emphasis to accept rather than refuse and with a font of the same size.

The buttons are as follows:

  • accept all cookies.
  • decline all cookies.
  • accept some cookies.

On this point, CNIL’s draft recommendation on "cookies and other trackers" says that:

(T)he person responsible for the processing operation(s) should offer the user both the possibility of accepting and not accepting (in other words, of refusing) the read and/or write operations.
(T)he same degree of simplicity should apply to the ability to consent or not to consent. The ability to express refusal as easily is indeed the counterpart of the ability to express free consent. Therefore, in order not to affect the user's freedom of choice, the mechanism for expressing consent should be presented at the same level and in the same technical manner as the mechanism for expressing refusal.
(T)hese interfaces should not use potentially misleading design practices, such as the use of visual grammar that might lead the user to think that consent is required to continue browsing or that visually emphasizes the possibility of accepting rather than refusing.
In practice, a request for consent could take the form of boxes that the user may choose to check to express his or her consent. The person responsible for the processing operation(s) may also use sliders that can be activated to express consent or refusal of the trackers. The user may also have the choice between two buttons presented at the same level and in the same format (...).

The buttons enable the end user to accept all cookies or decline all cookies, and enables the end user to accept or decline each separate purpose by clicking "CUSTOMIZE PREFERENCES".

On this point, CNIL’s draft recommendation on "cookies and other trackers" says that:

The Commission considers that the obligation to obtain specific consent does not preclude the possibility of offering the user the ability to consent globally for a range of purposes, provided that: all the purposes have been presented to the user beforehand; the user is also allowed to consent purpose per purpose; the user is provided with the option to refuse globally at the same level and under the same conditions as the option to consent globally.
Thus, in order to facilitate the navigation of the Internet user, it is possible to propose global acceptance and refusal buttons via, for example, the presentation of buttons entitled "accept all" and "refuse all", "I authorise" and "I do not authorise", "I accept all" and "I do not accept anything" or "I agree to all purposes" and "I do not agree", allowing him to consent or refuse, in a single action, to several purposes. However, in order to ensure that the user has not been induced by design choices to accept rather than to refuse, it is recommended to use buttons and a font of the same size, offering the same ease of reading, and highlighted in the same way.
(T)he possibility of granular consent or refusal can be offered in different ways. For example, the user could be offered to accept or refuse purpose per purpose directly on the first level of information. He or she may also be asked to click on each purpose so that a drop-down menu offers him or her "accept" or "decline" buttons. It is also possible to include a button, on the same level of information as the links or buttons allowing to accept and refuse everything, and allowing to access the choice purpose per purpose. In this case, a descriptive and intuitive name should be used so that users can be fully aware of the possibility of exercising a choice by purpose. As an example, a button "customize my choices" or "decide by purpose" allows you to clearly indicate this possibility.

Beside the buttons to accept or decline, the banner presents to the end user a button that reads "CUSTOMIZE PREFERENCES". Clicking that button enables the end user to withdraw consent at any time (in an upcoming blog post we will show the design of "CUSTOMIZE PREFERENCES").

On this point, CNIL’s draft recommendation on "cookies and other trackers" says that:

Users who have given their consent to the use of trackers must be able to withdraw it at any time. The Commission reminds that it must be as simple to withdraw as it is to give consent.
Users must be informed in a simple and intelligible manner, even before giving their consent, of the options available to them for withdrawing their consent, or even of the period of validity of their consent if such a period has been defined.
The design of the 1st layer of Signatu’s Cookie Consent Banner.

This option is available on all pages of a website by clicking on the icon to the bottom right of each URL.

On this point, CNIL’s draft recommendation on "cookies and other trackers" says that:

In practice, the Commission recommends that solutions allowing the user to withdraw consent should be easily accessible throughout the use of the service. The simplicity of access can be measured by the time spent and the number of actions required to access the withdrawing mechanism.
The possibility of withdrawing consent may, for example, be offered via a link accessible at any time from the service concerned, in order to ensure that users can withdraw their consent with the same ease as they gave it. It is recommended to use a descriptive and intuitive name such as "cookie management module" or "manage my cookies" or "cookies", etc. The publisher of a website can also provide the user with a configuration module accessible on all the pages of the site by means of a "cookie" icon, located at the bottom left of the screen, enabling him to easily withdraw his consent.
In any event, the Commission recommends that the mechanism for withdrawing consent be placed in an area that attracts the attention of users or in areas where the user expects to find it, and that the visuals used be as explicit as possible.
The design of the 1st layer of Signatu’s Cookie Consent Banner.

Buttons for no-choice

At the top right corner, the banner presents a cross that enables the end user to close the banner, and, hence, not make a choice.

On this point, CNIL’s draft recommendation on "cookies and other trackers" says that:

Moreover, nothing prohibits the person responsible for the processing operation(s) to provide the user with the possibility of not making any choice and delaying his or her decision, as long as the user is given the choice between acceptance and refusal. The situation in which the user does not express any positive choice must be distinguished from the situation of refusal. In the absence of any manifestation of choice (neither acceptance nor refusal), no trackers requiring consent should be written. The user could then be asked again as long as he or she does not express a choice.
(I)n order to allow the user not to make a choice, the person responsible for the processing(s) may integrate a closing cross on the interface for collecting consent, or allow the user to make it disappear by clicking outside the interface, for example.

Button Texts

Inside the buttons there are texts:

  • "I´M OK WITH THAT" to express accept all cookies.
  • "DECLINE" to express decline all cookies.
  • "CUSTOMIZE PREFERENCES" to express accept some cookies.

On this point, CNIL’s draft recommendation on "cookies and other trackers" says that:

The user may also have the choice between two buttons presented at the same level and in the same format, with "accept" and "refuse", "allow" and "forbid", or "consent" and "do not consent", or any other equivalent wording that is sufficiently clear to the user.

The design of the 1st layer of Signatu’s Cookie Consent Banner.

Action texts

Underneath the buttons there are texts that indicate the meaning of clicking the buttons and the consequences of clicking the buttons.

The wording in the buttons and the action texts need to be consistent (which they are not in the example below (we will fix this :-)).

The design of the 1st layer of Signatu’s Cookie Consent Banner.

Date

At the bottom left of the banner, the banner shows a date that is the date when the banner was last updated with information.

The banner information is automatically updated with information, including Trackers, from the scans of the website that Signatu performs.

On this point, CNIL’s draft recommendation on "cookies and other trackers" says that:

(The) list (of controllers) should be regularly updated.
The design of the 1st layer of Signatu’s Cookie Consent Banner.

Dark Mode

The banner can be presented in dark mode.

The design of the 1st layer of Signatu’s Cookie Consent Banner.

If you have any questions, you can send me an email at:

hello@signatu.com