Kévin Vennitti
@kevinvennitti
Thu Jun 27 17:15:16 +0000 2019

🍪 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