En 2022, il est temps d’éviter ces 10 erreurs sur votre site web + un template gratuit

Bon, maintenant que vous êtes là, je vous préviens juste que je pense classer ces erreurs très personnellement. En tant que web designer, bien sûr, et, en tant qu'humaine (à quel point ces choses peuvent m'ennuyer aussi).

01/ Pop-Ups

Ennuyeux, agaçant, frustrant. C'est ainsi que je peux décrire ce composant. Même la barre de cookies est assez ennuyeuse. Alors, qu'est-ce qu'un pop-up ?

Il existe 4 types de pop-ups — les fenêtres modales, non-modales et les lightbox ou non…

En général, les fenêtres modales sont très intrusives, en gros, vous ne pouvez rien faire sur l'interface lorsqu'ils apparaissent, sauf interagir avec. Pensez aux publicités lorsque vous naviguez sur un site douteux 😏 ou sur un site de presse 🙄.

En fait oui, vous pouvez les utiliser mais Seulement pour les tâches critiques que l’utilisateur doit absolument faire comme entrer un mot de passe, accéder à du contenu sécurisé, ou qui demande le consentement éclairé de l'utilisateur (les cookies ne sont pas concernés par cela). C'est donc un cas très limité.

Les lightbox, sont des espèces de visionneuse, c’est simplement le fait que l'arrière-plan est plus sombre/plus clair/flou, bref, bien détaché du reste de votre contenu.

Donc une fenêtre modale peut aussi être une lightbox. La lightbox est utile pour guider l'utilisateur et concentrer son intérêt sur une chose.

Par exemple, lorsque l'utilisateur clique sur la photo du produit que vous vendez et s'attend à le voir plus grand et mieux.

Mais une lightbox peut également ne pas être une fenêtre modale, lorsque par exemple, vous pouvez toujours continuer à interagir avec le contenu en arrière plan et cliquer sur des boutons.

Alors malgré tout, les pop-ups sont toujours utiles. Il suffit de respecter quelques règles clés.

• Interrompre le parcours utilisateur sur les moments clés n'est pas une bonne idée.
• L'afficher juste après le contenu ou juste après la connexion de l'utilisateur par exemple. Comment l'utilisateur pourrait être intéressé sans même savoir de quoi parle la page. ⇒ ils n'y prêtent aucune attention. Personnellement, je rage et quitte la bannière et l’oublie.
• Utiliser le bon type de pop-ups en fonction du but, de l’importance de l’information. (la pub n’est pas une priorité absolue).
• Au lieu de cela, soyez créatif et logique. Utilisez des méthodes moins intrusives telles que la barre d'accueil, les info-bulles, laissez de l'espace à votre utilisateur.

02/ Pas de CTA

Ce qu'on appelle CTA, ou call-to-action, est généralement un bouton ou un lien qui encourage l'utilisateur à agir. Même si un site Web pense utiliser des CTA, beaucoup se contentent de mot neutres tels que « envoyer », « soumettre » et le pire est « cliquez ici ». Ne faites pas ça.

Personnalisez-le. Rendez-le accrocheur et personnel augmentera votre taux de conversion de 200% (Hubspot). Guidez vos utilisateurs et dites-leur quelle est la prochaine étape. Vous pouvez faire des recherches A/B avec une petite poignée de personnes pour vérifier ce qui fonctionne le mieux.

03/ Ne pas être accessible

Les utilisateurs avec un handicap utilisent des applications telles que VoiceOver et lisent le contenu de votre site à haute voix par exemple, et qui décrivent précisément une image.

Comment rendre votre site web accessible ? Ajoutez du texte alternatif à vos images, quelque chose comme «Une fille qui souligne à quel point le référencement est important avant de demander à nouveau ce que c'est». C'est la phrase que lira VoiceOver lorsque l'image apparaîtra à l'écran.

De plus, cela vous donne quelques bons points sur Google et pourrait facilement améliorer votre référencement.

04/ Un mauvais contraste

L'accessibilité encore, vous serez surpris par le nombre de personnes qui ne voient pas le monde tel que vous. Certaines personnes ne voient pas certaines couleurs.

Assurer un bon contraste augmentera les chances d'être compris par votre public.

Evitez le rouge sur violet (Mes yeux saignent...)

05/ Icônes équivoques

Sauf s'il s'agit d'une icône très courante comme l'icône du cœur, du menu ou du panier et que le style est très générique, ou que votre site internet est un leader et est connu de presque tout le monde (coucou Facebook), vous devez utiliser des étiquettes avec les icônes.

Cela prendra une place supplémentaire dans votre design, mais ça en vaut la peine.

Le biais de statu quo induit la peur de se tromper et le risque encourut à faire une action dont on ne perçoit pas clairement le bénéfice.

Les utilisateurs n'appuient pas sur les boutons équivoques, parfois ils ne les voient même pas.

Envisagez de remplacer les icônes par des mots-étiquettes simples et efficaces peut être suffisant.

ℹ️ Vous pouvez également utiliser des info-bulles pour les icônes peu communes.

06/ Hiérarchie

Présenter trop d'informations en même temps, ou pas assez, est un gros problème que je vois trop souvent.

