4 façons de mettre en place le principe de visibilité

Il n’y a pas si longtemps, je vous ai parlé du 8ème principe d’utilisabilité dicté par Jakob Nielsen, celui sur le minimalisme et l’esthétique. Eh bien, aujourd’hui, parlons du principe de visibilité ! Ce principe permet d’indiquer l’état actuel du système, et ainsi de donner aux utilisateurs l’impression qu’ils maîtrisent le système, et c’est ce sentiment de maîtrise qui vous permettra de bâtir une relation de confiance 😉

Voici quatre méthodes de rétroaction visuelle que vous pouvez utiliser afin d’indiquer l’état du système : 

1/ Le retour visuel qui indique à l’utilisateur où il se trouve

Où suis-je ?

Personne n’aime être perdu, que ce soit dans le monde réel ou le monde numérique. Faire savoir aux utilisateurs là où ils se trouvent sur l’interface ou sur l’application est essentiel pour créer une bonne expérience de navigation. Il est alors important de mettre en avant l’option de navigation actuellement choisie afin d’aider les utilisateurs à comprendre là où ils sont !

L’attribut alt de cette image est vide, son nom de fichier est snapp-animation.gif.
Animation par Alejandro Ausejo.

 Combien d’étapes sont-elles nécessaires pour terminer une action ? 

Savoir combien d’étapes sont nécessaires à l’accomplissement d’une action aide l’utilisateur à estimer le temps requis pour terminer sa tâche.

L’attribut alt de cette image est vide, son nom de fichier est Capture-d’écran-2021-03-05-à-11.56.56-1024x636.png.

2/ Le retour visuel qui confirme l’action de l’utilisateur

 Il est primordial de fournir un retour visuel à chaque interaction. Un retour visuel immédiat prévient l’utilisateur que l’application à pris en compte son action. Cela renforcera donc son sentiment de maîtrise, et le retiendra de commettre d’éventuelles erreurs, comme appuyer plusieurs fois sur le même bouton…

En clair, il est impératif d’indiquer que le système a bien pris en considération tel ou tel clic.

L’attribut alt de cette image est vide, son nom de fichier est galshir-click-lemonade.gif.
Animation par Gal Shir.

Dans certains cas cependant, il peut être important de changer l’état du bouton lui-même. Dans de tels cas, le retour visuel transmettra aussi le résultat de l’interaction, le rendant à la fois visible et intelligible. Voici quelques exemples :

L’attribut alt de cette image est vide, son nom de fichier est image_processing20200131-9829-yc5z9b.gif.
Animation par Nour Kada.
  • Appuyer sur le bouton “J’aime”
  • Activer/ désactiver un élément. Le changement de couleur du bouton donnera à l’utilisateur une indication sur l’état actuel de l’élément en question.
  • Mettre un élément en favori
  • Ajouter un objet au panier. Dans ce cas, le retour visuel indique à l’utilisateur que l’article a été ajouté au panier.

3/ Le retour visuel qui indique l’état du système

Montrer que le système est actif

Lorsqu’il faut plus de quelques secondes pour que le système se charge, il est important de donner à l’utilisateur un retour immédiat. En fonction de l’attente, il est recommandé d’employer des indicateurs de chargement tels que :

  • Des boucles de chargement (généralement pour les opérations qui prennent moins de 10 secondes)
  • Des barres de chargement (pour les opérations qui prennent plus de 10 secondes).

La suite est à découvrir sur notre site partenaire, Wexperience, agence d’ergonomie Digitale.

cta-lire-suite-cc

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Merci de taper les caractères de l'image Captcha dans le champ

Merci de saisir ces caractères dans le champ
ci-dessous afin de valider votre commentaire.

Robin Commerce

Article de : Robin Commerce

Del, Robin ou encore Abdel ... certains pensent que je souffre d'un trouble dissociatif de l'identité haha. Vif et agile, votre Capitaine a fait de moi son compagnon d'armes dans sa quête sur le web :)