Apprendre / Guides / Le guide de la conception du site web
13 bonnes pratiques de conception web pour améliorer l'expérience utilisateur en 2023
Le cauchemar de toute équipe est de terminer un long processus de conception web pour découvrir que son site web offre une mauvaise expérience utilisateur (UX).
Pour éviter de devoir retourner à la case départ, appliquez dès le départ les bonnes pratiques de conception web qui ont fait leurs preuves.
Nous avons dressé une liste de 13 règles de conception web pour vous aider à améliorer l'expérience utilisateur, à réduire les taux de rebond et à renforcer la réputation de votre marque et votre chiffre d'affaires en séduisant les clients à chaque fois qu'ils interagissent avec votre site web.
Améliorez la satisfaction utilisateur sur votre site avec Hotjar
Les informations sur l'expérience produit de Hotjar vous indiquent exactement ce que les utilisateurs aiment (et détestent) sur votre site, ce qui vous aide à apporter les changements nécessaires à votre conception web.
13 bonnes pratiques de conception web à mettre en œuvre
Les bonnes pratiques de conception web commencent par donner la priorité au client et à rendre son expérience aussi facile et intuitive que possible.
Notre liste couvre 13 domaines clés de la conception web, avec des conseils pratiques que vous devez appliquer avant, pendant et après la phase de conception pour une amélioration continue.
1. Conception centrée sur l'utilisateur
"Une bonne conception web ne se limite pas à l'esthétique", déclare Kristopher Tabaie, développeur web chez Lesar UK. "Elle implique une mise en page conviviale, une navigation claire et une interface nette qui communique clairement le contenu. Cela rend votre site web accessible (en interne et en externe pour les moteurs de recherche) en créant une expérience de navigation facile".
Alors, comment faire en sorte que votre conception soit centrée sur le client ?
Commencez par définir les objectifs finaux de votre site web. Déterminez clairement à qui il s'adresse, qu'il s'agisse de clients potentiels, d'investisseurs ou d'employés. Posez-vous la question suivante : qu'est-ce que mes utilisateurs essaient d'accomplir ? Cherchent-ils à trouver des informations sur un produit, à comparer des prix ou à postuler à un emploi ? Connaissent-ils bien vos produits, vos services ou votre marque ?
Pour les entreprises e-commerce, par exemple, l'objectif principal est généralement de réaliser des ventes, tandis que l'objectif secondaire peut être d'augmenter le nombre d'inscriptions à la newsletter. Cela signifie que votre conception doit veiller à rendre l'expérience de navigation et d'achat claire et attrayante pour votre client.
Utilisez un cadre à 4 piliers pour identifier :
1. Ce que les clients veulent découvrir
2. Où ils veulent aller
3. Ce qu'ils veulent faire
4. Ce qu'ils veulent acheter
Créez des personas d'acheteur en vous basant sur les données démographiques et les fonctions des utilisateurs réels. Faites des recherches pour comprendre les problèmes de vos utilisateurs et la manière dont votre site web les résout.
Réunissez des équipes interfonctionnelles (équipes de conception et d'expérience utilisateur, spécialistes SEO, rédacteurs de contenu, CSM et commerciaux) afin qu'ils puissent offrir des perspectives différentes sur vos clients et leurs besoins
Créez un panel d'utilisateurs tests pour un feedback continu : il est beaucoup plus facile d'identifier les points de douleur des utilisateurs lorsque vous comprenez qui ils sont et comment ils se comportent.
Conseil de pro : utilisez les outils Observe de Hotjar comme Recordings pour obtenir une vue détaillée du comportement de l'utilisateur sur votre site. Puis utilisez Surveys pour poser des questions à vos utilisateurs et comprendre le pourquoi de leurs actions.
Les enquêtes de Hotjar vous permettent de poser des questions sur l'expérience utilisateur sur votre site pour vous aider à savoir ce qui fonctionne et ce qui frustre les clients
2. Conventions de conception
Il est tentant de mettre votre site en avant par une conception originale, mais si vous ne respectez pas certaines conventions de conception, vous risquez de perturber les utilisateurs et de les inciter à rebondir.
Pendant la phase de conception, créez de la satisfaction client et aidez les utilisateurs à se sentir "chez eux" grâce à ces bonnes pratiques :
Ayez une zone "héros" claire avec un titre qui décrit efficacement les problèmes que votre entreprise résout. Les utilisateurs décident de rester ou de rebondir en quelques secondes. Faire passer votre message rapidement peut donc augmenter le temps passé sur la page et les conversions.
Placez les principaux menus de navigation en haut ou dans le coin gauche de votre page web, là où les utilisateurs s'attendent à les trouver
Utilisez des boutons qui changent de couleur lorsque les utilisateurs les survolent, afin qu'ils sachent qu'un clic entraînera une action
Utilisez des icônes reconnaissables, comme un panier d'achat sur un site e-commerce
Placez le logo en haut à gauche ou au centre de votre site web, et faites en sorte qu'il renvoie à la page d'accueil pour aider les utilisateurs à toujours y revenir
Utilisez des mises en page normalisées pour les pages communes à tous les sites web, comme les pages d'"aide"
Placez un grand numéro de téléphone en haut et en bas de la page, et faites en sorte qu'il soit cliquable pour qu'il soit facilement visible et utilisable sur mobile
Utilisez des mises en page conventionnelles pour votre secteur d'activité. Par exemple, si vous êtes une société e-commerce, les utilisateurs s'attendront à ce que votre site ressemble à ceux sur lesquels ils ont déjà navigué.
3. Navigabilité
Les utilisateurs ne convertiront pas s'ils ne peuvent pas trouver rapidement et facilement les informations dont ils ont besoin pour prendre une décision, c'est pourquoi votre site doit être bien organisé.
"Veillez à ce que le menu de navigation soit facile à trouver sur ordinateur et sur mobile, qu'il ne soit pas trop détaillé et qu'il soit clair. Un menu de navigation clair et concis aide les utilisateurs à trouver rapidement leur domaine d'intérêt et à le suivre. Il aide également le designer à créer une conception qui guide les utilisateurs tout au long du parcours souhaité."
Utilisez ces sept bonnes pratiques pour une bonne navigabilité :
Utilisez des catégories de menu et des noms de menu simples et descriptifs qui sont pertinents pour votre site web
Utilisez des conventions de menu comme À propos, Services ou encore Contact, pour que les utilisateurs sachent à quoi s'attendre
Intégrez une barre de recherche pour que les utilisateurs puissent trouver ce qu'ils cherchent n'importe où sur votre site
Intégrez un pied de page de navigation pour que les utilisateurs n'aient pas besoin de faire défiler la page jusqu'en haut
Utilisez des "fils d'Ariane" pour suivre les parcours des utilisateurs, afin qu'ils puissent facilement revenir sur leurs pas
Intégrez des liens dans le texte, avec un texte d'ancrage descriptif
Affichez clairement les prix, afin que les clients n'aient pas à vous contacter pour les connaître
Conseil de pro : pendant les tests bêta, utilisez Hotjar Recordings (lecture des utilisateurs qui font défiler les pages de votre site et cliquent dessus) et Heatmaps pour voir exactement comment les utilisateurs naviguent sur votre site et comprendre quels sont les éléments de la page qui les intéressent le plus.
Les enregistrements de sessions Hotjar vous permettent de repérer les bugs et les problèmes qui frustrent les utilisateurs et les incitent à rebondir.
4. Hiérarchie des informations
La hiérarchie sur la page consiste à organiser les éléments du site web de manière à ce que les visiteurs se dirigent naturellement vers les informations les plus importantes en premier.Cela permet de guider les utilisateurs pour qu'ils agissent d'une manière qui leur semble naturelle et agréable.
Utilisez la bonne position, la bonne couleur et la bonne taille pour attirer l'attention sur les éléments importants en premier.
La page web de l'offre Premium de Spotify est un excellent exemple de hiérarchie visuelle : le titre attire l'attention avant que l'œil ne se dirige naturellement vers les avantages et le CTA.
5. Lisibilité
Un site web facile à lire offre une expérience agréable à l'utilisateur et crée des clients fidèles et satisfaits.
Trouvez le bon équilibre entre le contenu, le style et la fonctionnalité. Évitez le superflu, laissez le contenu respirer un peu et utilisez des images ou des vidéos pour étayer votre contenu.
Voici comment faciliter la lecture de votre contenu :
Utilisez des polices de caractères cohérentes lors de la phase de conception pour créer un sentiment de cohésion sur l'ensemble de votre site
Choisissez une police de caractères claire comme Open Sans (pas cursive) dans une taille d'au moins 12 points
Contentez-vous de deux ou trois tailles de police au total
Utilisez des styles de police différents pour séparer le contenu des éléments de menu et des boutons de navigation
Utilisez des polices différentes pour les différents types de contenu et soyez cohérent
Décomposez le texte en paragraphes courts pour le rendre plus facile à lire et à balayer (les gros blocs de texte sont visuellement peu attrayants à l'écran)
Commencez chaque paragraphe par une nouvelle information, afin que les utilisateurs puissent voir rapidement s'ils ont besoin de la lire
Utilisez des puces pour rendre le texte plus facile à balayer
Contrastez la couleur du texte avec celle de l'arrière-plan et évitez les combinaisons comme le rouge et le noir, qui sont difficiles à lire
Laissez beaucoup d'espace entre les textes, les titres principaux et les marges pour créer un effet équilibré et épuré
6. Image de marque
L'utilisation d'une image de marque cohérente sur l'ensemble de votre site aide les clients à reconnaître votre entreprise et à instaurer la confiance.
Veillez à ce que votre image de marque soit adaptée à votre secteur d'activité. Par exemple, les utilisateurs à la recherche d'un comptable renonceront probablement à un site aux couleurs vives et à la police Comic Sans.
Tenez-vous en à trois couleurs et gardez un aspect et une convivialité cohérents sur toutes vos pages. Choisissez des couleurs qui suscitent les bonnes émotions chez les clients. Voyez comment le jaune et le rouge de Buzzfeed attirent l'attention des utilisateurs et suscitent leur enthousiasme pour le contenu.
7. Visuels
Des éléments visuels forts attirent l'attention des utilisateurs et décomposent le texte pour rendre votre site plus facile à parcourir.De plus, ils aident les clients à s'imaginer en train d'utiliser vos produits dans leur vie quotidienne.
Quelles sont donc les bonnes pratiques de visuels de sites web ?
Choisissez des images au stade de la maquette de votre site web. Dans la mesure du possible, évitez les images génériques et utilisez des photos de haute qualité de vos produits, de vos employés ou de vos locaux afin de créer une impression plus authentique et d'instaurer un climat de confiance.
Veillez à ce que les images soient réactives, c'est-à-dire qu'elles s'affichent bien sur différents appareils, et compressées pour éviter de ralentir votre site, avec un texte alt pour le référencement et l'accessibilité
Les animations sont idéales pour les instructions, mais limitez les gros fichiers au minimum pour ne pas nuire à la vitesse de chargement
Si votre activité est saisonnière, veillez à faire pivoter les images au fur et à mesure que votre offre évolue pour que les utilisateurs voient toujours les produits les plus récents
8. CTA
L'objectif ultime de votre site est de persuader les utilisateurs de passer à l'action, qu'il s'agisse de télécharger un lead magnet, de s'inscrire à votre newsletter ou d'acheter un produit.Des appels à l'action (CTA) stratégiquement placés aident à convertir les utilisateurs en clients payants.
Suivez ces bonnes pratiques pour des appels à l'action percutants :
Faites en sorte que les CTA soient clairement visibles : ne les noyez pas dans le texte et utilisez l'espace blanc autour d'eux pour aider l'œil à zoomer
Orientez les leads entrants dans la bonne direction en incluant un CTA pertinent sur chaque page. N'obligez pas les utilisateurs à revenir à votre page d'accueil pour convertir
Incluez des CTA sur des pages internes comme votre page "À propos", ainsi que sur les pages de produits
Utilisez des CTA cohérents pour les mêmes actions afin d'éviter de perturber et de frustrer les utilisateurs
Conseil de pro : utilisez Hotjar Heatmaps et Recordings pour identifier les CTA qui n'obtiennent pas de clics. Cela vous permet d'apporter des solutions rapides, comme le déplacement de la position ou l'utilisation d'une police de caractères différente, sans avoir nécessairement besoin de revoir la conception de la page dans son ensemble.
Les heatmaps vous présentent une vue agrégée intuitive des parties de votre site qui attirent l'attention et de celles qui ne l'attirent pas, afin de vous aider à apporter des changements qui améliorent l'expérience utilisateur.
9. Adaptation à tous les appareils
Plus de 50 % du trafic web provient d'appareils mobiles. Votre site doit donc être performant sur les smartphones et les tablettes ainsi que sur les ordinateurs fixes et portables.S'il est difficile de naviguer ou si les éléments ne s'affichent pas correctement sur un petit écran, les utilisateurs seront frustrés et rebondiront.
Au cours de la phase finale de la conception, une fois la mise en page approuvée, appliquez ces bonnes pratiques pour les sites web réactifs :
Gardez des menus simples et incluez une barre de recherche pour limiter les éléments du menu
Faites en sorte que les CTA soient clairement visibles, avec des boutons suffisamment grands pour être touchés avec le pouce, qui est moins précis qu'un curseur
Utilisez une conception simple pour privilégier la vitesse de chargement
Évitez les gros blocs de texte et utilisez une police facilement lisible sur un petit écran
Testez sur différents navigateurs
La réactivité mobile contribue également à l'optimisation des moteurs de recherche. Il faut ajouter à cela l'attitude "mobile-first" de Google", explique Shane McEvoy de Flycast Media, "ce qui signifie que les sites web qui ne sont pas adaptés aux mobiles ont peu de chances d'être bien classés, sacrifiant de ce fait un trafic précieux".
10. Accessibilité
Tout le monde doit pouvoir utiliser votre site, quel que soit son appareil, ses besoins particuliers ou sa situation géographique.
Posez-vous la question suivante : votre conception web est-elle compatible avec les technologies d'assistance ? Comment pouvez-vous rendre le site facilement navigable pour tous les utilisateurs ? Quels outils allez-vous utiliser pour développer le site et présentent-ils des problèmes d'accessibilité intégrés ?
Appliquez ensuite les bonnes pratiques d'accessibilité :
Dès le début de la phase de conception, pensez au contraste des couleurs
N'utilisez jamais la couleur seule pour les instructions afin de ne pas perturber les utilisateurs daltoniens
Utilisez les ressources de Design and Develop Overview | Web Accessibility Initiative (WAI) | W3C et d'Accessibility Insights pour rendre votre conception accessible
Obtenez le feedback utilisateur et effectuez des recherches pour améliorer les itérations de conception
Remarque : Hotjar ne se revendique pas expert en conception accessible, mais nous nous efforçons constamment de rendre notre propre site plus accessible à divers utilisateurs.
"L'accessibilité ne profite pas qu'aux utilisateurs, mais aussi aux propriétaires de sites web, qui obtiennent plus de trafic, plus de vues et un taux d'adoption et d'engagement plus élevé lorsque davantage d'internautes peuvent accéder à leurs sites et applications."
11. SEO
Peu d'internautes cliquent plus loin que la première page des résultats des moteurs de recherche. Vous devez donc vous assurer que votre site web est bien classé pour que vos utilisateurs puissent le trouver et commencer à naviguer. Pour ce faire, vous devez réfléchir à ce qui fait un bon site web pour les utilisateurs et cocher les cases d'optimisation pour les moteurs de recherche comme Google, Bing et Yandex.
Utilisez les bonnes pratiques suivantes pour l'optimisation des moteurs de recherche (SEO) :
Créez un contenu utile, partageable et optimisé pour les mots-clés
Incluez des liens internes vers d'autres pages de votre site
Utilisez des titres et des sous-titres et incluez un plan du site pour faciliter la compréhension des robots d'indexation (et des utilisateurs)
Obtenez des liens retour d'autres sites réputés
Utilisez un texte alt pour les images
12. Sécurité
Que les utilisateurs effectuent des paiements par l'intermédiaire de votre site ou qu'ils se contentent de naviguer, une bonne sécurité les met en confiance et renforce la réputation de votre marque.
Utilisez les bonnes pratiques suivantes pour maintenir des niveaux de sécurité élevés :
Utilisez un hébergeur sécurisé doté de pare-feu côté serveur, d'un système de cryptage, d'un logiciel antivirus et anti-malware, de systèmes de sécurité sur site, d'un certificat SSL et de la disponibilité du CDN
Empêchez les accès non autorisés en limitant les tentatives de connexion avec des plugins comme Login LockDown
Imposez des mots de passe sécurisés avec des lettres, des chiffres et des symboles spéciaux, et utilisez l'authentification à deux facteurs
13. Testez, testez, testez
Testez dès que possible pour valider vos idées de conception et continuez à effectuer des tests utilisateurs jusqu'au lancement. Une fois le lancement effectué, effectuez des tests réguliers, en particulier après l'ajout de nouvelles fonctionnalités ou de mises à jour, afin de repérer les bugs qui perturbent l'expérience utilisateur et augmentent le taux d'attrition des clients.
"Une fois que les visiteurs utilisent votre site web, il est important de tout mesurer et d'obtenir des données concises pour piloter le développement commercial, le développement technique et la conception de votre site web."
Lorsque votre site est en ligne, lancez des tests A/B réguliers pour tester différentes fonctionnalités, comme la publication de deux pages de destination identiques avec différents CTA pour voir laquelle est la plus performante.
Utilisez les enquêtes Hotjar et les widgets Feedback pour obtenir un feedback en contexte "sur le terrain" lorsque les utilisateurs interagissent avec votre site, afin de valider vos hypothèses et d'améliorer la conception.
La conception continue centrée sur le client
Les tendances de conception web vont et viennent, mais une conception solide et centrée sur l'utilisateur est éternelle. La mise en œuvre des bonnes pratiques de conception web vous aide à créer une interface utilisateur fantastique, afin que les utilisateurs puissent facilement atteindre leurs objectifs sur votre site.
Placez les utilisateurs au centre de toutes les étapes de la planification, de la conception et plus encore, et ils vous récompenseront par leur fidélité et l'augmentation de votre chiffre d'affaires. C'est en comprenant comment les utilisateurs interagissent réellement avec votre site que vous embarquerez sur la voie du succès.
Améliorez la satisfaction utilisateur sur votre site avec Hotjar
Les informations sur l'expérience produit de Hotjar vous indiquent exactement ce que les utilisateurs aiment (et détestent) sur votre site, ce qui vous aide à apporter les modifications nécessaires à votre conception web.
