9 bonnes pratiques UX/UI pour améliorer votre site web

Pour augmenter le nombre de visiteurs sur votre site internet, tout ne repose pas que sur le référencement !

Votre site internet lui-même a directement un rôle à jouer.

Et pas n’importe lequel : LE rôle principal.

Encore faut-il l’améliorer pour qu’il soit optimisé, accessible et lisible par le plus grand nombre !

Pour cela, certaines règles liées à la présentation générale, au design et au contenu sont particulièrement importantes.

Elles doivent toutes répondre à des objectifs bien précis qui se résument en 4 mots-clés :

• Clarté,
• Lisibilité,
• Fluidité,
• Accessibilité.

Dans cet article, Victoria Louvel vous présente les 9 bonnes pratiques UX à adopter pour améliorer votre site web et le faire correspondre à ces 4 mots-clés.

1. Optimisez votre site pour les appareils mobiles

(Source Qualitair & Sea via Simplébo)

92 % des internautes accèdent au web depuis leur appareil mobile, d’après le rapport sur le digital en 2021 par Hootsuite et l’agence We Are Social.

Ce pourcentage élevé implique que le design de votre site soit responsive. C’est pourquoi, elle se trouve et tête de mes bonnes pratiques UX.

Autrement dit, optimisé pour toutes les plateformes : smartphones, tablettes et ordinateurs.

C’est d’autant plus important que les internautes font bien plus que de consulter une page.

Ils sont amenés à interagir avec votre contenu, notamment en achetant vos produits depuis leur téléphone.

Et vous pouvez aller encore plus loin dans l’optimisation de votre site pour ce type de visiteurs, notamment en positionnant vos boutons de CTA (call-to-action) à des endroits adaptés.

Évitez les coins et privilégiez de placer vos boutons sur une zone centrale de votre interface.

Ainsi, que les visiteurs se servent de leur pouce ou de leur autre main pour scroller et taper sur l’écran, ils ne risquent pas de faire une fausse manipulation ou de devoir s’y reprendre à plusieurs fois.

2. Utilisez les éléments de design les plus attendus par vos visiteurs

(Exemple avec la page d’accueil du cabinet Tallis Consulting)

Certains éléments de design sont particulièrement attendus par les internautes.

Ils deviennent alors incontournables au moment de concevoir l’interface utilisateur de votre site internet :

• Votre logo doit se retrouver en haut de la page,
• Les informations pour vous contacter doivent être accessibles en haut à droite,
• Votre menu de navigation doit être lisible horizontalement et positionné dans le header, en haut de chacune de vos pages,
• Une barre de recherche doit également se retrouver dans votre header,
• Les icônes de vos médias sociaux doivent, elles, être situées dans le footer.

Sur internet, simplicité et clarté des informations sont 2 critères essentiels à prendre en compte pour captiver et fidéliser votre cible.

Si vous choisissiez de prendre le contrepied des bonnes pratiques énoncées plus haut, le risque serait de perturber vos visiteurs.

Pour le reste, laissez votre créativité s’exprimer pour ainsi permettre aux internautes de visualiser l’esprit de votre marque.

3. Créez une hiérarchie visuelle

(Exemple avec la page d’accueil de Quickbooks)

2,6 secondes est le temps nécessaire à un internaute pour balayer l’ensemble d’une page et se faire son avis sur le site internet concerné, d’après le guide d’optimisation d’un site web publié par Quicksprout.

Ainsi, chacune de vos pages, en particulier votre page d’accueil, doit être construite en conséquence.

Vous devez faire en sorte que vos visiteurs comprennent instantanément ce à quoi ils doivent s’attendre en naviguant sur votre site internet.

• Quel est l’élément le plus important de votre offre de service ?
• Quel est votre produit phare ?
• Quelle est la principale information que vous voulez diffuser auprès de vos cibles ?

Toutes ces questions à vous poser, aident à construire votre page en instaurant une réelle hiérarchie visuelle.

Sans cette étape essentielle dans la création de votre site web, vos visiteurs risquent de se concentrer sur le mauvais élément, voire de naviguer sur la mauvaise page.

