Bastien & Scapin les critères heuristiques : Le guidage

Onellia Ceccaldi

onellia

15 décembre 2020

Chapitre 1 : Le guidage

Dans l’article, les règles ergonomiques de Bastien et Scapin, nous avons abordé les 8 critères ergonomiques à respecter pour concevoir des interfaces performantes. Explorons maintenant, chacun des critères et leurs sous-critères plus en détail.

Ici, nous allons vous parler du guidage. Première règle ergonomique parmi les critères de Bastien & Scapin.

Le Guidage c’est quoi ?

Pour rappel, le guidage est l’ensemble des moyens mis en œuvre pour conseiller, orienter, informer et conduire l’utilisateur lors de ses interactions avec l’ordinateur (messages, alarmes, labels, etc.), y compris dans ses aspects lexicaux.

Cinq sous-critères participent au guidage : 

  • L’incitation 
  • Le groupement/distinction 
  • Le Feedback immédiat 
  • La lisibilité 
  • La localisation 

Ci-dessous, vous trouverez l’ensemble des sous-critères du guidage détaillé. À travers des exemples concrets, étudiés au sein de l’agence UX Le Backyard, vous pourrez visualiser chacune des étapes clés, et optimiser vos interfaces

1. L’incitation

L’incitation est la capacité du système à faire connaître à l’utilisateur les actions qu’il peut effectuer. Ce critère est sans doute l’un des plus importants à prendre en compte lors de la conception des interfaces digitales. Il concerne la conception des pages individuelles, les liens, les mécanismes de recherche d’information, et la navigation.

Sur un site web, il s’agit par exemple d’indiquer à l’utilisateur où il se trouve dans le site et quels éléments sont cliquables. Les éléments propres à la page sont aussi des indicateurs intéressants pour optimiser le guidage.

Gardez en tête, que si votre site n’a pas une hiérarchie claire dans les interactions, comment l’utilisateur comprendra quelles actions sont prioritaires pour lui ? 

 

Exemple :

Il est essentiel d’harmoniser vos CTA, s’il existe des CTA de forme et couleur différents. L’utilisateur risque d’être perdu et de ne pas comprendre ou est ce qu’il peut cliquer. 

Astuce de l’agence : Au Backyard, en tant qu’agence UX, on conseille d’avoir 3 styles de CTA. Un CTA primaire, un secondaire et un tertiaire. Chacun de ces CTA doit avoir qu’un seul style.

Mauvaise pratique : Il y a trop de CTA sur une seule page, l’utilisateur se perd, il n’est pas guidé vers l’action primaire de la page.

2. Le groupement/La distinction

Le groupement guide l’utilisateur en groupant les informations et les fonctions de même type. Le critère groupement/distinction par le format concerne plus particulièrement les caractéristiques graphiques (format, couleur, etc.) permettant de faire apparaître la non-appartenance ou l’appartenance d’items à une même classe, ou encore permettant d’indiquer des distinctions entre classes ou bien encore des distinctions entre items d’une même classe.

L’utilisateur considère que ce qui se ressemble va fonctionner de la même manière (principe de similarité). À l’inverse, la distinction consiste à séparer clairement ou à attribuer des propriétés distinctes à des objets qui sont différents ou qui se comportent de manières différentes.

 

Exemple : 

La hiérarchie d’information est une des grandes problématiques de l’ergonomie. Si vous êtes responsable produit et que vous ne pouvez pas mémoriser la couleur de vos CTA, ou la couleur de vos grandes catégories/titres, vous avez un problème. 

Mauvaise pratique : Il y a 8 styles typographiques sur une seule page.

3. Le feedback immédiat

Le feedback permet de montrer à l’utilisateur ce qu’est en train de faire le système (rétroaction). Le respect de ce critère, appelé parfois « retour utilisateur », contribue grandement à accroître la confiance de l’utilisateur. Il établit plus facilement le lien entre les actions qu’il effectue et l’état résultant du système; il comprend ainsi mieux son fonctionnement (se forge une image mentale) et apprend plus rapidement à l’utiliser. Le Feedback immédiat permet d’indiquer à l’utilisateur là où il se situe dans les actions qu’il effectue. Cela le rassure. Votre outil, site, l’accompagne alors pendant son parcours.

 

Exemple: 

Pour illustrer le feedback immédiat, un exemple bien connu est l’information fournie à l’utilisateur lors du téléchargement d’une page web ou d’un fichier. Il est possible de savoir approximativement le temps nécessaire au téléchargement, ou encore la progression de ce dernier.

Bonne pratique : L’indication, “transfert en cours” permet à l’utilisateur d’avoir un feedback

4. La lisibilité

Elle facilite la perception des infos (textes et icônes) selon leurs propriétés et dispositions. 

Une attention particulière doit être portée aux polices de caractères, aux couleurs en général, à la disposition des éléments et aux icônes. Un nombre important de règles peuvent être associées à ce critère. Avec l’arrivée du Dark Mode, la lisibilité devient encore plus complexe. Veillez à adapter votre contenu aussi en fonction du mode sombre, pour que l’expérience utilisateur ne soit pas altérée d’un mode à l’autre. 

 

Exemple: 

Vous avez beaucoup de choses à dire et c’est bien. Mais au delà du volume de contenu, il s’agit également de le rendre digeste. Si vos articles prennent plus de 60% de la largeur de votre écran de bureau, alors vous devez fournir le paracétamol.

Astuce de l’agence : Au Backyard, on conseille à nos clients d’avoir 80 caractères maximum par ligne. Sinon cela rend les lignes trop longues et beaucoup plus difficile à lire.

Mauvaise pratique : Les lignes sont beaucoup trop longues, ce ne sont pourtant pas des CGV.

5. La localisation

La localisation évalue les moyens et les repères mis à disposition de l’utilisateur pour se repérer et appréhender son parcours. L’utilisateur doit pouvoir se situer, se repérer sur une application, un site internet durant son parcours. Cela peut être mis en application par un fil d’Ariane, des tailles de titres suffisamment lisibles pour être vu, la différenciation des items, etc. Une page web contient généralement différents types d’informations (éléments de navigation, titres, contenu textuel, illustrations, etc.) qu’il importe d’organiser et de bien distinguer.

 

Exemple : 

Il faut toujours indiquer à l’utilisateur là où il se trouve sur votre site. Il se sent alors guidé, cela évite également la frustration. Par exemple, vous pouvez mettre en surbrillance la catégorie du menu ou l’on se trouve ou encore l’utilisation du fil d’ariane. 

Bonne pratique : Au dessus de l’affichage des produits, on retrouve un fil d’ariane

Sources : INRIA 

Comments are closed.

SUR LE MÊME SUJET

22
Jan

Pourquoi choisir un prestataire digital devient le parcours du combattant ?

La création de projet digital nécessite une équipe, vous allez faire appel à des prestataires di

Choisir son prestataire

19
Jan

Bastien & Scapin les critères heuristiques : La charge de travail

La charge de travail, est l'ensemble des éléments de l'interface qui a un rôle dans la réduction

La charge de travail