Human Centered Design — Eléments fréquents sur le Web

De nos jours, les pages Web ont un véritable écosystème qui permet d’accueillir et de guider de manière intuitive les internautes à l’aide d’éléments clés qui sont devenus iconiques. En voici quelques-uns.

  1. Le lien.

Les liens sont du texte cliquable, qui se distingue du reste du texte par une couleur différente et/ou accompagnés d’un soulignement. Ils permettent en général de passer d’une page à une autre.

Ils ont plusieurs états connus:

  • l’état par défaut, qui consiste en du texte et une couleur distinctive, communément le bleu ou une couleur qui se démarque, selon la palette de couleur utilisée par le site.
  • l’état hover, qui se déclenche lorsqu’on passe la souris sur le texte. En règle générale, il transforme le pointeur de la souris en main, ce qui révèle la présence d’interaction possible.
  • l’état clic, qui se déclenche au clic de la souris sur cet élément. Par défaut, il change la couleur du texte en rouge, pour aussi longtemps que le clic est maintenu.
  • l’état visited (visité), qui prend effet une fois que cet élément à été cliqué au moins une fois, caractérisé par une couleur mauve.
Trois types de liens avec trois états différents.
Trois types de liens avec trois états différents.
Trois états de liens de la page Microsoft design, de gauche à droite: défaut, clic, hover.

Il est fortement conseillé de démarquer les liens du reste du texte. Retirer le soulignage est possible si une autre alternative de démarquage est envisagée. L’état hover doit aussi se faire remarquer.

Les liens doivent être assez long, explicite et remarquable pour donner l’envie de cliquer dessus sans trop d’efforts de la part de l’utilisateur.

Sources:

2. Les icônes

Les icônes sont des images cliquables pour avoir un effet dépendant de leur représentation. Une icône d’enveloppe permet d’envoyer un mail, une icône de réseau social vous redirigera vers la page de réseau social affiliée au site, l’icône de cloche sur YouTube permet de paramétrer les notifications de la chaîne suivie…

En règle générale, si le site à un logo, c’est une icône parfois cliquable qui est un raccourci vers leur page d’accueil.

La rangée d’icônes typiques sur YouTube
La rangée d’icônes typiques sur YouTube
Il y a pas mal d’icônes sur YouTube, et toutes sont assez explicites pour se passer du texte si nécessaire.

3. Les boutons

Les boutons sont de couleurs et de texte variés, mais ils sont souvent présents sur les sites Web, encore plus sur ceux qui vous demande un compte pour accéder à toutes les fonctionnalités. Ils permettent d’envoyer un formulaire ou de causer un changement dans la page.

Ils doivent avoir une couleur de fond qui contraste avec celui de l’élément qui se trouve en arrière-plan, et la couleur de la police qu’il contient doit également contraster avec celui de sa couleur de fond pour ne pas causer de confusion.

Il est de bonne pratique de laisser la première lettre en majuscule.

Source:

4. La barre de recherche

Souvent présent sur les sites assez grands pour qu’on s’y perde, la barre de recherche est souvent situé en haut dans la page, avec les onglets de navigation, ou possède une page qui lui est dédiée. Elle est d’une simplicité telle que l’on pourrait penser que la styliser ne serait qu’une perte de temps. Quelle erreur.

Le champ de recherche possède un texte de placeholder, pour que l’utilisateur la remarque, et une icône de loupe, pour savoir ce que c’est d’un coup d’oeil. Elle doit se faire remarquer, en contrastant avec la couleur d’arrière-plan. Le bouton de recherche doit être mis bien en évidence, parce qu’il est commun de rechercher en cliquant sur le bouton plus qu’appuyer sur Entrée.

Source:

5. Le texte

Le texte se trouve en général dans les balises <p>, à l’exception des titres (<h1>-<h6>), les citations <q> et les textes dans les formulaires, légendes d’images et les liens. Les titres se différencient du texte commun par une taille et une graisse différente.

Pour rendre le texte d’une page accessible, il va de soi que la couleur de la police doit contraster avec la couleur d’arrière-plan. Ceci dit, un texte trop long tend à faire perdre la patience ou l’intérêt de l’utilisateur. Par ligne, il est conseillé d’y avoir entre 55 et 100 caractères. Si une “présentation” de texte est récurrente, utiliser les tags <article> permet aider à la sémantique et à la lecture de l’écran.

Sources:

Un simple étudiant en Web Design.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store