Want to make creations as awesome as this one?

Transcript

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

  • l'analyse des besoins,

La démarche d'élaboration d'une interface comporte plusieurs étapes :

  • la conception,

  • les maquettes,

  • l'évaluation.

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’ENVIRONNEMENT.

  • L’ORGANISATION DU TRAVAIL.

  • ENSUITE L’AFFICHAGE.

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.

  • fatigue visuelle,

Pose le décor dans un espace vaste.

  • problèmes cutanés,

Décor plus rapproché avec personnages.

  • troubles musculo-squelettiques (TMS),

Permet de différencier les personnages via les visages.

  • facteurs de stress.

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.

  • pour le rassurer,

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 !