Data Management

Didomi — Toggles with 3 states

Decorative Arrow Pattern

Since GDPR (General Data Protection Regulation) has been applied (on May 25th, 2018), we started to be greeted with an existential choice on every website we visited : Cereals before milk or milk before cereals?

Ok, I'll stop fooling around, the real choice was about: Cookies or Not cookies? Sometimes you can even choose the ones you want.

We've seen a lot of weird cookie consent banners, but few months ago I downloaded the android app of Decathlon, and as soon as I launched it, something puzzling happened.

What is the issue encountered with the Decathlon app?

Just take a quick look at this screenshot for a few seconds

Screenshots of a cookie consent manager by Dodimi in Decathlon's app - screenshot took in April 2021

Have you seen it? Yes the toggles with 3 states. Can we even call them "toggle" anymore? Because a toggle is supposed to be a switch with 2 possible states : On or Off.

As soon as I saw them, I started thinking:

  • What does that state mean?
  • Does it mean I'm saying Yes and No at the same time?
  • Does it mean I'm saying neither?
  • What would happen if I just decide to close that cookie banner? (close button on the top right corner)
  • How is that action interpreted technically? I mean, does it load cookies or not?
  • ...

I don't need to drag this any longer, I think you got my point. What we have here is a bad choice of component.

What we suggest to improve Decathlon's app

Even though I've stumbled upon this cookie consent banner in Decathlon's app, it's made by Didomi (a Consent Management Platform). So what I would suggest is simply to use a component with 2 states: a proper toggle or a checkbox would do.

While I was designing my suggestion to Didomi, I decided to go back and check if they have improved that cookie consent banner, and it turns out they did, so I'll simply share what they have done so you can see it by yourself.

Screenshots of a cookie consent banner by Didomi in Decathlon's app - screenshot took in September 2021
Screenshot of a cookie consent banner by Didomi on Decathlon's website - screenshot took in September 2021

Global learnings - Takeaways

Consent Management Paltforms job's isn't easy. They have to be aware of every change in data protection regulations and update their software really quickly to avoid legal consequences for their clients. I'm not aware of the constraint that made the bad design or their previous consent banner possible, but what you should take away here is to design for meaning and if possible to stick to widespread design patterns.

When you're designing a new component with multiple states, try to ask yourself :

  • Is every state of this component useful?
  • Is every state communicating its status clearly?
  • Will the user know exactly how to interact and influence that status?

If you want to read more about toggles, take couple of minutes to read this Toggle-Switch Guidelines from the NN Group (Nielsen Norman Group).

What do you think about this article? Feel free to reach out on Linkedin so we can talk about this article or anything related to User Experience Design.

Start the discussion

You can find the discussion about this article on our Tribe. Can't wait to talk with you.

Let's chat on Tribe

Or you can follow up the discussion with us on our Twitter account.

Continue on Twitter

About this suggestion

The suggestions we make are not made thanks to a full and proper user research. At best we did a guerilla study about user behavior. Most of the time, these are suggestions based on our own experience and needs, which don't represent necessarily all end users needs.

Rocket Icon

UX Design case studies directly in you inbox.

Thanks! Magic stuff coming soon! ✨
Oops! Something went wrong while submitting the form.
Recent Case Studies
View All
Link Arrow
Related Case Studies
View All
Link Arrow
Not enough related case studies at the moment. Stay tuned!
Thanks! Magic stuff coming soon! ✨
Oops! Something went wrong while submitting the form.