Savoir adapter l'interface homme-Machine (IHM)
GIT OPTION MULTIMÉDIA
Joan Grard - Lycée C. BOURQUIN
start
Introduction
L'interface Homme-machine ou interaction humain-machine (IHM) étudie la façon dont les humains interagissent avec les ordinateurs ou entre eux à l'aide d'ordinateurs, ainsi que la façon de concevoir des systèmes informatiques qui soient ergonomiques, c'est-à-dire efficaces, faciles à utiliser ou plus généralement adaptés à leur contexte d'utilisation ergonomiques, c'est-à-dire efficaces, faciles à utiliser ou plus généralement adaptés à leur contexte d'utilisation.
index
Notion d'Interface et Rôle
Savoir adapter l'interface homme-Machine (IHM)
Exemples
La conception d'une Interface
Les Interfaces graphiques
Pourquoi l’ergonomie ?
Analyse des utilisateurs et de la tâche
Recommandations générales
index
Première partie
Notion d'Interface et Rôle
index
A. L'échange Homme-Machine
index
A. L'échange Homme-Machine
La démarche informatique consiste à réaliser des traitements sur des données afin d'obtenir des résultats (qui seront utilisés pour prendre des décisions).
Les traitements ayant été programmés par des "informaticiens", l'utilisateur doit pouvoir, sans aucune connaissance informatique :
- transmettre les données à sa disposition,
- indiquer les résultats recherchés (donner des ordres),
- obtenir et interpréter les résultats recherchés.
C'est le rôle de l'interface : elle doit aider l'utilisateur à dialoguer avec la "machine" pour exécuter ces tâches. index
B - Définition
index
B - Définition
L'interface Homme-Machine (IHM) est l'ensemble des mécanismes à la fois matériels et logiciels, mis à la disposition des utilisateurs pour leur permettre d'interagir avec les applications du Système d’information (SI).
Une interface est une frontière, permettant des échanges d'informations, entre deux systèmes. L'IHM permet un échange d'information dans deux sens :
- L'acquisition d'informations par la machine en provenance de l'homme.
- La transmission d'informations de la machine vers l'homme.
index
C - Procédés d'acquisition et de diffusion des informations
index
C - Procédés d'acquisition et de diffusion des informations
L'IHM est généralement gérée par une sous-partie/couche logicielle qui fait appel à des dispositifs physiques.
index
C - Procédés d'acquisition et de diffusion des informations
index
L'être humain dispose de cinq sens permettant de percevoir des résultats diffusés par la machine. Par analogie, on peut considérer que la machine utilise des procédés comparables à ces 5 sens pour acquérir les données en provenance de l'homme.
C - Procédés d'acquisition et de diffusion des informations
index
L'interface graphique utilisateur (GUI : Graphical User Interface) utilisant l'écran et la souris (WIMP : Windows, Icons, Menus, Pointing device) est le mode de communication prééminent de l'IHM.
Deuxième partie
La conception d'une Interface
index
La conception d'une Interface
Les deux principaux domaines d'interface graphique sont les écrans des applications (formulaires) et les pages Web, qui comportent de nombreux points communs.
index
La conception d'une Interface
La démarche d'élaboration d'une interface comporte plusieurs étapes :
index
A - L’analyse des besoins
index
Il s'agit d'identifier les fonctionnalités qui seront nécessaires à l'utilisateur.
B - La conception
index
L'ensemble des règles qui fixent et unifient/uniformisent l'aspect graphique (typographie, couleurs, navigation…) est rassemblé dans une charte graphique.
C - Les maquettes
index
Une maquette est une ébauche d'IHM :
- Du simple dessin d'écran au prototype mettant en œuvre les aspects dynamiques, mais sans être destiné à permettre la réalisation des fonctionnalités,
- Constituant un outil de dialogue entre les membres de l'équipe de projet et avec les futurs utilisateurs,
- Soumise à une validation par la maîtrise d'ouvrage de projet.
C - Les maquettes
index
Il convient également d'élaborer la navigation entre les interfaces et leur arborescence (organisation hiérarchique d'un ensemble d'interfaces se rapportant à un même sujet.
D - L’évaluation
index
L'évaluation peut faire appel à des testeurs, afin de recueillir :
- Des données objectives (temps passés, nombre d'erreurs commises, ...).
- Des données subjectives (questionnaires et entretiens portant sur les impressions, la satisfaction, …).
Troisième partie
Pourquoi l’ergonomie ?
index
A - Approche ergonomique
index
Définitions :
- Ergonomie = étude des facteurs humains.
- L’ergonomie vise à la compréhension entre les humains et les autres composants d’un système.
- L’objectif est donc de rendre compatible la conception et l’évaluation des tâches avec les besoins des personnes.
B - Pourquoi l’ergonomie ?
index
Pourquoi :
- Ergonomie : du grec ergon (travail) et nomos (lois).
- Une approche systémique de l’activité humaine.
- Préconisation d’une approche qui tient compte des facteurs sociaux, cognitifs, physiques, organisationnels, environnementaux…
C - Sans ergonomie…
index
Exemples de déficiences IHM caractérisant la conception :
- Manque de connaissances des utilisateurs et des tâches ;
- Manque de méthodologie dans la conception de l’IHM ;
- NE PAS PRÉVOIR LES ERREURS HUMAINES ;
- CONCEVOIR SELON DES CRITÈRES DE PERFORMANCE DES SYSTÈMES ;
- FOURNIR TOUTES LES FONCTIONS IMAGINABLES ;
- FOURNIR TOUTES LES INFORMATIONS DISPONIBLES ;
- …
D - Pourquoi ces erreurs ?
index
Croire que pour concevoir un logiciel/site Internet ergonomique il suffit « d’y réfléchir un peu ».
Donc :
- Les concepteurs ne connaissent pas les tâches qu’ils doivent informatiser ;
- LES CONCEPTEURS FOURNISSENT TOUT CE À QUOI ILS PENSENT.
E - Nécessité de l’ergonomie
index
- L’IHM repose sur les opinions et les jugements individuels ;
- L’ERGONOMIE N’EST PAS SEULEMENT DU BON SENS COMMUN MAIS UNE SCIENCE APPLIQUÉE.
F - Évolution de l’ergonomie
index
- Aménagement du plan de travail.
- L’ORGANISATION DU TRAVAIL.
Quatrième partie
Recommandations générales
index
A. Les couleurs
Le mauvais choix du rouge
la caméra est à peu près horizontale, à hauteur des yeux.
Les couleurs sacrées :
Rouge = Danger
Jaune = Avertissement
Vert = Normal
la caméra est située au-dessus du sujet (impression que le sujet est petit, dominé).
Anomalies de la vision :
8 % chez les hommes
0,5 % chez les femmes.
Soit on pose un élément au premier plan, devant le sujet (distance // personnage) ; soit on filme les éléments de décor derrière le sujet, c’est l’arrière plan dans lequel peuvent apparaître.
index
B. Choisir des couleurs
Pourquoi ?
la caméra est à peu près horizontale, à hauteur des yeux.
- Structurer un document ou une page,
- Localiser les informations,
la caméra est située au-dessus du sujet (impression que le sujet est petit, dominé).
- Identifier et distinguer des catégories d’informations,
- Mettre en évidence une suggestion ou un avertissement.
Soit on pose un élément au premier plan, devant le sujet (distance // personnage) ; soit on filme les éléments de décor derrière le sujet, c’est l’arrière plan dans lequel peuvent apparaître.
index
C. Recommandations
La couleur peut être mal utilisée.
la caméra est à peu près horizontale, à hauteur des yeux.
- un fond clair sur une écriture foncée : mode positif,
Pose le décor dans un espace vaste.
- ajouter la couleur après la conception,
Décor plus rapproché avec personnages.
- de 4 à 10 couleurs au maximum,
Permet de différencier les personnages via les visages.
Il faut :
la caméra est à peu près horizontale, à hauteur des yeux.
- la même couleur pour le même type d’informations.
Un espace délimité où l'action est vue en totalité.
index
D- Mauvaises combinaisons
index
Combinaisons côte à côte :
la caméra est à peu près horizontale, à hauteur des yeux.
D- Mauvaises combinaisons
index
Caractères / Fond :
la caméra est à peu près horizontale, à hauteur des yeux.
E. Travail sur écran
Les risques
la caméra est à peu près horizontale, à hauteur des yeux.
Pose le décor dans un espace vaste.
Décor plus rapproché avec personnages.
- troubles musculo-squelettiques (TMS),
Permet de différencier les personnages via les visages.
Un espace délimité où l'action est vue en totalité.
index
E. Travail sur écran
Les précautions
la caméra est à peu près horizontale, à hauteur des yeux.
- bon aménagement du poste de travail,
Pose le décor dans un espace vaste.
- faire des pauses et des changements d’activités,
Décor plus rapproché avec personnages.
- norme : « exigence ergonomiques pour travail de bureau avec terminaux à écrans de visualisation » (ISO 9241).
Permet de différencier les personnages via les visages.
Les précautions concernent l’affichage, l’environnement et l’aménagement du poste, les réflexions, les couleurs affichées, les périphériques d’entrée ainsi que le dialogue avec l’ordinateur.
Un espace délimité où l'action est vue en totalité.
index
Cinquième partie
Analyse des utilisateurs
et de la tâche
index
A. Analyse des utilisateurs
- Un nouveau système ne peut être adapté à la fois à tous les utilisateurs potentiels.
Pose le décor dans un espace vaste.
- Pour qu’un logiciel/application soit adapté à une population, il doit connaître les caractéristiques de ces utilisateurs (capacités, expérience, formation, ...).
Décor plus rapproché avec personnages.
Problème : les utilisateurs évoluent à mesure qu’ils acquièrent de l’expérience.
Permet de différencier les personnages via les visages.
Idéal : des interfaces dont les éléments importants changent en fonction de l’acquisition d’expérience des utilisateurs :
Un espace délimité où l'action est vue en totalité.
index
==> Nécessité de connaître les besoins des utilisateurs.
Un espace délimité où l'action est vue en totalité.
A. Analyse des utilisateurs
Solution : les utilisateurs doivent aider à la définition des caractéristiques des IHM.
Pose le décor dans un espace vaste.
Exemple : par le biais de l’interview, de mise en situation d’essai, on s’assurera que toutes les exigences seront prises en compte.
Décor plus rapproché avec personnages.
index
==> L’utilisateur doit être associé à l’élaboration du cahier des charges (meilleure acceptation si ses suggestions sont implémentées).
Un espace délimité où l'action est vue en totalité.
B. Ergonome
L’ergonome est un médiateur entre concepteurs et utilisateurs.
la caméra est à peu près horizontale, à hauteur des yeux.
index
B. Ergonome
Il connaît les méthodes permettant de réunir les informations et exigences pertinentes pour la tâche de l’utilisateur.
la caméra est à peu près horizontale, à hauteur des yeux.
index
C. Quelques règles de conceptions IHM
- Chaque entrée doit être brève
la caméra est à peu près horizontale, à hauteur des yeux.
- Elles ne doivent pas requérir de formation particulière.
Pose le décor dans un espace vaste.
- Certaines entrées, notamment à risque doivent requérir une confirmation.
Décor plus rapproché avec personnages.
- Les messages doivent être clairs et sans équivoque.
Permet de différencier les personnages via les visages.
- Les messages ne doivent pas contenir de superflues.
Un espace délimité où l'action est vue en totalité.
index
- Le contenu des messages doit offrir un nombre limité d’options à l’utilisateur, limitant ainsi le nombre de décisions à prendre.
Un espace délimité où l'action est vue en totalité.
- L’utilisateur doit avoir la possibilité d’obtenir facilement une aide humaine.
Un espace délimité où l'action est vue en totalité.
D. Analyse de la tâche…
Objectif : définir, du point de vue de l’utilisateur, les exigences auxquelles le logiciel doit se conformer.
Pose le décor dans un espace vaste.
Moyens : constitution d’organigramme, de scénarios.
Décor plus rapproché avec personnages.
==> Les décisions de conception, les simulations et les évaluations.
Permet de différencier les personnages via les visages.
index
==> Le recours aux spécialistes en ergonomie est souhaitable.
Un espace délimité où l'action est vue en totalité.
D. Analyse de la tâche…
index
Sixième partie
Exemples
index
A. Création de sites Web
index
B. Création de logos
index
C. Création de supports pour les écrans tactiles (tablettes, téléphones, …)
index
Septième partie
Les Interfaces graphiques
index
A. Le langage de programmation
Les interfaces graphiques peuvent être construites à partir de logiciels spécifiques ou être des interfaces de types Web.
la caméra est à peu près horizontale, à hauteur des yeux.
Un exemple de langage de programmation : le binôme du HTML5 est le CSS3. Là où le HTML mettra les contenus sur la page web, le CSS sera utilisé pour mettre en forme les contenus.
Pose le décor dans un espace vaste.
Il existe également d’autres langages (PHP, Javascript, …).
Décor plus rapproché avec personnages.
index
B. Les contrôles graphiques
Lorsqu'elles nécessitent l'acquisition en provenance de l'utilisateur, ces interfaces reposent souvent sur des formulaires de contrôles graphiques.
la caméra est à peu près horizontale, à hauteur des yeux.
index
B. Les contrôles graphiques
Ces contrôles peuvent réagir à des évènements (dont les actions de l'utilisateur) :
de statique, l'interface devient alors dynamique.
la caméra est à peu près horizontale, à hauteur des yeux.
index
C. La programmation événementielle
- mettre à jour ou faire apparaître les informations/les zones au fur et à mesure qu'elles sont utiles,
la caméra est à peu près horizontale, à hauteur des yeux.
- activer/désactiver ou verrouiller/déverrouiller certaines zones,
Pose le décor dans un espace vaste.
- envoyer le curseur dans la zone adéquate,
Décor plus rapproché avec personnages.
- signaler les erreurs au fur et à mesure de la saisie,ivoque.
Permet de différencier les personnages via les visages.
- proposer une information (info-bulle, …) et une aide contextuelle,rflues.
Un espace délimité où l'action est vue en totalité.
index
Un espace délimité où l'action est vue en totalité.
C. La programmation événementielle
Un événement est une action, initiée par l'utilisateur (via les périphériques d'entrée), reconnue par un objet (clic sur un bouton, réception d'un curseur par une zone de texte, …).
la caméra est à peu près horizontale, à hauteur des yeux.
index
La programmation événementielle consiste à prévoir une réponse de l'objet à un événement : cela peut consister en un changement des propriétés de l'objet (couleur, clignotement, …) ou tout autre action extérieure à l'objet (boite de dialogue, …).
la caméra est à peu près horizontale, à hauteur des yeux.
C. La programmation événementielle
La programmation événementielle permet de concevoir un dialogue homme-machine où le logiciel répond aux actions de l'utilisateur.
la caméra est à peu près horizontale, à hauteur des yeux.
Cette interface réactive informe l'utilisateur :
Pose le décor dans un espace vaste.
Décor plus rapproché avec personnages.
- pour le guider et faciliter son « cheminement », vers les actions ou les informations recherchées,
Permet de différencier les personnages via les visages.
- pour informer de ses erreurs et indiquer des remèdes.
Un espace délimité où l'action est vue en totalité.
index
C. La programmation événementielle
Dans les interfaces Web, il est possible de mettre en œuvre une interaction avec l'utilisateur grâce à une programmation événementielle du côté du navigateur client.
la caméra est à peu près horizontale, à hauteur des yeux.
index
En effet, différents éléments HTML (notamment les liens, les images, les fenêtres et les zones de formulaires) reconnaissent des événements et peuvent y réagir en faisant appel à des scripts conçus dans ce but (en PHP par exemple).
la caméra est à peu près horizontale, à hauteur des yeux.
Maintenant vous connaissez de nombreuses informations pour Savoir adapter l'interface homme-Machine (IHM)
GIT OPTION MULTIMÉDIA
Joan Grard - Lycée C. BOURQUIN
index
Merci !
