13 Meilleures Pratiques de conception de sites Web pour 2021

De nos jours, vous pouvez obtenir un site Web opérationnel en quelques minutes. Mais il y a une différence entre un site Web en direct et son optimisation.

Pourquoi le design est-il important ? Il ne faut que 0,05 seconde aux gens pour se faire une opinion sur votre site Web. Oui, vous avez bien lu cela – 50 millisecondes pour que quelqu’un soit époustouflé ou repoussé par votre site Web. La plupart de cette opinion est formée à partir de la conception.

La conception de sites Web a également un impact sur vos conversions, votre crédibilité et, en fin de compte, fait ou brise le succès de votre site. Aucun site Web n’est parfait, mais vous devez l’optimiser autant que possible.

Voici également quelque chose à prendre en compte: Après une mauvaise expérience, il est peu probable que 88% des consommateurs retournent sur un site Web. En plus de cela, une étude récente a révélé que 77% des agences affirment qu’une mauvaise conception de site Web est la faiblesse la plus importante de leurs clients.

Résultat net: Si votre conception Web n’est pas optimisée pour l’expérience utilisateur (UX), cela va nuire à votre succès. C’est pourquoi j’ai écrit ce guide.

De nombreux facteurs entrent dans la conception d’un site Web. Ce sont les treize éléments les plus importants à prioriser en 2021. Si vous suivez ces bonnes pratiques, les performances de votre site s’amélioreront considérablement.

Utilisez cette liste de contrôle pour vous assurer d’avoir un design gagnant

1. Réduisez le texte
2. Montrez, ne dites pas
3. Utilisez des phrases courtes
4. Essayez des paragraphes plus courts
5. Choisissez un jeu de couleurs qui convient à
6. Rendez votre CTA clair
7. Renforcez les actions avec familiarité
8. Simplifiez la navigation
9. Optimisez votre conception pour mobile
10. Priorisez le référencement
11. Surveillez la vitesse de chargement de votre page
12. Exécutez en continu des tests A/ B

Minimisez le texte

Ne remplissez pas vos pages avec des blocs massifs de texte.

Je ne parle pas des articles de blog, qui ont parfois besoin d’aller en profondeur (comme celui-ci!). Je parle de vos pages Web (par exemple, page d’accueil, page de destination). Gardez le texte au minimum ici.

Vous souhaitez informer les visiteurs de votre site Web sur vous, votre entreprise, votre marque et vos produits. Mais vous devez apprendre à raconter cette histoire en quelques phrases ou – mieux encore – en quelques mots.

Afficher, ne le dites pas

Les visuels vous aident non seulement à décomposer le contenu écrit, mais ils peuvent également fournir des explications plus approfondies. Montrez à vos visiteurs de quoi vous parlez. Ils comprendront mieux dans un laps de temps plus court.

La page produit de Harry incarne ces deux premiers principes de conception:

Par exemple, supposons que votre site Web vend des rasoirs, des lames, de la crème à raser et d’autres produits de rasage pour hommes.

Vous opérez sur un modèle commercial d’abonnement et livrez ces produits à vos clients sur une base mensuelle. Le design de vos rasoirs est très beau — ils sont faits de bois dur sculpté et sont assez agréables à offrir en cadeau.

Plutôt que d’entrer dans tous ces détails sur votre page d’accueil, vous pouvez simplement avoir une photo de ces produits avec un texte disant quelque chose comme « livré à votre porte. » Vous faites passer votre message en seulement quatre mots.

Bien sûr, vous pouvez entrer plus en détail plus le visiteur pénètre profondément dans vos pages, mais une description longue du texte n’est pas nécessaire.

Utilisez des phrases courtes

Les phrases courtes sont plus faciles à lire.

Ne bombardez pas les visiteurs avec de gros morceaux de texte. Ils ne sauront pas par où commencer la lecture et ne pourront pas digérer votre contenu.

Mélangez. Si vous avez besoin d’une longue phrase, suivez-la avec une courte. La variété aide.

Essayez des paragraphes plus courts

Utilisez les sauts de paragraphe à votre avantage. C’est bien d’écrire des paragraphes plus longs, mais j’aime garder mes paragraphes de page d’accueil à quelques phrases.

