17/02/2012

Historique
Introduction
 IHM
 Interface Homme –Machine
 1945-1970 : les prémisses
 Dispositifs d’entrée-sortie limités
UN ensemble des dispositifs matériels et logiciels
permettant à  perforateurs/lecteurs de cartes
 tableaux de bord (voyants)
un utilisateur d’interagir, de communiquer avec un système
 imprimantes
interactif
 Interactions Homme –Machine  Langages de commandes
 Communication Homme –Machine
 Dialogue Homme –Machine

Evolution technique des interfaces

 Historique  Interfaces graphiques (GUI)
 1970s : les ordinateurs « modernes »  majorité des applications, la partie la plus importante de
 Nouveaux dispositifs d’entrée-sortie l'interaction homme-machine fait appel aux périphériques
de base qui sont : l'écran, le clavier et la souris
 écran graphique et stylo optique
 première souris
 applications grand public
 manipulation directe
 restent notre référence

Evolution technique des interfaces Evolution technique des interfaces

 Les interfaces graphiques utilisent différents éléments
visuels appelés Composants graphiques ou Widgets
ou Controls et qui, en combinaison avec l'utilisation de
la souris rendent les choses plus simples et plus
intuitives pour l'utilisateur.
Parmi ces éléments visuels on peut citer :
 Les boutons (cases à cocher, bouton radio, etc)
 Les menus (menus déroulants, menus contextuels, etc )
 Les listes à choix (listes simples, listes déroulantes)
 Les champs de texte (champs simples, champ multilignes,
éditeurs, etc)
 Les barres de défilement (ascenseurs)
 ...
 WIMP
 des interfaces utilisateur qui intègrent ces éléments
graphiques (composants visuels / Widgets / Controls)
 Window : Notion de fenêtre (zone indépendante) (c'est une
notion importante qui a même donné son nom à un système
d'exploitation !)
 Icon : Éléments graphiques visuels (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)
 Pointer : Curseur/Pointeur manipulé par la souris, et qui
permet d'interagir avec les composants visuels (pointage,
sélection, tracé) Avec le clavier, la souris est l'élément d'entrée
le plus important

1
 17/02/2012

Evolution technique des interfaces

 IHM post-WIMP
 Les IHM post-WIMP mettent en oeuvre des techniques
d'interaction innovantes qui vont au delà des interfaces
graphiques classiques (fenêtres, icônes, souris, pointeur
ou Windows Icons Mouse Pointer - WIMP). Ces
techniques innovantes incluent:
 les outils semi-transparents (Toolglass / MagicLense),
 l’interaction à deux mains (avec deux dispositifs de pointage
tels que les souris, ou sur des surfaces "multi-touch"),
 l'interaction à plusieurs utilisateurs simultanément,
 les transformations complexes (rotation, changement d'échelle,
déformations), et les effets d'animations.

Evolution technique des interfaces Evolution technique des interfaces

 Réalité virtuelle
 simulation d’un environnement dans lequel le sujet a
l'impression d'évoluer dans un monde 3D
 Réalité augmentée, réalité mixte
 superposition de l'image d'un modèle virtuel sur une
image de la réalité en temps réel, le virtuel est intégré
dans le réel
 Réalité diminuée
 suppression d’un élément de l’image sur une image de la
réalité en temps réel

II.Approches de conception des IHMs Approches de conception des IHMs

 Méthode générale
 Identifier les caractéristiques des utilisateurs;
 Les méthodes de génie logiciel ne sont pas
 Analyser les tâches et activités en contexte de travail
usuel.
 Ne pas oublier que la conception est un processus itératif!
adaptées à la conception des IHMs
 Solution -> intégrer l’utilisateur dans la phase de
conception
 le modèle Centré Utilisateur est le plus adapté par rapport
aux autres modèles de génie logiciel à l’analyse et à la
conception des interfaces homme machine.

2
 17/02/2012

Approches de conception des IHMs V- Approches de conception ergonomique

 Comment impliquer l’utilisateur dans le processus de
conception?
 Technique:
 Etape1: dans l’analyse des besoins
 Les futurs utilisateurs et les concepteurs partagent un plan de  Création de modèle utilisateur
travail: les concepteurs exposent leur projet, les utilisateurs annotent  Création de modèle de tache
le projet

 Etape2: dans la conception

 Création de modèle d’interaction

