Toutes les tendances en valent-elles la peine ? Les 5 erreurs UX les plus courantes commises par les concepteurs Web

"L'élégance est atteinte lorsque tout ce qui est superflu a été écarté et que l'être humain découvre la simplicité et la concentration : plus la posture est simple et sobre, plus elle sera belle." –Paulo Coelho

La mission d'un concepteur Web est de créer des expériences utilisateur attrayantes, d'aider les visiteurs du site à accomplir des tâches et d'augmenter les conversions. Dans le processus, ils se concentrent souvent uniquement sur l'esthétique, prennent des raccourcis et finissent par s'appuyer sur divers modèles et tendances de conception communs. Le danger est qu'ils peuvent être détournés par les tendances populaires et, par conséquent, des erreurs UX courantes sont commises parce que les tendances sont déployées de manière inappropriée.

En ce qui concerne le Web, les gens ne veulent pas apprendre des choses, ils veulent faire des choses. Il existe de nombreux exemples sur le Web où les concepteurs ont choisi de se concentrer uniquement sur l'attrait visuel et, ce faisant, ont sacrifié la convivialité. Ils ont supposé qu'un « moment époustouflant » qui a conduit la conception serait suffisamment puissant en soi pour engager l'utilisateur. Mais malheureusement, les utilisateurs ont du mal à comprendre l'interface utilisateur, ont de réelles difficultés à utiliser le site et les taux de rebond du site ont explosé.

Comme l'a déclaré Kate Rutter, "Moche mais utile l'emporte sur joli mais inutile." La clé pour utiliser efficacement les modèles et les tendances de conception Web est de trouver un équilibre entre ce qui semble esthétique et où ils ajoutent de la valeur.

Examinons quelques erreurs UX courantes.

Erreur UX commune n° 1 dans la conception Web : en-têtes volumineux et fixes

