De nos jours, les sites web cherchent de plus en plus à se démarquer. Cependant, dans cette quête, ils oublient souvent de respecter les standards simples du design web et de l’expérience utilisateur, ce qui rend certains sites franchement… irritants.
Voici des erreurs courantes en design web et comment les éviter.
Carrousels
Arrêtez d’utiliser des carrousels ! Ils sont inefficaces, et très peu d’utilisateurs voient le contenu au-delà de la première diapositive. Les carrousels automatiques n’ont presque aucun sens non plus. Aussi, les carrousels risquent de nuire à vos conversions. Également, voici une vidéo Instagram amusante qui reflète le concept des carrousels, dans la vraie vie.
Menus de navigation
La navigation doit toujours être en haut de la page. Les menus à gauche peuvent fonctionner dans certains contextes (exemple : tableau de bord utilisateur), mais ils sont surtout réservés aux applications web et non aux sites vitrines.
- Évitez de cacher la barre de navigation sur les écrans ou il y a de l’espace pour les afficher (ordinateur bureau, ordinateurs portables). Pourquoi compliquer la vie de l’utilisateur en lui demandant de cliquer pour afficher un menu, si ce dernier peut être affiché sur l’écran ? Ne rajoutez pas une étape inutile.
- Sur mobile, arrêtez d’utiliser de longues animations lorsque le menu apparaît après un clic.
- Ne forcez pas l’utilisateur à cliquer sur un bouton pour afficher un sous-menu. Les sous-menus devraient apparaître au survol. De plus, évitez les sous-menus horizontaux : ils sont inefficaces. Utilisez plutôt un affichage vertical avec une flèche pour indiquer leur présence.
- N’ajoutez pas votre logo à droite de la barre de navigation, et placez toujours le bouton hamburger en haut à droite. Les standards web existent pour une raison.
- Si vous utilisez une barre de navigation fixe ou sticky, ajoutez-lui une couleur de fond. Sinon, le texte de votre contenu passe en dessous et devient illisible.
- Les emojis dans la navigation peuvent être efficaces dans certains contextes, mais, pour la majorité des sites, cela donne un rendu peu professionnel.
Appels à l’action (Call to Action – CTA)
- Si votre bouton d’appel à l’action sur la page d’accueil mène à une autre page de contact, intégrez plutôt directement le formulaire sur la page d’accueil. Ne rajoutez pas une étape inutile.
- Évitez les boutons mystères comme “Cliquez ici”, “Continuer”, “C’est parti”. Le contenu d’un bouton doit être clair et indiquer immédiatement ce qui se passera après le clic.
- Ne colorisez pas vos boutons CTA de la même façon que le reste de votre site. Cela réduit considérablement vos conversions.
Alignement
- Évitez d’aligner le texte au centre lorsque celui-ci dépasse 3 lignes. Cela complique la lecture à cause des débuts de ligne irréguliers.
- Ne justifiez pas le texte : les espaces irréguliers entre les mots rendent la lecture plus difficile.
- N’alignez pas le texte à droite pour les mêmes raisons que l’alignement centré.
- Évitez l’alignement vertical, cela sacrifie l’UX (expérience utilisateur) au profit de l’UI (interface utilisateur).
Pages d’accueil et splash pages
- Si un utilisateur est déjà sur votre site, pourquoi lui demander de cliquer à nouveau pour entrer ? Les splash pages nuisent au SEO, réduisent les conversions et gaspillent le temps de l’utilisateur. Supprimez-les.
- Évitez les titres H1 vagues sur la page d’accueil. Cela perturbe l’utilisateur et les moteurs de recherche.
- Ne créez pas de pages d’accueil ultra minimalistes avec uniquement des liens vers d’autres pages. La page d’accueil doit être suffisamment informative pour que l’utilisateur comprenne qui vous êtes et ce que vous faites.
- Supprimez les préchargeurs ; ils sont souvent incapables d’indiquer si le site a terminé de charger ou non. À la place, simplifiez votre site en réduisant le JavaScript et CSS superflus.
Votre site n’est pas une présentation PowerPoint, ne le faites pas ressembler à cela.
Animations et effets de chargement
- Trop d’effets nuisent au contenu et augmentent le temps de chargement.
- Les animations lentes rendent impossible une navigation rapide. Les visiteurs recherchent des informations rapidement : ne gaspillez pas leur temps avec des animations inutiles.
- Si vous utilisez des contenus qui se chargent au défilement, assurez-vous qu’ils ne se déchargent pas lorsqu’on remonte la page.
- Les messages d’introduction longs dans la section héroïque doivent aussi disparaître.
Défilement et curseurs
- Ne modifiez pas le comportement de défilement. Ne cachez pas la barre de défilement, ne la stylisez pas, et surtout, ne la prenez pas en charge.
- Les curseurs personnalisés donnent une impression dépassée (type MySpace en 2005).
- Si le défilement d’un site nécessite des boutons comme « Cliquer pour Défiler », c’est un mauvais design.
Marquees
Les bandes défilantes (marquees) sont ennuyeuses à regarder car l’utilisateur ne peut pas contrôler la vitesse de l’animation.
Formulaires
- Ne séparez pas les champs prénom et nom de famille pour vos formulaires. Dans les formulaires de taille petite à moyenne, avoir moins de champs de saisie augmente généralement les conversions — combinez les deux champs en un seul champ “Nom complet”.
- Dans les formulaires plus longs (plus de 4 champs de saisie), utilisez des étiquettes plutôt que des espaces réservés (placeholders). Si un utilisateur remplit plusieurs champs et souhaite ensuite modifier quelque chose, il risque d’oublier ce que représentait chaque espace réservé, il devra effacer ses informations pour se souvenir de la fonction du champ. De plus, l’utilisateur ne pourra pas utiliser la fonction “Ctrl+F” pour trouver facilement l’élément du formulaire sur la page.
- Ne centrez pas le texte des formulaires, il doit toujours être aligné à gauche pour une meilleure convivialité.
Pieds de page
Les liens dans le pied de page sont essentiels ; votre footer devrait servir de plan du site.
Mentions honorables
- Ne lancez pas automatiquement des sons à l’entrée sur le site.
- N’exigez pas un survol pour afficher le contenu d’une tuile ; affichez directement le texte sur un fond flou.
- Les logos sans nom d’entreprise peuvent dérouter les utilisateurs. Vous n’êtes pas Apple ou Mastercard (sauf si c’est le cas, dans ce cas, partagez !).
En conclusion
- L’expérience utilisateur est plus importante que l’interface utilisateur. Ne compliquez pas la tâche de vos utilisateurs et n’ajoutez pas d’étapes supplémentaires si cela peut être réalisé de manière plus efficace.
- Si vous êtes un propriétaire d’entreprise OU un concepteur web, la seule chose sur laquelle vous devez vous concentrer est l’expérience utilisateur.
- N’ignorez pas les standards de conception web sous prétexte de vouloir être original, surtout si cela nuit à l’expérience utilisateur.
- Votre mission est d’adapter le site web à vos utilisateurs – facilitez-leur au maximum l’utilisation de votre site.
- La prévisibilité et les standards web sont essentiels. Placez les éléments là où vos utilisateurs s’attendent à les trouver.
👇 Partagez cet article et abonnez-vous à notre newsletter non intrusive si vous l’avez trouvé utile !