V- Approches de conception ergonomique V- Approches de conception ergonomique

 Modèle utilisateur: Identifier les caractéristiques de  Modèle des taches:
l’utilisateur (Pour qui) Définir les taches utilisateurs
 Âge, état de santé, expert, spécialiste; Exemple
 Intégrer l’utilisateur dans la phase d’analyse;
 Choisir les utilisateurs représentatifs, disponibles;
 obtenir des informations sur l’utilisateur (Recueil de donnée):
 Entretiens;
 Questionnaires;
 Observation directe…

V- Approches de conception ergonomique

V- Approches de conception ergonomique (Evaluation)
 Modèle d’interaction:  Techniques d’évaluation:
 Etablir une correspondance directe entre les objets  Enquête d’usage:
informatique et les objets d’interaction  Objectifs
 recueillir des données sur la manière dont les utilisateurs
s’échangent des informations et parlent des produits;
 Obtenir leur feedback et leur réaction face à la conception

 Jugements d’expert:
 Choisir plusieurs experts (domaine et utilisabilité).
 Remplacer la logique de fonctionnement par la logique d’utilisation  Faire jouer un des scénarios par les experts;
 Noter tous les problèmes rencontrés;
 Analyser les causes;
 Proposer des solutions;
 En gardant les traces.

3
 17/02/2012

V- Approches de conception ergonomique

(Evaluation) IV- Introduction à l'ergonomie
 Inspection experte  Le terme Ergonomie vient du grec :
 Inspection par des connaissances expertes  ERGON : le travail
 NOMOS : la loi, la règle
 Exemples de critères ergonomiques pour l’évaluation des
interfaces
 Compatibilité;  Définition:
 Homogénéité;  l'ergonomie va s'intéresser à l'aménagement des systèmes
 Feed-back et guidage; Hommes-Machines ou de façon plus large aux conditions de travail
 Gestion des erreurs; de façon à permettre aux opérateurs de travailler dans des
 … conditions optimales de sécurité, confort, santé, satisfaction, et
d'efficacité.

 on s'intéressera à :
 Diminuer les erreurs
 Diminuer les temps d'apprentissage
 Rendre le logiciel le plus facilement utilisable pour l'utilisateur

II. Introduction à l'ergonomie II. Introduction à l'ergonomie

 Ergonomie  Ergonomie
 Physique : aptitudes physiques  Logicielle : L'ergonomie logicielle (ou ergonomie cognitive)
 la position du corps : tient compte des caractéristiques cognitives de l'homme pour
 hauteur du siège, de la table de travail ; améliorer les performances du couple homme-machine:
 ...
 la vision :  perception (temps de perception, sélection) ;
 vision des couleurs ;
 angle de vue ;
 mémorisation ;
 distance de vue ;  apprentissage ;
 ...  intelligence, définie comme l'aptitude à choisir une action appropriée à
une situation.

II.Introduction à l'ergonomie cognitive II. Introduction à l'ergonomie cognitive

 Le processeur humain comprend 3 sous-systèmes
 mémoire à court terme MCT:
interdépendants :  détient les informations en cours de manipulation;
 Le système sensoriel (Processeur et mémoire);  la capacité de la mémoire à court terme est d'environ sept
 Le système moteur (Processeur et mémoire); mnèmes +/- 2;
 Le Système cognitif:  Lorsque la mémoire est saturée, l'activation de nouveaux
mnènes entraînent la suppression d'anciens mnènes;
 Processeur;
 Mémoire:
 Par le phénomène de groupage des mnènes, la capacité de
 mémoire à court terme (mémoire de travail) MCT;
la mémoire à court terme est extensible:
 La mémoire à long terme MLT

 0021346330000 est quasiment impossible à retenir si l'on

considère chaque chiffre comme un mnène.
 00213 46 33 00 00 ne constitue plus que cinq mnènes qui ont un
sens pour nous et donc facilement mémorisables.

4
 17/02/2012

II.Introduction à l'ergonomie cognitive

Conséquences sur la conception des interfaces
(liées à la MCT):  Exemple
 Vérification les critères ergonomiques liés à la MCT sur le
 Capacité:
navigateur web Mozila fireFox
 limiter les items de menus à 7 +/- 2;  7 Menus
 écrire des messages concis ;
 ne pas présenter d'informations inutiles
 le phénomène de groupage:
 Sous menus;
 Sous barres à outils;
 Séparateur…

 Séparateurs  Sous menus

