Les critères Scapin/Bastien Sources : Evaluation des systèmes d'information et critères ergonomiques (Kolski 2001) L’ergonomie des sites web (Bastien, Leullier, Scapin 1998)

Plan Introduction Guidage Charge de travail Contrôle explicite Adaptabilité Gestion des erreurs Homogénéité/Cohérence Signifiance des codes et dénominations Compatibilité

Introduction Les critères appartiennent aux méthodes d'inspection : informelles, reposent sur l'expertise des évaluateurs. Objectif initial des critères ergonomiques : Formaliser et structurer les connaissances ergonomiques contenues dans les recommandations : Classification de règles Représentation des dimensions ergonomiques majeures permettant de spécifier ou d'évaluer un système d'information

Introduction Source INRIA Basés sur 800 recommandations classifiées et synthétisées Concernent interfaces textuelles et graphiques 300 recommandations pour la conception de sites web La qualité et l'utilisabilité des critères a été validée expérimentalement

Introduction Les critères ont permis de : Définir le concept de qualité ergonomique des systèmes interactifs Structurer les résultats du domaine de l'ergonomie des logiciels => bd, bases de règles Contribuer à la normalisation Contribuer à l'amélioration du diagnostic ergonomique (réalisable par des spécialistes ou non)

Guidage Quatre sous-critères : 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. Quatre sous-critères : Incitation Groupement/Distinction entre Items Feedback Immédiat Lisibilité.

Guidage 1. Incitation Amener les utilisateurs à effectuer des actions spécifiques Faire connaître aux utilisateurs les alternatives lorsque plusieurs actions sont possibles, selon les contextes dans lesquels ils se trouvent Faire savoir aux utilisateurs : où ils en sont, l'état ou contexte dans lequel ils se trouvent, les outils d'aide et leur accessibilité

Guidage / Incitation Mécanismes d'incitation ? Autres propositions ?

Guidage / incitation Web : concerne liens, mécanismes de recherche d'information, navigation Exemple : le fil d'ariane ou chemin de progression (Breadcrumbs )

Guidage / incitation Exemple : recherche Google

Guidage / incitation Exemples de recommandations : Guider les entrées de données en indiquant le format adéquat et les valeurs acceptables  (exemple : date (jj/mm/aa) : _ _ / _ _ / _ _ ). Afficher les unités de mesure des données à saisir. Indiquer toutes les informations d'état (exemple : modes, valeurs, etc.). Pour chaque champ de données, fournir un label Fournir des indices sur la longueur autorisée des entrées dans un champ. Donner un titre à chaque fenêtre. Fournir des aides accessibles en ligne Source : www.lergonome.org

Guidage 2. Regroupement Organisation visuelle des items d'informations les uns par rapport aux autres Prise en compte du format et de la localisation pour illustrer : Les relations entre les items Leur appartenance ou non à une même classe

Guidage / Regroupement

Guidage / Regroupement Liens Site : http://www.alter-ergo.com/articles.html

Guidage 3. Feedback immédiat Réponse de l'ordinateur suite aux actions des utilisateurs : indique à l'utilisateur que le processus qu'il a lancé est toujours actif et que l'application ou l'ordinateur n'est pas "planté" -> la réponse doit être aussi immédiate que possible Concerne : - chargement page, fichier, …

Guidage / feedback immédiat

Guidage / feedback immédiat Exemple : Site "Glacier National Park Website Visitor Center" : avant que l'image du haut de page ne s'affiche, son texte "alt" précise à l'utilisateur que la page se chargera dans quelques instants.  Feedback immédiat de confirmation et d'état de système à l'internaute. Remarque : attention cette astuce peut être non-conforme du point de vue de l'accessibilité du site Source : http://www.ergoweb.ca/criteres.html

Guidage / feedback immédiat

Guidage 4. Lisibilité Caractéristiques lexicales de présentation des informations à l'écran pouvant entraver ou faciliter la lecture de celles-ci : luminance des caractères, contraste caractères / fond, dimension des lettres, espacement entre les mots, espacement entre les lignes, espacement entre les paragraphes, longueur des lignes …

Guidage / lisibilité Propositions d'amélioration ?

Guidage / lisibilité Exemples de recommandations : Utiliser de préférence des polices standards Attention à l'italique : moins lisible Utiliser des minuscules plutôt que des majuscules (moins lisibles) Le contraste texte/fond doit être suffisant Eviter les couleurs complémentaires (vert sur rouge par ex) Eviter de mettre des motifs en fond de page (sinon très légers) Lignes entre 50 et 70 caractères maxi. Justification du texte à droite à éviter Textes clignotants, défilants à éviter Ne pas utiliser l'underscore (_) sur un lien …

Charge de travail Brièveté Concerne la charge de travail au niveau perceptif et mnésique pour les éléments individuels d'entrée ou de sortie et les séquences d'entrée Concision : liste d'items courte, libellé d'un lien concis, … Actions minimales : limiter le nombre d'étapes pour l'atteinte d'un but Minimiser la nécessité de défilement Profondeur du site à limiter (autant que possible) Chaque page doit avoir un lien vers la page d'accueil

Charge de travail Densité informationnelle Concerne la charge de travail au niveau perceptif et mnésique pour des ensembles d'éléments et non pour des items = informations superflues, n'apportant aucune valeur ajoutée au site et pouvant distraire l'utilisateur Exemple : http://www.lemonde.fr : page très longue et très chargée Propositions d'amélioration ?

Charge de travail / densité informationnelle Exemple de recommandations Limiter le nombre de liens Limiter le nombre d'options (boutons radio) Limiter le nombre de couleurs différentes utilisées

