Interface Homme-Machine [2] Cours IHM-1 Conception des interfaces S1 1 - Introduction Concepts généraux Interface § Au sens large, la notion d'interface représente un dispositif placé à la limite commune de deux entités/systèmes qui communiquent. S2 § Dans le cas de l'IHM, on va trouver d'un côté le système interactif (la machine M) et de l'autre l'utilisateur (l'humain H). § L'interface (I) se charge dans ce cas de mettre en communication : Jacques BAPST • La représentation externe de l'état de la machine (image du système) et • Les organes sensoriels (perception) et moteurs (actions) de l'utilisateur [email protected] IHM-1 – ID01 – Jacques BAPST Interface Homme-Machine [1] Interface Homme-Machine [3] § L'étude de l'Interface Homme-Machine (IHM) appelée également Interaction Homme-Machine (Human Computer Interaction ou HCI) s'occupe de tous les moyens et outils permettant à un humain de contrôler, de communiquer et d'interagir avec un système interactif (une machine, au sens large). § Il existe de nombreuses définitions de l'interface ou l'interaction homme-machine et le domaine d'étude est très vaste. § C'est un domaine scientifique qui est au confluent de nombreuses disciplines qui concernent : • L'ensemble des aspects de la conception, de l'implémentation et de l'évaluation des systèmes interactifs Conception : Aspects créatifs (design) ð Implémentation : Aspects techniques de réalisation (programmation) ð Évaluation : Aspects liés à la validation de l'ergonomie (tests) Sciences cognitives, ergonomie physiologique et cognitive, utilisabilité Perception, physiologie, psychologie, sociologie, … ð Modélisation du comportement, modèles mentaux, … ð ð § Et deux autres définitions plus formelles : • L'interaction homme-machine consiste à mettre en œuvre les moyens et les techniques permettant de franchir la discontinuité entre les référentiels de deux agents. • L'art de concevoir et de réaliser des représentations pertinentes. • La machine et ses aspects techniques Utilisation et codage de composants d'interaction (widgets) ð Capture et traitement des actions de l'utilisateur (événements) ð Architecture logicielle (découplage entre les modules) ð – Jacques BAPST § Une autre définition de l'interaction homme-machine met en évidence trois notions importantes : ð • L'humain et ses aspects cognitifs IHM-1 – ID01 3 2 IHM-1 – ID01 – Jacques BAPST 4 Éléments de l'IHM [1] Approches de l'IHM [1] § Dans l'étude des interfaces homme-machine il y a donc trois éléments à considérer : l'utilisateur (l'homme), le système interactif (la machine) et leur manière de communiquer (l'interface). § Approche technocentrée : § Une bonne connaissance des ces trois domaines est donc nécessaire à la réalisation d'une interface homme-machine réussie. Imposer des technologies qui leur plaisent Privilégier la création de systèmes efficaces sur le plan technique § Approche anthropocentrée : § Le développement des interfaces utilisateurs nécessite de la part de l'informaticien de vastes compétences pluridisciplinaires. § En plus de compétences informatiques, il doit posséder un certain nombre de soft-skills, des qualités humaines et relationnelles telles que qualité d'écoute, communication, créativité, sens de l'initiative, empathie, collaboration, etc. 5 – Jacques BAPST ð ð § En plus de ces trois éléments, il faut naturellement avoir une très bonne connaissance du domaine qu'est censé couvrir le logiciel, le site web, etc. (que l'on nomme parfois l'espace du problème). IHM-1 – ID01 • Développement centré sur la machine et ses possibilités techniques • L'utilisateur doit s'adapter à la machine • Une grande tentation pour les développeurs • Développement du logiciel centré sur l'utilisateur et ses besoins • La machine doit s'adapter à l'utilisateur • Nécessite que les développeurs connaissent les besoins des utilisateurs, le contexte d'utilisation, etc. • Approche à privilégier, connue sous le nom User Centered Design IHM-1 – ID01 7 – Jacques BAPST Éléments de l'IHM [2] Approches de l'IHM [2] § L'interaction homme-machine : un domaine fortement pluri- et interdisciplinaire. § La conception centrée sur les utilisateurs (UCD) nécessite, de la part du développeur, de bien connaître : Informatique Programmation Intelligence artificielle Psychologie cognitive IHM Graphisme • Les caractéristiques d'un humain (perception, comportement, …) • Les techniques de programmation (widgets, événements, algorithmes, …) • Le problème à résoudre (les tâches de l'utilisateur ) ainsi que le contexte d'utilisation de l'application Ergonomie Utilisabilité Utilisateur Capacité de perception, d'action, de cognition Design Audiovisuel Multimédia IHM-1 – ID01 Communication Machine Capacité d'entrées-sorties, de stockage, de calcul Contexte, environnement (physique, social, …) Didactique – Jacques BAPST Interaction 6 IHM-1 – ID01 – Jacques BAPST 8 Aspects subjectifs Communication / Dialogue [2] § Le fait qu'une partie du domaine de l'IHM concerne des utilisateurs souvent divers et variés, implique que la conception peut faire intervenir une part de subjectivité. § Il est important de comprendre les mécanismes fondamentaux de la communication. § Certaines composantes artistiques/esthétiques (la disposition des composants, le choix des couleurs, les sons, les images, etc. ) peuvent être appréciées de différentes manières selon les goûts et les préférences de chaque personne. Expériences personnelles § Il a cependant été démontré que la qualité de l'interaction avec un système (ce que l'on nomme l'expérience utilisateur) est régie par un certain nombre de règles qui sont communément admises, validées par des tests et qui sont indépendantes des aspects subjectifs. § Les aspects subjectifs restent donc marginaux et les éléments qui concernent les préférences individuelles peuvent être réglés en offrant à l'utilisateur des options pour configurer et personnaliser son l'interface (critère ergonomique d'adaptabilité). IHM-1 – ID01 – Jacques BAPST Ce que je veux dire Encodage Source 9 Interface Référentiel 1 IHM-1 – ID01 Référentiel 2 Ce que je comprends Signal Expériences personnelles Décodage Représentation Destination – Jacques BAPST Communication / Dialogue [1] Communication / Dialogue [3] § Concevoir une bonne interface consiste essentiellement à résoudre un problème de communication. § La représentation des signaux échangés peut prendre des formes très diverses : • • • • • • • • • • § Déjà entre humains ce n'est pas toujours facile… IHM-1 – ID01 – Jacques BAPST 10 11 Textes Symboles D'une manière générale, les éléments Images échangés peuvent être Voix, sons de n'importe quel type. Gestes Expressions faciales (sourire, étonnement, …) Attitudes corporelles (langage du corps) Modes haptiques/tactiles (pression, vibration, température, …) Modes olfactifs (parfum, …) ... IHM-1 – ID01 – Jacques BAPST 12 Communication / Dialogue [4] Communication / Dialogue [6] § Naturellement la communication est bidirectionnelle (dialogue). § Dans l'idéal, l'interface utilisateur de la machine doit s'adapter à la manière de communiquer de l'humain (et non l'inverse). Interface Référentiel 1 Expériences personnelles Ce que je veux dire Encodage Ce que je comprends Signal Référentiel 2 Référentiel 1 Expériences personnelles Expériences personnelles Interface Ce que je veux dire Encodage Décodage Ce que je comprends Signal Décodage Source Destination Source Le feedback améliore la communication IHM-1 – ID01 – Jacques BAPST Référentiel 2 Données, algorithmes Décodage Encodage Représentation Destination Éléments à soigner ! 13 IHM-1 – ID01 – Jacques BAPST 15 Communication / Dialogue [5] L'humain / L'utilisateur [1] § Dialoguer avec une machine n'est généralement pas plus simple... § C'est l'élément essentiel (prioritaire) du trio interface hommemachine (la machine est au service de l'humain et non le contraire). • Quels sont ses besoins, ses attentes (phase d'analyse) ? • Quelles sont ses capacités physiques, ses limitations (handicaps) ? • Quelles sont ses capacités cognigives, ses connaissances du domaine traité, le contexte dans lequel il évolue ? § Connaître certains éléments du système sensoriel et du comportement humain est important pour concevoir une bonne interface. Par exemple : • Qu'il s'attend à avoir une rétroaction (feedback) pour chacune de ses actions (comme lorsqu'il manipule des objets du monde réel). • Qu'il est distrait par les plus petits mouvements à la périphérie de son système visuel (même s'il ne voit bien qu'au centre). • Que son cerveau interprète (parfois de manière irrépressible) les informations provenant de ses sens (et qu'il est facile de le tromper). IHM-1 – ID01 – Jacques BAPST 14 IHM-1 – ID01 – Jacques BAPST 16 L'humain / L'utilisateur [2] L'interface / Le dialogue [1] § Modéliser un humain est le sujet de nombreuses recherches. § Connaissant les différences (importantes) entre l'homme et la machine, la question devient : comment trouver un langage commun pour que ces deux entités communiquent au mieux ? § C'est le difficile problème que doit régler l'interface utilisateur. § L'interface utilisateur doit ainsi jouer un rôle d'interprète et traduire le langage de l'utilisateur d'une part et celui de la machine d'autre part pour les mettre en communication (comme le ferait un interprète entre deux personnes ne parlant pas la même langue ). § C'est tout l'art du concepteur de l'interface d'établir le lien entre ce que l'utilisateur souhaiterait (dans l'idéal) et ce que les techniques informatiques peuvent offrir. § C'est souvent un art du compromis et il faut jongler entre les aspects techniques, les budgets alloués, les délais à respecter, les ressources à disposition, etc. IHM-1 – ID01 – Jacques BAPST 17 IHM-1 – ID01 – Jacques BAPST 19 La machine / Le système interactif L'interface / Le dialogue [2] § Pour un humain, c'est une boîte noire : § L'interface utilisateur doit mettre en relation les entrées/sorties de la machine avec celles de l'humain. • Pas de feedback implicite (il faut le programmer explicitement). • Les informations stockées et les opérations effectuées ne sont pas directement visibles (opacité). § Entrées/sorties de la machine : • Périphériques d'entrée § Son mode de fonctionnement est assez différent du nôtre : ð • [+] Peut mémoriser un grand nombre d'informations et les retrouver rapidement et sans pertes • [+] Peut exécuter des instructions autant de fois que nécessaire sans erreurs (pas de notion de fatigue) • [–] Incapable de faire certaines choses qui nous paraissent triviales (tirer des conclusions, laisser tomber certains éléments négligeables au profit d'éléments plus importants, comprendre le langage naturel même des phrases simples, corréler des informations, ne pas répéter les mêmes erreurs, etc.) • [–] L'intelligence artificielle reste limitée pour l'instant (même si on constante certains progrès) IHM-1 – ID01 – Jacques BAPST 18 Clavier, souris, touchpad, écran tactile, joystick, microphone, caméra, … • Périphériques de sortie ð Écran, imprimante, haut-parleurs, écouteurs, retour de force, … § Entrées/sorties de l'humain : • En entrée ð Cinq sens : vue, ouïe, toucher, goût, odorat • En sortie ð ð Système moteur (gestes, mouvements, expressions faciales, regard, …) Voix § Dans les applications classiques qu'est-ce qui est réellement utilisé ? IHM-1 – ID01 – Jacques BAPST 20 Interfaces graphiques (GUI) Manipulation directe [1] § Dans la majorité des applications classiques, l'interaction hommemachine fait appel aux périphériques de base qui sont : l'écran, le clavier et la souris (et ses substituts). § Parmi les styles d'interaction classiques figure la manipulation directe qui est utilisée dans un grand nombre d'interfaces. § Les interfaces utilisateur graphiques (Graphical User Interface ou GUI ) se sont généralisées. Elles utilisent des composants graphiques appelés Widgets ou Controls en combinaison avec un dispositif de pointage et d'action (une souris par exemple). § La palette de composants graphiques varie selon les systèmes, mais on retrouve presque partout des Widgets devenus classiques : • • • • • • Boutons (cases à cocher, boutons radio, boutons à deux états, …) Menus (déroulants, contextuels, méga-menus, …) Liste à choix (listes simples, listes déroulantes, spinner, …) Champs de saisie (champs texte, zones de texte, éditeur, …) Barres de défilement, panneaux scrollables, … ... IHM-1 – ID01 – Jacques BAPST § Ce style d'interaction (défini par Ben Schneiderman en 1983) donne à l'utilisateur le sentiment d'un engagement direct dans l'action qu'il effectue. § Par exemple, sélectionner un document et le tirer (drag&drop) dans la poubelle est un exemple typique d'une manipulation directe. § L'interaction directe est particulièrement bien adaptée aux interfaces avec écrans tactiles (smartphones, tablettes, bornes interactives, …) § Un slogan (Schneiderman) : • "Point and click instead of remember and type" 21 IHM-1 – ID01 – Jacques BAPST Styles d'interaction Manipulation directe [2] § Les styles d'interaction (ou paradigmes d'interaction) caractérisent différentes manières de dialoguer entre un humain et une machine. § La manipulation directe est caractérisée par trois principes directeurs : • Représentation permanente des objets (généralement des icônes qui ont un sens pour l'utilisateur) • Utilisation d'actions physiques pour effectuer les opérations (soit directement sur l'interface ou via un dispositif de pointage comme la souris) • Opérations incrémentales, réversibles et à effet visible § Quelques styles d'interaction classiques : • • • • • • • • • • Style conversationnel (langage de commandes, shell-scripts, …) Interaction par formulaires (form fill-in) ou tableurs Sélection par menus (plus nécessaire de se souvenir des commandes) Navigation hypertextuelle (point-and-click) WIMP (en réalité un ensemble de styles d'interaction) Manipulation directe (édition WYSIWYG, interaction iconique) Langage naturel écrit ou parlé (query language, commande vocale) Interaction gestuelle (Kinect, Leap-Motion, …) Interfaces multimodales (qui combinent les modalités) ... IHM-1 – ID01 – Jacques BAPST 23 § L'inconvénient principal de ce style d'interaction est qu'il ne permet pas facilement l'automatisation des actions (scripting). § On parle parfois de Manipulation indirecte lorsque les actions sont déclenchées en passant par des menus et des boîtes de dialogue. • Effacer un fichier en passant par le menu contextuel • Redimensionner une image en ouvrant une boîte de dialogue 22 IHM-1 – ID01 – Jacques BAPST 24 Interfaces WIMP Importance de l'IHM [2] § Les interfaces utilisateur qui intègrent ces éléments graphiques (composants visuels / Widgets / Controls) sont parfois désignées par l'acronyme WIMP qui est l'abréviation de : § Évolution de l'interactivité (certains écarts se creusent) Progrès du matériel • Window : Notion de "fenêtre" (zone d'interaction indépendante) (c'est une notion importante même si elle paraît évidente) • Icon : Éléments graphiques statiques ou éléments d'interaction (images, boutons, champs de texte, bulles d'aide, etc.) • Menu : Choix d'actions parmi une liste proposée (barres de menu, menus déroulants, menus contextuels, rubans, etc.) • Pointer : Curseur/Pointeur manipulé par un dispositif de pointage et qui permet d'interagir avec les composants (pointage, sélection, tracé, drag & drop) Fonctionnalités ? Performances de l'utilisateur § Une interface de type WIMP peut faire appel à différents styles d'interaction (même si on parle parfois du style d'interaction WIMP). 1950 IHM-1 – ID01 – Jacques BAPST 25 2000 IHM-1 – ID01 27 – Jacques BAPST Importance de l'IHM [1] Cycle de développement § Créer une bonne interface utilisateur est une tâche difficile mais extrêmement importante car c'est souvent sur son l'interface utilisateur qu'un système interactif est jugé. § La clé du succès du développement d'applications comportant des interfaces utilisateur réside dans la mise en place d'un processus itératif avec la création de maquettes (prototypes) qui seront soumises à l'appréciation des utilisateurs (panel représentatif) puis corrigées/adaptées en fonction des résultats de ces tests. § La qualité de l'interface utilisateur peut conditionner la réussite ou l'échec commercial d'un logiciel, d'un site web, … (indépendamment de la qualité intrinsèque de ses fonctionnalités et de son prix ). § C'est également un facteur de fidélisation : l'utilisateur achète les yeux fermés lorsqu'il est sûr de pouvoir utiliser facilement le logiciel. § Ces aspects prennent une importance croissante auprès des décideurs qui ont pris conscience de l'importance de soigner la qualité de l'interface utilisateur. • Il est illusoire d'obtenir un bon résultat avec un développement linéaire (développement en cascade) • Des itérations sont indispensables (développement en spirale) Interaction Design Analysis Design Prototyping Usability Metrics Implementation Test Deployment • L'interface utilisateur constitue la vitrine du produit • Ces compétences sont de plus en plus recherchées par les employeurs et les responsables RH. Adaptation (Feedback Loop) IHM-1 – ID01 – Jacques BAPST 26 IHM-1 – ID01 – Jacques BAPST 28 Systèmes interactifs [1] Systèmes interactifs [3] § La notion de système interactif est très vaste et englobe une très grande variété de produits. Dans l'absolu, il peut s'agir de tout dispositif/outil avec lequel un humain interagit. § Dans un système interactif on peut considérer deux parties : • L'interface utilisateur qui englobe tous les éléments matériels et logiciels dédiés à la capture des entrées de l'utilisateur et à la restitution des sorties du système. • Le noyau fonctionnel qui contient tout le reste et notamment les composants qui effectuent des traitements, des calcul, qui gèrent les informations et le stockage des données, communiquent avec d'autres système, etc. § Dans ce cours, nous considérerons principalement les dispositifs comportant du logiciel et notamment : • • • • • Applications autonomes (standalone) Applications n-tiers (client-serveur, en réseau, dans le cloud, …) Applications mobiles (smartphones, tablettes, …) Sites et applications web Logiciel embarquée (automates, bornes, …) Communication interne entre les deux parties (découplage) § Certains systèmes plus spécifiques ne seront pas abordés : • • • • Robotique, informatique vestimentaire (wearable) Réalité virtuelle et augmentée Interfaces multimodales Intelligence artificielle, machine learning, … IHM-1 – ID01 – Jacques BAPST Interface Noyau fonctionnel Système interactif 29 IHM-1 – ID01 – Jacques BAPST 31 Systèmes interactifs [2] Conception de l'interaction § Les principes de base qui seront abordés s'appliquent à des systèmes destinés à être utilisés dans de nombreux domaines applicatifs, par exemple : § La conception des interfaces homme-machine (interaction design) vise à maximiser ce que l'on nomme l'expérience utilisateur (UserExperience UX) qui englobe tous les aspects perçus par l'utilisateur dans l'utilisation du 'produit' (application, site web, etc.). • • • • • • Domaine commercial Domaine technique Jeux Réseaux sociaux Didacticiels ... § Comme toute tâche de conception, cette phase fait appel à une bonne dose de créativité mais elle doit être appuyée par de solides connaissances ergonomiques et techniques. § Des éléments spécifiques peuvent intervenir en fonction du domaine applicatif et la pondération des contraintes à respecter peut varier, mais les règles de base de l'ergonomie logicielle s'appliquent à tous les systèmes interactifs. IHM-1 – ID01 – Jacques BAPST 30 § La conception (design) se réfère au processus créatif visant à créer quelque chose de nouveau (l'interface utilisateur) et aboutit à un résultat qui représente l'interface créée sous la forme d'une esquisse, d'un scénario, d'une maquette, d'un prototype (de basse, moyenne ou haute fidélité). § La conception est rarement un processus linéaire et implique généralement de multiples itérations, des variantes, des phases de validation, etc. IHM-1 – ID01 – Jacques BAPST 32 L'expérience utilisateur UX Métaphores [2] § Une définition de l'expérience utilisateur [Nielsen/Norman] avec quelques éléments importants mis en évidence : § Les systèmes d'exploitation utilisent largement la notion de métaphore. • "User experience" encompasses all aspects of the end-user's interaction with the company, its services, and its products. The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use. True user experience goes far beyond giving customers what they say they want, or providing checklist features. In order to achieve high-quality user experience in a company's offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design. IHM-1 – ID01 – Jacques BAPST 33 § La métaphore du bureau est largement utilisée dans les interfaces graphiques (gestionnaires de fichiers, utilitaires généraux, … ). On représente et manipule des objets qui imitent le travail au bureau (dossiers, documents, poubelles, boîtes aux lettres, carnets de notes, agendas, horloges, etc.). IHM-1 – ID01 – Jacques BAPST 35 Métaphores [1] Look-and-Feel [1] § L'ordinateur ne fonctionne de manière assez différente des humains et ses données, ses actions ne sont pas directement visibles. § La notion de look-and-feel (L&F) que l'on nomme parfois style, skin, thème, … caractérise l'ensemble des aspects visuels de l'interface graphique et de ses composants (graphisme, formes, icônes, couleurs, textures, ombres, polices de caractères, espacements, …). § Il est donc important que l'utilisateur puisse se faire une image, une représentation mentale (un modèle) du fonctionnement du système et du logiciel qu'il utilise. § Un bon moyen d'offrir une interface qui permette à l'utilisateur de se forger une représentation mentale (un modèle du comportement) est de tenter d'imiter le fonctionnement et les réactions de certains objets du monde réel (que l'utilisateur est sensé bien connaître). § On parle alors de métaphore, c'est-à-dire qu'on crée des éléments graphiques qui ont une analogie (présentation, comportement) avec des objets du monde réel. § Certains aspects du comportement de l'interface font également partie de la notion de look-and-feel. • • • • Manière de sélectionner un élément Comportement lors de déplacement (drag&drop) Déclenchement de menus contextuels Changements d'icône du curseur, apparition de bulles d'aides, etc. § Par extension, on inclut également les éventuels éléments sonores de l'interface (retour de saisie, de sélection, de succès, d'erreurs, etc.). § On offre parfois à l'utilisateur la possibilité de changer le L&F et de l'adapter à ses préférences personnelles. IHM-1 – ID01 – Jacques BAPST 34 IHM-1 – ID01 – Jacques BAPST 36 Look-and-Feel [2] § La plupart des systèmes d'exploitation disposent de guides de style (style guides) qui donnent des directives concernant le look-and-feel des applications qu'ils hébergent. § Ces guides peuvent être très détaillés et donner des indications très précises sur la manière de développer l'interface des applications (couleurs, espacements, alignements, etc.). IHM-1 – ID01 – Jacques BAPST 37 Utilité / Utilisabilité / Ergonomie § Pour offrir à l'utilisateur une expérience de qualité, tout outil ou instrument (et en particulier un système interactif) doit satisfaire aux critères d'utilité et d'utilisabilité. Cours IHM-1 Conception des interfaces § Utilité : servir à la réalisation d'une activité humaine. Le système doit servir à quelque chose d'utile et faciliter la tâche de son utilisateur. 2 - Utilisabilité Ergonomie logicielle § Utilisabilité : caractérise la capacité d'un objet à être facilement utilisé par une personne donnée pour réaliser la tâche pour laquelle il a été conçu. C'est une notion fortement liée à celle d'ergonomie qui caractérise l'adaptation d'un système au travail et au bien-être des êtres humains (du grec ergon : travail et nomos : règle, loi naturelle). § Le terme utilisabilité provient de la traduction littérale de l'anglais usability (en français, on trouve parfois aussi le terme "usabilité"). Jacques BAPST [email protected] IHM-1 – ID02 – Jacques BAPST 3 Expérience utilisateur [1] § La notion d'expérience utilisateur (discutée au chapitre 1 ) englobe l'ensemble des aspects liés à l'utilisation d'un 'produit' par un utilisateur ("du déballage au service après-vente" ). Utilité Utilisabilité Ergonomie Expérience utilisateur § On inclut toujours dans la notion d'expérience utilisateur, le critère de satisfaction qui caractérise le plaisir qu'à l'utilisateur à posséder et à se servir du produit, de l'outil, du logiciel, … § Cette notion est d'ailleurs également présente dans le texte de la norme ISO 9241 qui définit l'utilisabilité ainsi : « Un produit est dit utilisable lorsqu'il peut être utilisé avec efficacité, efficience et satisfaction par des utilisateurs donnés, cherchant à atteindre des objectifs donnés, dans un contexte d'utilisation donné. » § Plusieurs notions importantes ressortent de cette définition : • Utilisateurs, objectifs, contexte, efficacité, efficience, satisfaction IHM-1 – ID02 – Jacques BAPST 2 IHM-1 – ID02 – Jacques BAPST 4 Expérience utilisateur [2] Domaines de l'ergonomie [1] § Au départ il y a des utilisateurs, des objectifs, un contexte : § La notion d'ergonomie qui est assez proche de la notion d'utilisabilité se décline en trois grands domaines : • Le système est conçu pour des utilisateurs spécifiques, ayant des buts (objectifs) spécifiques et travaillant dans un contexte spécifique. • Connaître ces éléments est indispensable. • L'ergonomie physique ou ergonomie physiologique • Définition (selon cnam.fr) : § Notion d'efficacité : Attention : En anglais ergonomics = ergonomie physique • L'utilisateur doit réussir à faire ce qu'il a à faire. • Performance de réalisation de la tâche. • Facilité d'apprentissage. § Notion d'efficience : • L'utilisateur doit pouvoir attendre ses objectifs rapidement et facilement. • Minimiser les ressources engagées dans la tâche (nombre d'étapes, données à mémoriser, dextérité nécessaire, etc.). § Notion de satisfaction : • L'utilisateur a du plaisir à utiliser le système (et même à le posséder). • Il en dit du bien et le recommande aux autres. IHM-1 – ID02 – Jacques BAPST 5 Expérience utilisateur [3] IHM-1 – ID02 – Jacques BAPST 7 Domaines de l'ergonomie [2] § Les notions d'ergonomie, d'utilisabilité et d'expérience utilisateur se définissent toujours par rapport à • L'ergonomie cognitive ou ergonomie mentale • Définition (selon cnam.fr) : • Un produit (système interactif) • Une population (utilisateurs) • Une tâche (ou un ensemble de tâches) • Un contexte d'utilisation IHM-1 – ID02 – Jacques BAPST 6 IHM-1 – ID02 – Jacques BAPST 8 Domaines de l'ergonomie [3] Normes § Différentes normes et recommandations ont été édictées concernant l'utilisabilité et l'ergonomie des interfaces hommemachine. • L'ergonomie organisationnelle ð Moins liée au dialogue avec des systèmes interactifs. • Définition (selon cnam.fr) : • ISO-9241 Exigences ergonomiques pour la conception de l'interaction entre les humains et les systèmes interactifs (norme cadre) • ISO-13407 Processus de conception centrés sur l'individu pour les systèmes interactifs • ISO-14915 Ergonomie des logiciels pour les interfaces utilisateur multimédias • ISO-16071 Ergonomie de l'interaction homme/système Guidage relatif à l'accessibilité aux interfaces homme/ordinateur • ISO-16982 Ergonomie de l'interaction homme/système Méthodes d'utilisabilité pour la conception centrée sur l'opérateur humain • ... § La principale, ISO-9241, se décline en de nombreuses sous-parties. IHM-1 – ID02 – Jacques BAPST 9 IHM-1 – ID02 – Jacques BAPST 11 Importance de l'ergonomie Comment concevoir ? [1] § L'ergonomie d'un système influence la productivité des utilisateurs, cet aspect économique est un critère important pour le choix d'un logiciel utilisé à des fins professionnelles. § Malheureusement, aucune recette de cuisine ne garantit à coup sûr la conception d'un système ergonomique , MAIS … § Un logiciel ergonomique permettra de réaliser rapidement la tâche prévue, sans perte de temps et avec moins de stress ce qui contribue au maintien d'un climat de travail agréable. § L'ergonomie conditionne très souvent la réussite commerciale d'un produit (souvent un critère plus important que la technique ou le coût ). § C'est également un facteur de fidélisation : l'utilisateur achète les yeux fermés lorsqu'il est sûr de pouvoir utiliser facilement le logiciel. § L'ergonomie de l'interface utilisateur constitue très souvent un facteur déterminant dans la réussite d'un projet informatique et son acceptation par les utilisateurs. § … un certain nombre de principes, de règles (heuristiques) et de manières de procéder permettent d'aborder la conception des interfaces sur des bases rationnelles, validées par des recherches dans différentes domaines (psychologie, sciences cognitives, neurosciences, physiologie sensorielle, études comportementales, etc.). § Une des difficultés pour le concepteur est que ces règles et recommandations sont nombreuses, partiellement redondantes, souvent conditionnelles et parfois même contradictoires. § Leur interprétation nécessite donc de prendre en compte le contexte spécifique dans lequel elles seront appliquées (domaine applicatif, type et diversité des utilisateurs, environnement et contexte général d'utilisation, risques potentiels, etc.). C'est là qu'intervient tout le savoir-faire du concepteur de l'interface. IHM-1 – ID02 – Jacques BAPST 10 IHM-1 – ID02 – Jacques BAPST 12 Comment concevoir ? [2] Évaluations ergonomiques [1] § Une des clés du succès est d'impliquer des utilisateurs représentatifs dès les phases initiales de la conception (User Centered Design ) et de procéder par itération en incluant dans les cycles de développement, des évaluations ergonomiques. § Les méthodes d'évaluation dites "expertes" sont connues sous différentes désignations : § Il existe essentiellement deux grandes familles d'évaluations ergonomiques qui se distinguent par le fait qu'elles font intervenir ou non des utilisateurs : Qui ne font pas intervenir les utilisateurs • Les méthodes participatives ð Évaluation analytique Évaluation par inspection Évaluation heuristique § Caractéristiques : • Les méthodes expertes ð Audit ergonomique Qui impliquent les utilisateurs § Des évaluations ergonomiques peuvent être effectuées à chacun des stades du développement : • Effectuées par les développeurs ou des experts (ergonomes) • Effectuées généralement chez les développeurs (hors du contexte réel d'utilisation) • Se basent sur des règles (heuristiques) qui sont généralement traduites sous la forme de grilles d'évaluation (check-lists) • Peuvent être totalement ou partiellement automatisées (notamment pour les sites web) • Sur papier, sur une maquette plus ou moins rudimentaire, sur une version préliminaire, sur la version finale du produit IHM-1 – ID02 – Jacques BAPST 13 IHM-1 – ID02 – Jacques BAPST 15 Évaluations ergonomiques [2] § Les méthodes d'évaluation dites "participatives" sont connues sous différentes désignations : Test utilisateur Évaluations ergonomiques > Audit ergonomique Test d'utilisabilité Évaluation empirique § Caractéristiques : • • • • > Test utilisateur Effectuées avec le concours d'utilisateurs représentatifs Effectuées dans le contexte réel (si utile ou nécessaire ) ou en laboratoire L'utilisateur est invité à effectuer des tâches sur la base de scénarios Des observations et des mesures sont effectuées Performance (temps pour effectuer une tâche, …) Nombre d'erreurs commises ð Comportement, réactions (verbales et non verbales) ð ð • L'avis de l'utilisateur est consigné ð ð IHM-1 – ID02 – Jacques BAPST 14 Aspects subjectifs (satisfaction, difficulté, …) Questionnaire post-test IHM-1 – ID02 – Jacques BAPST 16 Audit ergonomique [1] Audit ergonomique [3] § L'audit ergonomique consiste à passer en revue chacun des composants d'une l'interface afin de vérifier qu'ils respectent un ensemble de critères d'évaluation. Principes ergonomiques Audit ergonomique Critères Système interactif à évaluer Composants Analyse IHM-1 – ID02 – Jacques BAPST 17 IHM-1 – ID02 – Jacques BAPST Audit ergonomique [2] Audit ergonomique [4] § Exemple de grille d'évaluation pour un site web, blog, e-commerce. § Les audits ergonomiques (évaluations analytiques) sont souvent considérés comme des tests low-cost car ils constituent un moyen rapide et peu onéreux d'identifier les problèmes d'utilisabilité principaux d'une interface. 19 § Même s'ils ne remplaceront jamais des tests utilisateurs, ils sont cependant très utiles car ils permettent souvent, dans une phase initiale, de formuler des recommandations et de détecter les principaux défauts qu'il s'agira de corriger avant d'envisager d'effectuer des tests utilisateurs. § Il existe une multitude de grilles d'évaluation élaborées par des experts. Elles sont souvent basées sur des règles ergonomiques fondamentales, par exemple : • Les critères ergonomiques (notamment ceux de Bastien et Scapin) • Les 10 principes heuristiques de Jakob Nielsen IHM-1 – ID02 – Jacques BAPST 18 IHM-1 – ID02 – Jacques BAPST 20 Audit ergonomique [5] Cognitive Walkthrough [2] § Il ne faut pas adopter sans autre une grille d'évaluation toute faite, il faut s'assurer qu'elle s'applique bien au produit, aux utilisateurs, aux tâches et au contexte spécifique de l'interface que l'on souhaite tester. § Cette technique d'évaluation est basée sur l'apprentissage exploratoire d'un logiciel et sur la possibilité, pour les utilisateurs, de se servir de l'interface sans formation initiale approfondie. § Il est très utile de s'inspirer de grilles d'évaluation existantes mais il est souvent nécessaire de les adapter (choisir les questions, modifier ou compléter les questions, mélanger plusieurs grilles, etc.) afin de bien adapter la grille finale à l'interface spécifique. § A chaque étape de l'exploration du logiciel (lors de chaque action nécessaire), l'évaluateur doit se poser quatre questions : 1. L'utilisateur pensera-t-il qu'il peut ou qu'il doit faire cette action ? 2. L'utilisateur verra-t-il le composant (ou les composants potentiels) sur lequel il doit agir (bouton, menu, icône, etc.) pour lancer l'action ? 3. Après avoir localisé le composant, l'utilisateur reconnaîtra-t-il que c'est bien celui qui permettra de déclencher l'action désirée ? 4. Une fois l'action déclenchée, l'utilisateur comprendra-t-il le retour d'information (feedback) lui permettant de passer en toute confiance à l'action suivante ? § Les réponses doivent toutes être imaginées en prenant en compte le modèle mental que l'utilisateur va se faire du système. IHM-1 – ID02 – Jacques BAPST 21 IHM-1 – ID02 – Jacques BAPST 23 Cognitive Walkthrough [1] Cognitive Walkthrough [3] § Un autre type d'évaluation analytique d'interface est connue sous le nom de Cognitive Walkthrough traduite par balade cognitive, exploration cognitive ou inspection cognitive. § Le résultat de l'évaluation sera basé sur l'interprétation des réponses à ces questions pour tous les scénarios d'utilisation évalués. § Elle permet d'évaluer une interface sans faire appel aux utilisateurs réels (elle est généralement effectuée par les concepteurs ou des experts). § Elle consiste à : • Préparer des séries de tâches à effectuer (scénarios d'utilisation) avec la séquence correcte des actions nécessaires pour leur réalisation et décrire les utilisateurs types (leurs caractéristiques, compétences, …). • Utiliser le logiciel (ou un prototype ou même une maquette papier) en imaginant ce que l'utilisateur pensera, comment il trouvera son chemin en mettant en évidence les problèmes qu'il pourra rencontrer. • Interpréter (analyser) le résultat de ces balades (les réponses aux questions) et en tirer des conclusions. IHM-1 – ID02 – Jacques BAPST 22 • Oui ou partiellement • Non ou partiellement non • Recommandations émises ð ð Success story Failure story § Le résultat est généralement un bon un indicateur de la facilité d'apprentissage du logiciel. § Cette technique, qui demande passablement d'expertise, peut être utilisée en conjonction avec un audit ergonomique. § Remarque : Il existe des variantes de cette technique ou l'on fait intervenir des utilisateurs. IHM-1 – ID02 – Jacques BAPST 24 Cognitive Walkthrough [4] Test utilisateur [2] § Un exemple d'utilisation de cette technique avec un prototype papier d'une interface d'application mobile. § Pour rappel, selon la définition de l'utilisabilité, on considère qu'un système est utilisable lorsque l'utilisateur peut réaliser sa tâche selon ses objectifs (efficacité), qu'il consomme un minimum de ressources pour le faire (efficience) et que le système est agréable à utiliser (satisfaction). • Le scénario proposé consiste à enregistrer une séquence vidéo et ensuite de la télécharger sur un serveur lié à l'application. • Vidéo (en anglais) sur http://youtu.be/Edqjao4mmxM § Le test utilisateur cherchera donc à valider ces aspects. • Les objectifs visés par l'utilisateur sont-ils atteints ? • Quelles sont les ressources nécessaires pour les atteindre ? (par exemple le temps mis pour réaliser une tâche) • Le système est-il agréable à utiliser ? (questionnaire, remarques) – Efficacité – Efficience – Satisfaction § Il existe de nombreuses manières de collecter et de traiter ces informations afin d'en dériver ce que l'on nomme des métriques d'utilisabilité (usability metrics). IHM-1 – ID02 25 – Jacques BAPST IHM-1 – ID02 – Jacques BAPST 27 Test utilisateur [1] Test utilisateur [3] § Parmi les différentes techniques d'évaluation, le test utilisateur représente la méthode la plus efficace pour évaluer l'ergonomie d'une interface par l'observation directe de la façon dont les utilisateurs s'en servent. § Un test utilisateur peut s'effectuer sous différentes formes et avoir lieu : • • • • • « The most effective way of understanding what works and what doesn’t in an interface is to watch people use it. » § Le choix dépend du contexte spécifique du système à évaluer, des informations que l'on souhaite recueillir et de la phase du cycle de développement dans laquelle on se trouve (stade initial, intermédiaire, ou proche de l'état final ). Donald Norman IHM-1 – ID02 – Jacques BAPST Dans un laboratoire d'utilisabilité Dans les bureaux des concepteurs Sur la place de travail de l'utilisateur Dans un endroit neutre ... 26 IHM-1 – ID02 – Jacques BAPST 28 Laboratoire d'utilisabilité [1] Organisation d'un test [1] § Il existe des laboratoires spécialement équipés pour effectuer des tests utilisateurs. Dans un laboratoire d'utilisabilité classique on va trouver différents éléments et acteurs : § Pour que le test utilisateur se déroule dans de bonnes conditions et que les résultats soient pleinement exploitables, il est extrêmement important de l'organiser avec une grande rigueur. § Beaucoup de détails comptent et, si on y prend pas garde, certains peuvent rendre les résultats inutilisables. Observateurs Caméra Expert § On demande parfois aux utilisateurs de penser à haute-voix (think aloud) durant les tests de manière à mieux comprendre leur manière de raisonner (très précieux, notamment en cas d'erreur). Utilisateur Modérateur § La sélection des utilisateurs ne sera pas discutée ici en détail mais il est important que ce soit des utilisateurs représentatifs, c'est-à-dire Scénarios • Qu'ils reflètent la diversité des utilisateurs réels (hommes/femmes, âges, connaissance du domaine, connaissances informatiques, etc. ). • Que ce soit de vrais utilisateurs, pas leur chef ! • Que ce ne soient pas des personnes ayant participé à la conception (les concepteurs ou développeurs ne sont pas des utilisateurs représentatifs ). § Un tel environnement peut être très intimidant ð un point très important : la mise en confiance Ce n'est pas l'utilisateur que l'on teste mais le système ! IHM-1 – ID02 29 – Jacques BAPST Laboratoire d'utilisabilité [2] § Version classique (laboratoire traditionnel) IHM-1 – ID02 – Jacques BAPST 31 Organisation d'un test [2] Version allégée § Quelques consignes à respecter pour un bon déroulement du test : (avec logiciel de capture) • Se présenter aux utilisateurs, décrire l'objectif de l'observation et indiquer de quelle manière les résultats seront exploités ð ð Rappeler que c'est le système qu'on évalue et non pas le participant Indiquer que le test est anonyme (le nom des utilisateurs ne figurera dans aucun rapport de test) • Signaler aux participants qu'ils peuvent renoncer au test à tout moment • Décrire les équipements présents dans la salle et leur but ð Informations concernant les enregistrements (audio/vidéo) • Indiquer la durée approximative du test • Indiquer si vous souhaitez qu'ils réfléchissent à haute-voix, expliquer si nécessaire comment le faire et pourquoi c'est important • Signaler que vous ne fournirez aucune aide durant le test • Décrire en termes généraux ce que vous attendez des participants • Demander s'il y a des questions avant de commencer • Distribuer un ou plusieurs scénarios de test et débuter l'observation • Conclure l'observation en prenant note des impressions des utilisateurs IHM-1 – ID02 – Jacques BAPST 30 IHM-1 – ID02 – Jacques BAPST 32 Les étapes d'un test utilisateur [1] Combien d'utilisateurs ? [1] § Les objectifs du test doivent être définis en fonction du type de système, du stade de développement, des questions soulevées par les concepteurs, des mesures que l'on souhaite effectuer, etc. § Une question récurrente et qui fait toujours débat chez les ergonomes : Combien d'utilisateurs faut-il prévoir pour un test utilisateur ? § Sur la base des objectifs, des scénarios sont élaborés. Ils consistent généralement à faire effectuer à l'utilisateur une tâche typique. § Comme souvent, la réponse est : ça dépend ! • Les maquettes doivent être aptes à 'jouer' les scénarios prévus § En fonction des objectifs et des scénarios, le panel d'utilisateurs (les participants) est déterminé (nombre de participants : voir plus loin ). § Un script est rédigé pour servir de guide au modérateur du test. • Il définit précisément la manière de conduire le test pour chaque participant (consignes, documents, observations, mesures, questions, … ) • Le script peut aussi servir de support de note pour le modérateur. § Parfois un test-pilote est très utile pour vérifier la cohérence et la faisabilité du protocole de test. Il permet aussi d'affiner le script. • Un utilisateur quelconque peut faire l'affaire dans ce cas IHM-1 – ID02 33 – Jacques BAPST Les étapes d'un test utilisateur [2] Scénarios § Ça dépend par exemple : • Du type de test que l'on veut effectuer (pour une comparaison de deux groupes d'utilisateurs, il faudra plus de monde par exemple). • De la diversité des utilisateurs types (population restreinte ou vaste). • Du type de système à évaluer (pilotage d'une centrale nucléaire, génération d'horoscope, …). • Du niveau de fiabilité que l'on souhaite obtenir (en statistique on parle d'intervalle de confiance). • Pour un test initial, peu d'utilisateurs suffisent, pour un test proche de la mise en production on en prendra un peu plus. • ... IHM-1 – ID02 Combien d'utilisateurs ? [2] § Une règle très empirique : cinq utilisateurs suffisent pour détecter environ 80 % des problèmes ! Équipe de projet Réalisation des maquettes 1 – (1–p)n Équipe de projet Objectifs du test Script Sessions de test Équipe de projet Participants (+modérateur, …) 75% 50% 25% 0% Résultats IHM-1 – ID02 – Jacques BAPST (exemple avec p= 0.3) 100% Équipe de projet Recrutement des participants Problèmes identifiés Panel utilisateurs 35 – Jacques BAPST Équipe de projet 0 5 10 15 Nombre d’utilisateurs (n) 34 IHM-1 – ID02 – Jacques BAPST 36 Combien d'utilisateurs ? [3] Que faut-il évaluer ? § Coût par erreur détectée (l'optimum dépend de différents paramètres) § Il est important, lors de la planification du test utilisateur de définir clairement les buts et objectifs du test. Coût normalisé par erreur détectée 100 • • • • • • • 80 60 40 Détecter les défauts principaux Comparer des variantes de design / Comparer avec un produit concurrent Comparer des groupes d'utilisateurs (novices vs expérimentés) Mesurer le temps pour effectuer une transaction (saisir une facture) Évaluer la facilité d'apprentissage (courbe d'apprentissage) Connaître la satisfaction des utilisateurs (leur feeling avec le produit) ... § Les éléments à évaluer (que l'on appelle les métriques) seront déterminées en fonction des objectifs du test et en tenant compte du temps, du budget et des équipements à disposition. 20 § Il existe un certain nombre de métriques classiques, mais vous être totalement libres d'en inventer de nouvelles en fonction des spécificités du système à évaluer et des utilisateurs concernés. 0 0 2 4 6 8 10 12 14 16 Nombre d’utilisateurs (n) IHM-1 – ID02 – Jacques BAPST 37 IHM-1 – ID02 – Jacques BAPST Combien d'utilisateurs ? [4] Métriques courantes [1] § Il est généralement préférable d'effectuer un test avec (par exemple) cinq utilisateurs, de corriger les erreurs détectées puis de répéter le test avec cinq utilisateurs plutôt que de prévoir un seul test avec dix utilisateurs. § Tâches réussies (Task-success) § Ne pas oublier que : Il vaut mieux effectuer un test avec un seul utilisateur que de ne pas effectuer de test du tout ! 39 • On mesure le pourcentage de participants qui ont réussi à effectuer correctement les tâches prescrites par le scénario de test. • On considère les tâches comme réussies ou échouées avec parfois des niveaux intermédiaires (partiellement réussie, réussie avec une aide externe ou recours à la documentation, ou …). • Les tâches doivent avoir une fin clairement définie. § Temps d'exécution (Task completion time) • On mesure le temps mis par les utilisateurs pour effectuer une tâche ou un ensemble de tâches. • Le temps révèle l'effort nécessaire pour accomplir la tâche. • Le début et la fin de la tâche doivent être très clairement définies. IHM-1 – ID02 – Jacques BAPST 38 IHM-1 – ID02 – Jacques BAPST 40 Métriques courantes [2] Métriques courantes [4] § Erreurs commises (Errors) § Éléments subjectifs (Self-reported metrics) • On mesure le nombre d'erreurs et de faux-pas commis durant l'accomplissement des tâches. • Cela nécessite de déterminer clairement ce qui constitue une erreur et ce qui n'en est pas une (très important si les tests sont effectués par plusieurs modérateurs). • Des problèmes d'utilisabilité sont souvent la cause d'erreurs. • On questionne le participant au sujet de ses impressions concernant le système testé. • Permet de connaître comment a été perçu l'interaction avec le système, le degré de satisfaction, le sentiment (feeling) de l'utilisateur, ses suggestions, etc. § Métriques comportementales et physiologiques (Behavioral and physiological metrics) § Efficience (Efficiency) • On enregistre le comportement verbal et non verbal de l'utilisateur (expressions faciales, langage du corps, niveau de stress, suivi du regard, …). • On utilise essentiellement l'enregistrement vidéo et, plus rarement, d'autres capteurs physiologiques spécifiques (pulsations cardiaques, conductivité de la peau, eye tracking, contractions musculaires, EEG, …). • On mesure le nombre d'actions nécessaires pour effectuer une tâche. • Une évaluation de l'effort nécessaire. • Cette métrique est généralement corrélée à celle de la mesure du temps mis pour effectuer la tâche. IHM-1 – ID02 – Jacques BAPST 41 IHM-1 – ID02 – Jacques BAPST Métriques courantes [3] Métriques courantes [4] § Facilité d'apprentissage (Learnability) § Sites web existants (Live website metrics) • On mesure l'évolution de certaines métriques au fil du temps (on répète les tests). C'est une méta-métrique. • Permet de déterminer l'effort d'apprentissage nécessaire pour atteindre un certain niveau d'expertise dans l'utilisation du système. • Les sites web en fonction recèlent des trésors d'informations utiles. • On analyse les données (statistiques, logs du serveur) pour déterminer par exemple : le temps consacré par transaction, le taux de conversion ( e-commerce), le taux d'abandon, études A/B, etc. • Le challenge n'est pas de trouver des informations mais de trouver le moyen de les exploiter au mieux. § Problèmes rencontrés (Issues-based metrics) • On comptabilise tous les problèmes d'utilisabilité rencontrés durant l'exécution de la tâche (type, fréquence, sévérité). • Difficulté de définir clairement ce qu'est un 'problème' (issue). • Cette métrique est généralement corrélée avec celle du nombre d'erreurs. IHM-1 – ID02 – Jacques BAPST 43 § Métriques combinées (Combined metrics) • On crée de nouvelles métriques en combinant et en comparant des métriques existantes. • Comparaison avec les résultats d'experts, avec les objectifs, métriques combinées avec pondération, calcul des z-Scores, SUM scores,… • Donne une vue d'ensemble (big picture) de l'expérience utilisateur. 42 IHM-1 – ID02 – Jacques BAPST 44 Critères ergonomiques [1] § Les critères ergonomiques constituent une classification (typologie) des règles de base qui conditionnent l'utilisabilité d'une interface. Cours IHM-1 Conception des interfaces § L'établissement de critères ergonomiques vise principalement deux objectifs complémentaires : • Ils permettent d'évaluer l'utilisabilité d'un logiciel (audit ergonomique) en servant de base pour l'établissement de grilles d'évaluation (check-list). • D'autre part, et c'est encore plus important, 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. 3 - Critères ergonomiques Heuristiques de Nielsen § Malgré quelques différences dans la terminologie, le niveau de détail et des nuances de classification, les chercheurs du domaine (C. Bastien, D. Scapin, J-F. Nogier, H.X. Lin, … ) s'accordent sur la liste et la classification de ces critères ergonomiques de base qui sont également à l'origine de certaines normes dans le domaine. Jacques BAPST [email protected] IHM-1 – ID03 – Jacques BAPST 3 Critères ergonomiques [2] § 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. Critères ergonomiques § Ils ont cherché à classifier ces recommandations et ont abouti à une liste d'une petite vingtaine de critères élémentaires (critères de base) répartis dans 8 dimensions (familles principales). (Bastien / Scapin) • Ces 8 dimensions ne sont pas totalement orthogonales et il subsiste quelques dépendances entre certaines familles. Cependant, cette classification permet d'aborder de manière beaucoup plus rationnelle la notion d'ergonomie et les nombreuses recommandations associées. § Ces critères offrent également un cadre et un vocabulaire communs. § Ils ont fait l'objet d'évaluations expérimentales qui ont démontré qu'ils offraient des avantages mesurables par rapport à l'utilisation d'autres références (notamment la norme ISO 9241-10). IHM-1 – ID03 – Jacques BAPST 2 IHM-1 – ID03 – Jacques BAPST 4 Critères ergonomiques [3] Critères ergonomiques [5] Critères principaux Cohérence Homogénéité Compatibilité Contrôle explicite Charge de travail Gestion des erreurs Signifiance des codes Guidage Sous-critères Charge de travail Adaptabilité Signifiance des codes Contrôle explicite Actions explicites Brièveté Protection contre les erreurs Contrôle utilisateur Densité informationnelle Qualité des messages Correction des erreurs Gestion des erreurs Toutes les boîtes avec une bordure orange représentent des critères élémentaires IHM-1 – ID03 5 – Jacques BAPST Critères ergonomiques [4] Sous-critères Guidage Adaptabilité Flexibilité Groupement Distinction Prise en compte de l'expérience Lisibilité Cohérence Critères élémentaires (feuilles) La terminologie peut varier légèrement d'un auteur à l'autre, cependant, il y a un relatif consensus des chercheurs du domaine sur cet ensemble de critères et sous-critères ergonomiques ainsi que sur leur classification (typologie). – Jacques BAPST § 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 le logiciel. Logique métier ó Logique du logiciel Recommandations : Toutes les boîtes avec une bordure orange représentent des critères élémentaires IHM-1 – ID03 7 § La compatibilité est la capacité du logiciel à s'intégrer dans l'activité réelle des utilisateurs. Incitation Feedback immédiat – Jacques BAPST Compatibilité Critères principaux Compatibilité IHM-1 – ID03 6 • • • • Parler le langage de l'utilisateur (éviter le jargon informatique) Utiliser des métaphores familières Agencer les éléments de l'interface en fonction de la tâche de l'utilisateur Présenter les informations de façon cohérente par rapport aux autres supports de travail (documents papier, formulaires, organigrammes, directives, etc. ) • L'accès aux fonctions doit être compatible avec la tâche de l'utilisateur IHM-1 – ID03 – Jacques BAPST 8 Guidage Incitation (Guidage) § Le critère de guidage regroupe l'ensemble des moyens mis en œuvre pour assister l'utilisateur dans l'emploi du logiciel. § Faire connaître à l'utilisateur l'état du système et lui permettre d'établir les liens de causalité entre ses actions et l'état résultant. § L'objectif est de faciliter l'utilisation du système et son apprentissage. § L'utilisateur doit comprendre les interactions que l'on attend de lui par un fonctionnement qui apparaît clairement ( ð moins d'hésitations). § On distingue § Inciter l'utilisateur à saisir correctement les données. § Indiquer ou imposer le format (dates, dimensions, unités, … ) • Le guidage explicite (par ex. messages, bulles d'aide, boîtes de dialogue, … ) • Le guidage implicite (par ex. griser les fonctions inactives, autres artifices, … ) § Le critère de guidage est décomposé en quatre sous-critères : „ Incitation „ Groupement / Distinction „ Feedback immédiat „ Lisibilité IHM-1 – ID03 9 – Jacques BAPST IHM-1 – ID03 Incitation (Guidage) Incitation (Guidage) § Le critère d'incitation réunit les moyens visant à conduire l'utilisateur à effectuer des actions spécifiques. § Un exemple d'incitation réussie : § L'incitation aide l'utilisateur dans son interaction avec le logiciel en lui fournissant les éléments nécessaires pour l'utiliser correctement. § Il évite des apprentissages fastidieux et réduit les risques d'erreur. – Jacques BAPST 11 • Le numéro d'abonné est divisé en trois blocs de trois chiffres • Une fois un premier bloc saisi, le curseur se déplace automatiquement au bloc suivant 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 bulles d'aides (Tooltips) sur les éléments non-triviaux ( icônes des barres d'outils par exemple ) IHM-1 – ID03 – Jacques BAPST 10 IHM-1 – ID03 – Jacques BAPST 12 Incitation (Guidage) Groupement - Distinction (Guidage) § Un exemple ou l'incitation est si mauvaise que l'on doit explicitement dire à l'utilisateur où il doit cliquer ! Un exemple bien réussi, bonne structuration de la page Mauvais groupement (risque de confusion) IHM-1 – ID03 – Jacques BAPST 13 IHM-1 – ID03 – Jacques BAPST 15 Groupement - Distinction (Guidage) Feedback immédiat (Guidage) § Le critère de groupement consiste à guider l'utilisateur en groupant les informations et les fonctions de même type. § Un utilisateur considère généralement que ce qui se ressemble va fonctionner de la même manière (principe de similarité). § Deux attributs graphiques sont utilisés dans ce but : § Le critère de feedback immédiat réunit tous les éléments qui servent à montrer à l'utilisateur ce qu'est en train de faire le système et en lui offrant une rétroaction en réponse à chacune de ses actions. § 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 format de présentation (couleur, forme, syntaxe, …) • La position dans l'interface (localisation, bordure, …) § A l'inverse, le critère de distinction consiste à séparer clairement ou à attribuer des propriétés distinctes à des objets qui sont différents ou qui se comportent de manière différentes. Recommandations : • Regrouper les informations de même type par le format ou par la position (regroupement par menus, entourer avec une bordure, … ) • Distinguer par une présentation différente ou un emplacement différent, les informations distinctes pour éviter les risques de confusions IHM-1 – ID03 – Jacques BAPST 14 Recommandations : • Le logiciel doit répondre à toute action de l'utilisateur par un changement dans la présentation de l'interface (visuel, sonore, ...) • Indiquer les modes de fonctionnement du système (état) • Signaler les traitements longs par une indication d'attente ( sablier, barre de progression, animation, message, … ) • Toujours faire apparaître les saisies utilisateur • Rendre visible les traitements réalisés par le logiciel et indiquer clairement lorsqu'ils ont échoué IHM-1 – ID03 – Jacques BAPST 16 Feedback immédiat (Guidage) Cohérence - Homogénéité § Signaler les traitements longs par une indication d'attente ( disque, barre de progression, animation, message, … ). Trois ordres de grandeur : § 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 : 0.1 s : Non perceptible par l'utilisateur 1 s : Perceptible (un indicateur est nécessaire) 10 s : L'utilisateur peut faire autre chose • La présentation (graphisme, localisation, vocabulaire, format, syntaxe, …) • Le comportement (réaction du système, messages, retours sonores, … ) (annoncer le temps d'attente et la progression, si possible) § 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). Recommandations : • Utiliser le même schéma d'agencement pour toutes les fenêtres ( gabarit d'écran appelé aussi tracé régulateur) • 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, … ) IHM-1 – ID03 – Jacques BAPST 17 IHM-1 – ID03 – Jacques BAPST 19 Lisibilité (Guidage) Cohérence - Homogénéité § Le critère de lisibilité consiste à faciliter la perception des informations textuelles et iconographiques par un choix judicieux de leurs propriétés et de leur disposition. § Une attention particulière doit être apportée : § Maintenir une logique cohérente de présentation et de comportement. § Menus, barres d'outils, boîtes de dialogue, ... • • • • Aux polices de caractères (diversité, taille, attributs, minuscules/majuscules, … ) Aux couleurs en général (choix, contraste, but, …) À la disposition des éléments (alignements, espacements, mise en page, … ) Aux icônes (dimensions, choix des symboles, … ) § Un nombre important de règles peuvent être associées à ce critère. Remarque : Certains shareware utilisent volontairement ce genre d'incohérences (le bouton "Continuer" qui change constamment de place par exemple) pour inciter l'utilisateur à se procurer la version payante du logiciel. Recommandations : • • • • • Utiliser une police de caractère lisible ( à l'écran, éviter les italiques en petite taille, … ) Soigner les espacements (interligne) et les alignements (justification) Adapter la taille des libellés et des icônes afin de garantir leur interprétation Soigner les contrastes ( choix des couleurs pour le fond et le premier plan ) Prendre en compte la configuration de la machine cible ( résolution, … ) IHM-1 – ID03 – Jacques BAPST Cela illustre bien la "force de l'habitude" (mémoire visuelle et mémoire du geste) que l'on peut exploiter positivement ou négativement. 18 IHM-1 – ID03 – Jacques BAPST 20 Cohérence - Homogénéité Flexibilité (Adaptabilité) § Microsoft Office, Word, Excel, PowerPoint : une certaine cohérence dans les menus (mais qui pourrait être encore largement améliorée). § Le critère de flexibilité 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. § Il vise également à offrir à 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 Remarque : Les différents moyens offerts doivent être complémentaires et pas simplement redondants ! Recommandations : • Permettre d'effectuer les tâches (fonctions) à la fois au clavier et à la souris • Autoriser le déclenchement d'une commande fréquente depuis plusieurs endroits dans l'application. • Permettre à l'utilisateur de paramétrer le logiciel selon ses préférences • Fournir un moyen rapide d'accéder aux commandes des menus ( raccourcis ) IHM-1 – ID03 – Jacques BAPST 21 IHM-1 – ID03 23 – Jacques BAPST (Adaptabilité) Adaptabilité Prise en compte de l'expérience § L'adaptabilité d'un système est caractérisée par la capacité de son interface à réagir et à s'adapter en fonction du contexte et selon les besoins et les préférences de ses utilisateurs. § Plus les manières offertes pour effectuer une action sont nombreuses et plus les chances que l'utilisateur maîtrise l'une d'entre elles sont importantes. § Un mécanisme unique peut difficilement convenir à la fois à tous les utilisateurs potentiels (notamment s'ils sont nombreux comme dans le cas d'applications très généralistes ). § Le critère d'adaptabilité se décompose en deux sous-critères élémentaires : „ Flexibilité „ Prise en compte de l'expérience de l'utilisateur § Le deuxième sous-critère de la flexibilité est la prise en compte de l'expérience de l'utilisateur qui concerne les moyens mis en œuvre pour s'adapter aux différents niveaux d'expérience des l'utilisateurs. § Pour satisfaire ce critère, des moyens différenciés doivent être prévus pour tenir compte des différences d'expérience qui existent entre les utilisateurs selon leur profil. § Il est à noter que l'expérience des utilisateurs peut varier dans le temps. IHM-1 – ID03 – Jacques BAPST 22 Recommandations : • Permettre à l'utilisateur de définir son niveau d'expérience. Le demander ou le déterminer automatiquement par des métriques (par exemple le nombre ou le taux d'erreurs, les temps de réaction, etc. ). • Guider l'utilisateur débutant (novice) pas à pas dans la réalisation de la tâche. • Mettre en place un guidage fort en créant des assistants (wizard). • Donner aux utilisateurs expérimentés les moyens d'effectuer leur tâche de manière rapide et efficiente ( même si c'est parfois au détriment du guidage ). IHM-1 – ID03 – Jacques BAPST 24 Contrôle explicite Actions explicites (Contrôle explicite) § Le critère de contrôle explicite concerne les aspects liés au degré de maîtrise qu'a l'utilisateur sur les traitements réalisés par le système interactif. § Il se décompose en deux sous-critères élémentaires : „ Actions explicites „ Contrôle utilisateur § Par exemple : Demander confirmation à l'utilisateur avant d'effectuer des changements dans un document. § Quand les opérations du système résultent directement des actions des utilisateurs, on observe moins d'erreurs et la compréhension du fonctionnement de l'application est facilitée (représentation mentale). § C'est un facteur important d'acceptation du logiciel : les utilisateurs n'aiment pas être menés par le bout du nez et se sentir asservis à la machine. § Si l'utilisateur a, en tout temps, le contrôle du dialogue, les réactions du système sont mieux prévisibles et l'apprentissage s'en trouve facilité. IHM-1 – ID03 – Jacques BAPST 25 IHM-1 – ID03 – Jacques BAPST Actions explicites (Contrôle explicite) Contrôle utilisateur (Contrôle explicite) § Le critère d'actions explicites concerne la relation qui existe entre les actions de l'utilisateur et les traitements qui seront effectués par l'application en réaction à ces actions. § Seule les opérations explicitement demandées par l'utilisateur doivent être effectuées par le système. Des automatismes peuvent être tolérés s'ils ont été explicitement acceptés par l'utilisateur. § Les opérations devraient être effectuées au moment où on les invoque sauf naturellement s'il s'agit d'actions qui sont explicitement différées, par leur nature ou selon les souhaits de l'utilisateur ( déclenchement temporisé, synchronisation avec la fin d'un autre processus, etc. ). § Le critère de contrôle utilisateur concerne le fait que l'utilisateur doit toujours avoir la main sur le système et en contrôler les opérations et leur déroulement (interrompre, reprendre). § Il vise à rendre l'utilisateur autonome dans son interaction avec le système en lui donnant la maîtrise du processus. § L'utilisateur doit avoir, en permanence, le contrôle sur le logiciel. § Si possible, ses actions devraient facilitées et des options de contrôle appropriées devraient lui être fournies en fonction de l'état actuel du système (prise en compte de la situation courante ). Recommandations : Recommandations : • Offrir à l'utilisateur une validation explicite des commandes importantes ou difficilement réversibles • Offrir la possibilité d'interrompre les traitements longs • Autoriser les retours en arrière (Undo) • Permettre, en tout temps, de quitter la fonction courante ou même, le logiciel • Ne pas déclencher d'opérations sans le consentement explicite de l'utilisateur. • Déclencher l'opération immédiatement après l'action de l'utilisateur ou, sinon, indiquer clairement que l'opération sera différée ( ou qu'elle ne peut pas être effectuée ). IHM-1 – ID03 27 – Jacques BAPST 26 IHM-1 – ID03 – Jacques BAPST 28 (Gestion des erreurs) Contrôle utilisateur (Contrôle explicite) Protection contre les erreurs § Offrir à l'utilisateur une validation explicite des commandes importantes ou difficilement réversibles § Le critère de protection contre les erreurs vise à éviter que l'utilisateur commette des erreurs et que, si cela se produit, il en soit averti immédiatement (c'est en fait du guidage ). § L'objectif est d'éviter que les interruptions dues aux erreurs ne nuisent au bon déroulement de la tâche. § On prévient les erreurs en guidant l'utilisateur de manière à ce qu'il ne soit pas enclin à en commettre ( lien avec critère de guidage/incitation). § Si une erreur survient malgré tout, il faut la détecter au plus tôt et avertir l'utilisateur avec un message clair. Recommandations : • • • • • IHM-1 – ID03 – Jacques BAPST 29 Mettre en évidence les commandes non disponibles (griser) Fournir la liste des valeurs possibles, des unités, … Détecter les erreurs au plus tôt et avertir immédiatement l'utilisateur Minimiser les saisies au clavier (si possible, listes à choix ) Prévenir les risques de perte de données ( demander confirmation ) IHM-1 – ID03 Prévention Prévention – Jacques BAPST 31 (Gestion des erreurs) Gestion des erreurs Protection contre les erreurs § Le critère de gestion des erreurs regroupe les différents moyens visant à éviter ou à réduire les erreurs de l'utilisateur et lui permettre, le cas échéant, de les corriger afin de conserver l'intégrité du système. § L'objectif prioritaire est de minimiser les interruptions dues aux erreurs (maximiser la performance, l'efficience, la productivité ). § Trois sous-critères sont à prendre en compte : „ Protection contre les erreurs (éviter que l'utilisateur n'en commette) „ Qualité des messages d'erreur (informer clairement l'utilisateur) „ Correction des erreurs (lui permettre de les corriger) § Prévenir les risques de perte de données (demander confirmation) Recommandations générales : • Tout mettre en œuvre pour éviter les erreurs ( attitude défensive ) • Engager un dialogue lorsque des actions de l'utilisateur peuvent conduire à des situations irréversibles ( ou des conséquences fâcheuses ) • 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 IHM-1 – ID03 – Jacques BAPST 30 IHM-1 – ID03 – Jacques BAPST 32 (Gestion des erreurs) (Gestion des erreurs) Qualité des messages d'erreurs Qualité des messages d'erreurs § Le critère de qualité des messages d'erreur concerne la pertinence, la facilité de lecture et l'exactitude des informations données aux utilisateurs sur la nature des erreurs commises ainsi que sur les actions à entreprendre pour les corriger. § Pour que la correction de l'erreur soit aisée, le message d'erreur doit indiquer la nature de l'erreur, sa cause, ainsi que les moyens de la corriger (la qualité des messages favorise l'apprentissage du système). § Le contenu des messages doit tendre à dédramatiser les erreurs aux yeux de l'utilisateur (diminue son sentiment de culpabilité et le stress induit). § Exemples de pages associées à la fameuse Erreur 404 (HTTP) Recommandations : • • • • • Placer les messages d'erreur là où l'utilisateur est censé regarder Afficher des messages d'erreur explicites (utiliser le langage de l'utilisateur) Éviter les textes trop longs (rester bref, utiliser des liens, des références, ...) Éviter les textes réprobateurs Faire en sorte, si possible, que les textes soient auto-suffisants. Trouver le bon compromis entre concision et exhaustivité IHM-1 – ID03 33 – Jacques BAPST (Gestion des erreurs) IHM-1 – ID03 – Jacques BAPST 35 (Gestion des erreurs) Qualité des messages d'erreurs Correction des erreurs § Exemples à ne pas suivre ! § Le critère de correction des erreurs inclut tous les moyens mis à la disposition des utilisateurs pour leur permettre de corriger leurs erreurs. § Offrir à l'utilisateur les moyens de corriger le plus facilement et le plus rapidement possible ses erreurs en lui permettant, par exemple, de ne corriger que la portion des données qui est erronée et ne pas le contraindre à ressaisir l'ensemble des informations. § Tactiques différentes selon le type et la gravité de l'erreur : Adobe's ImageReady AutoCAD Mechanical • • • • Bloquer l'utilisateur tant que l'erreur subsiste ( erreurs graves) Lui permettre de continuer après une mise en garde ( message, signal sonore) Ne pas répondre à la commande erronée ( un message est nécessaire ) Corriger automatiquement l'erreur (dans quelques rares cas) Recommandations : • Mettre en évidence le champ ou l'élément erroné • Permettre d'annuler une action ou une série d'actions ( par ex. supprimer des articles dans le caddie virtuel d'une application e-commerce ). • Proposer des alternatives (par ex. "Related topics" pour une recherche infructueuse ) IHM-1 – ID03 – Jacques BAPST 34 IHM-1 – ID03 – Jacques BAPST 36 Charge de travail Brièveté (Charge de travail) § Le critère de charge de travail regroupe l'ensemble des moyens visant à réduire la charge perceptive, mnésique et physique de l'utilisateur. § L'objectif est d'allouer le maximum de ressource au système cognitif (raisonnement) et de minimiser les risques d'erreur en réduisant le nombre de stimuli du système sensoriel et le nombre d'activités motrices. § On doit donc viser à minimiser à la fois la quantité d'informations que l'utilisateur doit prendre en compte ainsi que le nombre d'actions élémentaires qu'il doit réaliser pour accomplir une tâche donnée. § Dans les interfaces utilisateurs classiques ( écran, clavier, souris), la charge physique (ergonomie physique) intervient assez peu. § Le critère de la charge de travail se décompose en deux sous-critères élémentaires : „ Brièveté „ Densité informationnelle § Quelles sont les fonctions nécessaires, utiles (l'abondance nuit dans certaines circonstances). IHM-1 – ID03 – Jacques BAPST 37 IHM-1 – ID03 39 – Jacques BAPST (Charge de travail) Brièveté (Charge de travail) Densité informationelle § Le critère de brièveté regroupe l'ensemble des moyens visant à réduire la charge perceptive et mnésique de l'utilisateur dans ses interactions avec les composants d'entrée ou de sortie de l'interface utilisateur (champs d'un formulaire, menus, widgets, ...). § Il s'agit donc notamment de limiter autant que possible le travail de lecture et de saisie de l'utilisateur (on parle de concision). § 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. § Le critère de densité informationnelle concerne la charge perceptive et mnésique pour l'ensemble des éléments d'une interface utilisateur. § La performance des utilisateurs est influencée négativement quand la charge informationnelle est trop élevée ou ( c'est plus rare) trop faible. § 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. Recommandations : • • • • • N'afficher que les informations pertinentes pour effectuer la tâche ( boîtes de dialogue simples, représentations graphiques, … ) Limiter le nombre d'options dans un menu ou dans une liste déroulante Éviter les libellés trop longs Réduire le nombre d'actions élémentaires pour atteindre un objectif donné Éviter à l'utilisateur d'avoir à se souvenir d'informations d'une fenêtre à l'autre, d'avoir à faire des calculs ou de saisir des informations qui peuvent être déduites par le système. IHM-1 – ID03 – Jacques BAPST Recommandations : • Éviter les écrans trop chargés (décomposer si nécessaire) • Éviter les liens trop nombreux dans un texte affiché sur une page web • Éviter les textes trop verbeux (dialogue simple, phrases courtes) • Privilégier la reconnaissance (symboles, icônes) 38 IHM-1 – ID03 – Jacques BAPST 40 Densité informationelle (Charge de travail) Signifiance des codes et dénominations § Richesse du contenu, mais certainement pas idéal. § La signifiance des codes et dénominations caractérise l'adéquation entre l'objet, l'information ou le comportement présentés par l'interface et son référent (l'objet ou l'action qu'il représente). § Il ne suffit pas de présenter un message ou un symbole à l'utilisateur, encore faut-il qu'il soit compréhensible pour lui. § Des codes, dénominations et comportements « signifiants » disposent d'une relation sémantique forte avec leur référent. § Dans une application professionnelle ou spécialisée, il est essentiel de s'imprégner du vocabulaire des utilisateurs afin de concevoir une interface signifiante pour eux. Recommandations : • • • • IHM-1 – ID03 41 – Jacques BAPST Densité informationelle (Charge de travail) – Jacques BAPST 43 § Billet de loterie virtuel que l'on gratte avec le curseur. • Éviter les textes trop verbeux (dialogue simple, phrases courtes). – Jacques BAPST IHM-1 – ID03 Signifiance des codes et dénominations § Un message que l'on a pas trop envie de lire… IHM-1 – ID03 Éviter les termes techniques (jargon), parler le langage de l'utilisateur Reproduire le comportement habituel des objets (par ex. la gomme) Définir explicitement et respecter les règles d'abréviation Prendre en compte les standards en vigueur ( standards formels ou de facto ) pour toutes les dénominations 42 IHM-1 – ID03 – Jacques BAPST 44 Check-list [1] Check-list [3] [J.-F. Nogier] [J.-F. Nogier] Critère Question Critère Question Compatibilité - Le logiciel correspond-il au contexte d'utilisation ? - Est-il adapté au profil des utilisateurs visés ? - Le vocabulaire de l'interface est-il celui employé par les utilisateurs ? - Les informations sont-elles présentées de manière cohérente par rapport aux autres supports de travail ? - L'accès aux commandes est-il adapté au contexte de réalisation de la tâche ? Gestion des erreurs - Est-il possible d'explorer le logiciel sans risque ? - L'impact des erreurs est-il minimisé ? Guidage - L'utilisateur est-il assisté dans la façon de se servir du logiciel (en fournissant par exemple le format de saisie des données, une liste des valeurs possibles, etc.) ? - Une aide en ligne est-elle proposée ? - La documentation est-elle claire ? - Incitation - L'utilisateur est-il amené à effectuer des actions spécifiques ? - Groupement / Distinction - Les informations de même type sont-elles regroupées ? - Distingue-t-on les données différentes ? - Feedback immédiat - Le système fournit-il un retour aux actions de l'utilisateur ? - Les opérations réalisées par le système sont-elles perceptibles ? - Lisibilité - Les informations sont-elles correctement lisibles et interprétables ? IHM-1 – ID03 – Jacques BAPST Check-list [2] 45 - Protection - Le système offre-t-il des moyens de prévenir des erreurs (boutons grisés, liste des valeurs possibles, affichage des unités, …) ? - L'utilisateur est-il prévenu rapidement de son erreur ? - L'utilisation du clavier est-elle minimale ? - L'utilisateur est-il averti lors d'opérations dangereuses ? - Qualité des messages d'erreurs - Les messages sont-ils bien visibles ? - La nature et les causes des erreurs sont-elles aisément identifiables ? - Les messages sont-ils explicites concernant les moyens de corriger l'erreur ? - Correction - Les erreurs peuvent-elles être facilement corrigées ? - Les éléments erronés sont-ils mis en évidence ? - Existe-t-il un moyen de récupérer des données détruites ? IHM-1 – ID03 – Jacques BAPST Check-list [4] [J.-F. Nogier] [J. Bapst] Critère Question Critère Question Homogénéité Cohérence - L'agencement des fenêtres est-il semblable (gabarit, tracé régulateur) ? - Les couleurs, les icônes, les éléments graphiques et les polices de caractères sont-ils utilisés de façon cohérente ? - Les formats de présentation des données sont-ils constants ? - Un vocabulaire uniforme est-il utilisé dans l'ensemble des fenêtres ? - Le fonctionnement de la souris est-il cohérent ? - Le logiciel est-il cohérent du point de vue de son comportement ? Charge de travail - Le nombre d'opérations nécessaires pour effectuer les opérations est-il raisonnable (minimal) ? - La taille des listes affichées (menus, listes déroulantes, …) est-elle correcte ? - La longueur des libellés est-elle correcte (compréhensibles mais pas inutilement longs) ? - Des informations ou des fonctions inutiles sont-elles présentes dans l'interface ? - Les messages (d'information, d'erreur) sont-ils agréables à lire et compréhensibles ? - Des symboles pourraient-ils avantageusement remplacer des textes ? - L'utilisateur doit-il mémoriser des informations ? Adaptabilité - Flexibilité - Prise en compte de l'expérience Contrôle explicite - Actions explicites - Contrôle utilisateur IHM-1 – ID03 - Brièveté - Densité informationnelle - Différents moyens sont-ils offerts à l'utilisateur pour déclencher les mêmes commandes ? - Les commandes sont-elles également accessibles au clavier ? - L'utilisateur peut-il paramétrer le logiciel selon ses préférences ? - Une alternative rapide est-elle proposée à l'utilisation des menus (par exemple des raccourcis clavier) ? Signifiance des codes et dénomination - Les fonctions sont-elles toujours explicitement activées par l'utilisateur ? - Peut-il quitter, abandonner facilement ou interrompre un traitement en cours ? - L'utilisateur peut-il revenir en arrière ? - L'utilisateur maîtrise-t-il tous les traitements réalisés par le système ? – Jacques BAPST 46 IHM-1 – ID03 47 - Les symboles, icônes et abréviations sont-ils compréhensibles par tous ? - Des métaphores connues sont-elles utilisées ? - Les standards en vigueur sont-ils respectés ? - Le vocabulaire des utilisateurs est-il utilisé ? - Y a-t-il un lien clair entre les éléments actifs de l'interface et les actions qu'ils déclenchent ? – Jacques BAPST 48 Les 10 heuristiques de Nielsen [2] 3 Liberté, contrôle de l'utilisateur Par erreur, les utilisateurs choisissent parfois des fonctions du système et ils ont besoin d'une « sortie de secours », clairement libellée pour quitter la fonction non désirée, sans qu'il y ait besoin de passer par de multiples dialogues pour le faire. Le système doit permettre d'annuler/refaire (undo/redo) une action. Heuristiques de Nielsen «Ten Usability Heuristics» Jakob Nielsen Autres heuristiques 4 Cohérence et standards L'utilisateur ne doit pas avoir à se poser des questions pour savoir si différents mots, situations ou actions signifient la même chose. Suivre les conventions liées à la plate-forme. IHM-1 – ID03 – Jacques BAPST 49 IHM-1 – ID03 – Jacques BAPST Les 10 heuristiques de Nielsen [1] Les 10 heuristiques de Nielsen [3] 1 5 Visibilité de l'état du système Le système devrait toujours tenir informé l'utilisateur de ce qui se passe, en fournissant un « retour » (feedback) approprié, dans un temps raisonnable. 2 Le système devrait « parler » le langage de l'utilisateur, avec des mots, des phrases et des concepts qui lui sont familiers, plutôt que d'utiliser un langage propre au système. Suivre les conventions du monde réel, en faisant apparaître les informations dans une séquence naturelle et logique. IHM-1 – ID03 – Jacques BAPST 50 Prévention des erreurs Au-delà de la conception de messages d'erreur clairs, il faudra en premier lieu être attentif à ce que le design permette de prévenir les problèmes que pourrait rencontrer l'utilisateur. 6 Correspondance du système avec le monde réel 51 Reconnaître plutôt que se souvenir Rendre visibles les objets, les actions et les options. L'utilisateur ne devrait pas avoir à se souvenir d'une information en passant d'une séquence de dialogue à une autre. Les instructions pour utiliser le système devraient être immédiatement visibles ou facilement accessibles, à chaque fois que l'utilisateur en a besoin. IHM-1 – ID03 – Jacques BAPST 52 Les 10 heuristiques de Nielsen [4] § Petite vidéo d'illustration des 10 heuristiques (en anglais) : 8 Esthétique et design minimaliste Les dialogues ne devraient pas proposer d'informations qui ne sont pas pertinentes ou qui ne sont que rarement nécessaires. Chaque information placée dans un dialogue entre en concurrence avec les autres informations - et en particulier celles qui sont pertinentes - et diminue leur visibilité relative. IHM-1 – ID03 – Jacques BAPST > > > Les raccourcis - ignorés par des utilisateurs novices - permettent souvent d'accélérer les interactions pour les utilisateurs expérimentés. Ainsi le système peut convenir à la fois aux utilisateurs inexpérimentés et expérimentés. Autoriser les utilisateurs à personnaliser les actions récurrentes. http://youtu.be/hWc0Fd2AS3s C ompl é me nt Flexibilité dans l'utilisation < < < 7 Les 10 heuristiques de Nielsen [6] 53 IHM-1 – ID03 – Jacques BAPST 55 Autres heuristiques [1] 9 § Il existes d'autres heuristiques avec un fort recouvrement et qui définissent des règles de base, que l'on peut rattacher aux principes suivants : 10 Aide et documentation Bien qu'il soit préférable que le système puisse être utilisé sans le recours à une documentation, il peut cependant être nécessaire de fournir de l'aide et de la documentation. Les informations de ce type devraient être faciles à trouver, centrées sur la tâche de l'utilisateur, indiquer concrètement les étapes à suivre et ne pas être trop longues. IHM-1 – ID03 – Jacques BAPST 54 C ompl é me nt Les messages d'erreur devraient être formulés en langage clair (pas de codes et de jargon), indiquer précisément le problème et suggérer une solution pour le résoudre. < < < Faciliter l'identification, le diagnostic et la « récupération » des erreurs par l'utilisateur > > > Les 10 heuristiques de Nielsen [5] Facilité d’apprentissage Visibilité Erreur Design graphique Simplicité Contrôle Utilisateur et Liberté Efficience § Parmi les heuristiques les plus courantes, on peut citer : § Les 4 règles de Norman • • • • Affordance Mappage Naturel Visibilité Feedback IHM-1 – ID03 – Jacques BAPST 56 Autres heuristiques [2] < < < C ompl é me nt > > > § Les 8 règles de Shneiderman • Faire un effort de cohérence interne (consistance) • Rendre possibles les raccourcis pour les usagers réguliers • Fournir des informations sur ce que fait le système (feedback) • Organiser le contenu et construire des dialogues avec une fin explicite (pour chaque étape) • Fournir un guidage et une rétroaction permettant d'éviter les erreurs • Rendre les actions réversibles (retours en arrière / undo) • Donner un sentiment de contrôle aux utilisateurs du système (c'est l'utilisateur qui est le maître) • Réduire la charge cognitive de la mémoire à court-terme (ne pas trop la solliciter) IHM-1 – ID03 – Jacques BAPST 57 Autres heuristiques [3] < < < C ompl é me nt > > > § Les 16 règles de Tognazzini • • • • • • • • • • • • • • • • Anticipation Autonomie Daltonisme Consistance Défauts Efficience Explorabilité La loi de Fitts Objets d’interface humain Réduction de latence Apprentissage Métaphores Protection du travail Lisibilité Retracer les états Visibilité de la navigation IHM-1 – ID03 – Jacques BAPST 58 Prise en compte de l'utilisateur [1] § Une des clés pour réussir à concevoir une interface ergonomique est de connaître et comprendre ses utilisateurs. Cours IHM-1 Conception des interfaces § L'humain doit constituer l'élément central à considérer dans la conception d'une interface homme-machine. § La prise en compte des utilisateurs doit intervenir assez tôt, dès la phase d'analyse d'un projet logiciel. Ils doivent être impliqués dans toutes les phases du cycle de développement. 4 - Conception orientée utilisateur Jacques BAPST [email protected] IHM-1 – ID04 – Jacques BAPST 3 Prise en compte de l'utilisateur [2] § Un des défis pour les concepteurs : les humains et les machines fonctionnent fondamentalement de manière assez différente. Connaître et comprendre l'utilisateur L'humain face à la machine § La vision diffère selon le point de vue adopté : Approche Les humains sont … Les machines sont … Centrée sur la machine (technocentrée) Vagues Désorganisés Distraits Émotifs Peu logiques Précises Ordonnées Imperturbables Sans émotions Logiques (caractéristiques et comportement) Centrée sur Créatifs l'humain Conciliants (anthropocentrée ) S'adaptent aux changements Débrouillards Capable de décider en fonction des circonstances IHM-1 – ID04 – Jacques BAPST 2 IHM-1 – ID04 Sottes Rigides Insensibles aux changements Sans imagination Contraints de prendre des décisions uniformes – Jacques BAPST 4 Prise en compte de l'utilisateur [3] Modèle du processeur humain § Même si la prise en compte de l'utilisateur ne facilite pas la tâche du développeur, c'est indispensable de l'impliquer si l'on veut créer une expérience utilisateur de qualité. § Les principaux travaux dans le domaine de l'IHM se basent sur le modèle du processeur humain. § Il vise à représenter l'être humain par une analogie avec l'ordinateur. § En plus de compétences techniques, le développeur doit donc, en plus, posséder des compétences humaines et relationnelles, notamment : • une bonne capacité d'écoute et de communication (savoir argumenter) • des talents de négociateur (souplesse) • la faculté de pouvoir extraire les informations importantes parmi des données peu structurées (savoir tirer les vers du nez) • la capacité de se mettre à la place de l'autre (empathie) • une bonne dose de créativité et le sens de l'initiative § Pour éviter de commettre des erreurs grossières de conception, il est aussi indispensable de connaître quelques caractéristiques générales des humains (perception, comportement, …). IHM-1 – ID04 5 – Jacques BAPST § L'individu est décrit comme un système disposant de mémoire, qui prend en entrée des données (les stimuli perceptifs), effectue des traitements et produit des sorties (les actions motrices). § Caractéristiques du modèle : • • • • Bas niveau d'abstraction Estimations quantitatives Vérifications expérimentales aisées Orienté efficacité IHM-1 – ID04 7 – Jacques BAPST Modélisation d'un humain Sous-systèmes et temps de cycle § De nombreuses tentatives ont été entreprises pour modéliser le comportement des humains (et les recherches continuent). § Les entrées, le traitement et les sorties sont gérés par des soussystèmes indépendants (comme dans un système informatique) : § Malheureusement , il n'y a pas d'unification dans ces modèles qui relèvent, pour la plupart, de la psychologie cognitive. § Même si ces modèles ne peuvent pas servir de preuve (le problème général est trop difficile), ils permettent malgré tout, par leur pouvoir expressif, d'offrir un support formalisé pour le raisonnement, de travailler sur des bases rationnelles et d'effectuer des validations expérimentales. § On distingue différents niveaux d'abstraction : Raisonnement Æ Théorie de l'Action • Le système perceptif traite les informations reçues du monde extérieur (chaque sens est traité de manière indépendante et utilise des registres sensoriels ) • Le système cognitif intègre les informations stockées dans les différents registres sensoriels et réalise les opérations cognitives (avec, si nécessaire, la recherche d'informations dans la mémoire à court ou long terme ) • Finalement, le système moteur se charge d'effectuer les actions décidées par le sous-système cognitif en agissant sur les stimuli musculaires. § Déterminé expérimentalement, les temps de cycle des différents processeurs peuvent être approximées par les valeurs moyennes suivantes : Processeur Processeur Processeur Perceptuel Æ Modèle de Rasmussen Æ Modèle du processeur humain et bien d'autres : GOMS, I CS, C CT, Keystroke, … IHM-1 – ID04 – Jacques BAPST Réflexes 6 IHM-1 – ID04 Cognitif Moteur FastMan 50 ms 25 ms 30 ms MiddleMan 100 ms 70 ms 70 ms SlowMan 200 ms 170 ms 100 ms – Jacques BAPST 8 Loi de Fitts [1] Loi de Hick [1] § Dans une interface graphique, le temps minimal mis pour atteindre une cible est fonction de sa distance D et de sa taille W. § La loi de Hick (ou Hick-Hyman) permet de déterminer le temps moyen qu'il faut à un utilisateur pour prendre une décision en fonction du nombre de choix qu'il a à disposition. § Ce temps T croît proportionnellement au logarithme du nombre de choix (l'utilisateur constitue des catégories et en élimine environ la moitié à chaque étape de son processus de décision). § Si l'on a n choix équiprobables, le temps moyen T mis par l'utilisateur pour prendre sa décision est : § Ce temps T croît proportionnellement au logarithme du rapport D/W. § Un mouvement est décomposable en une suite de micromouvements. W D T = b log2 (n + 1) d0 d1 d2 d3 d4 b : constante qui dépend de l'utilisateur et du contexte (difficulté de la décision) T = k log2 (2D / W) k : constante qui dépend des temps de cycles t p et t m Ordre de grandeur : 0.1 s IHM-1 – ID04 n T Ordre de grandeur : 0.15 s D 10 cm 10 cm 30 cm W 1 cm 1 mm 2 mm T 0.43 s 0.76 s 0.82 s 5 10 50 § Le terme logarithmique de l'expression ( log2(n + 1) ) est appelé entropie de la décision (H), il s'exprime en bits. T = bH 9 – Jacques BAPST 2 0.24 s 0.39 s 0.52 s 0.85 s IHM-1 – ID04 – Jacques BAPST 11 Loi de Hick [2] § Différentes formulations de la loi de Fitts ont été proposées suite à un certain nombre d'études théoriques et de vérifications expérimentales (ces nouvelles formulations permettent d'éviter que le résultat de l'expression devienne négatif, ce qui est difficile à interpréter pour un temps). § La variante la plus utilisée actuellement est la formulation de Shannon de la loi de Fitts : § Si les n choix ne sont pas équiprobables, l'entropie H, et donc le temps T associé, dépendent de la probabilité pi de chacun des choix : § Le terme logarithmique de l'expression ( log2(D / W + 1) ) est appelé indice de difficulté (ID) et se mesure en bits. § Cette formulation ne change pas radicalement le comportement du temps en fonction de l'indice de difficulté. D 10 cm 10 cm 30 cm • Par exemple, avec a= 0.1 s et b= 0.1 s : IHM-1 – ID04 – Jacques BAPST W 1 cm 1 mm 2 mm T 0.45 s 0.77 s 0.82 s 10 C ompl é me nt a et b sont des constantes déterminées expérimentalement et qui dépendent principalement des propriétés du dispositif de pointage et accessoirement des aptitudes de l'utilisateur. < < < T = a + b log2 (D / W + 1) > > > Loi de Fitts [2] § Des options plus probables que les autres font baisser le temps moyen nécessaire pour prendre la décision. § D'une manière générale, l'ajout d'une option supplémentaire a plus d'impact dans une liste avec peu d'options que dans une longue liste. § La loi de Hick peut être utile pour déterminer le nombre d'options à proposer et le nombre de niveaux d'imbrication (dans un menu par exemple). IHM-1 – ID04 – Jacques BAPST 12 Mémoire [1] Mémoire à court terme § Le modèle du processeur humain met en évidence différents types de mémoires : § La mémoire de travail ou mémoire à court terme permet de stocker temporairement l'information durant leur traitement par le système cognitif. Elle s'insère entre les registres sensoriels et la mémoire à long terme. • Les registres sensoriels ou mémoires sensorielles • La mémoire de travail ou mémoire à court terme • La mémoire à long terme § Les informations peuvent passer d'un type de mémoire à un autre . Sensory memories - Iconic (visual) - Echoic (aural) - Haptic (touch) Repetition Attention Short-term memory or Retrieval Rehearsal Encoding § Cette mémoire est une pièce maîtresse du processeur humain. Elle joue un grand rôle dans le processus de raisonnement, dans l'apprentissage et dans la communication verbale. Long-term memory • Effectuer un calcul, lire une phrase, résoudre un problème, … Forgetting IHM-1 – ID04 – Jacques BAPST § L'unité de traitement de la mémoire à court terme est appelée mnème (chunk). § Le contenu sémantique (la complexité) d'un mnème est variable selon les individus et leur expérience avec le genre d'information traitée. Working memory Information not attended to § Sa capacité est limitée (7 ± 2 mnèmes) et son temps de rétention également (~200 ms … 10 s). 13 IHM-1 – ID04 – Jacques BAPST 15 Registres sensoriels Loi de Miller § Les registres sensoriels sont des mémoires tampons pour les stimuli provenant des récepteurs associés à nos sens. § La loi de Miller dit que la mémoire à court terme ne peut enregistrer que 7 ± 2 mnèmes (chunks of information). • Mémoire icônique pour les récepteurs visuels • Mémoire échoïque pour les stimuli auditifs • Mémoire haptique pour le toucher • George Miller : "The magical number seven, plus or minus two" ( 1956) § D'autres études ont montré que si les informations n'avaient aucune relation entre-elles c'était plutôt 4 ± 2. § Le contenu de ces buffers est conservé entre 10 ms et 300 ms. Il est constamment remis à jour par les nouvelles informations reçues. § L'attention que l'on y porte permet de transférer ces informations dans la mémoire de travail (mémoire à court terme). § L'attention est le processus mental qui consiste à se focaliser sur des stimulations spécifiques parmi les très nombreuses qui arrivent en permanence (en fonction de nos besoins, de nos intérêts, etc. ). § Si on y prête pas attention, les informations sont perdues (elles sont remplacées par les nouvelles informations). IHM-1 – ID04 – Jacques BAPST 14 § Cette loi est l'une des plus connues en psychologie, mais elle est souvent mal interprétée dans le domaine IHM : • • • • Pas plus de sept éléments dans une liste énumérée Rien à voir avec la loi de Miller ! Pas plus de sept options dans un menu contextuel Pas plus de sept icônes dans une barre d'outils Pas plus de sept onglets dans l'organisation d'une page web § Si les informations peuvent être re-scannées visuellement, il n'y a pas de mémorisation nécessaire (et la loi de Miller ne s'applique donc pas). IHM-1 – ID04 – Jacques BAPST 16 Mémoire à long terme Illusions [1] § La mémoire à long terme sert au stockage des connaissances au sens large : § Il est assez facile de fausser notre perception de la réalité. • Signification des mots; adresse d'Éric, … • Dernier film vu; accident d'Aline, … • Aller à vélo; nager; jouer du piano, … (mémoire sémantique) (mémoire épisodique) (mémoire procédurale) § La mémoire à long terme a une capacité énorme (aucune limite démontrée). Sans réactivation des informations, un mécanisme d'oubli intervient après un temps variable (de qques heures à …). § Son temps d'accès est d'environ 0.1 s et ne dépend pas de l'âge de l'information recherchée. § Le passage d'informations de la mémoire à court terme dans la mémoire à long terme nécessite un travail non négligeable de la part de l'individu : „ Phase d'apprentissage „ IHM-1 – ID04 Encodage (avec contexte) – Jacques BAPST 17 IHM-1 – ID04 Perception Illusions [2] § La capacité qu'a un humain à percevoir son environnement passe essentiellement par ses cinq sens (auxquels on peut ajouter la proprioception et le sens de l'équilibre ). § Le traitement effectué par le cerveau est irrépressible. – Jacques BAPST 19 – Jacques BAPST 20 § La perception ne dépend pas uniquement des informations brutes provenant de nos 'capteurs'. Elle est fortement influencée par le traitement que le cerveau effectue en permanence sur les informations qui proviennent de nos cinq sens. § Les illusions fournissent des illustrations très intéressantes du fait que les informations perçues par nos sens sont traitées par le système cognitif en fonction de nos connaissances et de nos expériences antérieures. • Ce que l'on 'perçoit' ne correspond parfois pas vraiment à la réalité. • Ce ne sont pas nos sens qui nous trompent, mais le cerveau qui interprète incorrectement les informations reçues. IHM-1 – ID04 – Jacques BAPST 18 IHM-1 – ID04 Illusions [3] Illusions [4] § Fatigue rétinienne. § Cécité au changements (change blindness). Next IHM-1 – ID04 – Jacques BAPST 21 IHM-1 – ID04 – Jacques BAPST 23 Illusions [5] Modèle conceptuel [1] § Reconnaissance de visages. § Le point de départ des théories de plus haut niveau qui visent à modéliser le comportement de l'utilisateur (et notamment la théorie de l'action de Norman) repose sur l'hypothèse que l'humain élabore des modèles conceptuels qui détermineront son comportement. § Un modèle conceptuel est une représentation mentale d'un système. • Il dépend étroitement de la connaissance déjà acquise et de la compréhension de la situation présente. • Il évolue avec l'expérience. • Il est incomplet et imprécis mais il guide l'essentiel du comportement. § Dans le cadre des IHM, on distingue deux formes de modèles : • Le modèle de conception (modèle du concepteur) • Le modèle de l'utilisateur IHM-1 – ID04 – Jacques BAPST 22 IHM-1 – ID04 – Jacques BAPST 24 Modèle conceptuel [2] Variables psychologiques/physiques § Le concepteur a donc pour tâche de définir une image qui conduise l'utilisateur à construire, au cours de l'interaction avec le système, un modèle compatible avec le modèle de conception. § L'utilisateur modélise le monde (le système) en terme de variables psychologiques. § Le système est défini en terme de variables physiques. § Exemple : la douche avec deux robinets; comment modifier la température en gardant un débit constant ? • Variables psychologiques : t, d • Variables physiques : tf, tc, df, dc • Les relations ne sont pas triviale ! d = df + d c t = ( d f tf + d c tc ) / ( d f + d c ) § Solution : • Trouver un système où les variables physiques correspondent mieux aux variables psychologiques. IHM-1 – ID04 – Jacques BAPST 25 IHM-1 – ID04 27 – Jacques BAPST Modèle conceptuel [3] Théorie de l'action [1] § Dans l'idéal, le modèle mental de l'utilisateur devrait correspondre à celui du concepteur. § La théorie de l'action qui a été élaborée par D. A. Norman, fournit un cadre théorique permettant de mesurer la complexité d'utilisation d'une interface homme-machine. § Principe : Toute action exécutée avec un certain but est un cycle itératif en deux temps : • La conception de l'interface doit y contribuer (elle • Exécution d'une commande • Évaluation de la modification engendrée par la commande par rapport au but fixé joue un rôle crucial). But de l'utilisateur C'est l'interface du système qui permet à l'utilisateur de se forger un modèle conceptuel Exécution Évaluation Commande(s) Résultat État du système IHM-1 – ID04 – Jacques BAPST 26 IHM-1 – ID04 – Jacques BAPST 28 Théorie de l'action [2] Distances (Gaps / Gulfs) § On distingue deux couches dans le cycle de l'action : § La distance sémantique symbolise la distance entre le but visé par l'utilisateur et les actions/objets de l'interface. § Elle indique la complexité de compréhension et mesure la quantité de ressources nécessaires aux processus cognitifs pour choisir les commandes et déterminer si le but a été atteint. § La distance articulatoire représente la distance entre l'action et sa représentation physique (perception). § Elle atteste la complexité d'utilisation du système et mesure la quantité de ressources nécessaires aux processus cognitifs et moteurs liés à la manipulation ou à la perception du système. § La réduction des distances sémantiques et articulatoires contribue à diminuer les ressources nécessaires pour utiliser le système (logiciel) et permet donc d'en faciliter son utilisation. § L'interface à manipulation directe est un exemple typique de la réduction de ces distances. • Compréhension du système (élaboration du plan et évaluation du résultat) • Interaction avec le système (exécution de l'action et perception) L'épaisseur de ces strates est représentative de la complexité d'utilisation But de l'utilisateur Distance sémantique d'exécution Intention / Plan Que faire ? Évaluation Distance sémantique d'évaluation Compréhension Suite d'actions Interprétation Interaction Distance articulatoire d'exécution Exécution Comment le faire ? Perception Distance articulatoire d'évaluation Action motrice IHM-1 – ID04 29 – Jacques BAPST Exemple de cycle action-évaluation – Jacques BAPST 31 Distances (Gaps / Gulfs) § Ce qu'on cherche à éviter… Étancher sa soif But de l'utilisateur Se servir un verre d'eau Le verre est-il plein ? Intention / Plan Saisir la bouteille Remplir le verre IHM-1 – ID04 Que faire ? Évaluation Le verre se remplit Suite d'actions Exécution Interprétation Comment le faire ? Remplir le verre Action motrice Perception Visualisation du niveau d'eau Incliner la bouteille IHM-1 – ID04 – Jacques BAPST 30 IHM-1 – ID0?? – Jacques BAPST 32 Étapes de conception [2] 2. Phase de conception • Se baser sur les résultats de l'analyse. • Concevoir le style d'interaction (dialogue) en fonction des résultats de l'analyse de la tâche et du contexte d'utilisation. • Élaborer et réaliser des maquettes de plus en plus précises à chaque cycle (corrigées et affinées en fonction des résultats des évaluations ). Méthodes de conception centrées sur l'utilisateur 3. Phase d'évaluation • Évaluer, mesurer l'utilisabilité de l'interface Effectuer une évaluation analytique Présenter le résultat de la conception à l'utilisateur, observer les difficultés rencontrées, prendre son avis, … • Identifier les points à améliorer dans la version suivante ( prochain cycle) ð ð § Le nombre de cycles dépend naturellement de la complexité du système à concevoir. • Deux à trois itérations peuvent suffire pour une interface simple. IHM-1 – ID04 33 – Jacques BAPST IHM-1 – ID04 – Jacques BAPST Étapes de conception [1] Phase d'analyse § Dans une démarche de conception centrée sur l'utilisateur, on distingue généralement trois phases dans le processus itératif de développement : § Durant la phase d'analyse, plusieurs techniques peuvent être utilisées pour cerner le problème et préciser les attentes des utilisateurs. 35 • Enquête/interviews des utilisateurs Analyse Conception Évaluation Panel d'utilisateurs représentatifs Interviewés généralement individuellement ð Écouter, prendre note et poser les bonnes questions ð ð • Focus group Typiquement pour la création d'un nouveau produit, logiciel, site web, … Discussion de groupe ( avec utilisateurs ou futurs utilisateurs potentiels ) ð Ne pas dépasser sept participants ( pour garder une bonne dynamique ) ð Recueillir les opinions et les motivations des participants (éléments subjectifs ) ð 1. Phase d'analyse • • • • ð Étudier la problématique, comprendre les buts Préciser les attentes et les besoins des utilisateurs Prendre connaissance de la tâche réelle des utilisateurs Prendre connaissance du contexte d'utilisation IHM-1 – ID04 – Jacques BAPST • Analyse de la tâche des utilisateurs • Analyse de la situation (contexte) 34 IHM-1 – ID04 [voir pages suivante] [voir pages suivante] – Jacques BAPST 36 Analyse de la tâche Phase de conception § L'analyse de la tâche a pour but de recueillir des informations sur la manière dont les utilisateurs effectuent l'activité pour laquelle le système est développé. § On procède généralement en deux étapes : § Différentes techniques peuvent être utilisées durant la phase de conception. Parmi les techniques classiques il y a : • Des interviews permettent de se faire une première idée • L'observation ensuite des utilisateurs sur le lieu de travail de manière à déterminer l'activité effectivement réalisée § La modélisation de la tâche qui comportera notamment : • Les buts des utilisateurs et manière de les atteindre • Les informations nécessaires pour accomplir la tâche • Le traitement des cas exceptionnels (traitement des urgences pour les applications critiques) § L'analyse de la tâche servira à structurer l'interface utilisateur : – Jacques BAPST § Durant la phase de conception, il est important de garder en tête la diversité des utilisateurs (il n'existe pas de conception "prêt à porter" ). L'utilisateur moyen n'existe pas ! § Dans l'absolu, il n'y a pas de bons logiciels ou de bons sites web. Cela dépend des utilisateurs et du contexte dans lequel ils s'en servent. § Dans cette population, il faut plutôt s'intéresser à caractériser la dispersion et identifier des familles d'utilisateurs (cluster). • Découpage en fenêtres, onglets, … • Structuration des fonctions, organisation des menus, … • Informations à afficher dans l'interface IHM-1 – ID04 • Les personas : des archétypes d'utilisateurs qui guideront la conception • Le tri de cartes : pour organiser et structurer les informations • Le maquettage (prototypage) : construction itérative des interfaces 37 IHM-1 – ID04 – Jacques BAPST Analyse de la situation Personas [1] § L'analyse de la situation consiste à prendre connaissance du contexte dans lequel les utilisateurs vont se servir du logiciel. § On procède généralement par observation, interview ou questionnaire dans le contexte d'utilisation (sur le lieu de travail). Les informations recueillies permettent d'ajuster le logiciel à la population ciblée. § On déterminera notamment : • Les connaissances informatiques des utilisateurs • Leurs connaissances du domaine applicatif • L'environnement général d'utilisation (éclairage, bruit, gants, …) • Fréquence et durée d'utilisation du système • Encadrement, formation (prévue) des utilisateurs § Ces éléments seront importants pour déterminer : • Le type de guidage que devra offrir le logiciel • Le mode de dialogue le mieux adapté • Arbitrer le compromis : facilité d'apprentissage « rapidité d'utilisation • Charge mentale supportable, types d'interactions, de stimuli, etc. § Les personas sont des personnes fictives qui représentent un groupe cible. IH M-1 – ID04 – Jacques BAPST 38 39 § Elles permettent au team de développement de donner un visage humain au groupe cible. IHM-1 – ID04 – Jacques BAPST 40 Personas [2] Personas [4] § Comme il est rarement possible de faire une conception sur mesure pour un utilisateur précis, il peut être utile de créer des utilisateurs imaginaires (appelés Personas) qui seront les représentants d'un groupe déterminé et pour lesquels le logiciel sera conçu. § Exemple : § La notion de Persona a été proposée par Alan Cooper (le père de Visual Basic). Elle permet d'incarner la notion abstraite d'utilisateur en créant une galerie de personnages avec un nom, un âge, une photo, un profil psychologique, social et culturel, des objectifs et besoins précis, etc. § Les personas permettent, au sein d'un team de développement, de partager une certaine vision des utilisateurs cibles et d'orienter certains choix de conception en se mettant à leur place ("Que penserait David de ce changement ?" ). IHM-1 – ID04 – Jacques BAPST 41 Personas [3] IHM-1 – ID04 – Jacques BAPST 43 Tri de cartes [1] § Le tri de cartes (ou tri par cartes) est une technique permettant de structurer les informations d'une manière qui fait sens pour les utilisateurs. « If you can’t find it, you can’t use it ! » § Le tri de cartes est un excellent moyen de découvrir le modèle mental des utilisateurs et de construire une architecture de l'information qui leur parle. § Le tri de cartes est mis en œuvre au début de la phase de conception car il constitue la base sur laquelle s'appuiera l'interface en termes d'organisation et de terminologie (vocabulaire). § L'exercice peut se pratiquer avec des cartes physiques ou avec des cartes virtuelles (il existe des logiciels spécialisés). § La technique est particulièrement bien adaptée à la conception de site web mais s'applique à tout système gérant de l'information. IHM-1 – ID04 – Jacques BAPST 42 IHM-1 – ID04 – Jacques BAPST 44 Tri de cartes [2] Tri de cartes [4] § On préparera un ensemble de cartes représentant chacune une information à organiser. Une pile de cartes (un élément par carte) L'utilisateur trie les cartes en formant des groupes § Les résultats seront enregistrés et analysés • Analyse de cluster, dendrogramme (arbre) IHM-1 – ID04 – Jacques BAPST 45 IHM-1 – ID04 – Jacques BAPST Tri de cartes [3] Tri de cartes [5] § Il y a deux grandes familles de tris de cartes : § Les utilisateurs trient généralement les cartes individuellement (pour limiter les effets de groupe) mais des tris effectués en groupes sont aussi pratiqués (avantage : gain de temps, mais il faut veiller à ce que chacun puisse s'exprimer librement). • Le tri ouvert ð Les participants définissent leur propres groupes (auxquels ils donnent des noms) • Le tri fermé § Des études expérimentales ont montré qu'avec 15 participants on obtient un bon résultat. Le nom des groupes est donné aux participants ð Ils doivent placer les cartes dans les groupes imposés ð On prévoit parfois quelques cartes vides ð § Les techniques d'analyse des résultats ne sont pas discutées ici. § Avantages de la technique : • • • • • • Techniques de classification C'est simple C'est rapide C'est peu coûteux Ça donne des résultats Ça suscite un feedback de l'utilisateur IHM-1 – ID04 – Jacques BAPST 47 Matrice des distances Analyse hiérarchique de cluster ð Dendrogramme ð ð 46 IHM-1 – ID04 – Jacques BAPST 48 Maquettage / Prototypage Types de maquettes / Zoning § Le maquettage ou prototypage consiste à concevoir des versions préliminaires et intermédiaires de l'interface avant de finaliser les spécifications conduisant au développement du produit final. § Le prototypage horizontal consiste à établir une maquette statique de toutes les vues de l'application. Il n'y a aucune interaction possible. § Les maquettes constituent des versions jetables de l'interface alors que les prototypes sont généralement développés sur la même base technologique que le produit final. Dans le domaine des interfaces ces deux termes sont cependant assez interchangeables. § Le prototypage vertical consiste à se concentrer sur certaines vues et à coder les fonctionnalités et l'interaction. L'utilisateur peut ainsi dérouler un scénario typique et voir l'enchaînement des différentes vues et le comportement de l'interface. § La fidélité de la maquette désigne sa ressemblance par rapport à l'interface finale en termes de graphisme et d'interactivité. § Le zoning consiste à définir, très globalement, le découpage des vues. On définit ainsi des zones et on précise le rôle et le contenu de chacune de ces zones. § Les maquettes statiques n'autorisent aucune interaction. Elles sont parfois réalisées sur papier (on peut simuler les enchaînements en préparant des story-boards : séquences de vues représentant une fonction). § On parle aussi de maquette fil de fer (wireframe) : le graphisme n'est volontairement pas travaillé et on n'utilise généralement pas la couleur. IHM-1 – ID04 – Jacques BAPST 49 § On utilise notamment cette technique pour la création de sites web afin de garantir une cohérence graphique sur l'ensemble des pages. D'autre part, le zoning servira de base au travail des graphistes qui 'habilleront' les différentes zones en fonction de l'identité visuelle souhaitée. IHM-1 – ID04 – Jacques BAPST Wireframe Évolution des prototypes § Maquettes fil-de-fer (wireframe). § Au fur et à mesure des itérations, la fidélité des prototypes va augmenter et se rapprocher du produit final. 51 § Les tests utilisateurs permettent de détecter les problèmes d'utilisabilité et de les corriger dans la prochaine version du prototype qui fera l'objet d'une nouvelle série de tests et ainsi de suite. § Au fil des itérations, on joue généralement sur les différentes dimensions : • Graphisme • Interactions • Fonctionnalités § Ainsi, la fidélité des maquettes augmente à chaque itération et, pour l'utilisateur, les tests deviennent de plus en plus réalistes et proches de la version finale. IHM-1 – ID04 – Jacques BAPST 50 IHM-1 – ID04 – Jacques BAPST 52 Développeur ≠ U lisateur § Se souvenir qu'en tant que concepteur et/ou développeur : Vous n'êtes pas un utilisateur représentatif ! § Le simple fait de travailler (directement ou indirectement) sur un projet fait de vous un utilisateur complétement atypique (par définition). § Il faut impérativement optimiser la conception des interfaces en prenant en compte des utilisateurs externes et non pas se baser sur des utilisateurs impliqués - d'une manière ou d'une autre - dans le cycle de développement du projet (insiders). § La voie royale pour éviter cet écueil consiste naturellement à créer des prototypes (dès les premières phases de la conception) et à organiser des tests d'utilisabilité en choisissant soigneusement des utilisateurs représentatifs du public cible. IHM-1 – ID04 – Jacques BAPST 53 Développeur ≠ U lisateur § Un dialogue harmonieux n'est pas gagné d'avance ! § Car les points de vue sont parfois très différents. § Attention aux préjugés. § Chacun doit faire un pas… IHM-1 – ID04 – Jacques BAPST 54 Organisation de l'espace [1] § L'agencement des informations et des éléments d'interaction joue un rôle important dans l'utilisabilité d'une interface. Cours IHM-1 Conception des interfaces § La vision constitue le système perceptif le plus développé chez l'humain. Il faut donc accorder une attention particulière à la manière de présenter les éléments dans l'interface. 5 - Agencement de l'interface Disposition des éléments § L'utilisateur ne parcourt pas toujours l'écran de la même manière. Des études expérimentales ont montré que l'utilisateur adopte deux stratégies différentes : • Lors de la première vision de l'écran : Exploration rapide ð Jacques BAPST 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). • Lors des consultations ultérieures [email protected] ð : Recherche sélective Lors de la recherche sélective l'utilisateur connaît l'image et il positionne son regard sur des emplacements qui lui semblent pertinents (là où il s'attend à trouver l'information qu'il recherche). IHM-1 – ID05 3 – Jacques BAPST Parcours du regard [1] § Exploration rapide : • L'utilisateur découvre pour la première fois l'écran (ou utilisateur occasionnel) • Parcours en 'Z' Gestion de l'espace à disposition § Recherche sélective : • L'utilisateur connaît l'interface • Il positionne son regard sur les emplacements où il pense trouver l'information • Parcours quelconque Parcours du regard IHM-1 – ID05 – Jacques BAPST 2 IHM-1 – ID05 Toujours survolé Peut-être survolé Rarement survolé – Jacques BAPST Un parcours possible 4 Parcours du regard [2] Visibilité / Accessibilité [1] § Naturellement, le parcours du regard est fortement influencé par le contenu et par les éléments de mise en forme de l'interface. § La visibilité et l'accessibilité des zones de l'écran sont également des points à prendre en compte lors de la conception des interfaces. • Les images suscitent généralement davantage la focalisation du regard que le texte. • Les mises en évidence (taille des éléments, couleur, cadre, clignotement, contraste, etc.) constituent également des points d'attention (spot) du regard. • La disposition des informations et leur regroupement favorisent également l'exploration visuelle en guidant le regard vers des éléments spécifiques de l'interface. § Pour les interfaces utilisées avec une souris (ou autre dispositif de pointage), on considère que les zones proches des coins sont plus difficile à atteindre (le mouvement est plus contraint). § Lors de la conception des interfaces, il faut prendre en compte ces règles de comportement et agencer les éléments de l'interface de manière à amener l'utilisateur à percevoir rapidement les éléments importants et à favoriser ainsi l'utilisabilité du système. • A valider ensuite par des tests utilisateur ! IHM-1 – ID05 – Jacques BAPST 5 IHM-1 – ID05 – Jacques BAPST Parcours du regard [3] Visibilité / Accessibilité [2] § Sur certains types de pages web (moteurs de recherche, blogs, portails, e-zines, …) des études ont montré que le regard d'une majorité d'internautes suit un tracé en forme de 'F' (F-Pattern). § Pour les équipements mobiles comportant des interfaces tactiles (smartphones, tablettes), l'accessibilité dépend § L'utilisateur lit d'abord horizontalement les premières lignes puis parcourt ensuite les lignes suivantes en allant toujours moins loin sur la droite, finalement, l'utilisateur parcourt verticalement la partie gauche de l'écran. 7 • De la manière de tenir l'appareil • De la manière d'interagir (une main, deux mains, index, pouces, …) • Du fait d'être droitier ou gaucher § Exemple : • Observation du comportement d'environ 1400 utilisateurs de smartphones [Steven Hoober, 2013] • Le comportement des utilisateur évolue en fonction des facteurs de forme des équipements et des interfaces de l'OS et des applications. IHM-1 – ID05 – Jacques BAPST 6 IHM-1 – ID05 – Jacques BAPST 8 Visibilité / Accessibilité [3] Standardisation - Cohérence § Les zones facilement accessibles dépendent grandement de la manière de prendre en main et d'interagir avec l'équipement mobile. § Plus la charge de travail augmente et plus l'utilisateur standardise ses procédures d'exploration et s'achemine vers de la recherche sélective en se focalisant sur certaines zones de l'écran. § Un point important à considérer dans la phase de conception est la cohérence de l'interface : • Positionnement des éléments • Graphisme (couleurs, taille, polices, symboles, …) • Comportement • L'orientation de l'interface joue aussi un rôle. § L'homogénéité de l'ensemble des interfaces d'une application ou d'une suite logicielle renforce le sentiment de confiance, accélère l'apprentissage accroît la fidélisation des utilisateurs. § Pour assurer cette cohérence, on utilise des gabarits d'écran qui précisent l'agencement général des contenus et des commandes pour les différents types de fenêtres ou pages de l'application. IHM-1 – ID05 – Jacques BAPST 9 IHM-1 – ID05 Visibilité / Accessibilité [4] Gabarits d'écran [1] § L'utilisation des doigts comme moyen de pointage implique que des éléments sont masqués durant l'interaction. § Exemple de gabarit d'écran pour un site web : Logo Bandeau publicitaire Fil d'Ariane § Dans la conception, il faut prendre garde à placer les composants de manière à minimiser les masquages et éviter de nuire à la navigation. Menu • Veiller particulièrement aux composants importants de l'interface. Téléchargements docum. § Les zones masquées dépendent aussi de la main utilisée et év. aussi de l'orientation. IHM-1 – ID05 11 – Jacques BAPST Caractéristique du produit Photo du produit Avantages du produit Prix Pied de page (contacts, conditions générales, etc.) – Jacques BAPST 10 IHM-1 – ID05 – Jacques BAPST 12 Gabarits d'écran [2] Gabarits d'écran [4] § Les gabarits d'écran sont généralement basés une grille sous-jacente qui permet d'assurer une certaine structure et cohérence visuelle (le même principe est appliqué à la mise en page des journaux et des magazines). § On peut définir des gabarits d'écran avec différents niveaux de détails. IHM-1 – ID05 – Jacques BAPST 13 IHM-1 – ID05 – Jacques BAPST 15 Gabarits d'écran [3] Charte graphique § Si l'interface doit s'adapter à différents types de périphériques (avec des tailles d'écran différentes et des orientations variables), un design adaptatif (responsive design) doit être envisagé. § Les gabarits d'écran font souvent partie d'une charte graphique qui définit un ensemble d'éléments visant à assurer un cohérence de l'ensemble des vues d'une application, des pages web d'un site, etc. § Des gabarits d'écran seront conçus pour les différentes déclinaisons de la présentation des interfaces. § La charte graphique définira en outre : • Adaptation du nombre de colonnes • Abandon de certains contenus • ... § Le recours à certains outils permet de faciliter la gestion du design adaptatif des interfaces • Web framework • Fragments (Android) IHM-1 – ID05 – Jacques BAPST 14 • • • • • • • • • • Les polices de caractères à utiliser La taille des éléments La palette de couleurs à utiliser (codage couleur) Le style de conception des icônes (ou une palette d'icônes) Les espacements et les marges (entre et autour des éléments) La justification des textes Les textures, les images d'arrière-plan Les ombrages Les bordures ... IHM-1 – ID05 – Jacques BAPST 16 Zones de manipulation Mise en évidence [1] § Dans les zones de manipulation des interfaces, on conseille de disposer, dans le sens de la lecture : § Un des nombreux but du concepteur d'interface est d'attirer l'attention de l'utilisateur sur certains éléments importants (du point de vue de l'utilisateur, de ses objectifs, de ses tâches ). • Les éléments importants en premier • Les commandes fréquemment utilisées ensuite • Les autres éléments à la fin Barre de menus : Palette d'outils : Commandes importantes Commandes fréquemment utilisées Outils importants § Il existe de nombreux moyens de mise en évidence de certains éléments de l'interface mais toutes ces techniques ne sont pas équivalentes. § Tout l'art consiste à les utiliser à bon escient, de façon cohérente et surtout avec parcimonie. Commandes annexes § Si l'on abuse de ces techniques, on obtient l'effet contraire en dispersant l'attention de l'utilisateur et en surchargeant son système perceptif (charge mentale). Sens de lecture Outils fréquemment utilisés Pour être efficace, la mise en évidence doit rester exceptionnelle ! Outils annexes IHM-1 – ID05 – Jacques BAPST 17 IHM-1 – ID05 – Jacques BAPST 19 Mise en évidence [2] § Pour être efficace, les techniques de mises en évidence doivent conserver un caractère exceptionnel par rapport à l'affichage standard qui doit rester prédominant sur la majorité des éléments. § Quelques règles générales : Techniques de mise en évidence IHM-1 – ID05 – Jacques BAPST • Limiter le nombre total de moyens de mise en évidence utilisés (la signification des différents modes sera plus facile à apprendre et à mémoriser pour l'utilisateur) • Limiter le nombre de moyens de mise en évidence sur le même objet (l'efficacité n'est pas liée au nombre de moyens utilisés ) • La mise en évidence d'un objet ne devrait pas affecter la perception de son état (p. ex inversion vidéo fait perdre la couleur d'un texte ) • Si possible, la mise en évidence d'un objet doit s'arrêter dès la disparition de l'état correspondant ou dès la fin de l'action de l'utilisateur qui a déclenché sa mise en œuvre 18 IHM-1 – ID05 – Jacques BAPST 20 Mise en évidence [3] Mise en évidence [5] § Parmi les principales techniques de mise en évidence, on peut mentionner : § Techniques de mise en évidence (suite) : • L'encadrement (bordures) • Le clignotement / Les animations But : regrouper les informations et focaliser le regard Utiliser des lignes fines ou des couleurs pastels (éviter l'effet "annonce mortuaire") ð Limiter les imbrications ð Attire l'attention même en zone périphérique de la vision ð Forte charge perceptive (dérangeant) ð A réserver à des stimulations importantes (urgences) ð ð • Les puces (bullets) • L'inversion vidéo / Le surlignement Mettre en évidence des lignes de texte (celle que vous lisez par exemple) Attirer le regard sur des 'points d'entrée' visuels ð Permettent une numérotation des points (facilitant le référencement) Interversion des couleurs de premier-plan et d'arrière-plan Classique pour indiquer la ligne sélectionnée dans une liste ð Peut réduire la lisibilité du texte ð Un surlignement est souvent préférable à une inversion pure ð ð ð ð • Le son • Les attributs du texte : gras, italique, souligné, ombré Moyen d'alerte extrêmement efficace (surtout si continu ou répétitif) A réserver à des mises en évidence importantes (systèmes critiques) ð Un texte parlé peut contenir davantage d'information ð A utiliser avec parcimonie ð Pour le gras et l'italique, l'effet dépend fortement de la police utilisée ð Le souligné est généralement à éviter (sauf év. pour liens hypertextes) ð IHM-1 – ID05 – Jacques BAPST ð 21 IHM-1 – ID05 Mise en évidence [4] Mise en évidence [6] § Techniques de mise en évidence (suite) : § Techniques de mise en évidence (suite) : • La police de caractères (texte, texte, texte, texte, …) 23 – Jacques BAPST • La proximité Permet de mettre en évidence les relations (les liens) entre les éléments (libellé - champ associé par exemple) ð Une mauvaise gestion peut conduire à des erreurs d'interprétation Utile pour des textes longs (paragraphe) ð Impact dépend du choix des polices ð ð • La couleur Être cohérent dans son utilisation (codage couleur) Limiter le nombre de couleurs utilisées ð Utiliser des couleurs distinguables (nommables) ð Pour des mises en évidence importantes, à combiner avec une autre technique (penser aux daltoniens) ð km départ ð • La taille des éléments (texte, icône, image, …) Date départ 175 11.02.2015 km arrivée Date arrivée km départ Date départ 175 11.02.2015 km arrivée Date arrivée 390 22.03.2015 390 22.03.2015 ð km parcourus Nb jours km parcourus Nb jours ð 215 40 215 40 Structuration : titres, sous-titres, paragraphes, légendes, … Icônes : à réserver à des situations particulières ð Risque de donner un aspect chaotique (menace la cohérence) Risque de confusion IHM-1 – ID05 – Jacques BAPST 22 IHM-1 – ID05 Nettement préférable – Jacques BAPST 24 Adaptation à la taille des écrans [2] § Pour les sites et applications web, on adopte généralement des stratégies d'adaptation basées sur deux grands principes : • Mise en page adaptative (adaptive layout) • Mise en page responsive (responsive layout) Adaptation à la taille de l'écran § Dans une majorité d'interfaces, la disposition des éléments est basée sur une grille (un découpage du contenu en lignes et en colonnes ) ou sur un assemblage de plusieurs grilles. § La taille ainsi que le nombre de lignes et de colonnes de ces grilles pourront s'adapter en fonction de la taille de l'écran (ou de la fenêtre). IHM-1 – ID05 – Jacques BAPST 25 IHM-1 – ID05 – Jacques BAPST 27 Adaptation à la taille des écrans [1] Mise en page adaptative [1] § La disposition des éléments dans une interface doit prendre en compte la taille (et l'orientation) des écrans (fenêtres). § Dans les pages web on joue généralement sur la largeur et le nombre de colonnes des grilles. La longueur des pages s'adaptera en conséquence (avec un scrolling vertical). § Dans le domaine du web, l'adaptation aux différents terminaux (smartphones, tablettes, phablets) est devenue incontournable, compte tenu de la diversité des dispositifs utilisés. § On nomme conception responsive (responsive design) l'ensemble des techniques utilisées pour faire en sorte que l'interface s'adapte à la taille de l'écran ou de la fenêtre dont elle dispose pour s'afficher. § Pour les applications autonomes (standalone) on a généralement recours à des conteneurs associés à des gestionnaires de disposition (layout-managers) qui se chargent d'adapter la taille et la position des composants en fonction de l'espace à disposition, tout en respectant certaines contraintes (règles de disposition). IHM-1 – ID05 – Jacques BAPST 26 § Avec une technique de mise en page adaptative (adaptative layout), la largeur de la grille s'adapte par à coup. La largeur de chaque colonne est généralement fixe et le nombre de colonnes affichées change en fonction de certains points de rupture qui dépendent de la taille de la fenêtre. § Techniquement, on utilise généralement des media-queries (CSS 3) pour définir ces points de rupture (points de bascule) qui feront changer dynamiquement les feuilles de styles associées à la page affichée. IHM-1 – ID05 – Jacques BAPST 28 Mise en page adaptative [2] Mise en page responsive [2] § Exemple de comportement d'une page avec une mise en page adaptative (adaptative layout) : § Exemple de comportement d'une page avec une mise en page responsive (responsive layout) : http://alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html IHM-1 – ID05 – Jacques BAPST 29 IHM-1 – ID05 – Jacques BAPST 31 Mise en page responsive [1] § La technique de mise en page responsive (responsive layout) est basée sur la notion de grille fluide (liquid layout) dans laquelle les colonnes sont définies en pourcentage de la largeur totale (ou autre unité relative à la taille de la grille). § Ainsi les colonnes s'adaptent en continu à la taille de la grille. § Pour éviter de placer le contenu dans des colonnes trop étroites (avec un contenu qui devient difficile à lire ), on définit cependant des points de ruptures (comme pour la mise en page adaptative ) qui permettent d'adapter malgré tout la disposition générale (le nombre et la disposition des colonnes par exemple ) en fonction de la place à disposition. IHM-1 – ID05 – Jacques BAPST 30 Disposition dans les interfaces de type "formulaire" IHM-1 – ID05 – Jacques BAPST 32 Interfaces de type "formulaire" Disposition des libellés [2] § Les applications classiques comportent souvent des interfaces de type "formulaire" qui sont composées de libellés, de champs texte, de listes déroulantes, de cases à cocher, de zones de texte, etc. § Chacune de ces dispositions présente des avantages et des inconvénients selon la situation (nombre de champs, taille de l'écran, longueur des libellés et des champs, etc.). § Une des questions récurrentes à propos de ce type d'interfaces concerne la disposition des libellés qui sont associés aux éléments d'interaction. § En règle générale, on évitera les libellés à l'intérieur des champs et comme bulles d'aide (tooltip). Ces dispositions présentent, en moyenne, plus d'inconvénients que d'avantages. § Sur les petits écrans, la meilleure disposition est souvent de placer le libellé au dessus du champ (il limite le scrolling horizontal et reste visible lorsqu'on zoome). § Si la longueur des libellés est pratiquement identique pour tous les champs, un placement au dessus ou à gauche avec alignement à gauche est préférable. § Si la longueur des libellés est très variable, un placement au dessus ou à gauche avec alignement à droite est préférable. IHM-1 – ID05 – Jacques BAPST 33 IHM-1 – ID05 – Jacques BAPST Disposition des libellés [1] Disposition des libellés [3] § Les modèles classiques de positionnement des libellés par rapport au champ sont : § Exemple : • Au-dessus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 • La variante avec alignement à droite des libellés est préférable dans ce cas (il y a trop de différence dans la longueur des libellés; certains libellés sont un peu trop éloignés du champ associé). • A gauche, aligné à gauche . . . . • A gauche, aligné à droite . . . . . . . . . . . . . . . . • A l'intérieur du champ . . . . . . . . . . . . . . . . . . . . . . . . . . § Il faut aussi assurer une certaine cohérence de disposition entre les différentes vues d'une application, d'un site web, etc. • Comme bulle d'aide (tooltip) . . . . . . . . . . . . . . . . . . . . . IHM-1 – ID05 – Jacques BAPST 34 IHM-1 – ID05 – Jacques BAPST 36 Cours IHM-1 Conception des interfaces Icônes 6 - Composants de l'interface Éléments d'interaction Jacques BAPST [email protected] IHM-1 – ID06 – Jacques BAPST Graphisme Icônes [1] § La qualité graphique des interfaces joue un rôle important car elle contribue à mettre l'utilisateur dans une attitude positive (différentes § Les icônes sont des représentations symboliques plus ou moins abstraites (des graphismes) auxquelles on associe une signification dans l'interface utilisateur (c'est une notion très ancienne ). études on montré qu'une majorité d'utilisateurs y sont sensibles; il ne faut donc pas négliger l'aspect émotionnel de l'interaction ). § La conception graphique des interfaces est souvent déléguée à des professionnels mais il est cependant important que les développeurs en comprennent les aspects principaux. § Les éléments qui influencent les aspects graphiques sont nombreux, ils concernent par exemple : • • • • • La base de conception ( skeuomorphisme, flat design, pseudo-3D, …) Le design des éléments graphiques (icônes, images, bordures, …) Le choix et l'harmonie des couleurs ( palette de couleurs, codage couleur) La typographie (polices de caractères, taille, style) La disposition des éléments (position, alignement, …) IHM-1 – ID06 – Jacques BAPST 3 § 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 ("une image vaut mille mots") • Les icônes sont interprétées plus rapidement que du texte (pas de lecture, reconnaissance globale) § Lors du choix (ou de la conception ) des icônes, il faut être attentif à la connotation culturelle associée à certains graphismes (afin d'assurer la compréhension auprès de tous les utilisateurs cibles ). 2 IHM-1 – ID06 – Jacques BAPST 4 Interprétation des icônes Conception des icônes [2] § 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é. § Plus les icônes sont descriptives et plus elles sont faciles à interpréter par l'utilisateur. • • • • • § A l'inverse plus le graphisme est abstrait et plus l'utilisateur a de la peine à interpréter l'icône (il est contraint à apprendre et à mémoriser la signification). Colorer Modifier la couleur Copier le format Effacer ... § Les icônes qui réussissent à représenter les objets concernés ainsi que les actions sont celles qui sont le plus facilement interprétables. § Différentes enquêtes montrent que les utilisateurs préfèrent les interfaces comportant des icônes. Elles leur semblent plus faciles à utiliser, plus conviviales et plus ludiques (attitude positive). § 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). § Exemples : Objet Action Que faire ? IHM-1 – ID06 5 – Jacques BAPST IHM-1 – ID06 – Jacques BAPST Conception des icônes [1] Conception des icônes [2] § La conception des icônes peut être basée sur différents principes (qui peuvent être combinés) : § Quelques recommandations : Règle Description Ressemblance L'icône représente une image de l'objet ou de l'action Description Exemple Décrit l'effet de l'action ou l'objet avant et après l'action Analogie Représente un lien sémantique avec l'objet (fonctionnement semblable, métaphore) Symbolique Utilisation d'un symbole usuel, connu dans un contexte donné (pictogramme familier) Arbitraire Symbole arbitraire (doit être appris) IHM-1 – ID06 • Assurer une cohérence graphique dans les icônes • Privilégier les représentations traditionnelles des objets usuels (téléphone, horloge, …) Exemple – Jacques BAPST 7 ð Pictogrammes familiers même s'ils sont éloignés des objets du monde réel • Utiliser des icônes standards • Ajouter des bulles d'aides aux icônes non triviales • Limiter le nombre d'icônes (les réserver aux commandes fréquemment utilisées) • Concevoir les icônes pour des résolutions limitées (16x16 … 128x128 ) ð Ne pas réduire la taille d'images en haute résolution (photo) • Valider la compréhension des icônes lors de tests utilisateurs • Composer les icônes en combinant des sous-éléments connus 6 IHM-1 – ID06 – Jacques BAPST 8 Codage couleur [1] § L'idée du codage couleur (ou code des couleurs) est d'associer à chaque couleur une signification concrète et uniforme pour l'ensemble des interfaces du système. § Les règles de codage doivent se baser sur un principe directeur (peu importe lequel, l'important est d'en avoir un), par exemple : Couleurs • Codage ou norme en vigueur dans le contexte applicatif • Distance sémantique Même type d'information Types d'information similaires/proches ð ð ð même couleur couleurs peu contrastées ð Types d'information différents ð couleurs contrastées ð IHM-1 – ID06 – Jacques BAPST 9 IHM-1 – ID06 11 – Jacques BAPST Utilisation de la couleur [1] Codage couleur [1] § La couleur constitue un élément important dans la signalétique des interfaces. § Dans certains domaines, certaines professions, il existe des codages couleur plus ou moins explicites qu'il faut respecter (parfois, des normes sont impératives). § Elle permet notamment : • • • • • § Par exemple : de mettre en évidence des objets d'informer sur l'état courant d'un élément d'établir des liens sémantiques entre éléments de contribuer à l'esthétique de l'interface ... Rouge § Dans l'utilisation des couleurs, il faut prendre en compte un élément important : tout le monde ne perçoit pas les couleurs de la même manière. Le daltonisme (dyschromatopsie) touche une proportion non négligeable de personnes (env. 8% des hommes et 0.5% des femmes). Finance Chimie Thermique Signalisation routière Perte Chaud Interdiction / Stop Cartographie Cartographie routière (FR) Nationale Vert Secours / Libre Forêt Touristique Jaune Avertissement Désert Départementale Information Mer Rivière / Lac Bleu Noir Froid Gain • Implication : en plus de la couleur, un autre moyen doit être utilisé pour mettre en évidence une information importante IHM-1 – ID06 – Jacques BAPST 10 IHM-1 – ID06 – Jacques BAPST 12 Symbolique des couleurs [1] Symbolique des couleurs [3] Rouge Vert Orange Fraîcheur Violet Nouvelles technologies Futuriste Énergie Joie Chaleur Rapidité Couleur généralement citée en premier IHM-1 – ID06 A la mode Énergique Jeunesse Couleur généralement citée en dernier 13 – Jacques BAPST IHM-1 – ID06 – Jacques BAPST 15 Symbolique des couleurs [2] Bleu Jaune Typographie Or Ouverture Calme Couleur préférée des utilisateurs IHM-1 – ID06 – Jacques BAPST 14 IHM-1 – ID06 – Jacques BAPST 16 Police de caractères [1] Police de caractères [3] § Les parties textuelles des interfaces constituent souvent des éléments importants de la communication avec l'utilisateur. C'est notamment vrai pour les sites web, les bornes interactives, etc. § Une famille (ou série) de polices rassemble tous les styles qu'un caractère peut prendre. Ainsi, une famille de caractères classique comprend une version normale (également appelée romaine), une version italique, une version grasse et une version grasse italique. § Le choix des polices de caractères ainsi que le respect des règles typographiques jouent donc un rôle important dans la conception de ce type d'interfaces. § La typographie est une science ancienne, avec une très longue tradition et beaucoup de subtilités qui ont un impact sur la qualité graphique et la lisibilité des textes. § La plupart des polices sont à espacement proportionnel : la largeur (la chasse) des caractères est variable (spécifique à chaque caractère ). § Une grande partie de la terminologie qui est encore utilisée actuellement, date de l'époque de la composition au plomb. IHM-1 – ID06 § Certaines polices sont à espacement fixe (appelé aussi non-proportionnel) : chaque caractère possède la même largeur. • Courier, Consolas , Lucida Console , … – Jacques BAPST Calibri Normal Calibri Italic Calibri Gras Calibri Gras Italique Times New Roman Normal Times New Roman Italic Times New Roman Gras Times New Roman Gras Italique 17 IHM-1 – ID06 Consolas Consolas Consolas Consolas Normal Italic Gras Gras Italique – Jacques BAPST Police de caractères [2] Vocabulaire typographique [1] § Une police de caractères (ou fonte; angl. font) rassemble les lettres minuscules, les lettres majuscules, les chiffres ainsi que les signes de ponctuation et les ligatures (combinaison de caractères comme le 'œ') d'un même style dans un corps (taille) et une graisse donnée. § Le vocabulaire des spécialistes du domaine (font designer) est très abondant. IHM-1 – ID06 – Jacques BAPST 18 IHM-1 – ID06 – Jacques BAPST 19 20 Vocabulaire typographique [2] Ligature et Crénage § Lorsque deux ou plusieurs lettres sont liées en une seule graphie (glyphe), on parle de ligature (fi, fl, ffi, oe, ae, … ). Chasse § Le crénage (kerning) consiste à régler l'espace entre les caractères (interlettrage) de manière à harmoniser l'espacement visuel et favoriser la lisibilité. Important dans les polices en grande taille. Corps Talus de tête Rectangle d'encombrement Ligne de base IHM-1 – ID06 Approche droite Approche gauche Talus de pied 21 – Jacques BAPST IHM-1 – ID06 – Jacques BAPST Vocabulaire typographique [3] Taille de la police [1] § Deux grandes familles : polices avec sérifs ou sans-sérifs. § La taille (corps) des polices de caractères est définie en points. avec sans IHM-1 – ID06 Typographie Typographie Typographie Typographie – Jacques BAPST 23 § Il existe de légères différences entre la définition anglo-saxonne du point (1/72e de pouce = 0.3528 mm) et la définition européenne basée sur le pouce royal français (point Didot : 0.3759 mm). Garamond § La taille définit la hauteur du corps de la police (body size) et ne correspond pas à la hauteur d'une lettre particulière mais prend en compte les espacements standards au dessus et au dessous des caractères (qui peuvent valoir zéro pour certaines polices). Times New Roman Arial Calibri 22 IHM-1 – ID06 – Jacques BAPST 24 Taille de la police [2] Recommandations [1] § L'espacement entre les lignes (interligne) se mesure également en points. Il dépend de la taille de la police auquel on ajoute généralement un espace supplémentaire pour améliorer la lisibilité. § Écrire les textes en minuscules (majuscule au début des phrases). § Cet espacement est appelé lead (leading). § Pour la plupart des textes, on considère que la valeur optimale de l'interligne correspond à 120 … 145 % de la taille de la police. • Lecture 13 % plus rapide qu'un texte entièrement en majuscules. § Sur écran, éviter les polices avec sérifs, les italiques et les polices 'manuscrites' en petites tailles (tenir compte de la résolution de l'écran). § Minimiser le nombre de polices utilisées (pas plus de trois). • Comme pour les couleurs, donner un rôle précis à chaque police (paragraphe standard, titre, légende, …). § Utiliser quelques tailles de police distinguables (éviter de varier la taille de la police simplement pour placer plus de texte ). § Placer de préférence quelques lignes longues plutôt que plusieurs lignes courtes de manière à minimiser les mouvements oculaires. Builtin leading • Env. 45..65 caractères par ligne, 30..35 en double colonne § On évitera de souligner de longues portions de texte (év. un mot pour le mettre en évidence) car cela dégrade la lisibilité. IHM-1 – ID06 25 – Jacques BAPST IHM-1 – ID06 – Jacques BAPST Taille de la police [3] Recommandations [2] § La taille des caractères (corps) doit être déterminée en tenant compte de la hauteur des minuscules (x-height) de la police car pour une même taille de police, il y a de grandes variations d'impact. § Aérer le texte en créant des paragraphes Toutes les polices ci-dessous sont de même taille ! 27 • Env. 1 espace toutes les 5 lignes (ordre de grandeur) • La norme ISO 9241-3 définit certaines contraintes à respecter pour garantir une bonne lisibilité à l'écran § Favoriser la lisibilité en assurant un contraste suffisant • Utiliser de préférence des lettres sombres sur un fond clair § Prendre en compte la diversité des tailles d'écran et des résolutions lors de la définition de la taille des polices de caractères • Choisir les bonnes unités (si c'est possible) en fonction du contexte et des types de périphériques potentiellement utilisés On ne peut pas, impunément, changer de police de caractères ! IHM-1 – ID06 – Jacques BAPST 26 unités absolues/ relatives ð tailles minimales / maximales ð IHM-1 – ID06 – Jacques BAPST 28
© Copyright 2024