WEB DESIGN

6 exemples d'ergonomie à adopter pour vos sites web

Quelle typographie choisir en quelle taille et de quelle couleur ? Où mettre les "call to action" ? Comment faire un bon formulaire de contact ? Autant de questions auxquelles nous vous répondons dans cet article.

Anne-Laure CompainAnne-Laure Compain

Anne-Laure Compain

Graphiste chez Snoweb

Publié le 16 mars 2021 15:15 (Mise à jour le 19 novembre 2021 16:13)

1. La simplicité

Un design sobre et épuré

  • Un site web beau oui ! Mais attention à ne pas utiliser le beau pour cacher le manque d'informations.
  • Le lecteur doit trouver son information en un maximum de 3 clics. Il faut donc amener l'information le plus rapidement et le plus simplement possible grâce à des boutons bien placés et bien designés.
  • Unifier toutes les pages du site pour que le lecteur ne soit pas perdu lors de sa navigation, qu'il ne pense pas avoir changé de site en changeant juste de page. Cela passe principalement par la couleur du header.
  • Ne pas utiliser trop de couleurs : un maximum de 5 couleurs suffit.
  • Apporter du blanc autour d'un texte ou d'un titre va le mettre en valeur.

Les couleurs

Afin que tous les internautes puissent voir correctement votre contenu, vous devez respecter une règle : le contraste entre la couleur de fond de votre page web et la couleur de votre texte doit être au minimum de 4,5:1.

Prenons l'exemple d'un site internet avec un fond sombre :

  • Pour la typographie, privilégiez un gris clair à la place du blanc. Le contraste sera tout aussi important mais la couleur grise sera plus douce à l'œil et aidera à la lisibilité.
  • Pour les icônes, partez sur une couleur peps. Pensez au turquoise, au jaune ou encore au rouge. Ces couleurs attireront l'attention du lecteur sur des points importants.
  • Pour les boutons, utilisez plusieurs couleurs : une couleur vive et une couleur moyenne selon l'importance du bouton. Pour un bouton "Call to action" privilégiez la couleur vive.

Vous pouvez retrouver plus de détails sur les règles "The W3C's Web Accessibility Initiative" ici

La couleur n'est pas perçu de la même façon par tout le monde, elle ne doit donc pas être le seul élément pour transmettre une information. L'exemple d'un message d'erreur est parfait pour illustrer ce point. Une simple couleur rouge ne doit pas suffire à annoncer une erreur, une icône attention ou une croix doivent s'y ajouter.

design ergonomie présentation

2. La lisibilité des textes

Typographie

  • Utiliser une police de caractère très lisible. N'utilisez qu'une seule police et jouez sur les différentes graisses (léger, normal, gras, italic). Pour un site moderne, n'utilisez pas plus de 2 polices sur votre site.

Pensez aux polices d'écriture simples et sans serif pour vos paragraphes, elles sont très lisibles et offrent de nombreuses graisses pour mettre des mots en gras ou encore des citations en italique.

Voici une petite sélection de typographies disponibles gratuitement sur Google Font et ayant une belle lisibilité :

Pour vos titres, permettez-vous un peu de folie ! Utilisez une typographie serif plus classique. Cela va aider à la lecture car l'œil va reconnaitre plus rapidement les titres des paragraphes.

Voici une petite sélection de typographies disponibles gratuitement sur Google Font et ayant une belle lisibilité :

Voici une article pour améliorer le contenu de vos textes.

design ergonomie texte
design ergonomie navigation

4. Les actions sur le site

Design

Les internautes ont l'habitude de se fier au visuel pour voir quels contenus sont importants et/ou cliquables.

Votre "call to action" doit, comme son nom l'indique, appeler à l'action. Le texte que vous y mettrez sera important mais le design aussi. Le choix de la couleur du bouton "Call to action" va attirer ou non le regard. Chaque couleur diffusera un message différent. Certaines couleurs comme le rouge, le vert clair ou le bleu clair vont inciter l'internaute à cliquer.

Mise en avant

Un bon moyen de faire ressortir votre "Call to action" c'est d'utiliser les overlaps. Cela va mettre en avant votre section "Call to action" grâce à une coupure du fond en 2 couleurs.

5. Penser au mobile

Pour améliorer le SEO de vos pages sur mobile, consultez l'article sur la vitesse de chargement des pages.

Aujourd'hui, plus de la moitié des recherches internet se font depuis un mobile ou une tablette. Un design responsive est alors primordial ! Il ne faut pas décevoir vos lecteurs avec une expérience utilisateur frustrante ou un site lent à charger.

L'optimisation d'un site sur ordinateur n'est pas la même que celle sur mobile ! Attention, votre site internet peut être très optimisé sur ordinateur mais pas sur mobile.

Cela passe par :

  1. Le choix de vos photos : privilégiez des photos carrées, qui seront plus visibles sur mobile.
  2. Le poids de vos photos : compressez le plus possible vos images tout en gardant une belle qualité bien sûr !
  3. L'utilisation des SVG qui sont très légers.
  4. Le respect des tailles minimum pour les boutons et icônes.

Il faut penser que tous les écrans de mobiles ne sont pas grands et que toutes les personnes n'ont pas de petites mains ! Alors pour éviter que certaines personnes cliquent sur 2 boutons à la fois, il y a des règles à respecter :

  • la taille minimale recommandée pour un clic est d'environ 48 x 48 pixel, ce qui correspond environ à 9 millimètres.
  • l'espacement entre chaque zone de clic doit être de 8 pixel minimum, horizontalement et verticalement.
  • prendre des icônes de taille 24 pixel et y ajouter un fond afin d'optimiser la zone de clic
design ergonomie mobile

6. Les formulaire de contact

Lorsque vous demandez par exemple à votre utilisateur de vous contacter via un formulaire, vous devez suivre quelques règles d’ergonomie :

  • Mettre un label pour chaque champ.
  • Ordonner les champs logiquement.
  • Afficher ce qui est obligatoire à remplir par un astérisque par exemple.
  • Minimiser le nombre des champs : si vous demander trop d’informations à remplir, cela peut freiner votre visiteur.
  • Adapter les champs : il existe plusieurs types de champs comme sélection multiple, cases à cocher, menu déroulant, calendrier de dates ...
  • Afficher des erreurs clairement lorsque une information est incorrect.

J'ai besoin d'aide en web design pour larefonte de mon site internet

Articles en lien avec le web design

Retrouvez tous nos articles sur le web design.

Inscrivez-vous à notre newsletter web design

Recevez les dernières nouveautés et astuces sur le web design directement dans votre boite e-mail.

Nos derniers articles sur le web design

Inscris-toi à notre newsletter et reçois les dernières nouveautés et astuces en lien avec le web design.

pop-up newsletter web design