🍪 THIS WEBSITE USES COOKIES 🍪 @kevinvennitti
Vous ne voulez pas que votre utilisateur clique sur « Refuser les cookies » ? Vous souhaitez lui donner l'illusion du choix sans le laisser choisir ?
Testons les pires #UX (à prendre au 12e degré)
EXPÉRIMENTEZ ⤵️⤵️⤵️ https://t.co/DdQzrR3c0f
(Je vais régulièrement ajouter des expés au fil du temps, donc ❤️ le tweet pour suivre — et détester — les futurs popups 😉)
🍪 1. Escaping button
C'est bien connu, le bouton "Refuser les cookies" ressent quand le curseur approche, et se cache souvent derrière 4 ou 5 actions. Il peut hiberner toute une session…
🕹 Tester : https://t.co/MTTTdFdRWx https://t.co/7KeakuSIqD
🍪 2. Moving confirmation
Il est toujours bon de confirmer l'action de l'utilisateur. Surtout quand cela vous permet de faire accepter les cookies.
🕹 Tester : https://t.co/kxS98hFhlI https://t.co/RXa7HCkWf6
🍪 3. Enlarging button
L'intention est bonne : agrandir le bouton pour que l'utilisateur ne clique pas à côté. Le hasard fait bien les choses, seul le bouton « Accepter les cookies » est concerné. Qu'importe, c'est le meilleur choix, hein ?
🕹 Tester : https://t.co/LaWYf6ef9n https://t.co/5DzNL7E4fb
🍪 4. Toggle binded to mouse
Un toggle switch pour ce choix binaire : accepter ou refuser les cookies. Simple, pratique. Mais quand le curseur s'en mêle, ça influence _un peu_ le comportement du switch.
🕹 Tester : https://t.co/qGGhI4ydQg https://t.co/wjmOnlpcCg
🍪 5. Russian checkbox
1. Décocher la case « Accepter les cookies »
2. Puis décochez les 4 cases
3. Puis décochez les 16 cases
4. Puis décochez les 64 cases
5. Puis décochez les 256 cases
6. Puis décochez les 1024 cases
7. Puis (…)
🕹 Tester : https://t.co/uvqlxcE9GK https://t.co/DYDeaKy7xT
🍪 6. Cursor under the button
Pourquoi le curseur devrait toujours passer au dessus des éléments ?
🕹 Tester : https://t.co/EruINpAxGu https://t.co/BZP3MiOp4O
🍪 7. Cursor teleportation
Il doit y avoir une faille spatio-temporelle quelque part, qui semble avantager un certain bouton.
🕹 Tester : https://t.co/7YeMwIYHzm https://t.co/QmfrhOMbIz
🍪 8. Button pushing button
Vu de loin, l'utilisateur ne peut que refuser les cookies. Fair-play non ? Il faut juste ne pas trop s'approcher.
🕹 Tester : https://t.co/sg5aiArER0 https://t.co/AgnTUpgAP0
🍪 9. Following modal on X
Le bouton « Refuser » existe, il est là : il suffit de l'atteindre.
🕹 Tester : https://t.co/dtyBsu9KA6 https://t.co/i3QiIGMzEG
🍪 10. Cursor too big
Cette fois, ce n'est pas de votre faute : l'utilisateur doit apprendre à penser outside the box.
🕹 Tester : https://t.co/LHZudXwuuE https://t.co/mlcqRFRmQz
🍪 11. Moving modal
.modal {
position: sliding;
}
🕹 Tester : https://t.co/LyQ5rzqPlV https://t.co/pMQg0QVeCh
🍪 12. Everything moves but this button
C'est ce qu'on appelle une interface ludique et pro-active : elle aide l'utlisateur à faire le bon choix, au bon moment.
🕹 Tester : https://t.co/SbwbotytZh https://t.co/qGmJYxVYA6
🍪 13. reGOTCHA©
Vérifiez que votre utilisateur ne soit pas un robot. S'il est humain, il cliquera dans le trou et acceptera les cookies 😎
🕹 Tester : https://t.co/egPVjJgzQr https://t.co/0MBaxoQ9EJ
🍪 14. Toggle switch too heavy
Je crois savoir pourquoi les toggle switch ne sont pas verticaux sur le web 🧐
🕹 Tester : https://t.co/kWG606mu6j https://t.co/svA94RP2mY
🍪 15. Checked or toggled?
Vous vous souciez du confort de l'utilisateur, et vous hésitez entre un toggle switch et une checkbox ? J'ai une solution pour vous.
🕹 Tester : https://t.co/D034iyWKq0 https://t.co/fv3jAsUkEB
🍪 16. Toggle switch in button
Parfois, il faut se remettre en question et donner la possibilité à l'utilisateur de refuser les cookies avec un toggle switch (intégré dans un bouton « Accepter », bien sûr).
🕹 Tester : https://t.co/0pxQDKMa3O https://t.co/yj1mGzGvrO
🍪 17. Select one of one option
Une liste déroulante avec 2 choix. Ou un seul ? 🧐
🕹 Tester : https://t.co/aFpc61DMkp https://t.co/k2KS7XcwIs
🍪 18. Choice too far
À quelques pixels près, vous étiez honnête avec l'utilisateur. À seulement quelques pixels.
🕹 Tester : https://t.co/ON90cqd7Mm https://t.co/TIjvT8ZdQ6
🍪 19. Magnetic button
Bzzzzzzzzzzzzzzzz… SNAP!
🕹 Tester : https://t.co/V26smrWPy3 https://t.co/FS6L0blL60
🍪 20. Decline but accept
Divertissez l'utilisateur, surprenez-le, changez ses habitudes, changez le bouton au clic !
🕹 Tester : https://t.co/5LWYT6yaYS https://t.co/bnKCZuXhul
🍪 21. Radio button
Ce qui est bien avec le champ « radio », c'est qu'il permet de ne choisir qu'un seul choix parmi plusieurs. Encore faut-il qu'il y en ait plusieurs.
🕹 Tester : https://t.co/kIFoDl6Q2i https://t.co/WxSeSS4aED
🍪 22. YES or NO
Recette de l'#UX parfaite :
✅ Une question simple
✅ Deux choix simples YES ou NO
✅ Un champ texte pour que l'utilisateur saisisse son choix
Et l'ingrédient secret : imposer 3 caractères minimum dans le champ texte 👌
🕹 Tester : https://t.co/bx5hik7Nk7 https://t.co/CzrI3zz3zM
🍪 23. reGOTCHA© #2
Franchement, est-ce qu'un robot serait tombé dans le panneau comme ça ?
🕹 Tester : https://t.co/BuqOKyuR4m https://t.co/kGPF2x48fS
🍪 24. Auto-toggle
L'illusion du choix, c'est d'attendre la dernière seconde pour influencer l'utilisateur.
🕹 Tester : https://t.co/eRLhhc3L5k https://t.co/COEIWNKHU3
🍪 25. Snail button
Je sais pas vous, mais je trouve cette interaction désagréable.
🕹 Tester : https://t.co/26iCuydulS https://t.co/PodtGMcv4N
🍪 26. Hover to accept
Si vous frustrez l'utilisateur à ce point, pensez au moins à afficher une popup d'excuse juste après. Avec deux boutons « Accepter les excuses » et « Accepter les excuses ».
🕹 Tester : https://t.co/bVOt284aEj https://t.co/5pgqj1Fodu
🍪 27. Accept cookies to decline
Les cookies nous permettent de vous offrir la meilleure expérience et de vous donner accès à des fonctionnalités inédites, comme la possibilité de refuser les cookies.
🕹 Tester : https://t.co/z6kNWXkVfP https://t.co/CwCKwbPlfD
🍪 28. Button not working
Le meilleur moment pour tromper l'utilisateur ? Attendre qu'il perdre patience avec un bouton défectueux. Effet de surprise assuré 😬
🕹 Tester : https://t.co/kf9tmofup0 https://t.co/k5vCAQwEwQ
🍪 29. Type Y or Y
Clavier défectueux ? Faute de frappe ? Ou un champ texte un peu capricieux qui remplace n'importe quel caractère saisi par un Y ?
🕹 Tester : https://t.co/4lVVyPVHFw https://t.co/ZusmdfAFQJ
🍪 30. Label changes when toggle changes
Oui, vous donnez le choix. Il ne faut juste pas valider.
🕹 Tester : https://t.co/CuysY8ZuMc https://t.co/SxPGokGsBj
