Ergonomie des interfaces

Définitions Ergon (travail) Nomos (loi, règles). Ergonomie vient du grec Ergon (travail) Nomos (loi, règles). L'ergonomie est définie comme : "l'ensemble des connaissances scientifiques relatives à l'Homme nécessaires pour concevoir des outils, des machines et des dispositifs qui puissent être utilisés avec le maximum de confort, de sécurité et d'efficacité"

Définitions Elle comprend différentes disciplines (physiologie, psychologie, sociologie, médecine,...) qui s'associent pour accéder à une connaissance scientifique de l'homme au travail.      Cette connaissance a pour objet l'adaptation du travail et de l'environnement de travail à l'homme (et non le contraire).   

Définitions Pour adapter le travail à l'homme, il est nécessaire d'effectuer des aménagements concernant les outils, les postes de travail, les systèmes homme-machine, l'environnement et l'organisation du travail. Pour que l'adaptation du travail à l'homme soit la meilleure possible, il faut essayer de prendre en compte tous les facteurs du travail (physiologiques, psychologiques, sociaux).          

Objectifs de l’ergonomie Utilité : proposer des produits qui répondent aux besoins des utilisateurs (l'interface doit servir à faire quelque chose). Utilisabilité : proposer des produits qui sont simples à utiliser et respectent la logique de l'utilisateur (Une interface utilisable doit permettre à l'utilisateur de réaliser une action rapidement et efficacement).

Objectifs de l’ergonomie L'ergonomie influence la productivité et la réussite commerciale d'un logiciel. Un logiciel ergonomique permettra de réaliser rapidement la tâche prévue, sans perte de temps et avec moins de stress. C'est également un facteur de fidélisation : l'utilisateur achète les logiciels lorsqu'il est sûr de pouvoir les utiliser facilement.

Types d’ergonomie Ergonomie physique / physiologique Ergonomie cognitive Ergonomie organisationnelle Ergonomie des sites web      

Ergonomie physiologique: Types d’ergonomie Ergonomie physiologique: On s’intéresse aux contraintes physiques telles que: la charge physique, troubles musculo-squelettiques, le bruit, la température, la pression, les postures de travail, la sécurité, la santé, etc…

Types d’ergonomie Ergonomie cognitive: S’intéresse aux processus mentaux, tels que la perception, la mémoire, le raisonnement, dans leurs effets sur les interactions entre les personnes et la machine.

Ergonomie organisationnelle: Types d’ergonomie Ergonomie organisationnelle: Etudie l'utilisateur évoluant dans une structure organisationnelle (Ex: Horaire du travail, le travail en équipe, ...).

Ergonomie des sites web: Types d’ergonomie Ergonomie des sites web: C’est la capacité à répondre efficacement aux attentes des utilisateurs et à leur fournir un confort de navigation. Pour être de qualité, un site doit être à la fois Utile (répondre à un besoin) et Utilisable (par tous)

Critères ergonomiques A l'origine de cette notion de critères ergonomiques, les ergonomes Christian Bastien et Dominique Scapin ont procédé à la synthèse d'environ 900 recommandations rassemblées dans le domaine de l'ergonomie informatique. Les critères ergonomiques constituent une classification (typologie) des propriétés d'une interface homme-machine qui conditionnent son utilisabilité. L’établissement de critères ergonomiques vise principalement deux objectifs complémentaires : Ils permettent d'évaluer l'utilisabilité d'un logiciel. D'autre part, ils servent de guide lors de la conception d'une interface utilisateur en aidant les concepteur à prendre en compte - dès la phase initiale du développement - les aspects ergonomiques du logiciel. 12

Les principaux critères ergonomiques

Les principaux critères ergonomiques Les critères ergonomiques sont des outils qui permettent de voir, comprendre et expliquer des problèmes ergonomiques.

1) Compatibilité Recommandations : La compatibilité est la capacité du logiciel à s'intégrer dans l'activité réelle des utilisateurs. Ce critère mesure l'adéquation du logiciel avec le contexte physique et social dans lequel il est utilisé (environnement de travail). L'objectif est de réduire le transfert de connaissance entre le métier et l'utilisation du logiciel. Recommandations : • Parler le langage de l'utilisateur. • Utiliser des métaphores familières. • Présenter les informations de façon cohérente par rapport aux autres supports de travail (documents papier, formulaires, organigrammes, directives, etc.)

1) Compatibilité La corbeille Le dossier