Les éléments les plus importants de votre site internet doivent donc apparaître en premier.

Voici plusieurs astuces pour améliorer la hiérarchie visuelle de vos pages :

• Agrandissez la taille des éléments que vous souhaitez particulièrement mettre en avant,
• Utilisez des couleurs vives (dans la mesure du lisible, bien sûr) pour captiver le regard de vos visiteurs sur ce qui est important pour eux,
• Contrastez et variez les couleurs pour souligner certains éléments,
• Alignez vos textes, afin que la lecture soit optimale et conventionnelle,
• Aérez vos contenus en intégrant des espacements visuels. Ces espaces non utilisés contribuent à rendre vos contenus plus lisibles. Et vos visiteurs respirent…

N’hésitez pas à concevoir votre site internet sur papier, en intégrant tous ces éléments, avant de le faire en ligne.

Pour ce dernier point, si vous n’aviez pas encore trouvé votre logiciel de création de site internet, vous pouvez parcourir ce comparatif signé par La Fabrique du Net.

4. Assurez-vous que votre contenu soit lisible

(Un exemple avec la page d’actualités de Peugeot)

Pour cela, certaines polices sont à éviter d’emblée, comme Papyrus, Jokerman ou Lobster.

Gardez bien à l’esprit que si les internautes ne parviennent pas à lire vos contenus, ils ne reviendront pas sur votre site.

Préférez donc une police d’écriture standard plutôt que d’en rechercher une particulière.

Mais d’autres critères que la police d’écriture sont à prendre en compte pour rendre vos pages lisibles :

• Vos choix de couleurs,
• La taille de vos paragraphes : n’hésitez pas à aérer un maximum, passer à la ligne, voire en sauter et limiter la longueur de vos blocs de texte,
• Le crénage de vos lettres et l’espacement entre elles.

Enfin, essayez de vous mettre à la place de vos visiteurs, mais aussi de vous rappeler ce que vous faites vous-même lorsque vous naviguez sur un site internet.

Vous ne lisez sûrement pas chaque texte mot à mot, mais recherchez en priorité l’information dont vous avez besoin rapidement.

Pour permettre aux internautes de faire de même, rendez-leur ce “travail” plus facile :

• Privilégiez des phrases courtes,
• Rédigées dans un style direct,
• Contenant les mots-clés de votre projet.

Bref, dites l’essentiel dès le début.

5. Uniformisez vos contenus

(Exemple d’une page produit du site de Maisons du Monde)

En passant d’une page à l’autre de votre site, bien que le service proposé soit différent, vos visiteurs doivent retrouver le même esprit.

Le vôtre.

En d’autres termes, votre identité visuelle, celle que vous utilisez déjà pour définir votre marque, doit se retrouver sur chaque page de votre site internet.

Plus concrètement, cela signifie que votre police doit rester la même sur chaque onglet, ainsi que la répartition de vos éléments graphiques (formes géométriques, animations et couleurs, notamment).

Il en va naturellement de même pour votre thème et votre mise en page.

En prenant le visuel en tête de cette partie pour illustrer ce propos, regardez plus attentivement les éléments suivants :

• Les différentes images du produit à gauche,
• L’image principale affichée au centre,
• Le prix en dessous du nom du produit et de l’accès à sa description, à droite,
• Les 2 boutons pour l’ajouter à votre panier ou le retirer en magasin, sous le prix, à droite.

Pour chaque page produit de cette marque, vous retrouverez exactement la même disposition.

Et donc une uniformisation de tous ses contenus, pour mieux naviguer et vous y retrouver sur le site.

6. Choisissez vos éléments de design intentionnellement

(Exemple avec le blog de design Graphism.fr)

Couleurs, éléments visuels ou tout simplement mise en page : aucun des choix que vous faites pour votre site internet ne doit être hasardeux.

Derrière chaque détail graphique, il doit y avoir une intention de votre part.

Autrement dit, ne privilégiez pas un thème ou un design en particulier parce que ce dernier “fait joli”, mais bien parce qu’il signifie quelque chose pour vous.

