Imaginez que vous entrez dans un magasin pour chercher de nouveaux vêtements de travail. En regardant autour de vous, vous remarquez des taches sur le sol, des étagères désorganisées et une odeur étrange. Resteriez-vous dans le magasin et achèteriez-vous chez ce détaillant ?
La conception des magasins influence le comportement des clients – il en va de même pour les sites web.
Une enquête menée par Clutch auprès de 612 personnes a révélé que 83 % des participants remarquent lorsque le design d’un site web est esthétique et à jour. À l’inverse, 50 % des participants quitteraient définitivement un site web s’ils estiment que le contenu n’est pas pertinent ou ne répond pas à leurs besoins.
Alors, comment concevoir un site web qui plaira aux clients ?
C’est tout l’objet de cet article. Nous vous montrerons pourquoi une bonne conception de site web est essentielle et partagerons 15 principes de conception de site web que vous pouvez exploiter pour créer un site web de haute qualité.
Pourquoi une bonne conception web est-elle importante ?
Le concepteur web moyen gagne 57 000 $ par an, soit environ 8 000 $ de plus que les développeurs web juniors qui gagnent en moyenne 44 000 $ par an. Les concepteurs sont raisonnablement bien rémunérés pour une bonne raison : leur travail est vital.
Lorsqu’un nouveau prospect visite votre site web, il donne la première impression qui façonne ses futures interactions avec votre marque. C’est à ce moment-là qu’ils développent leur première opinion sur vous.
Votre site web véhicule également l’identité de votre marque, sa vision et sa position au sein du secteur. Si vous avez des concurrents proches avec un produit similaire, un site web qui fait dire aux gens « whaou » vous rendra plus mémorable et augmentera la notoriété de votre marque au-dessus de la concurrence.
En outre, un site web solide peut améliorer vos efforts d’optimisation des moteurs de recherche (SEO).
Les moteurs de recherche tiennent compte de la façon dont les gens réagissent aux sites web lorsqu’ils les classent dans les résultats de recherche. Si votre taux de rebond est faible et que les gens visitent fréquemment plusieurs pages de votre site, les moteurs de recherche vous classeront probablement plus haut qu’un concurrent dont le taux de rebond est élevé.
Le SEO technique est également important ici. Les sites web dont les titres, les structures de pages et les liens sont bien conçus sont plus accessibles. Ainsi, les moteurs de recherche et les clients les favorisent. Jetons un coup d’œil à quelques principes importants de conception de sites web.
15 principes de conception web efficace
Lorsque nous parlons de « principes de conception web », nous faisons référence aux règles générales de conception des éléments texturaux et visuels d’un site ou d’une page web. Chaque marque adopte les principes de conception web différemment – certains sont conformes aux meilleures pratiques et d’autres non.
Pour vous aider à concevoir un excellent site web, voici 15 principes de conception web (ainsi que des exemples de sites web qui les utilisent efficacement) :
1. Les pages doivent être faciles à parcourir
Dans l’étude de Clutch sur les expériences des utilisateurs sur les sites web, 94 % des participants considèrent la navigation sur le site comme la « caractéristique la plus importante du site web ».
Il n’est pas surprenant de savoir pourquoi. Si un utilisateur de moteur de recherche arrive sur votre site web à la recherche d’informations sur la « conception mobile » et ne les trouve pas, la prochaine étape naturelle est de cliquer sur « retour » et d’essayer un autre site web.
Comment adopter une navigation bien planifiée ? Inspirez-vous du site web de The Cool Club.
Lorsque vous entrez sur la page d’accueil du Cool Club, la mise en page du site est extrêmement claire. Vous pouvez naviguer vers les sections de produits clés (comme « card games » et « bucket list ») à l’aide des boutons situés à gauche, et vous pouvez naviguer vers les pages « about » et « contact » à l’aide des boutons situés à droite.
Les pages de produits de The Cool Club sont également très faciles à parcourir. La marque dispose actuellement d’un jeu de cartes interactif qui présente 54 variations cool et les pages correspondantes. Il vous suffit de faire défiler la page vers le bas et de cliquer sur la carte que vous voulez voir plus en détail.
Pour créer un site web tout aussi efficace, classez le contenu en catégories claires pour vos en-têtes et pieds de page et donnez-leur des titres descriptifs. Ensuite, ordonnez vos pages par thème, afin que les gens puissent naviguer facilement entre des sujets similaires.
En outre, veillez à ce que vos en-têtes et pieds de page soient cohérents sur l’ensemble de votre site web.
2. Tirez toujours parti de l’espace négatif
L’espace négatif (ou « espace blanc ») est la région autour des sujets d’une page, qu’il s’agisse d’images, de vidéos, de texte ou de boutons.
De nombreux spécialistes du marketing enthousiastes se précipitent pour remplir tous les espaces négatifs d’une page, en espérant que le fait de donner plus d’informations aux visiteurs les rendra plus engagés. Cependant, cela aboutit souvent à des pages écrasantes et confuses.
C’est là que l’espace négatif entre en jeu. L’utilisation de l’espace négatif met en valeur les éléments les plus critiques de chaque page, car l’absence de couleur attire les yeux du visiteur vers les zones plus lumineuses.
Bien sûr, « utiliser l’espace négatif » ne signifie pas « créer un site web blanc ennuyeux » Au contraire, vous pouvez exploiter l’espace en utilisant les couleurs de votre marque, comme le fait Garoa.
La page d’accueil de Garoa utilise une palette de couleur crème pour créer une ambiance tout en exploitant l’espace négatif. Le résultat est que vos yeux vont vers le contenu d’introduction de la section « Skincare For Autumn » au centre plutôt que vers les parties moins importantes.
Assurez-vous de tirer parti de l’espace blanc pour mettre en valeur la hiérarchie dans votre propre site web.
3. Les pages doivent être cohérentes, mais engageantes
Lorsque vous lisez des noms de marques comme « Cadbury », « Hershey’s » ou « Nike », la vision de leurs logos, polices de caractères et styles de conception vous vient probablement immédiatement à l’esprit. C’est la puissance d’une image de marque cohérente.
Lorsque vous concevez votre site web, créez des pages avec des éléments cohérents pour donner à votre marque une identité visuelle claire. Cela signifie :
- Utiliser les mêmes polices, styles et couleurs pour les en-têtes
- Garder les mêmes espaces entre les éléments visuels d’une page à l’autre
- Utiliser des palettes de couleurs plutôt que des couleurs aléatoires
- Définir des directives de mise en page pour les contenus longs, comme les articles d’actualité et les articles de blog
- Utiliser un modèle de site web pour toutes les pages
Les pages cohérentes n’ont pas besoin d’être complètement uniformes. Au contraire, vous pouvez équilibrer la cohérence et l’engagement en mélangeant les éléments.
Par exemple, vous pouvez utiliser des polices et des couleurs différentes pour les titres H1, H2 et H3. Ou encore, vous pouvez modifier la mise en page de différents types de pages, pour mélanger les choses.
4. Adoptez des couleurs complémentaires
Les couleurs complémentaires sont des paires de couleurs que vous pouvez mélanger sans que votre design ait l’air écrasant et laid.
La façon dont les couleurs s’affichent sur un écran suit le modèle de couleurs Rouge, Vert et Bleu (RVB) plutôt que le modèle Cyan, Magenta, Jaune et Noir (CMYK) utilisé en impression. Les peintres utilisent également souvent le modèle de couleur Rouge-Jaune-Bleu (RYB) qui considère que les couleurs complémentaires sont le rouge-vert, le bleu-orange et le jaune-violet.
Quel que soit le modèle que vous préférez, l’utilisation des couleurs complémentaires atteint un objectif similaire à celui du noir et blanc. Les couleurs complémentaires mettent l’accent et créent une identité visuelle claire pour votre marque.
Vous pouvez voir cela sur le site web de Swab The World.
Dans la capture d’écran ci-dessous, l’organisation caritative de lutte contre le cancer du sang utilise le vert et des nuances de magenta. Ces couleurs changent en d’autres combinaisons de couleurs complémentaires lorsque vous visitez différentes sections du site web (bien que toutes les couleurs aient une saturation similaire, de sorte que l’image de marque reste cohérente).
Les couleurs complémentaires sont un principe facile à utiliser dans votre design. Si vous voulez garder les choses simples, sélectionnez deux couleurs complémentaires et ajoutez-les à des éléments contrastés (comme un H2 et le corps du texte). Ou utilisez plusieurs nuances de chaque couleur sur chaque page.
5. Concevez en tenant compte de votre public cible
Si vous regardez les sites web de The Cool Kids, Garoa et Swab The World, vous remarquerez peut-être que chaque site web a une « sensation » unique Cette sensation provient de l’adaptation de la conception du site web à son public.
La personnalisation est l’objectif ultime ici. La plupart d’entre nous aiment acheter des produits et des services auprès de marques avec lesquelles ils se sentent en phase et représentés. En fait, une étude montre que 72 % des consommateurs apprécient d’acheter auprès d’entreprises qui « s’alignent sur leurs croyances et leurs valeurs ». Donc, si quelqu’un visite votre site web et y voit ses valeurs, ses objectifs et ses priorités reflétés, il est plus susceptible d’acheter chez vous.
Pour personnaliser la conception de votre site web en fonction de votre public, pensez à ceci :
- Quelles sont les images qui trouvent un écho auprès de votre marché cible ?
- Quel ton convient à votre public (par exemple, professionnel, minimaliste, pétillant, etc.)
- Les sujets que votre marché cible vient voir sur votre site web
- Comment transmettre le positionnement de votre marque à travers votre conception web
- Les appels à l’action (CTA) auxquels votre public réagit (et où les placer pour optimiser votre taux de clics (CTR))
Des points bonus si vous pouvez utiliser les automatismes du site web pour offrir une expérience personnelle basée sur le profil de l’utilisateur et ses interactions précédentes avec votre marque.
Il peut être utile de s’inspirer de concurrents ou de marques qui vendent des choses différentes à votre public cible.
6. Les polices doivent être lisibles et accessibles
Les polices que vous utilisez sur votre site web déterminent si vos visiteurs peuvent lire ce que vous avez écrit ou non. On peut dire qu’elles sont très importantes.
La première chose à prendre en compte lors du choix d’une police est la sécurité web. Les polices sécurisées pour le web sont prises en charge par les systèmes d’exploitation et les navigateurs web, elles fonctionneront donc sur la plupart des appareils.
Vous devez également tenir compte de l’accessibilité. Les polices accessibles doivent être claires et faciles à lire en petite et grande taille. Par exemple, les polices basées sur la cursive ne sont pas très accessibles, tandis que Times New Roman l’est assez.
De plus, surveillez les tendances des polices sur d’autres sites web lorsque vous choisissez une police. En 2021, le spécialiste des données Michael Li a analysé les polices de plus de 1 000 sites web. Il a constaté les tendances suivantes :
- 85 % des polices n’utilisent pas d’empattements (les petites lignes ajoutées aux lettres dans les caractères de journaux)
- Les cinq premières polices sont Sans Serif, Arial, Helvetica, Helvetica Neue et Roboto
- Les en-têtes H1 ont une probabilité de 58 % de ne pas avoir d’empattements (contre 93 % pour le texte des paragraphes)
- Les deux tailles les plus courantes pour les polices de paragraphe sont 14 px et 16 px
Vous pourriez choisir d’embrasser ces informations pour sélectionner un style de police qui adhère à ce que les gens recherchent sur les sites web. Ou bien, vous pouvez choisir de faire quelque chose de différent.
Virgin est une marque qui a choisi la deuxième option. Virgin a utilisé au moins cinq polices dans la capture d’écran ci-dessous. Ces polices séparent les sections de la page et leur donnent un aspect attrayant.
7. Suivez la loi de Fitt et la loi de Hick
Le psychologue Paul Fitts a développé la loi de Fitt pour la première fois en 1954, mais elle est toujours très pertinente pour la conception de sites web en 2022. La loi de Fitt soutient que la taille d’une cible influence le temps qu’il faut à quelqu’un pour l’atteindre.
Dans un contexte de conception web ou d’expérience utilisateur (UX), cela signifie que les gens mettront moins de temps à cliquer sur des boutons plus grands ou plus de temps à cliquer sur des boutons plus petits. Ainsi, pour tirer parti de la loi de Fitt, vous devriez faire en sorte que vos boutons CTA soient extrêmement grands et bien visibles, afin qu’il soit plus facile de cliquer dessus.
Le terme « facile » est ici crucial. La loi de Hick, développée par le psychologue britannique William Edmund Hick et le psychologue américain Ray Hyman, affirme que les gens se fatiguent chaque fois qu’ils décident quelque chose.
Ainsi, plus vous demandez à un visiteur de site web de prendre des décisions, plus il y a de chances qu’il soit trop fatigué pour aller jusqu’au bout.
8. Utilisez l’invariance pour mettre en évidence les informations clés
Lorsqu’un élément est « invariant », il se distingue comme une option unique parmi plusieurs options très similaires. L’exemple le plus évident d’invariance est la mise en évidence des plans sur les pages de prix comme celle-ci de Box.
Mais ce n’est pas la seule façon dont vous pouvez utiliser l’invariance. L’invariance peut vous aider à établir une hiérarchie visuelle sur vos pages pour mettre en évidence les informations clés et attirer les gens vers les parties importantes de votre page.
Par exemple, regardez comment le Musée Frans Hals a utilisé l’invariance pour créer une hiérarchie visuelle sur sa page d’accueil :
La hiérarchie dans cette image est la suivante : le panneau « Welcome », les images, le panneau « Buy Tickrets », le panneau « All exhibitions », puis les autres contenus.
Pour utiliser l’invariance afin de créer votre propre hiérarchie, classez les éléments de la page par ordre d’importance. Ensuite, ajustez la taille, la couleur et le placement de chaque élément jusqu’à ce que les yeux des visiteurs aillent vers chaque élément dans l’ordre que vous souhaitez.
9. Dans les CTA : Utilisez un langage clair sur lequel les gens voudront cliquer
Nous avons évoqué l’importance de rendre vos boutons grands et faciles à cliquer, mais la taille n’est pas le seul élément à prendre en compte lors de la création de boutons.
Les boutons cliquables sont à la fois descriptifs et persuasifs. Ils rendent le visiteur curieux de savoir vers quoi le bouton renvoie et lui donnent une raison d’y aller.
Une façon d’y parvenir est d’utiliser un texte de bouton détaillé comme « cliquez ici pour lire notre blog », « trouvez ici nos secrets de marketing » ou « voici notre rapport 2022 » Une autre consiste à rendre vos boutons visuellement excitants ou uniques.
Rainforest Protector a adopté les deux approches. Rainforest Protector vous permet de naviguer dans la forêt amazonienne en visitant différents endroits. Le bouton de chaque lieu comprend une image et une action comme « visitez le village ».
10. Exploitez le motif en F ou le motif en Z
Pendant 13 ans, les chercheurs du Nielsen Norman Group (NN Group) ont utilisé l’eye-tracking pour voir comment plus de 500 personnes s’engagent avec le contenu. Ils ont ainsi développé le modèle F, selon lequel la première chose que font les gens est de balayer la page vers le bas, puis de lire de gauche à droite. Comme ceci :
Vous pouvez tirer parti du modèle en F sur votre site web en structurant votre contenu autour de ce modèle ou d’un modèle alternatif.
Facebook est célèbre pour l’utilisation d’un modèle en forme de Z sur sa page d’accueil. Lorsque vous visitez la page, vos yeux vont vers le logo « Facebook », puis le bouton « Log In », puis l’image sur la gauche, et enfin le bouton « Create an account ».
11. Les bons sites web sont rapides et adaptés aux mobiles
Au quatrième trimestre de 2021, 54,4 % du trafic des sites web dans le monde provenait d’un appareil mobile. Donc, si votre site web n’est pas adapté aux mobiles, vous pourriez réduire votre trafic de moitié.
La vitesse influence également le trafic organique du site web. Des recherches menées par Google montrent que 53 % des personnes quittent un site web s’il se charge en plus de trois secondes.
Le moyen le plus simple de rendre votre site web adapté aux mobiles ou rapide est de choisir un thème de site web rapide réalisé par des concepteurs experts. Ou, si vous souhaitez vous impliquer davantage dans la conception de votre site web, vous pouvez créer un site web responsive sur mesure.
C’est ce qu’ont fait les concepteurs du film 1917. Le site web de 1917 offre une expérience immersive pour que les gens s’investissent dans le film. Il est spécialement conçu pour les appareils mobiles, puisque vous pouvez utiliser votre doigt pour vous déplacer dans les tranchées de la première guerre mondiale.
Si vous êtes observateur, vous remarquerez que le site web de 1917 exploite également le motif F.
12. Divisez le texte en petits morceaux
Considérez ceci : vous recherchez « jeux d’esprit » et trouvez une page web qui semble prometteuse. Cependant, lorsque vous cliquez dessus, vous êtes submergé par de gros morceaux de texte difficiles à lire.
Comme beaucoup de gens, vous risquez de cliquer sur le site web (même si le contenu est prometteur !).
Des recherches sur le suivi oculaire menées par l’Université des sciences et technologies du Missouri montrent que les visiteurs de sites web passent en moyenne 5,59 secondes à lire du texte. Donc, si les gens ne peuvent pas consommer votre texte dans ce laps de temps, il est peu probable que vous les engagiez correctement.
Réglez ce problème en divisant votre texte en petits morceaux. De plus :
- Utilisez des phrases courtes
- Évitez les expressions familières
- Fournissez des définitions pour tous les mots spécifiques au secteur que vous utilisez
- Évitez la « prose » (métaphores, adverbes et adjectifs inutiles)
13. Utilisez des grilles
Lorsque nous disons « utiliser des grilles », nous ne voulons pas dire que vous devez faire en sorte que votre site web ressemble à un tableau Excel. Au lieu de cela, divisez votre site web en sections distinctes qui servent un objectif spécifique afin que les visiteurs puissent trouver rapidement le contenu.
Pour cela, vous n’avez pas besoin d’utiliser des lignes de grille. Créez plutôt des distinctions entre les espaces de la grille à l’aide de couleurs, d’espaces négatifs et d’ombres, comme l’a fait Atlason. La page d’accueil d’Atlason présente les nouveaux produits et les produits les plus vendus dans des grilles. Comme les visiteurs sont probablement à la recherche de ces produits, les grilles les aident à les trouver en quelques secondes.
L’une des façons les plus simples d’utiliser les grilles sur votre site web est de choisir un thème WordPress qui les utilise. Les exemples incluent Gridframe, Masonry Grid, et Shuttle Grid.
14. N’oubliez pas l’équilibre
Dans le contexte de la conception de sites web, le terme « équilibre » fait référence à la façon dont les éléments de conception se situent les uns par rapport aux autres et à l’harmonie qu’ils dégagent. Il existe de nombreuses façons de créer un équilibre sur votre site web, y compris certains de ces principes suivants de conception web :
- Par la symétrie (y compris la symétrie bilatérale, radiale ou translationnelle)
- En utilisant des couleurs complémentaires ou contrastées
- En utilisant des éléments de formes et de tailles similaires
- En utilisant des motifs répétitifs
Vous pouvez voir l’équilibre en action sur le site web de Woven. Ce site web utilise une palette de couleurs équilibrée, le noir et blanc pour créer un contraste dans le texte, et la symétrie pour attirer l’attention des visiteurs sur le contenu.
15. Faites attention aux détails
Selon la théorie de la Gestalt, les gens perçoivent quelque chose comme un tout avant de regarder les éléments individuels. Ou, comme l’a dit Kurt Koffka : « Le tout existe indépendamment des parties ». Bien que les gens fassent généralement référence à la théorie de la Gestalt en ce qui concerne la psychologie, elle s’applique également au web design.
Vous devez prêter attention aux petits détails de votre site web pour que votre conception ait l’air soignée et complète. Lors de la conception de quelque chose, il est facile de se concentrer sur des éléments importants comme les titres, les images et les CTA et d’oublier d’autres choses, comme :
- Les icônes de pied de page et d’en-tête
- Les boutons de réseaux sociaux
- L’efficacité avec laquelle vous avez converti votre site web à WordPress (le cas échéant)
- L’espacement du texte
- Les fautes de frappe et de grammaire
- La compatibilité avec les navigateurs
- La taille des images
Vérifiez ces éléments avant d’appuyer sur « Publier » et assurez-vous que votre site web est professionnel. Vous pouvez négliger des défauts mineurs, mais les visiteurs ne le feront pas.
En outre, tenez-vous au courant des nouvelles tendances et des nouveaux concepts en matière de principes de conception web. En les ajoutant à votre site web, vous lui donnerez un aspect nouveau, frais et attrayant.
Résumé
Un magasin de détail bien conçu améliore l’expérience du client, tandis qu’un mauvais design pourrait rebuter à jamais les clients de votre marque. Il en va de même pour la conception de sites web.
La création d’un site web visuellement attrayant est plus qu’un simple projet amusant. Cela peut vous aider à :
- Communiquer votre professionnalisme
- Créer un climat de confiance avec vos visiteurs
- Vous démarquer de vos concurrents
- Attirer le trafic organique des moteurs de recherche
Tirez parti des principes de conception web présentés dans cet article pour créer un site web qui fera dire aux visiteurs « Waouh ».
Maintenant que nous avons couvert tout ce que nous savons sur la conception web, nous aimerions avoir votre avis. Que remarquez-vous lorsque vous visitez le site web d’une marque ? En outre, utilisez-vous des principes que nous n’avons pas mentionnés sur votre site web ? Dites-le nous dans les commentaires ci-dessous.
Laisser un commentaire