C'est pourquoi, avant de vous lancer dans votre plate-forme de conception Web préférée, il est judicieux d'en faire un croquis. Plus vous y consacrerez de temps, meilleure sera l'apparence et la structure de votre page/site Web.

Pensez à la construction, si les ouvriers construisent la maison sans plan, ce sera probablement un désastre. De même en cuisine, même si vous connaissez la recette, il vaut mieux la garder à côté de vous. Vous pouvez au moins vérifier que tout est en ordre.

Par exemple, évitez les barres latérales qui ne sont pas directement liées au contenu de la page. Cela nuit à la concentration de l'utilisateur.

Pensez à remplir votre objectif utilisateur, soyez concis et guidez-le à travers votre page. C'est justement tout l'intérêt à avoir un site Web, dites la chose que vous devez dire avec précision.

07/ Cacher la page de tarification

Il est tentant de cacher le prix jusqu'à ce que votre client démontre un réel intérêt pour votre produit/service, mais ce n'est pas une bonne idée.

Pourquoi? parce que vous forcez vos clients à s'impliquer juste pour connaître le prix. C'est assez décourageant, et cela le place probablement dans un mood négatif. Vous lui aurez volé son précieux temps si vous n'entrez pas dans son budget. Et vous aurez perdu des prospects qui n'auront pas envie d'investir autant d'énergie avant même d'être sûr que vous fitter avec ce qu'ils recherchent.

Avoir une page de tarification accessible uniquement depuis le pied de page ou via une autre page, ou cacher d'autres éléments clés comme le menu, les réservations, les adresses, les conditions, l'aide, etc. est très frustrant.

Votre client s'attend à voir le prix en premier, c'est votre rôle de lui montrer pourquoi ça vaut le coup.

Masquer le contenu clé pourrait éveiller la méfiance et c'est la dernière chose que nous souhaitons.

Soyez transparent.

08/ Des éléments clés au mauvais endroit

En matière de conception de sites Web, nous voulons être mémorables et originaux, mais le fait est que certains éléments sont maintenant tellement entrés dans les us et coutumes que nous devons respecter certaines règles concernant les éléments de navigation.

On s'attend à retrouver un volant dans une voiture et pour les Nord-Américains, à l'avant et à gauche.

De même, les utilisateurs s'attendent à ce que le logo se trouve dans le coin supérieur gauche de votre page et à être redirigé vers la page d'accueil lorsqu'il clique dessus.

89% des utilisateurs sont plus susceptibles de se souvenir du nom du site Web de ces entreprises lorsque le logo est placé dans le coin supérieur gauche.

Cependant, si votre site web est vraiment peu commun, du type expérimental, et qu’il invite naturellement l'internaute à être créatif alors là vous avez la place d'être original car vous apportez une valeur clé à votre utilisateur, vous le divertissez.

09/ Police non responsive

J’aurais pu dire "site internet non responsive", mais j'ai spécifiquement choisi "Police non responsive". Parce que, l'accessibilité, toujours l'accessibilité.

Il y a de plus en plus de nouvelles tailles d'écran et de nouveaux types d'appareils.

Les unités de taille de police relatives telles que le « em » et « rem » et même « % » ne vous dit sans doute rien. Mais ces unités permettent au texte de s'adapter relativement aux préférences de l'utilisateur. Après 40 ans, 12px pour votre texte peut être acceptable sur ordinateur mais trop petit sur mobile.

Ce que je veux dire, c'est que si vous utilisez une valeur fixe pour votre texte comme le pixel, vous risquez de ne pas être visible et votre contenu d’être inconfortable pour une grande partie des utilisateurs.

Bien sûr, cela passe par un design réactif, fluide, adaptatif, la capacité de votre site web à être facile à naviguer et adapté quelque soit l'appareil que nous utilisons pour le consulter.

10/ Un favicon non approprié

Pour le dernier, je me dois d'en parler, car c'est vraiment important.

Oui, je suis ce genre de personne qui ouvre 50 à 70 onglets dans la même fenêtre… Oui.

(Ne me jugez pas. C'est démentiel, je sais.)

En fait, le favicon est critique à ce stade, haha. Voyez vous-même…

Alors ne négligez pas le favicon, c'est absolument nécessaire. Point.

Et parce que c'est important, ajoutez également un Webclip de bonne qualité.

Il s'agit simplement d'une icône d'application que vous pouvez épingler directement sur l'écran de votre mobile. C'est l'icône que votre site Web utilise lorsqu'un fan de votre marque (comme moi) décide d'enregistrer votre site Web sur son écran mobile en tant que raccourci.

Choisissez une icône épurée aux couleurs vives qui pourrait être belle et reconnaissable dans la jungle d’applications de votre super fan.

Oohh Allez Lufa ! 🥲

{{blog-component}}

Alors…

Il y a un tas d'erreurs que nous pouvons faire quand il s'agit de site Web. Certaines erreurs sont plus critiques que d'autres, c'est correct d'en faire mais il vaut mieux les corriger et ne pas les refaire.

C'est pourquoi les UX designers sont si inestimables, experts de l'expérience utilisateur, ils chassent les erreurs, anticipent les tendances et apportent de nouvelles idées sur la façon de mieux communiquer les valeurs de votre marque.

Alors, êtes-vous d'accord ou pas ? Faites-le nous savoir ici