Cette intention doit pouvoir se ressentir instinctivement par vos visiteurs en se rendant sur votre site internet.

Voici quelques conseils pour vous guider :

• Intégrez des couleurs qui font d’ores et déjà partie de la charte graphique de votre marque,
• Vous pouvez également utiliser les couleurs exprimant le mieux les émotions que vous souhaitez faire ressentir à vos visiteurs,
• En plus de sa lisibilité, choisissez une police en accord avec votre caractère ou votre philosophie d’entreprise,
• Privilégiez des éléments visuels qui puissent guider l’utilisateur final et clarifier son expérience sur votre site web.

7. Facilitez la navigation

(Exemple avec le blog Globe-Trotting)

La simplicité de navigation de votre site internet est un élément particulièrement important, d’autant plus s’il s’agit d’un site e-commerce.

En plus de rendre votre design plus épuré, cela peut également contribuer à convertir vos visiteurs en clients, si vous vendez des produits ou des services.

Une navigation particulièrement bien pensée peut même naturellement amener un internaute à acheter un ou plusieurs de vos produits, par exemple.

À l’inverse, une navigation mal optimisée (chemin trop long avant d’arriver à un contenu spécifique, trop de possibilités de cliquer…) fait partie des principales raisons qui poussent les internautes à quitter un site internet, pour ne plus y revenir.

La question de la navigation se pose dès lors que vous publiez du contenu cliquable sur votre site (texte, image, élément visuel ou vidéo).

Ce dernier doit être clair pour vos visiteurs, qui doivent alors savoir où ils vont atterrir.

En pratique, faire ressortir ce contenu cliquable en changeant sa couleur, en le soulignant ou en intégrant un bouton lorsque l’internaute passe le curseur dessus, lui permettra de savoir ce qui l’attend.

8. Appliquez les règles de base pour l’accessibilité de vos contenus web (WCAG)

(Exemple d’accessibilité pour les personnes malvoyantes, à gauche de cet article du CNRS)

Ces règles, communément appelées WCAG (pour “web content accessibility guidelines”, en anglais) ont été créées pour les créateurs de sites web, afin qu’ils permettent aux personnes en situation de handicap d’accéder plus facilement à leurs contenus.

Elles sont régulièrement mises à jour.

Aussi, nous vous recommandons de les consulter au moment de créer votre site internet ou de le retravailler.

Découvrez ci-dessous les conseils UX/UI les plus importants à appliquer en fonction du handicap :

• Intégrez des sous-titres aux vidéos intégrées à votre site, afin d’en faire également profiter les personnes sourdes ou malentendantes. Ces sous-titres doivent bien-sûr rester affichés suffisamment longtemps pour pouvoir être lus.
• Simplifiez le plus possible votre site internet, afin de le rendre plus accessible et intuitif aux personnes souffrant de troubles cognitifs.
• Limitez les mouvements à effectuer pour naviguer sur votre site : scroller ou cliquer peuvent s’avérer difficiles pour des personnes subissant un trouble moteur.
• Réfléchissez à deux fois avant d’intégrer l’option de commande vocale, ou permettez à vos visiteurs souffrant d’un trouble du langage de pouvoir écrire systématiquement.
• Assurez-vous d’utiliser des couleurs qui soient bien perçues par les personnes souffrant de troubles visuels.

Prêter attention à ces règles rendra votre site internet accessible au plus grand nombre, et donc responsable.

Parce que cette responsabilité passe également par le respect de l’environnement, sachez que certains logiciels de création de site internet se revendiquent comme écoresponsables.

Découvrez le comparatif d’hébergeurs web écologiques, rédigé par La Fabrique du Net.

9. Affichez votre crédibilité

Privilégiez toujours la transparence au sujet de vos prix, de vos contenus, de la collecte des données que vous appliquez, ou encore de vous-même.

Un site internet n’affichant pas clairement ces informations, à un endroit ou un autre, aura tendance à déstabiliser ses visiteurs.

Il y a peu de chances pour que ces derniers engagent une quelconque action en conséquence.