De plus en plus de grands en-têtes collants peuvent être vus sur les sites Web. Des "blocs de marque" et des menus de navigation qui ont une position fixe et occupent une place importante. Ils restent collés en haut de la fenêtre du navigateur (l'« en-tête collant ») et bloquent souvent le contenu lorsqu'il défile en dessous d'eux.

Certains en-têtes de sites Web de grandes marques ont une hauteur supérieure à 150 pixels. Où est leur valeur ? Les éléments fixes, tels que les en-têtes collants, peuvent présenter de réels avantages, mais les concepteurs Web doivent faire preuve de prudence en les utilisant. Il existe plusieurs problèmes UX importants à prendre en compte.

L'en-tête Sticky Nav peut être trop gros pour le confort

Si la décision d'utiliser un en-tête de navigation collant a déjà été prise, il est préférable de le tester avec les utilisateurs. C'est une erreur UX courante d'aller trop loin et de remplir l'en-tête de navigation collant avec du contenu. Avec un en-tête fixe, la navigation doit toujours être confortable pour les visiteurs. Si vous ne parvenez pas à trouver le bon équilibre, vous risquez de laisser peu de place au contenu principal et de créer une expérience de site étouffante et claustrophobe pour les visiteurs.

Parfois, il existe une solution de contournement simple avec CSS : en rendant l'en-tête collant légèrement transparent, les utilisateurs peuvent toujours voir le contenu à travers pendant qu'ils défilent, ce qui rend la zone de contenu plus substantielle.

Voici un exemple d'un grand en-tête collant : la page de profil du joueur de l'ATP sur Roger Federer.

L'en-tête collant de ce site a une hauteur de plus de 180 pixels ! Cela représente plus de 30 % de la hauteur totale de la page sur certains ordinateurs portables : une mauvaise expérience utilisateur évitable.

Ne pas tenir compte du problème Sticky Nav Header UX sur mobile

Certaines personnes utilisent peut-être de grands écrans d'ordinateur haute résolution sur lesquels un en-tête de navigation collant pourrait accélérer les interactions, mais qu'en est-il du mobile ? Sans aucun doute, un nombre important de visiteurs du site accéderaient au site à partir d'un appareil mobile, donc un en-tête fixe n'est peut-être pas la meilleure idée. Heureusement, les techniques de conception réactive permettent de concevoir différentes solutions pour différentes plates-formes et de s'en tenir à l'en-tête de navigation collant - jeu de mots - pour les navigateurs de bureau.

Le site Coffee with a Cop a également un en-tête fixe, mais beaucoup plus petit, moins de 80 pixels de haut.

La navigation d'en-tête, dans ce cas, est sans doute la bonne solution pour les écrans haute résolution, car elle permet une navigation plus efficace. Sur les écrans de plus petite résolution, l'en-tête est également fixe mais prend beaucoup de place. Une excellente alternative à un en-tête de navigation collant sur mobile est le menu hamburger omniprésent. Bien que ce modèle ne soit pas un résolveur de problèmes universel, il libère une quantité importante d'espace.

Erreur UX commune n° 2 dans la conception Web : polices fines et légères

De nos jours, les polices fines et légères sont omniprésentes sur de nombreuses applications mobiles et sites Web. Avec l'avancée de la technologie des écrans et l'amélioration du rendu, de nombreux designers les utilisent car ils sont élégants, épurés et tendance. Cependant, les polices de caractères fines peuvent causer des problèmes d'utilisabilité et donc entraver l'UX.

L'objectif de tout texte sur un site Web est d'être lisible, et les caractères fins peuvent sérieusement affecter la lisibilité. Tous les visiteurs ne verront pas un site sur un écran qui restitue bien les caractères fins. Certains types de lumière sont difficiles à lire sur un iPhone ou un iPad avec un écran Retina.

Avant tout, le texte doit être lisible. Si les utilisateurs ne peuvent pas lire les mots de votre application, peu importe la beauté de la typographie.

Directives sur l'interface humaine d'Apple

Apple fait référence aux applications mobiles, mais le même principe s'applique aux sites Web. La lisibilité est obligatoire et non facultative pour une bonne convivialité. Il est inutile de mettre du contenu sur un site Web s'il est illisible.

Voici quelques erreurs UX courantes à prendre en compte avant d'utiliser le type fin :

Utiliser des polices fines et légères parce que c'est tendance

Les polices doivent non seulement être belles, mais elles doivent également être lisibles. Pour obtenir un contraste et une lisibilité appropriés, les concepteurs doivent rechercher la combinaison optimale dans leurs conceptions : taille, poids et couleur.

Il est préférable de tester le site sur différents appareils et tailles d'écran pour s'assurer que tout le texte du site est lisible.

Ce qui nous amène à la prochaine erreur UX courante :

Ne pas tester la lisibilité du texte sur tous les principaux appareils

Les caractères minces et légers peuvent bien paraître sur les moniteurs coûteux et finement réglés de nombreux concepteurs, mais l'utilisateur moyen qui voit souvent nos conceptions sur des écrans moins chers et de qualité inférieure doit également être pris en compte. La meilleure pratique consiste à vérifier l'apparence des polices sur tous les principaux appareils : ordinateurs de bureau, ordinateurs portables, tablettes et smartphones.

Par exemple, lors du test d'une conception mobile, demandez aux participants d'utiliser le site sur des appareils mobiles à la lumière du jour - les utilisateurs du monde réel n'auront pas toujours des conditions de navigation et d'éclairage parfaites. Si vous utilisez une police fine sur un site Web, il existe un moyen simple de s'adapter aux utilisateurs mobiles : spécifiez une police plus épaisse sur mobile pour une meilleure lisibilité.

Erreur UX commune n ° 3 dans la conception Web: texte à faible contraste

L'utilisation d'éléments à faible contraste de couleur est également devenue à la mode dans la conception d'interface utilisateur moderne. Il est né d'une tendance au design minimaliste car en réduisant le contraste dans certaines zones, le design apparaîtrait "minimaliste". Les concepteurs ne pouvaient pas réduire la complexité des informations qui devaient être présentées, ils ont donc joué avec un faible contraste dans la conception.

Nous avons déjà couvert les polices fines, mais il y a un écueil encore plus grand : une combinaison d'une police de caractères légère avec un faible contraste qui entrave sérieusement l'expérience utilisateur en raison d'une mauvaise lisibilité. Les concepteurs doivent faire tout ce qu'ils peuvent pour éviter ce piège de l'utilisabilité.

Faible contraste du texte dans le corps du texte

Cool Springs Financial utilise une variante fine d'Helvetica pour le corps du texte sur son site Web. Bien qu'il soit élégant et contribue à une interface utilisateur esthétique, il est difficile à lire sur plusieurs plates-formes. Bien qu'un faible contraste ne soit pas nécessairement mauvais, il peut avoir un impact négatif sur la convivialité d'un site Web en rendant le texte difficile à lire.

Ne teste pas le contraste du texte

Il existe un outil astucieux pour la vérification du contraste sur le Web appelé Colorable qui aidera les concepteurs à définir le contraste de texte correct conformément aux directives pour l'accessibilité du contenu Web. Une fois que les concepteurs savent qu'ils utilisent le bon contraste de texte, ils peuvent ajuster d'autres couleurs sur leur site Web et effectuer plusieurs tests rapides sur les appareils/utilisateurs pour s'assurer que le texte est lisible.

Erreur UX commune n ° 4 dans la conception Web: piratage de défilement

Une autre tendance à haut risque qui gagne du terrain sur le Web est le «détournement de défilement». Les sites Web qui mettent en œuvre cette tendance prennent le contrôle du défilement des pages (généralement avec JavaScript). Lorsque les gens le rencontrent, ils n'ont plus le contrôle du défilement de la page et sont incapables de prédire son comportement, ce qui peut facilement conduire à la confusion et à la frustration. C'est une expérience risquée qui pourrait nuire à la convivialité du site Web et, au pire, provoquer une « rage informatique ».

Certains sites Web peuvent s'en tirer avec le détournement de défilement, mais cela ne signifie pas que tout le monde le peut. Par exemple, de nombreux concepteurs Web suivent les sites d'Apple avec des détournements de défilement, des effets de parallaxe et des images haute résolution de divers produits. Apple a son marché cible, un concept unique et un contenu exclusif pour son site Web. Étant donné que chaque site a des problèmes uniques, il doit également avoir des solutions uniques adaptées à ces problèmes.

Ne pas tester avec des utilisateurs du monde réel

Lorsque vous empruntez des idées ou des modèles d'interface utilisateur à la mode, il est préférable de tester le prototype d'un site Web sur des utilisateurs réels pour éviter les problèmes d'UX. De simples tests d'utilisabilité révéleront si la mise en œuvre d'un détournement de défilement, par exemple, est réalisable ou non. Sans test, les concepteurs n'ont aucun moyen de savoir si le détournement de défilement fonctionnera, et faire des hypothèses est souvent coûteux.

Tumblr, un site de blogging personnel populaire, utilise le détournement de défilement sur sa page d'accueil. Bien que cela puisse être risqué, il est prudent de supposer qu'ils connaissent bien leur public cible et l'expérience utilisateur cool et branchée qu'ils souhaitent présenter. Lorsque les visiteurs du site commencent à défiler, le défilement est piraté et les utilisateurs sont redirigés vers la section suivante.

La longue page de défilement est divisée en plusieurs sections qui se distinguent par une forte dose de couleurs saturées et des points indicateurs proéminents sur le côté gauche de la fenêtre. En conséquence, la page d'accueil de Tumblr ressemble à un grand carrousel vertical sur lequel les visiteurs ont le contrôle, plutôt qu'à un site Web expérimental désagréable avec son propre esprit.

Erreur UX commune n° 5 dans la conception Web : carrousels

Les carrousels - un diaporama permettant de faire défiler une variété de contenus - sont très courants sur le Web, en particulier sur les pages de destination et les pages d'accueil. Bien qu'ils puissent être utiles, ils présentent de nombreux problèmes d'utilisabilité et sont donc considérés comme une autre erreur UX courante. Selon le groupe Nielsen Norman : " les gens défilent souvent immédiatement devant ces grandes images et manquent tout le contenu qu'elles contiennent". Cela pourrait avoir un impact négatif sur l'expérience utilisateur, car les visiteurs peuvent ne pas voir de contenu précieux dans certaines des diapositives en rotation.

Les carrousels de sites Web peuvent ne pas apporter de valeur aux utilisateurs

S'il est bien fait, un carrousel peut engager les utilisateurs avec de grandes images saisissantes. Le problème est que les carrousels n'ajoutent souvent aucune valeur supplémentaire, mais sont simplement là pour la décoration et uniquement inclus parce que tout le monde les utilise. Une façon de tester si un carrousel de site a du sens : notez trois avantages qu'un carrousel offre au visiteur. Si trois avantages significatifs ne peuvent pas être trouvés, cela n'ajoute aucune valeur.

Les flèches précédentes et suivantes ont une faible découvrabilité

Des informations importantes dans un carrousel de site Web peuvent rester masquées si les flèches suivante et précédente ne sont pas détectables. Les commandes doivent également être compatibles avec le robinet pour mobile.

Souvent, il n'y a pas de flèches pour contrôler le carrousel ; seuls les points indicateurs de diapositives sont inclus pour faire avancer les diapositives. Cependant, ils sont souvent à faible contraste, ont une faible possibilité de découverte et manquent d'une zone cliquable ou tappable suffisamment grande. Les petites cibles cliquables peuvent entraîner une mauvaise UX, un visiteur de site Web frustré et une sortie rapide du site Web.

Par exemple, le site Web de la Fondation Floresta Longo a un carrousel rotatif d'images sur sa page d'accueil. Il est réglé sur lecture automatique et tourne à travers cinq photos. Les flèches précédente et suivante, cependant, sont petites et transparentes, ce qui les rend difficiles à repérer et difficiles à cliquer. Il n'y a aucun indicateur pour les visiteurs de la diapositive, et aucune étiquette pour signifier ce que les images représentent. Les images ne sont pas des liens et agissent comme une pure décoration. Bien que ce type de carrousel puisse avoir une certaine valeur pour engager le visiteur, dans l'ensemble, il laisse beaucoup à désirer.

Conclusion

Les tendances de conception Web, si elles ne sont pas examinées attentivement et mises en œuvre avec prudence, pourraient conduire à plusieurs erreurs UX courantes. Les concepteurs UX doivent faire preuve de discernement et ne pas avoir peur d'innover, mais pour garantir une excellente convivialité du site Web, il leur serait utile de tester leur conception de manière approfondie avec des utilisateurs du monde réel.

Dans la folle profusion des tendances du web design, les choses en vogue vont et viennent. Au milieu de ce chaos, l'utilisation équilibrée de l'esthétique, de l'efficacité et de la convivialité joue un rôle important dans la distinction des tendances UX qui se sont avérées les plus fortes et ont recueilli le plus d'acceptation des utilisateurs.

Les concepteurs Web peuvent proposer le schéma de couleurs le plus cool, l'animation de défilement la plus fantaisiste ou les effets de parallaxe les plus fantastiques, mais si l'interaction humaine en souffre, l'UX sera médiocre et les gens passeront rapidement à autre chose. Un autre site est à portée de clic.

Pour en savoir plus sur le blog Toptal Design :

• Conception réactive - Meilleures pratiques et considérations
• Aborder le processus de conception de site Web à partir du navigateur
• Codage pour les concepteurs - Que devrions-nous savoir ?
• Meilleures pratiques de conception d'interface utilisateur et erreurs courantes