Critères Bastien et Scapin : pour un audit ergonomique efficace

1 octobre 2013

On ne le repettera jamais assez l’ergonomie web a pour objectif d’améliorer l’interaction homme-machine et facilité l’usage des interfaces numériques.Afin d’évaluer le degré d’utilisabilité et la qualité d’un site internet nous pouvons utiliser plusieurs méthodes :

C’est donc ce dernier qui nous intéressera ici. Et plus précisément  la liste de critère de Bastien et Scapin.

Ces critères sont des règles à respecter dans le cadre de la conception des interfaces. Ils permettent d’identifier les principaux problèmes d’utilisabilité, en passant en revue chacun des éléments de l’interface et en les confrontant aux normes, standards et critères ergonomiques.
Les avantages : Une analyse exhaustive et complète permettant d’évaluer l’ensemble des fonctionnalités des pages. Elle est souvent accompagnée d’une brève analyse concurrentielle ainsi que des premières pistes d’optimisation pour améliorer l’interface.
Les inconvénients : Sans utilisateurs on ne peut pas recueillir des données utilisateurs pertinentes. (pour cela il faudrait un test utilisateur)

 

LISTE DES CRITERES
BASTIEN ET SCAPIN


1. GUIDAGE
CONSEILLER, ORIENTER, INFORMER ET CONDUIRE L’UTILISATEUR TOUT AU LONG DE SON PARCOURS


 

1.1. Incitation dans les actions à effectuer
Accompagner l’utilisateur dans sa tâche, le renseigner sur le contexte dans lequel il se trouve, l’orienter, l’amener à effectuer des actions spécifiques.

Quelques exemples :

                  • Indiquer à l’utilisateur les éléments cliquables (call to action incitatif)
                  • Titre de page claire et en adéquation avec le contenu
                  • Aide à la saisie dans un formulaire (jj.mm.aaaa) ..
                  • Un graphisme soigné et moderne
                  • Intégration d’éléments dynamiques pour capter le regard

1.2 Groupement/Distinction entre Items
Regrouper ce qui va ensemble pour favoriser une meilleure distinction et reconnaissance des éléments

Quelques exemples :

                  • Les liens visités sont différenciés des liens non visités
                  • Distinction des rubriques de navigation par couleurs
                  • Les différentes zones de l’écran sont rapidement identifiable et distinctes (navigation principale, navigation secondaire, identification, contenu …)
                  • Les boutons avec actions différentes sont distincts  (valider, annuler)

1.3 Feedback immédiat
Tenir l’utilisateur informé de manière immédiate de ce qui se passe pour le rassurer dans son parcours

Quelques exemple :

                  • Les actions en cours sont indiqués (barre de progression dans un téléchargement, loader dans le chargement d’une page …)
                  • Des tutoriaux/aides à la saisie pour les actions compliqués sont indiqués en temps réel
                  • Le moteur de recherche utilise l’auto-complétion
                  • Dans un formulaire, les champs sont directement vérifiés à la saisie
                  • Lors d’une inscription, la disponibilité (ou non) d’un nom d’utilisateur est vérifié en temps réel.
                  • Le nombre de caractère restant dans une description est indiqué au fur et à mesure
                  • Le téléchargement d’un document, paiement, envoie est confirmé.

1.4 Lisibilité
Faciliter la lecture et favoriser la compréhension de ce qui est affiché à l’écran.

Quelques exemples :

                  • Hiérarchisation du contenu (titre, sous titre, chapeau, texte, date différent graphiquement)
                  • Taille de police suffisante
                  • Le contraste entre la couleur d’arrière plan et la police est assez fort : préférer les fonds clairs (gris pâle), le texte noir, éviter le rouge (sauf pour les messages d’erreurs)
                  • Utiliser une police sans empattement de type Verdana, Arial ou Helvetica pour les textes longs

1.5 Localisation
Evaluer les moyens et repères mis à la disposition de l’utilisateur pour se repérer et appréhender son parcours. 

Quelques exemples

                  • Implémentation d’un fil d’Ariane
                  • Différentier l’item présentant la page en cours de consultation et le mettre en avant mais le rendre « non cliquable »
                  • Taille des titres suffisamment lisible pour être vu

2. CHARGE DE TRAVAIL  
OPTIMISER LE NOMBRE D’ACTIONS DEMANDEES A L’UTILISATEUR


 

2.1. Brièveté (Concision & Actions Minimales)
Garantir la simplicité de l’interface et la pertinence des fonctionnalités tout en limitant le travail de lecture

Quelques exemples :

                  • Limiter les étapes par lesquelles doivent passer les utilisateurs pour effectuer leur tâche,
                  • Pour de l’aide à la saisie, utiliser un format court pour en faciliter sa compréhension et sa lecture
                  • Pas d’éléments inutiles
                  • Des libellés clairs et concis dans les formulaires.
                  • Proposer des boutons de partages et d’impression sur les pages produits/services

 