II.Introduction à l'ergonomie cognitive

 mémoire à long terme MLT:
 Barre à outils  capable de stocker un nombre infini d'informations de
manière permanente.
 la répétition est un moyen de faire passer l'information de
la mémoire à court terme vers la mémoire à long terme
 la récupération d'un mnème dans la mémoire à long terme sera
d'autant plus facile qu'il sera rattaché conceptuellement à
d'autres mnèmes.

5
 17/02/2012

III. Conception du système de navigation

II.Introduction à l'ergonomie cognitive (Navigation ergonomique)
 Conséquences sur la conception des interfaces (liées à la MLT) :  Introduction
Critères Ergonomies
 Des scénarios de navigation doivent être élaborés afin de
 Uniformité et cohérence; pousser l'utilisateur à suivre un chemin dans le site web.
 Organisation Visuelle;
 Parcours visuel
 Concision;
 Des études ont montré que l'oeil de l'internaute moyen parcourt
 Adaptabilité;
généralement la page web selon un cheminement global en
 Rapidité; « zigzag » commençant à l'angle supérieur gauche, jusqu'à
 Prévention et correction des erreurs; l'angle inférieur droit.
 Aide et suivi (Assistance)…

III. Conception du système de navigation III. Conception du système de navigation

(Navigation ergonomique) (Navigation ergonomique)
 Standardisation
 Certaines caractéristiques se retrouvent généralement
d'un site web à l'autre :
 Logo du site web en haut à gauche. Un clic sur ce logo conduit
directement à la page d'accueil du site ;
 Lien vers la page d'accueil présent sur chaque page du site ;
 Eléments de navigation présents sur chaque page afin de
permettre à l'utilisateur de se situer dans le site et de revenir
facilement à la rubrique principale.

III. Conception du système de navigation III. Conception du système de navigation