Évitez donc aux internautes de devoir parcourir l’ensemble de votre site internet pour accéder à ces informations.

Mais rendez-les accessibles dès la page d’accueil, en affichant les onglets dédiés dans votre menu de navigation.

Tous vos tarifs doivent être indiqués aux côtés des produits que vous vendez.

Si c’est une solution ou un service comprenant plusieurs forfaits que vous commercialisez, prévoyez une page dédiée comprenant toutes les informations chiffrées de vos offres.

Si vous avez obtenu une ou plusieurs certifications concernant votre protection des données, n’hésitez pas à les mentionner clairement. Ainsi, vous rassurez davantage vos cibles et vous contribuez à les fidéliser.

audrey : merci Victoria pour ces conseils très pratiques sur le design d’un site web. Je me permets d’ajouter qu’une fois votre site en ligne, il est possible de suivre le comportement de vos visiteurs avec des cartes de chaleur afin de le peaufiner si besoin

FAQ – 3 questions fréquentes sur les bonnes pratiques UX d’un site web

Quels sont les incontournables dans l’optimisation d’un site internet ?

Votre site internet doit rapidement fournir à vos visiteurs les informations essentielles dont ils vont avoir besoin, sans surplus ni surcharge. Pour cela, certains éléments comme votre menu, votre barre de recherche et le cœur de votre activité doivent être visibles dès l’arrivée des internautes sur votre page d’accueil. Par ailleurs, votre contenu doit être organisé hiérarchiquement. Les éléments les plus importants doivent apparaître en premier et être mis en avant. De plus, naviguer sur votre site doit être quasiment intuitif. Les contenus cliquables doivent l’être clairement, sans fioritures. Enfin, votre thème doit être responsive, afin que l’on puisse le consulter sur tous types d’appareils mobiles.

À quels éléments de design doit-on faire particulièrement attention ?

Tout d’abord aux éléments de votre charte graphique : vos couleurs, votre logo et autres éléments graphiques propres à votre identité en tant que marque. Ils doivent se retrouver sur votre site de manière à être reconnus et identifiés par vos visiteurs. Faites également toujours en sorte que vos contenus soient clairs. Votre police doit être standard afin d’être lisible, de même que la couleur de vos textes et de vos boutons, d’une manière générale. Votre design doit être au service de l’optimisation de votre site, et de sa navigation. Et non l’inverse.

Peut-on également optimiser les textes ?

Oui, et c’est même recommandé. Sans parler de SEO qui est un autre sujet, certaines règles simples sont applicables pour tout type de texte présent sur votre site internet pour améliorer sa lisibilité. Rédigez des phrases courtes et simples, en privilégiant le style direct. Mais aussi aérez un maximum ses paragraphes en sautant des lignes ou en ajoutant des espaces.

Conclusion sur les meilleures pratiques UX/UI d’un site Internet

L’essentiel, en termes d’UX/UI, est que votre site internet soit clair, lisible, fluide et accessible.

Pour atteindre ces 4 objectifs principaux, soyez particulièrement attentifs aux éléments suivants :

• Privilégier un design qui soit responsive,
• Opter pour des éléments de design attendus des internautes, tout en choisissant ceux qui sont en accord avec votre identité de marque ou votre charte graphique… Et les conserver de façon uniforme sur l’ensemble de votre site.
• Vous assurer que vos contenus soient lisibles et compréhensibles,
• Faciliter un maximum la navigation pour qu’elle soit la plus naturelle possible pour vos visiteurs.
• Ne surtout pas oublier l’accessibilité de votre site internet pour les personnes en situation de handicap.
• Vous montrer transparent et rassurant, notamment concernant l’utilisation des données personnelles ou encore vos prix.

Plus votre site web est amélioré et optimisé, plus vous augmentez vos chances d’accroître le nombre de vos visiteurs et donc, d’être bien référencé.

Enfin, si vous devez vous donnez une priorité, commencez par améliorer l’expérience sur vos pages de vente.

Comment structurez-vous les informations sur votre site web pour offrir la meilleure expérience utilisateur ?