Les 10 principales erreurs de conception web en 2021 #UX

La sélection de ces problèmes ergonomiques répond à deux critères :

• la pénibilité : ces erreurs nuisent vraiment à l’expérience utilisateur
• la fréquence : elles sont commises par un grand nombre de sites web

Les pires erreurs de conception web en 2021

Commençons par une infographie en guise de sommaire et de résumé

1. Popups et fenêtres modales

Bandeau cookies, abonnement à la newsletter, like facebook, promotion de produit, tchat et parfois même une enquête pour montrer qu’on se soucie tellement de l’expérience utilisateur ! Tous ces contenus sont autant d’obstacles entre l’utilisateur et son objectif. Le visiteur passe son temps à fermer des fenêtres qu’il n’a pas ouvertes et qu’on lui impose. Ce fléau est depuis des années en première position des erreurs de conception.

Cliquer sur le lien d’un article de presse
– Fenêtre RGPD
– Fenêtre cookies
– Fenêtre pub
– Fenêtre abonnement
Renoncer à lire l’article
Fermer la page
– Fenêtre « Merci de noter l’article »
– Fenêtre « Cet article peut aussi vous intéresser »
– Fenêtre pub
Freeze de l’écran
S’enfuir

— Nawak (@NawakP) February 16, 2019

Ma reco : le bandeau cookies est une obligation légale, les autres pop-ups et fenêtres modales sont donc à proscrire, ou à déclencher au bon moment. Rien de pire que de proposer un abonnement à une newsletter à quelqu’un qui vient d’arriver. C’est comme si on vous proposait une carte de fidélité alors que vous poussez la porte d’un magasin. Un CTA à la fin des articles est moins intrusif et plus pertinent.

2. La lenteur du temps de réponse

Aujourd’hui, beaucoup pensent à tort qu’on ne consulte le web qu’avec du très haut débit. Pourtant, il arrive qu’on capte mal, ou qu’on ait un forfait mobile limité en data. Aujourd’hui, les utilisateurs ne veulent pas attendre plus d’une seconde entre le clic et le résultat du clic. Si c’est plus long, ils se demandent si le problème vient de leur PC ou de leur smartphone, de leur connexion ou encore du site lui-même. Dans le doute, ils iront voir ailleurs pour vérifier d’où vient le problème… et ils ne reviendront pas.

Ma reco : l’optimisation du temps de chargement doit devenir une obsession. Les outils de diagnostic sont nombreux (Page Speed Insights ou GTMetrix pour ne citer qu’eux) et les techniques connues. C’est une question de priorisation plus que de moyens. Sur Page Speed Insights, un article sur choblab.com atteint un score de 99 sur desktop et 87 sur mobile, pour un investissement de 0 euros et un hébergement OVH mutualisé.

3. Les liens trompeurs

Un lien est une promesse avec l’utilisateur. Un lien dit « si tu cliques ici, tu vas avoir ça ». Il faut respecter ce contrat avec l’utilisateur sous peine de perdre sa confiance. On clique sur un lien et on arrive sur une vidéo, ou un article, ou un PDF. Cela rejoint le problème des icônes sans intitulé. On en a marre de cliquer sur des liens et d’arriver en terre inconnue. Le lien hypertexte est la base du web, sa raison d’être.

Ma reco : commencer par automatiser ce qui peut l’être. Par ex. des plugins ou des extensions permettent de détecter automatiquement et d’afficher le type (.PDF, .PPTX et autres) et le poids du fichier. Il s’agit surtout d’une règle éditoriale à partager et à prioriser : les liens ont des intitulés explicites et le cliquer ici est passible de sanctions :-).

4. Faible contraste ou texte minuscule

Le problème concerne à l’évidence les personnes âgées, sachant que la vue commence à baisser à 40 ans. Cela touche également toute personne qui a un handicap visuel. Mais des études montrent que les adolescents ont la même réaction.Ils ne veulent pas avoir à faire des efforts et plisser les yeux pour distinguer le texte. Un contraste trop faible entre la couleur du texte et celle du fond peut empirer les choses. Donnez du texte facile à lire !

