8 principes de conception Web qui fonctionnent toujours en 2020
Publié: 2021-07-22La conception de votre site Web est plus importante que vous ne le pensez pour les conversions. Vous pouvez mettre en œuvre toutes les tactiques d'amélioration de la conversion dans le monde, mais si votre conception Web ressemble à de la merde, cela ne vous fera pas grand-chose.
Le design n'est pas seulement quelque chose que font les designers. Le design, c'est le marketing. Le design est votre produit et comment il fonctionne. Plus j'en apprends sur les principes de la conception Web, meilleurs sont les résultats que j'obtiens.
Cours gratuit sur l'UX et l'utilisabilité
Passer des principes à la pratique. Regardez des cours gratuits sur l'UX et l'utilisabilité.
Voici 8 principes de conception Web efficaces que vous devez connaître et suivre.
1. Hiérarchie visuelle
Les roues grinçantes attirent la graisse et les visuels proéminents attirent l'attention. La hiérarchie visuelle est l'un des principes les plus importants d'une bonne conception Web. C'est l'ordre dans lequel l'œil humain perçoit ce qu'il voit.
Exercer. Veuillez classer les cercles par ordre d'importance :
Sans rien savoir de ces cercles, vous avez pu les classer
facilement. C'est une hiérarchie visuelle.
Certaines parties de votre site Web sont plus importantes que d'autres (formulaires, appels à l'action, proposition de valeur, etc.) et vous souhaitez que celles-ci reçoivent plus d'attention que les parties moins importantes.
Si le menu de votre site Web comporte 10 éléments, sont-ils tous d'égale importance ? Où voulez-vous que l'utilisateur clique ? Rendez les liens importants plus visibles.
La hiérarchie ne vient pas seulement de la taille. Amazon rend les boutons d'appel à l'action « Ajouter au panier » et « Acheter maintenant » plus visibles en utilisant la couleur :
Commencer par l'objectif commercial
Vous devez classer les éléments de votre site Web en fonction de votre objectif commercial. Si vous n'avez pas d'objectif précis, vous ne saurez pas quoi prioriser.
Voici un exemple. C'est une capture d'écran que j'ai prise sur le site Web de Williams-Sonoma. Ils veulent vendre des ustensiles de cuisine d'extérieur.
Le plus gros accroche-regard est l'énorme morceau de viande (donnez-moi envie), suivi du titre (dites ce que c'est) et d'un appel à l'action (obtenez-le). La quatrième place revient à un paragraphe de texte sous le titre ; la cinquième est la bannière de livraison gratuite et la navigation supérieure est la dernière.
C'est la hiérarchie visuelle, un principe intemporel de la conception Web, bravo.
Exercer. Surfez sur le Web et classez consciemment les éléments dans la hiérarchie visuelle. Alors allez voir votre site. Quelque chose d'important (c'est-à-dire des informations clés que les visiteurs recherchent) est-il trop bas dans la hiérarchie ? Rendez-le plus visible.
2. Proportions divines
Le nombre d'or est le nombre magique 1,618 (φ). On pense que les conceptions qui utilisent des proportions définies par le nombre d'or sont esthétiques.
Ensuite, il y a la séquence de Fibonacci. Chaque terme est la somme des deux termes précédents : 0, 1, 1, 2, 3, 5, 8, 13, 21, etc. La chose intéressante est que les deux sujets apparemment sans rapport produisent le même nombre exact.
Voici à quoi ressemble le nombre d'or :
De nombreux artistes et architectes utilisent des proportions pour se rapprocher du nombre d'or. Un exemple célèbre est le Parthénon, construit dans la Grèce antique :
Le nombre d'or peut-il fonctionner pour la conception de sites Web ? Tu paries. Voici Twitter :
Voici un commentaire, d'il y a des années, du directeur créatif de Twitter, Doug Bowman. Le choix du design n'était pas accidentel :
Donc, si la largeur de votre mise en page est de 960px, divisez-la par 1,618 (=593px). Vous savez que la largeur de la zone de contenu doit être de 593px et la barre latérale de 367px. Si la hauteur du site Web est de 760 px, vous pouvez la diviser en morceaux de 470 px et 290 px (760/1,618 = ~ 470).
Si vous voulez en savoir plus, consultez cet article sur la façon d'appliquer le nombre d'or à la typographie.
3. La loi de Hick
La loi de Hick dit que chaque choix supplémentaire augmente le temps nécessaire pour prendre une décision.
Vous avez vécu cela d'innombrables fois dans les restaurants. Les menus avec d'énormes options rendent difficile le choix de votre dîner. S'il offrait deux options, prendre une décision prendrait beaucoup moins de temps. Ceci est similaire au paradoxe du choix : plus vous donnez de choix, plus il est facile de ne rien choisir. Les deux principes entrent en jeu avec la conception de sites Web.
Plus un utilisateur a d'options sur votre site Web, plus il est difficile à utiliser (s'il est utilisé). Nous devons éliminer les choix. Pour améliorer la conception de sites Web, concentrez-vous sur l'élimination des options gênantes tout au long du processus de conception.
À une époque de choix infini, les gens ont besoin de meilleurs filtres ! Si vous vendez un grand nombre de produits, ajoutez de meilleurs filtres pour faciliter la prise de décision. Wine Library vend une énorme quantité de vin.
Ils font du bon travail avec les filtres :
4. La loi de Fitt
La loi de Fitt stipule que le temps nécessaire pour se déplacer vers une zone cible (par exemple, cliquer sur un bouton) est fonction de la distance à la cible et de la taille de la cible. En d'autres termes, plus un objet est gros et plus il est proche, plus il est facile à utiliser.
Spotify permet d'appuyer plus facilement sur « Play » que d'autres boutons :
Sur l'application pour téléphone mobile, ils placent également le bouton de lecture dans un emplacement facile à appuyer.
Plus gros n'est pas toujours mieux. Un bouton qui occupe la moitié de l'écran n'est pas une bonne idée, et nous n'avons pas besoin d'une étude mathématique pour nous le dire. Même ainsi, la loi de Fitt est un logarithme binaire. Cela signifie que les résultats prédits de l'utilisabilité d'un objet suivent une courbe, pas une ligne droite.
Un petit bouton est beaucoup plus facile à cliquer lorsqu'on lui donne une augmentation de taille de 20 %, alors qu'un très gros objet, avec la même augmentation de 20 % en taille, n'offrira pas les mêmes avantages en termes de convivialité.
Ceci est similaire à la règle de la taille de la cible. La taille d'un bouton doit être proportionnelle à sa fréquence d'utilisation attendue. Vous pouvez utiliser le suivi de la souris pour voir quels boutons les gens utilisent le plus, puis agrandir les boutons populaires (plus faciles à appuyer).
Imaginons qu'il y ait un formulaire que vous voulez que les gens remplissent. À la fin du formulaire, il y a deux boutons : « Envoyer » et « Réinitialiser » (effacer les champs).
99,9999% veulent cliquer sur « Soumettre ». Par conséquent, le bouton devrait être beaucoup plus gros que « reset ».
5. Règle des tiers
C'est une bonne idée d'utiliser des images dans votre conception. Un visuel communique vos idées beaucoup plus rapidement qu'un texte.
Les meilleures images suivent la règle des tiers : une image doit être divisée en neuf parties égales par deux lignes horizontales équidistantes et deux lignes verticales équidistantes. Les éléments de composition importants doivent être placés le long de ces lignes ou à leurs intersections.
Ci-dessous, voyez en quoi l'image de droite est plus intéressante ? C'est la règle des tiers en action.
L'utilisation de belles et grandes images contribue à une bonne conception Web. Si vos images sont plus intéressantes, votre site Web sera plus attrayant.
6. Lois de conception de la Gestalt
La psychologie de la Gestalt est une théorie de l'esprit et du cerveau. Son principe est que l'œil humain voit les objets dans leur intégralité avant de percevoir leurs parties individuelles.
Voici ce que je veux dire :
Remarquez comment vous pourriez voir le chien sans vous concentrer sur chaque point noir qui le compose ? Un fondateur de la gestaltisme, Kurt Koffka, l'expliquait ainsi : « le tout existe indépendamment des parties ».
En ce qui concerne la conception de sites Web, les gens voient d'abord l'ensemble de votre site Web, avant de distinguer l'en-tête, le menu, le pied de page, etc.
Il existe huit lois dites de conception gestaltiste qui nous permettent de prédire comment les gens percevront quelque chose. Voici comment chacun se rapporte à la conception Web :
1. Loi de proximité
Les gens regroupent des choses qui sont proches les unes des autres dans l'espace. Ils deviennent un seul objet perçu.
Pour une conception Web efficace, assurez-vous que les choses qui ne vont pas ensemble ne sont pas perçues comme une seule. De même, vous regroupez les éléments de conception associés (menu de navigation, pied de page, etc.) pour communiquer qu'ils forment un tout.
Craigslist utilise cette loi pour faciliter la compréhension des sous-catégories relevant de la catégorie « à vendre » :
2. Loi de similitude
Nous regroupons des choses similaires. Cette similitude peut se produire sous la forme de forme, de couleur, d'ombrage ou d'autres qualités.
Ici, nous regroupons les points noirs dans un groupe et les blancs dans un autre, car, eh bien, les points de la même couleur se ressemblent.
À quoi cela ressemble-t-il lorsqu'il est appliqué à la conception de sites Web ? Mixpanel utilise une conception similaire pour les liens vers les études de cas, nous les voyons donc comme un seul groupe, chacun renforçant l'autre :
3. Loi de clôture
Nous recherchons l'exhaustivité. Lorsque des formes qui ne sont pas fermées ou que des parties d'une image manquent, notre perception comble le vide visuel. Nous voyons un cercle et un carré même si aucune des deux formes n'existe réellement dans le graphique ci-dessous.
Sans la loi de fermeture, nous verrions simplement différentes lignes avec des longueurs différentes. Mais la loi de fermeture combine les lignes pour former des formes entières.
L'utilisation de la loi de fermeture peut rendre les logos ou les éléments de conception plus intéressants. Un bon exemple est le logo du World Wide Fund For Nature, qui a été conçu par Sir Peter Scott en 1961 :
4. Loi de symétrie
L'esprit perçoit les objets comme symétriques, se formant autour d'un point central. Il est agréable au niveau de la perception de diviser des objets en un nombre pair de parties symétriques.
Lorsque nous voyons deux éléments symétriques qui ne sont pas connectés, l'esprit les connecte perceptuellement pour former une forme cohérente.
Lorsque nous regardons l'image ci-dessus, nous avons tendance à observer trois paires de parenthèses symétriques plutôt que six parenthèses individuelles.
Les gens préfèrent les apparences symétriques aux apparences asymétriques. Des colonnes d'images et de texte en alternance, des curseurs centrés et une liste à trois colonnes ajoutent au plaisir visuel de la conception de la page d'accueil Trello :
5. La loi du destin commun
Nous avons tendance à percevoir les objets comme des lignes qui se déplacent le long d'un chemin. Nous regroupons des objets qui ont la même tendance de mouvement et sont donc sur le même chemin.
Mentalement, les gens regroupent des bâtons ou des mains levées pointant quelque part parce qu'ils pointent tous dans la même direction. Dans la conception de votre site, vous pouvez l'utiliser pour attirer l'attention de l'utilisateur sur quelque chose (par exemple, un formulaire d'inscription, une proposition de valeur, etc.).
Par exemple, s'il y a un ensemble de points et que la moitié des points se déplacent vers le haut tandis que l'autre moitié se déplace vers le bas, nous percevons les points ascendants et les points descendants comme deux unités distinctes.
6. Loi de continuité
Les gens ont tendance à percevoir une ligne comme continuant sa direction établie. Lorsqu'il y a une intersection entre des objets (par exemple des lignes), nous avons tendance à percevoir les deux lignes comme deux entités uniques et ininterrompues. Les stimuli restent distincts même en cas de chevauchement.
Fixel l'utilise pour connecter les visages au bios :
Il existe également d'autres lois de la Gestalt, telles que la Figure et le Fond ou la Loi de la Bonne Gestalt. (Les objets ont tendance à être regroupés de manière perceptive s'ils forment un motif régulier, simple et ordonné, comme les anneaux olympiques.) Cependant, ceux couverts ci-dessus sont les meilleurs principes directeurs pour la conception de sites Web.
7. Espace blanc et design épuré
L'espace blanc (également appelé « espace négatif ») est la partie d'une page Web qui reste « vide ». C'est l'espace entre les graphiques, les marges, les gouttières, l'espace entre les colonnes, l'espace entre les lignes de texte ou les visuels.
Ce n'est pas seulement un espace « vierge », c'est un élément important de la conception Web. Il permet aux objets qu'il contient d'exister. L'espace blanc concerne l'utilisation de la hiérarchie pour les informations, la typographie, la couleur ou les images.
Une page sans espace blanc, bourrée de texte ou de graphiques, risque de paraître chargée ou encombrée. En règle générale, il est difficile à lire. (Les gens ne s'en soucieront même pas.) C'est pourquoi les sites Web simples sont scientifiquement meilleurs.
La bonne quantité d'espace blanc donne à un site Web un aspect «propre». Bien qu'un design épuré soit crucial pour communiquer un message clair, cela ne signifie pas seulement moins de contenu.
Un design épuré utilise au mieux l'espace dans lequel il se trouve. Pour créer un design de site épuré, vous devez savoir comment communiquer clairement en utilisant judicieusement les espaces blancs. Made.com utilise bien les espaces blancs :
L'utilisation fine des espaces blancs permet de se concentrer facilement sur le message principal et les éléments visuels, et le corps du texte est facile à lire. En général, l'espace blanc favorise l'élégance et la sophistication, améliore la lisibilité et stimule la concentration.
En savoir plus sur les espaces blancs et la simplicité.
8. Le rasoir d'Occam
Face à plusieurs hypothèses concurrentes, le rasoir d'Occam vous invite à choisir celle qui fait le moins d'hypothèses et, par conséquent, offre l'explication la plus simple. Pour le mettre dans le contexte de la conception de sites Web, Razor d'Occam soutient que la solution la plus simple est généralement la meilleure.
Dans un article sur leur expérience Angelpad, l'équipe de Pipedrive écrit :
L'équipe et les mentors d'Angelpad nous ont mis au défi de plusieurs manières. « Vous avez trop de choses sur votre page d'accueil » était quelque chose avec lequel nous n'étions pas d'accord au début, mais nous sommes heureux de tester. Et il s'est avéré que nous nous étions trompés. Nous avons supprimé 80 % du contenu et laissé un bouton d'inscription et un lien En savoir plus sur la page d'accueil. La conversion à l'inscription a augmenté de 300 %.
Il ne s'agit pas seulement de l'apparence, mais aussi de la façon dont cela fonctionne. Certaines entreprises, comme 37Signals, sont devenues « simples » en un modèle commercial. Voici une citation du livre Rework, écrit par les fondateurs Jason Fried :
Beaucoup de gens nous détestent parce que nos produits font moins que la concurrence. Ils sont insultés lorsque nous refusons d'inclure leur animal de compagnie. Mais nous sommes tout aussi fiers de ce que nos produits ne font pas que de ce qu'ils font. Nous les concevons pour être simples car nous pensons que la plupart des logiciels sont trop complexes : trop de fonctionnalités, trop de boutons, trop de confusion.
Un design simple et minimaliste ne garantit pas que le design fonctionnera. Mais, d'après mon expérience, simple est toujours mieux que l'inverse et, par conséquent, nous devons nous efforcer de simplifier nos conceptions Web.
Conclusion
La conception Web efficace et l'art ne sont pas les mêmes. Mais de nombreux principes psychologiques et de conception s'appliquent aux sites Web. Vous pouvez concevoir un excellent site Web en appliquant les aspects pertinents de ces lois à votre mise en page, votre typographie et vos images.
Conception pour l'utilisateur et vos objectifs commerciaux. Une bonne conception Web peut fournir des résultats esthétiques et financièrement gratifiants.