Il est également important de ne pas en faire trop. Trop de bonnes choses, c’est en fait une mauvaise chose.

Commencez chaque paragraphe avec de nouvelles informations, donc si quelqu’un fait défiler, il peut rapidement dire s’il doit lire ce paragraphe.

L’élimination du texte inutile sur vos pages réduit l’encombrement ET met davantage l’accent sur votre appel à l’action.

Faire ressortir le CTA seul dans son propre paragraphe est plus percutant que de l’enterrer dans un tas de texte.

Les balles sont un outil très utile dans cette situation. Au lieu d’ajouter des paragraphes et une écriture longue, envisagez d’utiliser des listes. Dans ces listes, utilisez des puces.

Des études montrent que plus de personnes regarderont les listes à puces que les autres formats. En effet, ils aident à améliorer la lisibilité d’une page et vous permettent de mettre en évidence les points les plus importants que vous souhaitez faire.

Choisissez une palette de couleurs qui correspond à votre stratégie de marque

Les choix de couleurs que vous faites sur votre site Web sont plus importants que vous ne le pensez.

Les visiteurs jugent votre site Web en moins de 90 secondes. La plupart de cela est le résultat des couleurs que vous choisissez.

La meilleure façon de choisir la palette de couleurs de votre site Web est avec l’image de marque. Reportez-vous à votre logo. Les couleurs de votre site Web correspondent-elles à votre image de marque ?

Voici un exemple. Pensez à Starbucks.

Lorsque vous entendez ce nom de marque, je suis sûr que vous avez une image dans la tête. Peut-être que c’est le logo, un signe ou un emplacement de magasin.

Associez-vous des couleurs à ce nom? Regardons maintenant leur site Web.

Il n’est pas surprenant qu’ils soient allés avec un schéma de couleurs vertes.

Ce choix de design correspond à leur logo et à leur image de marque, ce qui renforce ce que les consommateurs associent déjà à la marque. En gardant les choses cohérentes, il n’y a pas de confusion. Il serait étrange que vous visitiez ce site Web et que les couleurs soient jaune et rouge. Cela n’a rien à voir avec leur marque.

Nous parlerons plus en profondeur du renforcement au fur et à mesure que nous continuerons.

Rendez votre CTA claire et évidente

Les CTA ne doivent pas être enterrés. Ils doivent être grands, audacieux et puissants et ils doivent clairement se démarquer de l’action que vos visiteurs doivent entreprendre ensuite.

Pourtant, la plupart des sites Web n’ont pas de bouton CTA qui peut être repéré en moins de trois secondes. Il y a de fortes chances que vous tombiez dans le groupe qui prend plus de temps. Ce n’est pas la catégorie dans laquelle vous voulez être.

Vous ne pouvez pas générer de conversions sans un bouton CTA efficace.

Je ne vois presque jamais de CTA sur les pages intérieures d’une entreprise (les pages qui expliquent ce que fait votre marque et ce que vous proposez). C’est un défaut de conception majeur. Vous ne pouvez pas vous attendre à ce que les visiteurs reviennent sur votre page d’accueil pour se convertir.

Jetez un coup d’œil à ce CTA de Litmus.

Regardez comme cette conception est simple. Il y a un minimum de texte à l’écran, le message est donc clair.

En conséquence, le CTA « inscription gratuite » se démarque. En fait, Litmus l’a même placé à plus d’un endroit sur l’écran.

Où vous devez placer votre CTA diffère d’une page à l’autre. Par exemple, les articles de blog devraient avoir le CTA en haut pour que les lecteurs le voient rapidement et également en bas après avoir lu le message.

Aller plus loin : Vous voulez optimiser vos CTA? Voici 11 façons d’améliorer vos appels à l’action.

Renforcez les actions avec familiarité

Si votre message est le même, votre CTA doit être le même sur chaque page.

Réfléchissez à la façon dont les gens naviguent sur votre site Web. Même si vous configurez un certain flux, tout le monde n’atterrira pas sur une page et ne convertira pas en quelques secondes. Ils peuvent d’abord naviguer un peu.