(Navigation ergonomique) (Navigation ergonomique)
 Une carte du site (ou plan du site, en anglais site map)
 Eléments de navigation  Flèches de navigation
 Les éléments de navigation sont des outils permettant au  La présence de flèches de navigation (suivant, précédent, retour au
visiteur de savoir où il se situe dans le site chapitre, retour à la page d'accueil) permet de fournir une navigation
intuitive à l'utilisateur.
 Le fil d'ariane (ou chemin de fer)
 Un fil d'Ariane se présente sous la forme suivante :
Accueil > Présentation> Master1
 La navigation par onglets
 Les onglets sont des outils de navigation utiles permettant de
distinguer des rubriques dans un site web et de passer facilement
de l'une à l'autre.

6
 17/02/2012

IV.Critères Ergonomies IV.Critères Ergonomies

 Uniformité, Homogénéité et cohérence  Exemple http://www.telecharger.com
 Uniforme: Ne pas changer constamment de présentation pour désigner
une notion
 Exemple de manipulation uniforme :
 Les commandes génériques d’édition (Copier/couper/Coller);
 Page d’accueille ;

 Lors du guidage, toujours utiliser les mêmes constructions des phrases;

 Logo ;

 La position de chaque menu;

 Liens soulignés ;

IV.Critères Ergonomies (Cohérence) IV. Critères Ergonomies(Homogénéité)

 Cohérence
 Une interface est cohérente si une action donnée a
toujours la même résultat quel que soit son contexte
d’utilisation
 La cohérente d’une interface facilite grandement l’apprentissage du
logiciel par les utilisateurs.
 Exemple
 Copier : Pour copier un répertoire/fichier/texte
 Page d’accueille : la première page du site
 Contacte : Pour contacter l’administrateur …
 Homogénéité
 S’applique au sein d’une interface donnée, Le
comportement du site doit toujours être le même
 Exemple:
 Présenter les titres des fenêtres dans des positions identiques.
 Police de caractères utilisé
 Format d’écran
 les barres de navigation sont un repère important pour le visiteur :
ne pas déplacer/modifier au cours de la visite.
 Le manque d’homogénéité peut augmenter
considérablement le temps de recherche

IV. Critères Ergonomies(Homogénéité) IV. Critères Ergonomies (Visualisation)

 Attention : L'ergonomie ne doit pas brider la
créativité. Il faut maintenir cette hétérogénéité au
niveau du design. Le métier d'ergonome est avant
tout de faire des concessions, toujours.
 Visualisation
 Segmenter un écran revient à fixer les aires de travail
 La segmentation introduit donc une représentation de la
structure de l’information
 La segmentation de l’écran doit être compatible avec le
mode de pensée de l’opérateur
 La segmentation spéciale de l’écran permet la localisation
rapide des information (minimiser les mouvements
oculaires)
 La densité d’information doit être constante d’un écran à
un autre

7
 17/02/2012

IV. Critères Ergonomies (Visualisation) IV. Critères Ergonomies (Visualisation)

 La répartition à l’écran des aires de travail donne une
Zone très visible Zone très visible Peu visible
Peu Accessible Peu Accessible Peu Accessible
signification aux informations et facilite leurs repérage
 Exemple

Zone visible Zone plus visible Zone visible Logo Aire d’informations Demande Aide
Très accessible La plus accessible Accessible
Aire de Aire principale de Aire de
commande travail commande
(liens) (liens )

Zone peu visible Zone peu visible Zone peu visible

Peu accessible Peu accessible Peu accessible
Aire d’informations

IV. Critères Ergonomies (Visualisation) IV. Critères Ergonomies (Visualisation)

 Éviter le trop-plein d’informations  Exemples
 privilégier l’essentiel, afin que l’utilisateur n’ait pas à intégrer
trop d’éléments à la fois.
Comment ?
 Diviser la quantité de mots par deux
Généralement on arrive relativement à réduire la quantité de mots
d’un texte d’au moins 50 %. En vous focalisant sur les mots
essentiels.
 Attention, cette règle, n’est valable que sur les pages navigantes et
non sur les pages finales de contenu. (comme un article, un
descriptif produit, la biographie etc.)

IV. Critères Ergonomies (Visualisation) IV. Critères Ergonomies (Visualisation)

 N’afficher que les principaux éléments de navigation et
d’interaction
 Réduire le trop-plein d’informations ne concerne pas uniquement le
texte.
 Etudier l’utilité de tous les éléments affichés
 Afficher les éléments optionnels seulement si nécessaire
 Exemples:
 Supprimer les éléments d’interaction inutiles
 il est très fréquent de trouver des éléments inutiles sur une page
donnée parce que l’on a appliqué sur toutes les pages des
règles techniques identiques.
 Par exemple, lorsque votre internaute se trouve sur la dernière page
d’une liste, il est tout à fait superflu de lui proposer un lien Suivant,
même si ce dernier n’est pas cliquable.
 Les images de fond augmentent la charge
informationnelle
 Les animations augmentent la charge informationnelle
 Le traitement de l’animation demande beaucoup de ressources
mentales car nous sommes intuitivement dirigés vers son
exploration

8

IV. Critères Ergonomies (Visualisation)
 Le remplacement d’informations au clic
 utiliser des procédés techniques basés sur le rechargement
partiel de portions d’écran. C’est souvent le cas des interfaces
présentées sous forme d’onglets.
IV. Critères Ergonomies (Visualisation)
 Utilisation des couleurs
 Utilisation de bons contrastes
 pour les couleurs de fond
 recommandés : jaune/vert, bleu/magenta, cyan/jaune
 à éviter : vert/bleu, rouge/vert, noir/rouge
 pour les couples couleur de texte - couleur de fond
 recommandés : blanc avec rouge ou bleu ou vert, vert avec jaune ou
blanc
 à éviter : blanc avec jaune, cyan avec vert/jaune
IV. Critères Ergonomies (Visualisation)
 Polices de caractères
 Homogénéité : association d’une police à chaque type
d’objet de l’interface
 Utilisation de 3 polices différentes au maximum
 Utilisation de polices droites : Arial, Helvetica, Verdana
 Respect de la casse d’une phrase
17/02/2012
IV. Critères Ergonomies (Visualisation)
 Optimiser l’organisation et la hiérarchie visuelle
 Une fois que l’ensemble des éléments à présenter est
sélectionné , vous devez les organiser de manière optimale à
l’écran. Pour y parvenir
 Utilisez les principes de proximité et de similarité pour agencer
la page de manière à dégager des blocs d’informations, des
zones différenciées.
 Objectif à atteindre : la page doit avoir l’air bien rangée.
IV. Critères Ergonomies (Visualisation)
 Homogénéité dans la sémantique des couleurs
 Associations couleur/signification perçue :
 Rouge : danger, interdiction, difficulté
 Vert : absence de problème
IV. Critères Ergonomies (Information)
 Information
 Présentation des informations générales
 vous devez dire à votre internaute qui vous êtes et ce que vous faites
 Donner de l’information ponctuelle
 Présenter suffisamment d’informations relatives à la navigation :
 une barre de navigation principale
 fournir suffisamment d’informations à l’internaute pour qu’il comprenne ce
que vous attendez de lui.
 Il est aussi primordial de donner toutes les informations
nécessaires à l’internaute pour qu’il comprenne bien l’interface
 Un titre pour un formulaire de renseignement de données
 le bouton S’inscrire sur la page d’accueil est accompagné d’un texte qui décrit en
quelques mots l’intérêt que l’internaute aurait à s’enregistrer sur le site
9
 17/02/2012

IV. Critères Ergonomies (Information) IV. Critères Ergonomies (Compréhension )

 feedback aux actions de l’internaute
 Lorsqu’un internaute effectue une action sur votre site,
vous devez lui répondre. Dans les interactions classiques
de navigation de page en page. En effet, c’est le
changement de page qui remplit ce rôle.
 Exemple : réponse de la bonne réception des données (inscription,
commande, nouveau sujet….)
 repérer les process dans lesquels deux pages
successives sont très proches visuellement
 Compréhension :
 les mots et symboles sont choisis minutieusement
 La bonne utilisation des mots sur le Web
 Utilisez le vocabulaire ! (qui doit être compréhensible)
 L’un des défauts les plus fréquents touchant le vocabulaire est
qu’il n’est pas utilisé. Trop souvent, les concepteurs essaient de
faire porter une idée par un symbole, une icône ou un
caractère…
 Par exemple, sur le site de Rowenta, les items de la navigation
outils(incluant tout de même des liens aussi importants que
Accueil, Où acheter, Contact et Rowenta Global) sont uniquement
présentés sous forme d’icônes. Cela rend l’ensemble très peu
compréhensible et n’incite pas à l’utiliser

 Le vocabulaire doit être orienté utilisateur

 Le vocabulaire doit être exact et précis

IV. Critères Ergonomies (Assistance ) IV. Critères Ergonomies (Assistance)

 Assistance  La mise en valeur du champ actif peut être réalisée grâce
 le site aide et dirige l’internaute à un élément graphique ajouté au champ ou en modifiant
les propriétés de style du champ en question (couleur de
 Si vous dirigez bien votre internaute, il doit comprendre très
rapidement ce qu’on attend de lui lorsqu’il arrive sur une page fond, couleur et épaisseur du contour).
ou qu’il en analyse une zone.
 il est très courant de voir des sites où l’on indique à l’internaute
de cliquer sur un bouton pour accomplir une action (de type «
Cliquez sur le bouton Machin pour faire Machin »). Pourquoi
dans ce cas ne pas rendre cette légende elle-même cliquable ?

IV. Critères Ergonomies (Assistance) IV. Critères Ergonomies (Assistance)

Autres exemples

 Fournissez de l’aide explicite en cas de besoin

 offrir une aide explicite à l’internaute
 Soit l’aide en direct
(exemple: une indication sélectionner cette option pour faire…)
 soit par des liens vers l’aide
 Icône vers l’aide
 Lien HyperText vers l’aide (cliquer ici pour en savoir plus)

10
 17/02/2012

IV. Critères Ergonomies (Gestion des erreurs) IV. Critères Ergonomies (Gestion des erreurs)

 Définition : ce critère regroupe tous les moyens

permettant Exemple (Formulaire): Placer le bouton Envoyer dans un endroit
accessible, le bouton Effacer est isolé (pour éviter tout clique indésirable )
 d’éviter ou de réduire les erreurs

Vérification de toute donnée introduite par

l’utilisateur avant de la valider

IV. Critères Ergonomies (Gestion des erreurs) IV. Critères Ergonomies (Gestion des erreurs)
 de les corriger lorsqu’elles surviennent  Exemple
 messages d’erreurs
 correction des erreurs

Le système doit signaler toute erreur

commise par l’utilisateur pour être corrigée
par ce dernier

IV. Critères Ergonomies (Gestion des erreurs)

 messages d’erreurs
 messages informatifs, constructifs, amicaux, montrant
la cause et le remède
 jamais de langage d'informaticien

 correction des erreurs

 la commande annuler

11