Pourquoi trouve-t-on qu’un site est beau ?

Pourquoi trouve-t-on qu’un site est beau ?

Les détails visuels tels que la police, la couleur ou encore l’alignement créent une expérience conviviale et expriment, d’une certaine manière, les valeurs de votre marque.

Il est facile de regarder un design et de remarquer qu’il est beau. En revanche, il est plus difficile de déterminer pourquoi il l’est. Mais nous… On vous dit tout ! Et pour cela, nous analyserons trois interfaces utilisateurs afin d’examiner les principes de conception visuelle qui les rendent attrayantes 😉

Exemple 1 : Typographie et espacement

Prenons l’exemple de Medium.com, une plateforme américaine pleine de contenus intéressants. Cette conception utilise une grille, des espaces blancs et un système typographique afin de créer une expérience de lecture à la fois confortable et agréable.

• Alignement sur une grille. On remarque via le schéma ci-dessous une grille de colonnes. Cette grille de colonnes fournit des lignes d’ancrage verticales sur lesquelles différents éléments sont alignés. Dans la barre latérale, celle tout à gauche de l’écran, on remarque que les éléments (auteurs, commentaires, etc) sont alignés à gauche. Et cela permet de rendre le contenu plus net, et plus facile à lire. Le texte de l’article est également aligné à gauche sur une ligne de la colonne.
  
  En clair, lors de votre conception, il est important d’établir une grille de colonnes et de veiller à ce que l’alignement soit cohérent, entre les différentes pages de votre site, mais aussi entre les différents éléments. Ne perdez donc plus de temps… Définissez vos propres règles pour être le plus cohérent possible 😉

• Variations typographiques. Pour différencier les types de contenus, le site Medium utilise différents styles de caractères de la même police (gras, italique, souligné, etc) ainsi que des couleurs différentes, mais pas trop ! Un peu de noir, et un peu de gris, c’est le combo parfait. Eh oui, une trop grande variété de typographies, que ce soit le style ou la couleur, peut donner un aspect désordonné à votre site.
  
  La clé pour un design cohérent, c’est simple. Une variante = un objectif ! Prenons l’exemple des petites capitales “WRITTEN BY”. Ici, ce choix de typographie indique clairement qu’il s’agit d’un titre de section. 

• Espaces entre les lignes de texte. Il n’y a rien de pire que de lire un texte lorsque les lignes sont trop collées, n’est-ce-pas ? Il faut plisser les yeux et au bout de 2 min, on en a marre !  Ici, sur Medium, la distance entre chaque ligne de texte est légèrement augmentée par rapport à l’espacement par défaut qui est généralement supérieur de 2px à  la taille de la police. La méthode adoptée par ce site permet de créer un bloc de texte bien aéré et agréable visuellement.

• Ajustement du crénage. Pour ceux qui se le demandent, le crénage consiste à agrandir ou diminuer l’espace entre des paires de lettres spécifiques. Vous l’avez sûrement déjà remarqué, notamment dans les titres, l’espace entre les lettres est plus apparent, notamment entre les lettres qui forment un angle. Dans l’exemple ci-dessus, l’espace entre les lettres a été légèrement comprimé. Si la plupart du temps, le crénage est ajusté automatiquement, pensez à le faire manuellement 😉

Ces 4 points, qui peuvent vous sembler être des détails, sont très importants ! Ils rendent votre interface plus belle, tout en accomplissant l’objectif principal d’une page web : être facilement lisible et agréable.

Exemple 2 : Hiérarchie et couleur

Notre deuxième exemple est celui de Heyme.care, site d’assurance et de mutuelle.  Le design de leur site utilise la hiérarchie, les couleurs et les images de manière à créer une expérience visuelle attrayante.

• Une palette de couleur colorée. La palette de couleur se compose de trois couleurs : le bleu, le rouge et le jaune qui sont des couleurs complémentaires classiques. Ces trois couleurs contribuent à l’attrait du design, elles attirent l’œil sans l’agresser, et apportent une certaine légèreté, une certaine gaieté ! Tout ce qu’il faut pour ravir l’œil de l’utilisateur 😉
  
  En clair, lorsque vous choisissez des nuances de couleurs pour votre design, n’hésitez pas à créer plusieurs palettes, et à les ajuster de manière à voir ce qui se marie le mieux tout en ayant quelque chose de raffiné !

• Une hiérarchie visuelle claire. La hiérarchie visuelle guide l’œil de l’utilisateur et indique les éléments importants d’une page web. Dans le cas Heyme, l’œil est d’abord attiré par ce bandeau bleu qui indique qu’il s’agit d’une site de mutuelle et d’assurances dédié aux étudiants et jeunes actifs. La cible est d’emblée indiquée à l’utilisateur.
  
  Ensuite, notre attention se focalise sur les 3 offres proposées par Heyme : assurance, mutuelle et santé à l’étranger. Et vous savez pourquoi ces offres nous sautent aux yeux ? C’est parce que pour chaque offre, une couleur est associée. 🎨
  

Notez également le traitement typographique avec des polices en gras pour mettre en avant l’expertise de la marque et les avantages des offres proposées.  De cette manière, l’utilisateur voit en un coup d’œil les caractéristiques de la marque.

Et puisque la hiérarchie visuelle est un point très important, voici l’un de nos précédents articles sur le sujet qui vous apportera davantage de conseils 😉

Mais attention, lorsque vous mélangez les traitements de caractères, il faut veiller à :

1. Utiliser deux traitements de polices maximum dans un même titre. 
2. Utiliser le gras pour le ou les mots les plus importants et l’italique pour les mots secondaires.
3. Etre cohérent dans le style d’une page à l’autre.

• Utilisation d’images de haute qualité. Les visuels doivent apporter des informations précieuses sur vos produits, vos services, ou plus généralement votre marque. En fait, les visuels doivent aider les utilisateurs à comprendre quelque chose, et à leur faire ressentir quelque chose. Les visuels ne doivent pas être de simples décorations pour embellir votre interface. Les visuels du site Heyme.care reflète à merveille l’univers de mutuelle et assurance dédié à la jeune génération !

Et pour votre plus grand plaisir, vous pouvez consulter notre interview de Sabrina Leroy, responsable développement et stratégie digitale chez Heyme.care, qui nous parle de son interface web 😉

Exemple 3 : Cohérence

Notre troisième exemple est tiré de l’application mobile Spotify. La conception de cette application utilise de manière efficace une cohérence du traitement visuel, afin de créer une expérience d’écoute efficace et agréable !

• Un traitement visuel cohérent. Un design n’aura pas l’air professionnel et manquera d’élégance si les éléments visuels sont mal utilisés. Et ce n’est clairement pas le cas pour l’application Spotify. On remarque de nombreux éléments qui restent cohérents sur l’ensemble des pages : espacement entre les colonnes, alignement des en-têtes traitement typographiques… tout est ordonné et réfléchi !
  
  Aussi, chaque catégorie de musique est représentée par en encart avec un visuel personnalisé. Et même si chaque catégorie possède une couleur et un visuel différent, la disposition et la hiérarchie des encarts sont cohérentes en tout point. Le nom de chaque catégorie se trouve au même endroit, et il en est de même pour les visuels. Ces détails donnent à l’ensemble de l’interface un aspect cohérent, soigné, et clair.

Sachez que si vous trouvez telle ou telle interface belle et agréable, ce n’est pas par hasard ! Chaque décision doit être prise avec réflexion, car même s’il n’existe pas de règles à proprement parler, certaines bonnes pratiques vous seront très utiles 😉

Via Nielsen Norman Group : Why Does a Design Look Good?