Ma reco : c’est un des principaux problèmes d’accessibilité, mais également un des plus faciles à mettre en place ou à corriger. Les outils pour vérifier le contraste existent, il suffit de s’en servir. Il faut être intransigeant avec les agences sur ce point, non négociable.

5. Saisie contrainte

Là encore, c’est souvent un problème de conception technique. Dans certains formulaires, on demande de saisir des numéros (sécurité sociale, carte de crédit, téléphone, code postal). Si le site web force un format de saisie spécifique, tous les numéros à la suite sans espace par ex., cela complique la tâche. Saisir les 16 chiffres d’une carte bleue est plus simple si on découpe le numéro en groupe de quatre chiffres.

La complexité peut être encore plus grande si on fait un copier coller de ce numéro et que le format d’origine comprend des espaces ou des traits d’union entre les groupes de quatre. L’utilisateur sera contraint de revoir le format d’origine avant de copier le contenu. Il ne devrait pas avoir à le faire. La gène est considérable pour l’utilisateur et augmente le risque d’erreur.

Ma reco : techniquement, ce n’est pas si difficile de formater automatiquement le contenu saisi ou collé. C’est à l’interface de s’adapter à l’utilisateur et non le contraire.

6. Ne pas autoriser la sélection et le copier coller

Il s’agit soit d’un blocage technique volontaire soit d’une erreur de codage JavaScript, qui empêche de pouvoir sélectionner du texte et de le copier. Cela détruit le mécanisme que nous utilisons au quotidien pour partager de l’information.

On peut vouloir sélectionner et copier du contenu pour de multiples raisons : l’envoyer à un ami ou à un collègue, faire une sélection en vue d’un futur achat, voire même pour l’envoyer à son patron avec une recommandation du type : il faudrait investir 100K € là-dessus. Interdire de sélectionner et de copier, c’est briser la possibilité de diffuser le contenu du site web.

Ma reco : aucune raison technique ou juridique ne justifie de bloquer la sélection et la copie de contenus. Pour une utilisation mal intentionnée, c’est l’immense majorité des gens qui est pénalisée.

7. Les icônes sans intitulé

Les icônes sans étiquette associée causent deux problèmes d’ergonomie.

• Les icônes ambigues : des icones identiques ou similaires sont utilisées par de nombreux sites, mais elles peuvent avoir une signification ou une fonctionnalité différente d’un site à l’autre. Un coeur par exemple peut signifier que vous ajouter un produit en favori, ou que vous aimez un article.
• Les icônes obscures : certaines fonctionnalités ou contenus sont compliqués à représenter dans une icône. On dessine alors quelque chose qui ne ressemble à rien et qui va inquiéter les visiteurs : que va-t-il se passer quand je vais cliquer sur cette icône ? Est-ce que cela va provoquer un achat non souhaité ?

L’ajout d’un intitulé accolé à l’icône va préciser et clarifier sa signification : un mot peut faire toute la différence.

Ma reco : les intitulés sont indispensables dans la majorité des cas. Prenons le site Louis Vuitton. Sauriez-vous dire sans hésiter à quoi servent les deux premières icônes ?

La 1re permet-elle de se localiser ? non, elle sert à localiser les magasins de la marque. La 2e icône invite-t-elle les internautes à liker ? perdu ! il s’agit d’accéder à sa wishlist, même si l’internaute n’est pas encore connecté à son compte.

8. Le changement de mise en page au chargement

Il s’agit plutôt d’une erreur technique. Les pages peuvent contenir de nombreux composants qui, une fois téléchargés, viennent s’ajouter à l’écran et changement son apparence. Les modifications successives ont d’abord un impact esthétique : la page saute de manière erratique.