2.2. Densité de l’information
Limiter la densité informationnelle de l’interface, en affichant uniquement les informations nécessaires.

Quelques exemples :

                  • Eviter les pavés de textes
                  • Intégrer uniquement les informations essentielles pour ne pas noyer l’information principale

3.CONTROLE DES UTILISATEURS SUR LEURS ACTIONS
LAISSER L’UTILISATEUR CONTROLER LE DEROULEMENT (INTERRUPTION, REPRISE) DE SES ACTIONS ET L’EN AVERTIR SI CE N’EST PAS LE CAS


 

3.1 Actions explicites
Rendre explicite la relation entre le fonctionnement de l’interface et les actions des utilisateurs

Quelques exemples :

                  • Bouton valider à la fin d’une action 
                  • Bouton explicite en fonction de leur action : « Rechercher » pour une recherche, « Envoyer » pour un envoi d’email
                  • Pas de cliquer-ici

3.2 Contrôle utilisateur
Laisser l’utilisateur contrôler le déroulement (interruption, reprise) de ses actions et l’en avertir si ce n’est pas le cas.

Quelques exemples :

                  • Permettre à l’utilisateur d’interrompre à tout moment une tâche en cours, 
                  • Faciliter les retours en arrière autre que le retour arrière du navigateur (bouton back, fil d’Ariane)
                  • Limiter tant que possible les renvois vers d’autres sites à partir d’éléments de navigation principaux.
                  • Indiquer clairement à l’utilisateur les sorties de site et les redirections
                  •  Prévoir une option permettant le retour aux paramètres par défaut, 
                  •  Permettre le désabonnement facilement 

4.  ADAPTABILITE DE L’APPLICATION AUX BESOINS DES UTILISATEURS
LAISSER L’UTILISATEUR PERSONNALISER ET CONTROLER UNE INTERFACE EN FONCTION DE SES BESOINS (NOTIFICATIONS, TABLEAUX DE BORDS, COULEURS  …)


 

4.1 Fléxibilite
Mettre à disposition des éléments de personnalisation de l’interface pour les actions fréquemment utilisées

Quelques exemples :

                  • Permettre aux utilisateurs de désactiver les affichages et informations inutiles
                  • Donner des options de filtres et tri (liste produit ou messagerie par exemple)

 

4.2 Prise en compte de l’expérience utilisateur
Respecter le degrés d’expérience utilisateur

Quelques exemples :

                  • Donner des espaces privés et personnalisés aux utilisateurs expérimentés 
                  • Tutorial pour une première utilisateur de l’interface (et uniquement pour la première, ou du moins pouvoir désactiver l’aide)

5. GESTION DES ERREURS
EVITER, REDUIRE ET CORRIGER LES ERREURS LORSQU’ELLES SURVIENNENT


 

5.1. Protection contre les Erreurs
Détecter et prévenir les erreurs ou actions impossibles


Quelques exemples :

                  • Les champs obligatoires se distinguent des champs facultatifs, 
                  • Aide à la saisie directement affichée en indiquant le format de saisie souhaité
                  • Bouton de validation inactif tant que le formulaire n’est pas entièrement rempli

5.2. Qualité des Messages d’Erreurs
Assurer la bonne compréhension et la nature de l’erreur

Quelques exemples :

                  • Afficher les messages d’erreur les plus concis possible (simples et compréhensibles)
                  • Intégrer des exemples de solution « Votre adresse email doit inclure le signe @ »
                  • Indiquer la cause de l’erreur (identifiant déjà pris, email invalide) 

6. HOMOGENEITE ET COHERENCE DES CODES
CONSERVER LES CHOIX DE CONCEPTION ET CODES GRAPHIQUES POUR DES ELEMENTS ET ACTIONS SIMILAIRES POUR FAVORISER L’APPRENTISSAGE


Quelques exemples :

                  • La charte graphique est homogène sur tout le site
                  • Des systèmes de navigation identiques sur chaque page
                  • Les boutons d’actions aux fonctions similaire sont harmoniser graphiquement
                  • Toujours utiliser les mêmes formats pour les titres de niveaux 1, 2 …, pour les tableaux, les légendes etc.

7.  SIGNIFIANCE DES CODES ET DENOMINATIONS
CHOISIR DE MANIERE APPROPRIEE LES MOTS ET LES SYMBOLES UTILISES SUR UN SITE OU UNE APPLICATION.


Quelques exemples :

                  • Les titre de liens sont facilement compréhensible et correspondent au contenu
                  • Utiliser des icônes pour les éléments fréquemment employés 
                  • Vérifier la compréhension des icônes (privilégier texte + icone)

 

 

D’après : Bastien, J.M.C., Scapin, D. (1993) Ergonomic Criteria for the Evaluation of Human-Computer interfaces.