2) Guidage Le guidage aide l'utilisateur dans son interaction avec le logiciel en lui fournissant les éléments nécessaires pour l'utiliser correctement. L'objectif est de faciliter l'utilisation du système et son apprentissage. On distingue Guidage explicite (ex. messages, infobulles, boîtes de dialogue, …) Guidage implicite (ex. griser les fonctions inactives, …)

Exemples de guidage Donner le format de saisie des données (dates, dimensions, unités, …)

Exemples de guidage Signaler les traitements longs par une indication d'attente (barre de progression, animation, message, …)

2) Guidage Recommandations : Griser les fonctions non disponibles (options de menu, boutons, …) Fournir la liste des saisies attendues (listes déroulantes, codes à utiliser, …) Donner le format de saisie des données (dates, dimensions,…) Modifier la forme du curseur (pointeur de la souris) pour donner des indications sur l'opération à effectuer. Indiquer clairement les champs obligatoires (* ou autre indicateur) Montrer clairement comment aller en avant et en arrière Afficher des infobulles.

2) Guidage Recommandations : Regrouper les informations de même type par le format ou par la position (regroupement par menus, bordure, …) Le logiciel doit répondre à toute action de l'utilisateur par un changement dans la présentation de l'interface (visuel, sonore, ...) Indiquer l’état du système (état) Toujours faire apparaître les saisies utilisateur. Rendre visible les traitements réalisés par le logiciel et indiquer clairement lorsqu'ils ont échoué.

3) Cohérence Le critère de cohérence concerne l'homogénéité globale de l'interface homme-machine. L'objectif est de respecter une logique cohérente pour : La présentation (graphisme, localisation, vocabulaire, format, syntaxe, …) Le comportement (réaction du système, messages, retours sonores, …) L'homogénéité rend le système stable, donc prévisible aux yeux de l'utilisateur. Le temps de recherche de l'information est diminué. Rend l'apprentissage plus rapide car ce qui est appris à un endroit est également applicable ailleurs (généralisation).

3) Cohérence Recommandations : Proposer des formats d’écrans similaires. La sémantique des boutons de la souris doit être constante. Le même vocabulaire doit être utilisé pour désigner les mêmes fonctions Utiliser une organisation et une syntaxe cohérente pour les menus. Utiliser de manière cohérente les symboles graphiques (icônes, couleurs, …)

3) Cohérence - Exemple

4) Adaptabilité L’adaptabilité concerne les moyens mis à la disposition des utilisateurs pour personnaliser l'interface afin de tenir compte des préférences, des aptitudes, des habitudes, du contexte d'utilisation et de la manière de travailler de chacun d'eux. Recommandations : Permettre à l'utilisateur de définir son niveau d'expérience. Guider l'utilisateur débutant (novice) pas à pas dans la réalisation de la tâche. Donner aux utilisateurs expérimentés les moyens d'effectuer leur tâche de manière rapide et efficiente.

4) Adaptabilité -Exemple Permettre aux utilisateurs de permuter les boutons de la souris pour s’adapter aux gauchers ou aux droitiers.

5) Flexibilité La flexibilité offre à l'utilisateur la possibilité d'effectuer une tâche ou activer une fonction de différentes manières, par exemple : Par un menu déroulant Par un menu contextuel Par une icône dans une barre d'outils Par un raccourci clavier (sauvegarder :Ctrl-S) Recommandations : • Permettre d'effectuer les tâches à la fois au clavier et à la souris. • Fournir un moyen rapide d'accéder aux commandes des menus (raccourcis)

6) Contrôle de l’utilisateur Concerne le degré de contrôle de l’utilisateur sur les traitements réalisés par le système. Recommandations : Valider explicitement les commandes importantes ou difficilement réversibles. Offrir la possibilité d’interrompre les traitements longs. Autoriser les retours en arrière.