Par exemple, disons que vous avez un site Web de commerce électronique. Vous ne devez pas changer le bouton CTA de page en page, ce qui ressemblerait à ceci:

• Page d’accueil: Commander maintenant
• Page de la catégorie: Achetez-le aujourd’hui
• Page du produit: Cliquez pour acheter

Si un visiteur voit l’un de ces boutons sur votre page d’accueil, l’autre sur une page de catégorie et le troisième sur une page de produit, il n’y a pas de renforcement.

Au lieu de cela, gardez la messagerie et le style cohérents. Voici un bon exemple de la marque de bijoux et d’accessoires MVMT.

Peu importe si vous êtes sur leur page de lunettes, de montres ou de bijoux. Vous allez voir le même CTA « MAGASINER MAINTENANT » pour leurs produits.

Chaque page reste également cohérente avec le design minimaliste en noir et blanc de leur site Web.

Appliquez également ce principe de conception à votre site Web.

Il va au-delà du bouton CTA. L’idée est d’avoir ce type de renfort avec le plus d’éléments possible.

La cohérence du langage, des messages et du design renforce l’identité de votre marque et laisse une impression durable dans l’esprit de vos visiteurs.

Simplifiez la navigation

Il ne devrait pas être difficile pour un visiteur de site Web de trouver ce qu’il recherche sur votre site.

Mettez-vous à leur place. Pourquoi visitez-vous le site Web? Comment accomplissez-vous cette tâche? Peut-être que vous voulez acheter quelque chose, obtenir plus d’informations ou voir ce qu’il y a à offrir. Quelle que soit cette raison, si les visiteurs ne peuvent pas le comprendre rapidement, ils vont partir.

Il y a juste trop de concurrence là-bas. Les utilisateurs n’ont aucune raison de supporter une navigation difficile sur le site Web. Tout ce qu’ils ont à faire est de quitter votre site et de trouver ce dont ils ont besoin ailleurs.

N’essayez pas de réinventer la roue avec un design complexe. Respectez le format standard.

Par exemple, la plupart des sites Web placent le menu de navigation horizontalement en haut de chaque page. Si votre menu est ailleurs, cela pourrait dérouter vos visiteurs.

Moins il y a d’options dans le menu, mieux c’est. Sinon, il sera trop difficile pour les gens de trouver ce dont ils ont besoin. Ce concept est connu sous le nom de loi de Hick.

Plus vous donnez d’options à quelqu’un, plus il lui faudra de temps pour prendre une décision. C’est pourquoi des conceptions et des navigations complexes écraseront vos taux de conversion.

Il y a une expérience célèbre à ce sujet, appelée l’étude jam, qui discute du paradoxe du choix.

L’expérience a été menée dans une épicerie locale. Les consommateurs ont reçu 24 confitures à déguster un jour et six confitures le lendemain:

• L’affichage plus grand du premier jour a attiré 60% des acheteurs, mais seulement 3% de ces personnes ont effectué un achat.
• La plus petite exposition de six confitures le deuxième jour a attiré 40% des acheteurs, mais 30% d’entre eux ont effectué un achat.

En limitant les choix, les conversions étaient dix fois plus élevées. Ce même concept peut être appliqué à la navigation sur votre site Web.

Éliminez les options de menu inutiles. Par exemple, au lieu d’avoir un bouton « accueil », utilisez simplement le logo du site Web pour renvoyer à l’écran d’accueil.

Consultez la page d’accueil de Square.

Le design est super propre. Les options de menu sont extrêmement limitées. Cela permet aux visiteurs de choisir facilement une sélection qui correspond à leurs besoins.

Vous remarquerez qu’il y a un minimum de texte à l’écran et que le CTA est clair et évident.

Ce type de conception rend presque impossible pour les visiteurs du site Web de se perdre ou de se perdre lorsqu’ils naviguent.

Pour ceux d’entre vous qui ont beaucoup d’options sur votre site Web, comme une boutique en ligne, vous pouvez ajouter une barre de recherche pour simplifier le processus de navigation sans utiliser de menu compliqué. Beaucoup de sociétés de logiciels placent leurs fonctionnalités dans un onglet fonctionnalités plutôt que d’avoir un onglet individuel pour chaque fonctionnalité.

