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

Présentation au sujet: "Les critères Scapin/Bastien Sources : Evaluation des systèmes d'information et critères ergonomiques (Kolski 2001) L’ergonomie des sites web (Bastien,"— Transcription de la présentation:

1 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)

2 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é

3 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

4 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

5 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)

6 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é.

7 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é

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

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

10 Guidage / incitation Exemple : recherche Google

11 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 :

12 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

13 Guidage / Regroupement

14 Guidage / Regroupement
Liens Site :

15 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, …

16 Guidage / feedback immédiat

17 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 :

18 Guidage / feedback immédiat

19 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 …

20 Guidage / lisibilité Propositions d'amélioration ?

21 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 …

22 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

23 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 : : page très longue et très chargée Propositions d'amélioration ?

24 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

25 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

26 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).

27 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.

28 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

29 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

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

31 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)

32 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)

33 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.

34 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

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

36 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

37 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

38 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

39 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.

40 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

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

42 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

43 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

44 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

45 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

46 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

47 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)