7) Gestion des erreurs La gestion des erreurs regroupe les différents moyens visant à éviter ou à réduire les erreurs de l'utilisateur et lui permettre de les corriger. L'objectif prioritaire est de minimiser les interruptions dues aux erreurs. Trois sous-critères sont à prendre en compte : • Protection contre les erreurs (éviter que l'utilisateur commette des erreurs) • Qualité des messages d'erreur (informer clairement l'utilisateur) • Correction des erreurs (lui permettre de les corriger) Si une erreur survient malgré tout, il faut la détecter au plus tôt et avertir l'utilisateur avec un message clair. Pour que la correction de l'erreur soit aisée, le message d'erreur doit indiquer La nature de l'erreur, Sa cause, Les moyens de la corriger (la qualité des messages peut favoriser l'apprentissage du système).

7) Gestion des erreurs Recommandations générales : • Tout mettre en œuvre pour éviter les erreurs (attitude défensive) • Avertir l'utilisateur au plus tôt et le guider vers la résolution du problème • Faciliter l'exploration et l'apprentissage du système • Mettre en évidence les commandes non disponibles (griser) Prévention • Fournir la liste des valeurs possibles, des unités, … Prévention • Minimiser les saisies au clavier (si possible, listes à choix) • Prévenir les risques de perte de données (demander confirmation)

8) La concision La concision regroupe l'ensemble des moyens visant à réduire la charge perceptive de l'utilisateur (champs d'un formulaire, composants visuels, ...) Il s'agit de limiter autant que possible le travail de lecture de l'utilisateur. Ce critère inclut également la notion d'action minimale qui vise à minimiser le nombre d'actions nécessaires à atteindre un but, à accomplir une tâche. La performance des utilisateurs est influencée négativement quand la charge informationnelle est trop élevée. Il faut donc supprimer tous les éléments sans lien direct avec la tâche en cours et qui pourraient distraire inutilement les utilisateurs. Les bannières publicitaires (ou fenêtres pop-up) sont des exemples d'augmentation (inutile?) de la densité informationnelle de l'interface.

9) Signifiance des codes La signifiance des codes caractérise l'adéquation entre l'objet, l'information ou le comportement présentés en entrée et son référent (l'objet ou l'action qu'il représente). Dans une application professionnelle ou spécialisée, il est essentiel d’utiliser le langage connu par les utilisateur dans leur domaine afin de concevoir une interface signifiante pour eux. Recommandations : • Eviter les termes techniques (jargon), parler le langage de l'utilisateur • Définir explicitement et respecter les règles d'abréviation

10) Feedback Concerne les réponses de l’ordinateur immédiates aux actions des utilisateurs. Sa présence est un élément fort d’assurance.

10) Feedback Exemple : visualisation directe des marges dans Word (menu Format / Document) Par ex dans Word, le changement des marges du document est visible sur une petite fenêtre à droite qui change dynamiquement. Ca n ’indique pas la taille, mais plus que l ’action a été prise en compte au bon endroit. Aussi quand on copie un fichier sur le serveur, etc., on a une barra qui indique combien de pourcentage ont été effectué (bien que pas très fiable souvent…). Au moins ça indique qu’il se passe quelque chose ! Mauvaise exemple : cf copie d’écran.

Mme C.BENKHEROUROU. MA. Université KASDI Merbah. Ouargla 2ème partie Mme C.BENKHEROUROU. MA. Université KASDI Merbah. Ouargla

Écran de visualisation L'écran de visualisation est le principal média de sortie de l'IHM. Sa présentation influence l'utilisabilité du logiciel (que se soit une application ou un site Internet). La vision constitue le système perceptif le plus développé de l'être humain. Il faut donc accorder une attention particulière à la manière de présenter les informations sur l'écran. Points importants à considérer : • Organisation de l’écran (faciliter la lecture et l'accès) • Aspects graphiques (couleurs, polices de caractères, icônes, …) • Langage utilisé (compréhension)