Il y a surtout un problème d’utilisabilité. Les gens sont impatients et n’attendent pas que tout soit chargé. Ils cliquent sur un bouton, un lien ou une image, mais pendant qu’ils cliquent, un autre élément se charge. L’utilisateur risque donc d’arriver sur un contenu ou une image qui ne correspond pas à son intention de départ.

Ma reco : choisir, c’est renoncer ! Si une page comporte de nombreux composants internes (images, sliders…) ou externes (fil Twitter, vidéo YouTube…), c’est qu’on n’a pas su prioriser les contenus. Il faut sélectionner un nombre limité de contenus pour éviter que l’utilisateur fasse le choix… de partir.

9. L’image encombrante

Il y a 20 ans, on avait des « Bienvenue sur mon site » avec une animation inutile où on créait une illusion de mouvement. Heureusement, ces erreurs ont fini par disparaître, mais il faut croire qu’elles ont la vie dure puisqu’elles reviennent sous une autre forme.

La nouvelle variante, c’est une image énorme qui occupe la quasi-totalité de l’écran pour, on espère, un impact maximum. L’utilisateur n’identifie pas toujours qu’il peut scroller, et pour peu que cette image soit combinée à une icône hamburger qui masque la navigation, il ne sait pas quoi faire.

Ma reco : les seuls cas où l’image encombrante peut s’imposer sont rares et il faut bien en mesurer les risques. On préfèrera la plupart du temps montrer aux visiteurs les différentes options et contenus qui s’offrent à lui et le laisser choisir ce qui correspond à son besoin du moment.

10. Le design mobile sur grand écran

On rencontrait autrefois le problème inverse. Votre site s’affichait bien sur un grand écran mais n’était pas adapté aux terminaux mobiles. On faisait un site pour desktop puis on essayait de le faire tenir sur un petit écran. Le résultat était catastrophique.

Aujourd’hui, beaucoup commettent l’erreur inverse. On conçoit un site pour mobile et on l’agrandit pour les écrans desktop ou TV. Ce qui se justifie sur mobile nuit à l’ergonomie sur grand écran. Par ex. l’icône hamburger pour le menu se justifie sur un petit écran puisque vous manquez de place. Si vous gardez ce fonctionnement sur grand écran, vous imposez à l’utilisateur d’aller cliquer sur une icône minuscule pour afficher un menu qui pourrait et devrait être accessible sans effort. Des études montrent que les gens utilisent beaucoup moins les menus sur les ordinateurs de bureau s’ils sont cachés sous cette icône hamburger.

Ma reco : le mobile-first aide notamment à prioriser les contenus et à simplifier les interfaces mais ne doit pas être pris au pied de la lettre…

Conclusion : soyons humbles devant l’utilisateur

Le point commun de ces erreurs de design (au sens anglais du terme), c’est l’arrogance. On se dit que le site web est plus important que ses utilisateurs. Les gens expriment rarement leur frustration. Ils s’en vont.

Le saviez-vous : les trois raisons majeures des problèmes de conception

• Conception piégeuse : la conception est délibérément mauvaise d’un point de vue ergonomique, sans même parler d’éthique. Par exemple, devenir membre d’Amazon Prime est beaucoup plus facile que de mettre fin à son abonnement. Amazon sait concevoir une expérience fluide, mais a décidé de rendre les choses moins intuitives pour continuer à vous faire payer.
• Conception stupide : il s’agit ici d’ignorance et de manque de compétence. On ne sait même pas que le site web est mauvais. D’où l’intérêt de sensibiliser encore et toujours aux erreurs de conception.
• Conception paresseuse : on sait que le produit propose une mauvaise expérience utilisateur, mais on ne veut pas l’améliorer, par paresse et en prétextant un manque de ressources financières ou humaines. Cette liste des principales erreurs de conception a vocation à aider la priorisation des moyens.

Source : Top 10 web design mistakes
Nota bene : il s’agit d’une retranscription sinon exacte, du moins fidèle dans l’esprit, de cette vidéo publiée par le Nielsen Norman Group.