6 exemples d'ergonomie à adopter pour vos sites internet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Pages web simples

Design sobre et épuré

  • Un site web beau oui ! mais attention de ne pas utiliser le beau pour dissiper le manque d'informations
  • Le lecteur doit trouver son information en maximum 3 clics donc il faut amener l'information le plus rapidement et simplement possible grâce à des boutons bien placés et bien designer
  • Unifier toutes les pages du site pour que e lecteur ne soit pas perdu lors de sa navigation, qu'il ne pense pas avoir changé de site en changeant juste de page
  • Ne pas utiliser trop de couleurs : maximum 5 doivent suffire
  • Apporter du blanc autour d'un texte ou d'un titre va le mettre en valeur. Mais attention au dessus de la ligne de flottaison trop de blanc peut perturber le lecteur et ne pas lui donner envi de continuer. C'est pour cela que le choix des mot et des boutons doit être travaillé.

Voici un exemple de choix de couleurs épurées : un camaïeu de gris et une couleur plus percutante, le jaune.

mt-crea colors

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.

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 fait. Une simple couleur rouge ne doit pas suffire pour annoncer une erreur, un icon attention ou une croix doivent s'y ajouter.

message d'erreur ergonomie

Lisibilité des textes

Typographie

  • Utiliser une police de caractère très lisible. Utilisez qu'une seul et de jouer sur les différentes graisses (léger, normal, gras, italic). N'utiliser pas plus de 2 polices sur votre site.

Pensez aux polices d'écriture simple et sans serif. Voici une petite sélection de typographie disponibles sur Google Font et ayant une belle lisibilité :

  • Lato
  • Roboto
  • Raleway

Cette typographie dispose d'énormément de graisses différentes : extra-fine, fine, normale, medium, semi-bold, bold, extra-bold et black. Avec toutes ses graisses vous pouvez avoir un site internet très attractif et lisible tout en restant sobre et optimisé car vous ne chargez qu'une seule famille de police.

Lien vers Contenu web

ergonomie choix typographie

Navigation simple

Emplacement

  • Afficher le menu en haut de vos pages
  • Remettre dans le footer votre menu
  • Ajouter un fil d'ariane ! Il permet au lecteur de se retrouver dans l'arborescence de votre site
  • Ajouter un module de recherche va aussi aide votre lecteur. Il pourra rechercher par mots-clés ce dont il a besoin et cela va aider dans sa navigation sur votre site

Respecter les "standards" du web n'est pas une mauvaise chose, cela permet une navigation plus fluide. Certains automatisme se sont créés chez les internautes, utilisons les ! Comme :

  • le menu en haut à droite ou sur le côté gauche
  • le logo en haut à gauche qui renvoi vers la page d'accueil
  • Faire ressortir les liens cliquable avec une autre couleur
  • ...

Call to action

Design

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

Votre call to action doit, comme son nom l'indique, appeler à l'action. Lee 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. Retrouver un guide des couleurs sur ce lien : https://stationspatiale.com/articles/design-et-couleurs/

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. voici un exemple :

overlaps call to action

Penser au mobile

lien vers Vitesse de chargement des pages

Aujourd'hui, plus de la moitié des recherches internet se font depuis un mobile ou une tablette. Un design responsible est alors primordial ! Il ne faut pas décevoir votre auditoire avec une expérience utilisateur frustrante ou un site lent à charger. L'optimisation d'un site sur ordinateur n'est pas la meme que celle sur mobile ! Attention, votre site internet peut être très optimisé sur ordinateur mais pas sur mobile.

Cela passe par :

Le choix de vos photos : privilégiez des photos carrées, qui seront plus visible sur mobile car plus grande que des photos rectangulaire

Le poids de vos photos : compressez le plus possible vos images tout en gardant une belle qualité bien sur !

Le respect des tailles minimum pour les boutons et icons. 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 minimal recommandée pour un clic est d'environ 48 x 48 px, ce qui correspond environ à 9 mm.
  • l'espacement entre chaque zone de clic doit être de 8 px minimum, horizontalement et verticalement.
  • prennons des icons de taille 24px, afin d'optimiser la zone de clic, je les met dans un container (voir exemple)

ergonomie web optimisation mobile

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 en présence un label pour chaque champ
  • Ordonner les champs logiquement
  • Afficher ce qui est obligatoire à remplir
  • Minimiser le nombre des champs : Si vous demander trop d’information à remplir, cela peut freiner votre visiteur
  • Adapter les champs : Il existent plusieurs types de champs comme sélection multiple, cases à cocher, menu déroulant ...
  • Afficher des erreur spécifique et clair lorsqu’une information est incorrect

Voici un exemple de champs de formulaire :

ergonomie web formulaire

Articles en rapport


Partager cette page!


Chaque semaine dans votre boite mail, recevez un condensé de conseils et de nouveautés Snoweb !

Nous diffusons des cookies afin d'analyser le trafic sur ce site. Les informations concernant l'utilisation que vous faites de notre site nous sont transmises dans cette optique.