Contrôle explicite Actions explicites : Le système exécute les opérations demandées par l'utilisateur (et pas d'autres) au moment où il le demande

Contrôle explicite / action explicite Exemple de recommandation : Aucun traitement (exemple : sauvegarde) ne doit être la conséquence d'une autre action (exemple : demande d'impression).

Contrôle explicite Contrôle utilisateur : Donner à l'utilisateur la possibilité d'annuler ses actions. L'utilisateur doit toujours avoir la main. Les actions des utilisateurs doivent être anticipées et les options appropriées fournies pour chaque cas.

Contrôle explicite / contrôle utilisateur Exemples de recommandations Les animations doivent pouvoir être interrompues Les sons ne doivent pas se déclencher automatiquement et un panneau de contrôle doit être fourni à l'utilisateur Possibilité d'annuler (undo) ou de refaire (redo) la dernière opération

Adaptabilité Capacité d'un système à réagir selon le contexte et selon les besoins et préférences des utilisateurs Flexibilité Moyens de personnalisation de l'interface selon les stratégies et habitudes de travail de l'utilisateur et les exigences de la tâche Possibilités différentes offertes à l'utilisateur pour atteindre un objectif donné Prise en compte de l'expérience de l'utilisateur

Adaptabilité / Flexibilité Exemple : possibilité d'utiliser les raccourcis clavier comme alternative aux menus

Adaptabilité / Flexibilité Exemples : Possibilité d'accès en mode texte (lecteurs d'écran pour les aveugles Possibilité d'appliquer sa propre feuille de style pour modifier les couleurs et les polices de caractère (pour les malvoyants)

Adaptabilité / prise en compte de l'expérience de l'utilisateur Moyens mis en œuvre pour respecter le niveau d'expérience de l'utilisateur Prendre en compte différents objectifs et niveaux d'expertise Guider les novices pas à pas dans la réalisation des objectifs/tâches Permettre aux experts l'utilisation de raccourcis pour la réalisation de leurs objectifs/tâches (ex : raccourcis clavier)

Gestion des erreurs Moyens permettant : 3 sous critères : d'éviter ou de réduire les erreurs de les corriger lorsqu'elles surviennent 3 sous critères : Protection contre les erreurs Qualité des messages d’erreurs Correction des erreurs.

Gestion des erreurs 1. Protection contre les erreurs Moyens servant à détecter et prévenir : Les erreurs d'entrées de données Les erreurs de commandes Les actions aux conséquences néfastes

Gestion des erreurs / protection contre les erreurs Exemple : demande de confirmation de suppression de fichier

Gestion des erreurs 2. Qualité des message d'erreur Leur pertinence Leur facilité de lecture L'exactitude de l'information donnée quant à la nature des erreurs L'indication des actions à entreprendre

Gestion des erreurs / qualité des message d'erreur Exemples de recommandations : Fournir des messages d'erreur orientés tâches Utiliser des termes spécifiques, non ambigus Utiliser un vocabulaire neutre, non personnalisé, non réprobateur et éviter l'humour

Gestion des erreurs 3. Correction des erreurs Moyens fournis à l'utilisateur pour lui permettre de corriger ses erreurs Ici, Word propose de corriger automatiquement un problème de marge à l'impression

Homogénéité / cohérence Façon dont les choix de conception de l'interface sont conservés pour des contextes identiques et différents pour des contextes différents codes, dénominations, formats, procédures, etc.

Homogénéité / cohérence Exemple : dans le pack Office les menus des différentes aplications (excel, word …) comportent des items communs, présentés et regroupés de la même manière

Exemple : homogénéité / cohérence des pages d'un site web (charte graphique) Source : www.ergolab.net

Homogénéité / cohérence Exemples de recommandations (web) : Les icônes doivent : être utilisées de manière cohérente : une icône = une fonction et une seule être homogènes : même forme, même légende, même taille, même emplacement Toutes les pages du site doivent avoir la même structure – homogénéité de l'apparence des pages Les mêmes séquences d'actions doivent avoir les mêmes effets sur toutes les pages Les termes doivent être homogènes : un même mot doit tjrs avoir la même signification L'emplacement des menus, boutons et textes redondants doit être le même pour toutes les pages du site

Signifiance des codes et dénominations Relation sémantique forte entre l'objet ou l'information affichée et son référent Ici les icônes sont assez représentatives de leurs fonctions

Signifiance des codes et dénominations Recommandations (web) Les icônes liens doivent avoir un trait distinctif qui doit se retrouver sur la page de destination L'intitulé des liens doit refléter le contenu de la page de destination (= le titre de la page de destination) Eviter l'utilisation d'icônes ou de vocabulaire nécessitant un apprentissage particulier de la part de l'utilisateur L'adresse d'une page web (URL) devrait être compréhensible par l'utilisateur

Compatibilité Accord entre les caractéristiques des utilisateurs et des tâches, d'une part, l'organisation des sorties, entrées et du dialogue d'une application donnée. Similitude entre divers éléments, environnements et applications

Compatibilité Web : Comptabilité entre les caractéristiques des utilisateurs et de leurs tâches (problème : caractéristiques très diverses, handicaps…) Comptabilité avec les matériels et logiciels de navigation

Discussion sur les critères Enrichir les critères identifier les manières de les mettre en œuvre Définir des priorités pour l'évaluation Définir les façons d'examiner les états et les éléments de l'interface (interaction, dialogue) Pré-requis à l'évaluation (caractéristiques liées à la tâche et à l'utilisateur)