Organisation de l'écran L'utilisateur ne parcourt pas toujours l'écran de la même manière. Lors de l'exploration rapide, l'utilisateur adopte un parcours en 'Z’ (le regard part du coin supérieur gauche de l'image, parcourt systématiquement la zone centrale et se termine dans le coin inférieur droit).

Parcours du regard L'utilisateur Parcours l’écran en 'Z'

Organisation de l'écran Pour organiser l'écran, il faut également prendre en compte : La visibilité des zones. Leur accessibilité à l'aide de la souris.

Organisation de l'écran

Importance de l‘organisation de l’écran L’organisation est un des moyens les plus efficaces pour mettre en évidence une information. Lorsque la charge de travail augmente, l’utilisateur se focalise sur certaines zones de l'écran. L‘organisation permet à l'utilisateur de se retrouver et de localiser plus rapidement les éléments recherchés. NB: Un point important à considérer est la cohérence du positionnement entre les différentes fenêtres d'une application ou même d'un ensemble d'applications (une suite logicielle).

Organisation de l'écran

Disposition dans les zones de manipulation • Les éléments importants doivent apparaître en premier • Ceux qui sont fréquemment utilisés seront placés au centre • Les autres éléments seront placés à la fin Exemples : Barre de menus : Palette d’outils :

Graphisme Le graphisme ne vise pas uniquement à satisfaire des critères esthétiques. Il doit surtout attirer l'attention et assurer une lisibilité correcte des informations. Il doit éviter une surcharge du système perceptif de l'utilisateur. Les principaux aspects du graphisme à prendre en compte sont : • Les couleurs • Les polices de caractères • Les icônes • Les techniques de mise en évidence

La couleur La couleur est un élément important de la signalétique de l'IHM. Elle permet notamment : • de mettre en évidence des objets • d'informer sur l'état courant d'un élément • de grouper des objets • . . . Il faut tenir compte du fait que tout le monde ne perçoit pas les couleurs de la même manière. Le daltonisme touche une proportion non négligeable de personnes (env. 8% des hommes et 0.5% des femmes).

Codage de la couleur Certaines couleurs ont un symbole. Par exemple: Le rouge: danger, feu, sang, stop,… Le vert: nature, fraîcheur, jeunesse, santé,… Le bleu: propreté, calme, assurance… Le jaune: Or, avertissement, soleil, céréales,…

Codage de la couleur Dans certaines professions, il existe des codages pour la couleur qu'il faut respecter.

Codage de la couleur La couleur a également une interprétation culturelle qui varie d'une région à l'autre (blanc : pureté en Europe, deuil en Asie; rouge : mort en Afrique, joie en Asie, pureté en Inde);

Choix des couleurs Lors du choix des couleurs (teinte, saturation, luminosité) il faut prendre en compte les règles suivantes : • Utiliser de préférence le bleu pour encadrer • Utiliser une couleur neutre et claire pour le fond d'écran (éviter les fonds trop saturé et les teintes marrons et verdâtres) • Pour les grandes surfaces, utiliser des couleurs peu saturées. • Utiliser des couleurs contrastées pour exprimer une différence • Choisir des couleurs peu contrastées pour exprimer une similarité • Prendre en compte la fatigue visuelle de l'utilisateur. • N'ajouter de la couleur que lorsqu'elle est utile.

Police de caractères Le choix de la police de caractères joue donc un rôle important dans la conception de l'IHM. Une police de caractères (ou fonte; angl. Font) rassemble les lettres minuscules, les lettres majuscules, les chiffres ainsi que les signes de ponctuation d’un même style.

Recommandations pour écrire les Polices de caractères Les expériences montrent qu'on lit 13% plus rapidement un texte écrit en casse mixte qu'un texte écrit entièrement en majuscules. Éviter les textes en italiques. Ecrire les mots en majuscules pour les mettre en évidence. Le soulignement est à éviter car il dégrade la lisibilité. Ce texte est moins vite lu que le texte d'une seule couleur. Les polices sans empattement sont plus lisibles à l'écran. Les polices avec empattement sont plus lisibles sur un texte ( en formant une ligne virtuelle) Les polices scripts ou fantaisistes ne sont pas toujours très lisibles à l'écran

Recommandations pour écrire les Polices de caractères Minimiser le nombre de polices utilisées (pas plus de 3 par page) Donner un rôle précis à chaque police (titre, paragraphe, légende, encadré, …) Utiliser quelques tailles de police distinguables Aérer le texte en créant des paragraphes

Les icônes Les icônes sont des représentations symboliques auxquelles on associe une signification dans l'interface utilisateur. L'utilisation d'icônes présente différents avantages : Les icônes sont indépendantes de la langue Sur une même surface, les icônes peuvent contenir plus d'informations que du texte Les icônes sont interprétées plus rapidement que du texte Lors du choix des icônes, il faut être attentif à l’interprétation culturelle associée à certains graphismes

Interprétation des icônes L'utilisation d'icônes peut également présenter des inconvénients, notamment sur le plan de l'apprentissage du logiciel. Le principal problème rencontré concerne la compréhension de l'icône qui est parfois source d'ambiguïté.

Interprétation des icônes Différentes enquêtes montrent que les utilisateurs préfèrent les interfaces comportant des icônes. Elles leur semblent plus faciles à utiliser. Cependant, plusieurs expériences ont prouvé qu'avec les icônes, les erreurs sont plus nombreuses qu'avec l'utilisation de commandes identifiées par des textes (notamment durant la phase d'apprentissage et chez les utilisateurs occasionnels). Quelle est la fonction représentée par chacune de ces icônes ? Indication : il s'agit d'une application de traitement de texte

