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
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.
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.
