Nous adorons le web. Nous aurions tous dû trouver d’autres carrières sans l’incroyable invention de Sir Tim Berners Lee ! Mais malgré notre passion, le web peut être un endroit désagréable.
Les motifs sombres peuvent être involontaires. Un spécialiste du marketing ou un développeur a peut-être cru faire ce qu’il fallait mais n’a pas apprécié les problèmes et les inconvénients d’une fonctionnalité qu’il a mise en place. Les pires motifs sombres sont intentionnels. Une page vous pousse à faire quelque chose que vous n’aviez pas l’intention de faire parce que l’interface utilisateur ou la formulation manipule vos actions. Les utilisateurs sont de plus en plus avertis des techniques les plus douteuses, mais quelqu’un, quelque part, ne se rendra pas compte qu’il a été dupé jusqu’à ce qu’il soit trop tard.
Lorsqu’il est bien utilisé, le web permet d’économiser du temps, des déplacements et de l’énergie. D’un autre côté, les motifs sombres gaspillent des millions d’heures de travail et de kilowatts. Nous ne ferons pas honte à des sites particuliers (ils savent qui ils sont), mais nous illustrerons les améliorations et les options alternatives lorsque cela est possible.
Ce sont nos bêtes noires.
Interfaces utilisateur peu intuitives
Ce sont les motifs sombres les plus courants que vous rencontrerez. Il faut du temps et de la réflexion pour créer une excellente expérience utilisateur… et vous pouvez gâcher tous ces efforts très rapidement avec ces motifs sombres et gênants.
« Installez notre application ! »
Certains sites et réseaux sociaux vous invitent à installer leur application – généralement lorsque vous cliquez sur une alerte e-mail concernant un nouveau message ou un nouveau follower. Le lien s’ouvre sur une page web avec deux boutons :
- Un énorme bouton « Utilisez notre application ». Cliquer dessus mène à l’AppStore, où vous devezs approuver, télécharger, installer, puis lancer l’application native du site (en supposant qu’elle soit prise en charge par votre téléphone). Vous devez ensuite vous connecter, vous tromper de mot de passe, demander une réinitialisation, ouvrir le lien, créer un nouveau mot de passe et accéder au système. Vous avez peut-être oublié pourquoi vous étiez là, alors retournez à l’alerte initiale et recommencez.
- Un lien microscopique « continuer sur le web mobile » pour effectuer l’action.
Peut-être que l’application est glorieuse et que des millions ont été dépensés pour elle, mais il est rare d’en trouver une avec plus de fonctionnalités que le site web. Bien sûr, une application peut collecter plus de données personnelles qu’un système web, elle bénéficie donc d’une promotion plus intrusive.
Faîtes la promotion d’une application par tous les moyens, mais le faire au début de chaque interaction agace les utilisateurs. Certains installeront l’application pour arrêter le harcèlement, mais d’autres partiront. Serait-il plus efficace de proposer l’application lorsque l’utilisateur utilise le site depuis un certain temps ?
« Voulez-vous recevoir des notifications ? »
En un mot : Non.
Les inscriptions à la newsletter, les notifications push sur le web, les widgets « Discutons » et les invitations à participer à des enquêtes pourraient être utiles, mais leurs mises en œuvre sont universellement horribles.
Les sites vous invitent souvent à vous abonner au moment où vous y accédez pour la première fois suite à une recherche sur le web. À ce moment-là, vous n’avez aucune idée si le contenu est pertinent, s’il est bon ou si le site est un endroit que vous envisageriez de visiter fréquemment. Il n’est pas surprenant de découvrir que la plupart des gens cliquent sur « Non »
Il n’y a rien de mal à proposer des notifications ou des newsletters, mais il vaut mieux s’assurer qu’un utilisateur s’est d’abord engagé sur le site. Affichez peut-être une invitation à la fin de l’article ou après qu’ils aient visité le site plusieurs fois. C’est moins intrusif, moins distrayant et plus susceptible de réussir.
Enfin, n’invitez pas les utilisateurs à s’inscrire à une newsletter lorsqu’ils cliquent sur un lien dans la newsletter ! Cela les fera fuir plus vite que cela ne les attirera.
Navigation excentrique
Les barres d’en-tête et les menus déroulants sont peut-être ennuyeux, mais les gens les comprennent. Nous ne voulons pas arrêter l’évolution de l’interface utilisateur et l’inventivité du design, mais certains contrôles de navigation sont bizarres et illogiques.
Repensez votre conception si vous devez inciter les utilisateurs à utiliser des info-bulles « Cliquez ici » ou d’autres méthodes d’aide. Les bonnes UI n’ont pas besoin d’explication.
Encombrement de défilement inutile
Afficher des animations ou mettre à jour les éléments de menu actifs lorsque la page défile peut être une expérience intéressante. C’est moins utile lorsque :
- Les animations sont trop utilisées. Animer trop d’éléments distrait le spectateur – mettre en évidence chaque élément signifie que rien n’est porté à l’attention de l’utilisateur. Quelques effets subtils pour se concentrer sur les messages importants fonctionnent mieux.
- Cela rompt le contexte. Le défilement ne doit pas entraîner d’actions inattendues telles que la disparition du contenu, des dialogues, des envois de formulaires, des redirections vers d’autres pages, etc.
L’animation peut aussi provoquer le mal des transports et le vertige, alors pensez à utiliser la requête média CSS prefers-reduced-motion pour désactiver les effets.
Arrêtez de créer des pages à défilement infini ! Les liens vers du contenu similaire sont utiles, mais le chargement automatique de contenu aléatoire sans le consentement de l’utilisateur gaspille la bande passante. Il est difficile de mettre une page en signet, ce qui rend impossible l’accès aux coordonnées et autres informations dans le pied de page.
Articles multi-pages inutiles
Nous avons tous vu des « articles » qui contiennent un paragraphe de texte suivi d’un lien vers la page suivante. Ces pages sont généralement des appâts à liens sans contenu substantiel – mais vous ne le découvrirez pas avant d’avoir pataugé dans une multitude de publicités et d’impressions de pages.
Il est inutile de demander aux spécialistes du marketing web de mettre fin à cette pratique, mais peut-être qu’ils reconsidéreront leur position si les développeurs sensibilisent les gens à ne pas succomber à cette absurdité !
Marketing manipulateur
Le web est le plus grand marché du monde, avec la capacité de vendre une variété infinie de produits physiques et numériques. Les utilisateurs reviendront encore et encore… à moins que vous ne choisissiez de recourir à des motifs sombres pour stimuler les ventes.
Problèmes d’abonnement
Se désabonner des notifications ou des newsletters devrait être aussi simple que de s’abonner, si ce n’est plus. Demander aux utilisateurs de sauter des obstacles de désabonnement entraîne de la frustration et une perte de confiance dans le site. Il n’y a aucune raison crédible de demander aux utilisateurs de faxer leur certificat de naissance original, trois preuves d’adresse et les derniers dossiers médicaux.
Publicités déguisées
Les publicités sont sur-utilisées sur de nombreux sites, mais les pires exemples :
- Ressembler à un menu ou à une option ;
- Faire semblant d’être des articles d’actualité ou d’information du site d’origine ; ou
- Afficher des contrôles de l’interface utilisateur, comme un gros bouton « TÉLÉCHARGER » sur une page concernant un produit logiciel.
Les sites ne peuvent pas toujours déterminer le design de la publicité utilisée, mais ils contrôlent le placement. Placer des publicités à des endroits bien visibles pour embrouiller les gens peut augmenter les revenus publicitaires, mais ces utilisateurs reviendront-ils ?
Ajout automatique de produits au panier d’achat
Voir une liste de produits associés ou recommandés peut être utile. Les ajouter au panier de l’utilisateur sans son consentement est une autre affaire. Combien de personnes trouveront cela utile ?
- Au mieux, une petite proportion d’utilisateurs remarquera l’élément supplémentaire et décidera de le conserver.
- Une proportion plus importante le supprimera.
- Certains ne le remarqueront pas avant la livraison, puis se plaindront et demanderont un remboursement.
Ces activités augmentent les ventes au détriment de l’assistance à la clientèle, de la bonne volonté et des achats de retour en cours. Gérer les plaintes et les remboursements peut annuler toute augmentation à court terme de la rentabilité.
Coûts cachés des achats
Il n’est pas agréable de passer du temps à choisir un produit, à s’inscrire, à saisir ses coordonnées de livraison et à publier ses informations de paiement pour découvrir que le prix a augmenté par rapport aux sites concurrents. La page récapitulative indique maintenant les coûts cachés tels que les frais de livraison, d’assurance, de manutention et les frais « nous-espérons-que-vous-ne-remarquerez-pas-ces-frais ».
La tarification doit être claire et honnête, sinon les clients perdront confiance dans le service de eCommerce. Lorsque les frais de livraison varient considérablement, invitez l’utilisateur à saisir son pays ou son code postal avant de s’engager à acheter.
Rareté artificielle des stocks et minuteurs de disponibilité
Il est utile de savoir quand un article est en stock, mais certains sites de eCommerce étirent leur crédibilité. Plus ils donnent d’informations, moins ils sont crédibles :
« ACHETEZ MAINTENANT ! 2 articles en stock, 15 ont été achetés au cours des 3 dernières minutes, et 597 personnes consultent cette page. »
Ces tactiques de mise sous pression deviennent plus suspectes lorsqu’elles sont appliquées à des articles numériques ou de grande valeur comme les voitures et les vacances.
Les utilisateurs se rendent vite compte que ces messages n’ont aucune valeur lorsque les articles restent en stock pendant plusieurs jours. Poursuivront-ils leur achat lorsque les messages marketing du site ne sont pas dignes de confiance ?
La honte du refus (opt-out)
Même certaines grandes entreprises de eCommerce se livrent à des techniques de honte stupides. Elles présentent une question d’inscription suivie d’un grand bouton « J’accepte » et d’un lien de désinscription plus petit, comme par exemple :
- « Non – Je ne veux pas de livraison gratuite illimitée. »
- « Non – Je ne me soucie pas du sort des animaux à peluches en voie de disparition. »
- « Non – Je veux voir la planète brûler. »
Cette pratique fonctionne-t-elle ? Peut-être. Mais permet-elle d’établir une relation honnête avec le client et d’accroître la confiance dans le site ?
Annulations complexes de cookies
Le Règlement général sur la protection des données (RGPD ) de l’UE exige que les sites affichent un avis d’annulation pour les cookies non essentiels et les technologies de suivi similaires. C’est imparfait, mais la législation est bien intentionnée et constitue une obligation légale dans toute l’Europe. D’autres pays peuvent avoir des règles similaires, même si elles sont généralement moins strictes.
La plupart des utilisateurs accepteront et passeront à autre chose sans réfléchir (ce qui va partiellement à l’encontre de l’objectif de la législation). Se désinscrire devrait être tout aussi facile, pourtant certains sites vous obligent à :
- parcourir des pages/onglets de jargon avant de trouver les options ;
- cliquer sur des dizaines de cases à cocher même si cela enfreint les règles du RGPD ; et
- attendre jusqu’à une minute pendant qu’ils « enregistrent vos préférences ».
Cela peut convaincre certains utilisateurs de cliquer sur « tout accepter », mais d’autres abandonneront le site ou passeront en mode lecture pour cacher l’avis de cookie. Au mieux, rendre les refus difficiles donne l’impression que le site a quelque chose à cacher. Au pire, ce modèle sombre est à la limite de la légalité et pourrait entraîner des amendes ou une augmentation des frais d’avocat.
Terrible technologie
Les technologies telles que le HTML sont utilisables, accessibles et rétrocompatibles dès le départ. Il faut un effort particulier pour se débarrasser de ces avantages.
Briser la fonctionnalité du navigateur
Le bouton retour a été la plus grande contribution du web aux interfaces utilisateur. Il est pratique et compris par toute personne ayant une expérience technique minimale. Pourtant, les sites le brisent en ouvrant de nouvelles fenêtres/onglets, en expirant la page précédente ou en disant aux utilisateurs de ne pas utiliser les contrôles du navigateur.
Il n’y a aucune raison technique de briser la fonctionnalité du navigateur. Tenter de contourner les contrôles est un problème de conception qui perturbe les utilisateurs et rend un système web moins utilisable.
Autres problèmes à éviter :
- Ne désactivez pas les menus du clic droit ou du tapotement long.
- Ne désactivez pas la copie et n’ajoute pas de texte « utile » supplémentaire.
- Ne cassez pas les signets dans votre application à page unique en omettant de mettre à jour l’URL.
Mais le pire de tous ces problèmes est le prochain sur notre liste.
Désactiver le collage sur les champs de mot de passe
Désactiver le collage pour quelque raison que ce soit est inutile. Désactiver le collage sur un champ de mot de passe est odieux, mais vous rencontrerez cette restriction sur les grands sites – ils devraient être mieux informés. J’ai vu de grandes banques internationales l’utiliser.
Cette pratique est probablement mise en œuvre pour des raisons de sécurité douteuses. Si l’utilisateur ne peut pas coller, il est logique qu’il ne puisse pas réutiliser un mot de passe provenant d’ailleurs. Malheureusement, cela empêche aussi les gens d’utiliser une application de gestion des mots de passe. Il n’est plus possible de générer des chaînes aléatoires longues et hautement sécurisées qui ne sont pas pratiques à saisir.
De plus, les développeurs peuvent désactiver les restrictions de collage en bricolant un peu avec DevTool. Les autres auraient du mal, et ils sont plus susceptibles d’utiliser des mots de passe faibles. Ne désactive z jamais le collage – c’est moins de travail pour vous et cela améliore la sécurité du système.
Restrictions stupides sur les mots de passe
« Votre mot de passe doit comporter entre 8 et 12 caractères et nécessite au moins une majuscule, un chiffre et un symbole – mais n’utilisez pas « ‘ » ou « ; »
Il n’y a aucune bonne raison de mettre en place des restrictions strictes sur les mots de passe. Posez-vous la question :
- Le système stocke-t-il le mot de passe en texte brut dans une base de données plutôt que de le hacher ?
- Un expert en sécurité a-t-il suggéré d’empêcher les gens d’utiliser des mots de passe faciles comme password, qwerty ou 123456 ? C’est vrai, mais cela empêche aussi les gens d’utiliser des mots de passe plus complexes et fournit un modèle pratique pour le craquage par force brute.
Une seule règle permet d’imposer des mots de passe forts : une longue longueur minimale. Chaque caractère supplémentaire augmente de façon exponentielle la complexité et le temps de craquage.
Saut de contenu mobile
Lire du contenu sur un smartphone peut être une expérience frustrante. Vous êtes absorbé par un article lorsque le contenu saute hors de l’écran et que vous perdez votre place. Vous passez alors plusieurs secondes à faire défiler frénétiquement le contenu de haut en bas. Ou pire, vous cliquez sur un lien ou un bouton au moment où il bouge, et une action inattendue se produit. Certains lecteurs vont perdre leur élan, abandonner et partir avant que vous puissiez les convertir en client.
Le saut de contenu se produit lorsqu’une image ou une iframe (généralement une publicité) se charge au-dessus du point de défilement du viewport. Une fois le contenu chargé, le navigateur peut déterminer ses dimensions et le placer sur la page. Par conséquent, une image de 500 px de hauteur (affichée en taille réelle) pousse le contenu vers le bas de la même quantité.
La métrique CLS (Cumulative Layout Shift) de Google mesure les sauts de contenu et pénalise les sites en conséquence. Ce problème était complexe, mais plusieurs solutions techniques sont désormais disponibles :
- Ajoutez des attributs de largeur et de hauteur aux éléments HTML
imgetiframeou utilisez la propriété CSSaspect-ratiopour réserver un espace sur la page avant le chargement de la ressource. - Définissez les dimensions des éléments conteneurs renfermant des ressources à chargement plus lent comme les publicités, les images et les widgets de réseaux sociaux.
- Demandez des images plus grandes dès que possible et envisage d’utiliser des liens de préchargement dans votre HTML
head. - Optimisez l’utilisation des polices web et utilisez des éléments de repli de taille similaire pour minimiser les décalages de mise en page.
- Évitez d’insérer des éléments vers le haut de la page, sauf s’il s’agit d’une mise à jour DOM déclenchée suite à une action de l’utilisateur, comme un clic.
- Utilisez le confinement CSS pour optimiser le rendu des blocs de contenu. Il est possible de définir des éléments qui n’affecteront pas le dimensionnement ou la position des autres.
Quand la connexion sociale est nulle
Les technologies comme OAuth permettent aux utilisateurs de s’inscrire rapidement sur un site en utilisant un autre compte comme Google, Facebook, Twitter, LinkedIn ou Github. Bien mise en œuvre, c’est une option pratique qui offre un processus d’inscription plus fluide, permet de gagner du temps et entraîne des conversions plus élevées.
Si elle est mal mise en œuvre, un site vous demandera par la suite de saisir votre e-mail, vos données personnelles et même un mot de passe « pour leurs enregistrements »
Tous les fournisseurs ne transmettent pas les informations de l’utilisateur, alors évitez OAuth si votre site a besoin de ces détails pour être fonctionnel. OAuth ne doit jamais devenir une étape inutile qui ralentit le processus d’inscription.
Mauvaises performances web
Selon l’archive HTTP, la page web moyenne met sept secondes à se charger sur un appareil de bureau et vingt secondes sur mobile. Une seule page affichée effectue 70 requêtes HTTP, télécharge plus de 2 Mo de données et émet 1,3 g de CO² dans l’atmosphère (voir le Website Carbon Calculator). Il s’agit d’une moyenne – de nombreux sites sont pires.
Personne ne cherche à créer un site lent, mais l’ajout de fonctionnalités est souvent plus important que l’amélioration des performances. Étant donné qu’il est possible de créer un clone de Quake jouable de 13 Ko, on peut se demander pourquoi deux paragraphes d’argumentaire marketing sur une page « À propos de nous » nécessitent un téléchargement 154 fois plus important !
Pour résoudre le problème de la performance, il faut une combinaison de techniques, mais il faut se souvenir d’un point essentiel : n’envoyez pas trop de choses !
Widgets de réseaux sociaux sournois
Les widgets de réseaux sociaux tels que les boutons « J’aime » ont l’air innocent mais.. :
- Chacun d’entre eux ajoute des centaines de kilo-octets de code JavaScript qui ont un impact sur les performances de la page.
- Le code représente un risque pour la sécurité car il s’exécute avec les mêmes autorisations que le JavaScript du site.
- Les widgets mettent en œuvre le suivi des utilisateurs même lorsqu’ils ne sont pas activés. Cela pourrait entraîner des problèmes juridiques dans certains territoires.
- Presque personne ne les utilise : vous aurez la chance de voir 1% d’engagement des utilisateurs.
Ces widgets sont également inutiles. La plupart des sites de réseaux sociaux fournissent des liens standard qui conservent le partage sans aucun risque pour les performances, la sécurité ou la confidentialité, par ex.
- E-mail
mailto:?subject=[title]&body=[url] - Facebook
https://www.facebook.com/sharer.php?u=[url] - Twitter
https://twitter.com/share?url=[url]&text=[title] - LinkedIn
https://www.linkedin.com/shareArticle?url=[url]&title=[title] - Reddit
https://reddit.com/submit?url=[url]&title=[title]
Où [url] est l’URL de la page actuelle et [title] est le titre principal. Un lien standard <a> fonctionne bien, mais vous pouvez l’améliorer pour ouvrir la page dans une fenêtre popup si vous voulez qu’ils se comportent de la même manière que les boutons standard.
CAPTCHAs
CAPTCHA est l’abréviation de Completely Automated Public Turing test to tell Computers and Humans Apart. Il permet d’empêcher les robots ou autres machines d’accéder aux systèmes web. On vous demande souvent de saisir le texte affiché dans une image indéchiffrable ou de cliquer sur des carrés contenant des bicyclettes. (Est-ce qu’un vélo monté sur une voiture compte ? Et ce tricycle ? Y a-t-il un vélo derrière ce mur ?)
Les CAPTCHAs présentent trois problèmes fondamentaux :
- Ils sont volontairement difficiles pour les humains non handicapés ayant une vision parfaite. Comment les personnes ayant une déficience visuelle ou autre sont-elles censées s’en sortir ?
- Ils doivent devenir plus complexes à mesure que les bots et les techniques d’IA s’améliorent.
- Ils font porter la responsabilité de la sécurité de l’accès aux utilisateurs – et non aux propriétaires ou aux développeurs du site, qui en sont les premiers bénéficiaires.
Les CAPTCHA sont excessifs sur la plupart des sites web. Vous pourriez envisager d’autres options que les CAPTCHAs qui demandent moins d’efforts humains :
- Les champs cachés du pot de miel (honeypot) bloquent l’envoi du formulaire lorsque les bots ajoutent des données.
- Vérifiez que les événements clavier tels que
inputoukeydownsont déclenchés de manière appropriée. - Vérifiez le temps qu’il faut pour remplir et envoyer un formulaire – l’activité des robots est souvent instantanée.
- Créez un processus d’envoi en deux étapes qui demande à l’utilisateur de confirmer ses données ou une question supplémentaire avant d’envoyer.
Celles-ci arrêteront la plupart des bots. Il est possible de contourner toutes les techniques, mais cela demande un effort de développement supplémentaire spécifique à votre site. Peu de développeurs de bots s’en donneront la peine quand il y a des milliers d’autres sites avec des vulnérabilités connues.
Résumé
Le web est un endroit formidable, mais quelques pratiques douteuses peuvent ruiner cette perception. Bien sûr, vous pouvez vous faire arnaquer n’importe où, mais le web permet aux auteurs d’atteindre des milliers de personnes avec peu de frais ou d’efforts. Et lorsque de grandes entreprises multimilliardaires utilisent des motifs sombres de manière imprudente, c’est carrément honteux !
Les sites utilisent des motifs sombres parce que cela fonctionne. Mais c’est une pensée à court terme. Les visiteurs deviennent toujours plus avertis des techniques néfastes et peuvent ne jamais revenir.
Faîtes ce qu’il faut, instaurez la confiance dans votre marque et vous conserverez vos clients sans avoir à recourir à des motifs sombres.
Vous avez d’autres idées sur les motifs sombres que vous avez rencontrés ? Partagez-les dans la section des commentaires ci-dessous !
Laisser un commentaire