Interprétation des icônes Plus les icônes sont descriptives et plus elles sont faciles à interpréter. A l'inverse plus le graphisme est abstrait et plus l'utilisateur a de la peine à interpréter l'icône (il doit apprendre et mémoriser la signification). Pour les icônes plus abstraites, il est recommandé de les accompagner d'un texte descriptif ou d'une bulle d'aide. Il faut réserver les icônes aux commandes fréquemment employées. Une bonne icône est reconnaissable même en 16x16 pixels Utiliser des images traditionnelles (souvent mieux identifiées que des images plus modernes) Vérifier la compréhension des icônes auprès d'utilisateurs

Techniques de mise en évidence Le concepteur dispose de plusieurs moyens pour attirer l'attention de l'utilisateur sur certains objets de l'écran. Parmi les principaux : NB: Si l'on abuse de ces techniques, on obtient l'effet contraire en dispersant l'attention de l'utilisateur

Techniques de mise en évidence Quelques règles générales : Limiter le nombre total de moyens de mise en évidence utilisé Éviter d'utiliser simultanément plusieurs moyens de mise en évidence sur le même objet Le clignotement sert à attirer l'attention sur un objet. Il convient de l'utiliser avec efficacité car il distrait l'attention de l'utilisateur et provoque une fatigue visuelle importante. Le soulignement est à éviter pour les textes longs (limiter à quelques mots).

Techniques de mise en évidence Quelques règles générales : Utiliser l’inverse vidéo pour attirer l’attention sur un objet dans un texte.

Techniques de mise en évidence Quelques règles générales : Utiliser les puces pour structurer le texte en indiquant certains points d'entrée. Les puces peuvent également servir à numéroter les paragraphes.

Techniques de mise en évidence Quelques règles générales : Utiliser L'encadrement pour: Regrouper les données Focaliser le regard

Techniques de mise en évidence Quelques règles générales : Utiliser un signal sonore (répétitif) est un moyen d'alerte extrêmement efficace. L'information est souvent imprécise et nécessite un affichage complémentaire. Le nombre de sons différents doit être faible (moins de 5) Restreindre l'usage du son à des événements exceptionnels A ne pas abuser

Techniques de mise en évidence Quelques règles générales : Libellés et champs justifiés à gauche. Recommandé si la longueur des libellés est pratiquement identique

Techniques de mise en évidence

Mme C.BENKHEROUROU. MA. Université KASDI Merbah. Ouargla Questions? Mme C.BENKHEROUROU. MA. Université KASDI Merbah. Ouargla