Optimisez votre conception pour les appareils mobiles

Le mobile est la façon dont la majorité du monde accède à Internet. Cela signifie que si vous n’êtes pas optimisé pour le mobile, votre site Web ne fonctionnera pas bien.

Jetez un coup d’œil à ces données de Hootsuite:

Les moteurs de recherche le reconnaissent et récompensent les sites adaptés aux mobiles. Voici quelques statistiques supplémentaires pour atteindre le point à la maison:

• Google sait que 87% des propriétaires de smartphones utilisent leurs appareils pour effectuer une recherche sur Internet au moins une fois par jour.
• 58% de toutes les recherches Google sont effectuées à partir d’un appareil mobile
• Résultat: 70% des résultats de la première page sur Google sont optimisés pour les appareils mobiles.

Le référencement mobile est la chose la plus importante que vous puissiez faire pour bien vous classer sur Google. Sérieusement.

Si votre site Web ne semble pas bien sur un smartphone, les gens ne voudront pas rester. Assurez-vous donc que les conceptions de votre site Web sont adaptées aux mobiles.

Aller plus loin: Vous voulez apprendre à optimiser votre site Web pour mobile? Consultez notre guide complet d’un site Web adapté aux mobiles.

Priorisez le référencement

Tout ce que vous faites sur votre site doit revenir au référencement.

Et il ne suffit pas d’ajouter des mots clés ici et là. C’est un système à l’échelle du site Web d’amélioration du contenu et de ciblage sans relâche de sujets spécifiques pour renforcer l’autorité de votre site dans ce domaine.

Par exemple, une page de destination pour un site de commerce électronique voudra se concentrer sur certains éléments de la page tels que:

• Facilité d’utilisation. Comme il est facile pour vos visiteurs d’utiliser et de naviguer.
• Mobile. L’apparence et les performances de votre site Web sur un appareil mobile.
• Optimisation des mots clés. Les mots et les phrases que vous souhaitez classer.
• Liens internes. À quelle fréquence vous créez des liens vers d’autres pages de votre site Web.
• Titre. C’est souvent le plus gros texte sur une page Web. En tant que tel, il effectue la plupart des tâches lourdes sur votre page de destination.

Créez un plan du site XML. Cela permettra aux robots d’exploration des moteurs de recherche d’analyser plus facilement le contenu de votre site Web. Un plan du site indiquera aux robots l’emplacement des pages sur votre site, la date de la dernière mise à jour de la page, la fréquence de mise à jour et la relation avec les autres pages de votre site.

Un plan du site approprié indique à Google que vous n’avez pas de contenu en double, ce qui peut endommager votre classement SEO.

Lorsque vous concevez votre site, une TONNE d’éléments moins évidents entrent également en ligne de compte dans le classement sur Google.

Nous avons déjà passé en revue quelques aspects que vous pouvez améliorer sur la page elle-même. Mais d’autres éléments incluent:

• Domaine. Votre URL est assez conséquente à votre classement Google. Les facteurs clés incluent le fait d’avoir votre mot-clé dans le domaine, l’âge du domaine et l’extension de votre domaine (par exemple, de haute qualité telle que .com, .net, .gov,.org par rapport aux extensions non traditionnelles).
• Qualité du site. Votre site Web doit être utile aux visiteurs. Les facteurs clés incluent une page « À propos de nous », une page « Contactez-nous », la fréquence à laquelle vous mettez à jour votre site Web, la facilité de navigation sur votre site Web, la disponibilité (à quelle fréquence votre site Web se bloque) et les certificats SSL.
• Backlinks. Cela fait référence à la fréquence à laquelle votre site Web est lié par d’autres sites Web. C’est un facteur crucial pour bien se classer sur Google. Les facteurs clés incluent le nombre de pages de liens, la qualité et l’autorité des sites Web qui vous lient, le texte d’ancrage qu’ils utilisent pour vous lier, et si ces liens proviennent ou non de domaines .edu ou .gov.

Surveillez la vitesse de chargement de votre page

Je sais ce que certains d’entre vous pensent. Qu’est-ce que la vitesse de chargement des pages a à voir avec la conception Web? Tout.

Bien sûr, les temps de chargement sont liés au plan d’hébergement de votre site Web, au serveur, au trafic et aux choses de cette nature. Cependant, les choix de conception peuvent également avoir un impact sur vos temps de chargement.

Chaque fois que vous ajoutez un élément à votre site, en particulier des images, des vidéos et d’autres fichiers multimédias complexes, vos temps de chargement peuvent être affectés. En tant que tel, il peut ralentir les requêtes HTTP.

Des temps de chargement lents entraînent des taux d’abandon élevés. Vous ne pouvez pas ignorer cela. Si vos pages prennent trop de temps à se charger, cela va être un énorme problème.

De plus, 25% des personnes abandonnent des sites Web qui mettent plus de quatre secondes à se charger. Oui, quatre secondes. C’est tout ce que vous avez, ou vous perdrez 25 visiteurs sur 100. La plupart des visiteurs s’attendent à ce qu’une page se charge en deux secondes ou moins.

Alors, comment pouvez-vous appliquer cela à votre conception Web?

• Réduisez la taille des fichiers de vos images
• Profitez des outils de mise en cache du navigateur
• Réduisez les requêtes HTTP
• Améliorez votre TTFB (time to first byte)
• Réduisez et combinez vos fichiers

De nombreux outils sont disponibles en ligne pour vous aider à accomplir ces choses. Par exemple, consultez le plugin WordPress Rocket comme ressource pour réduire et combiner vos fichiers. Et utilisez l’outil d’analyse de la vitesse de la page de Google pour vous aider à surveiller vos temps de chargement chaque fois que vous apportez des modifications de conception sur votre site Web.

Exécutez en continu des tests A / B

En ce qui concerne la conception de votre site Web, vous ne pouvez pas simplement le définir et l’oublier.

Comme je l’ai dit plus tôt, aucun site Web n’est parfait. Il y a toujours des moyens pour vous d’améliorer votre conception.

C’est pourquoi vous devez exécuter des tests A/ B. Ceux-ci vous permettent d’apporter des améliorations régulières à votre site Web et de tester des éléments pour voir ce qui fonctionne le mieux et, plus important encore, ce qui ne fonctionne pas du tout.

Presque tous les éléments de la conception de votre site peuvent être testés. Par exemple, vous pouvez créer deux pages de destination différentes qui ont des CTA différents mais qui sont par ailleurs les mêmes. Si une page de destination fonctionne mieux que l’autre, vous saurez que son CTA est probablement en train de faire le travail.

Voici quelques suggestions rapides pour vous aider à démarrer dans la bonne direction:

• Testez l’emplacement de votre bouton CTA
• Testez la couleur de votre bouton CTA
• Testez la copie CTA
• Testez les images que vous utilisez sur les pages de destination
• Testez les variations de libellé du texte à l’écran
• Testez la taille de votre barre de navigation

Il y a tellement d’options, je pourrais passer toute la journée à en parler. Pour ceux d’entre vous qui ne sont pas familiers avec les tests A / B ou qui ont besoin d’aide, consultez mon guide sur tout ce que vous devez savoir avant de commencer les tests A / B.

Conclusion

Dire que la conception d’un site Web est importante serait un euphémisme. Vos choix de conception Web auront finalement un impact sur le succès ou non de votre site.

• Le site Web de chacun peut être amélioré. Utilisez cette liste comme guide pour vous aider à apporter ces améliorations.
• Ne vous laissez pas submerger. Je ne dis pas que vous devez implémenter toutes ces suggestions de conception du jour au lendemain, mais vous devez commencer quelque part.
• Je n’ai pas sorti ces idées de rien. Tout ce qui figure sur cette liste est soutenu par des recherches et des statistiques liées aux principes de conception.

Rappelez-vous : Chaque site web est un work in progress. Si vous mettez le travail en œuvre et que vous peaufinez toujours votre site Web, vous améliorerez votre avantage avec vos concurrents.

Peu importe que votre site Web soit neuf ou qu’il existe depuis une décennie. Ce sont les meilleures pratiques de conception Web que vous devez suivre en 2021.