Introduction

L'IHM(Interface Homme Machine) est l'ensemble des dispositifs matériels et logiciels

qui permettent à un utilisateur d'interagir avec un système interactif.

On parle aussi de: UI (User Interface), de GUI (Graphical User Interface).

IHM est le langage d'entrée, de sortie et de gestion de l'interaction homme machine.
IHM est aussi l'abréviation de Interaction Homme Machine qui est la discipline
englobant l'ensemble des aspects de la conception, de l'implémentation et de
l'évaluation des systèmes informatifs interactifs (système informatique + l'utilisateur).
 Système informatique interactif
Un système informatique interactif il prend en compte les entrées de manière
interactive, il fournit à l'utilisateur, lors de son exécution, une représentation
perceptible d'une partie de son état interne, afin que ce dernier puisse le modifier
en fournissant des entrées.
 Les entrées du système interactif permettent de modifier l'état interne du système,
et il y a ainsi interaction: les entrées fournies par l'utilisateur dépendent des sorties
produites par le système et inversement.
 Le système interactif est ouvert : les dépendances entre entrées et sorties sont
inaccessibles au système.
Dans la conception des systèmes interactifs on doit prendre en compte l'utilisateur.
 Système informatique interactif
Il existe deux approches dans la conception des systèmes informatiques
interactifs:
L'approche techno-centrée: elle est centrée sur la machine et ses possibilités.
L'utilisateur doit s'adapter à la machine. Elle exprime le point de vue du
concepteur.
L'approche anthropo-centrée: elle est centrée sur l'homme et ses besoins. La
machine doit s'adapter à l'utilisateur. Elle donne le point de vue de l'utilisateur.
 Système informatique interactif
L'IHM doit être adaptée:
Aux caractéristiques de l'utilisateur telles que les différences physiques (âge,
handicap), les connaissances et expériences (dans le domaine de la tâche: novice,
expert, professionnel, en informatique, sur le système: usage occasionnel, quotidien),
les caractéristiques psychologiques (visuel / auditif, logique / intuitif, analytique /
synthétique), les caractéristiques socio-culturelles (sens de l'écriture, format de date,
langue, signification des icônes, des couleurs, ...).
- Au contexte (d'utilisation): grand public (proposer une prise en main immédiate), loisirs
(rendre le produit attrayant), industriel (augmenter la productivité, la sécurité des systèmes
critiques).
Aux caractéristiques de la tâche: répétitive, régulière, occasionnelle, sensible aux
modifications de l'environnement, contrainte par le temps, risquée, etc.
Aux contraintes techniques: plateforme, taille mémoire, écran, capteur, réutilisation
de code ancien.
 Ergonomie
➤L'ergonomie est au centre de l'interaction homme-machine.
➤Définition: ergonomie vient de ergon (travail) et nomos (règles); elle est la
science du travail et des activités humaines, c'est la prise en compte des facteurs
humains.
➤L'ergonomie vise la compréhension des interactions humains/système et concerne
l'optimisation du bien-être des personnes et de la performance globale des
systèmes qui doivent être efficaces, fiables, sûrs, favorables à la santé de leurs
utilisateurs et au développement de leurs compétences.
➤Selon la société d'ergonomie de langue française, l'ergonomie (ou l'étude des
facteurs humains) est la discipline scientifique qui vise la compréhension.
fondamentale des interactions entre les êtres humains et les autres composantes
d'un système, et la mise en œuvre dans la conception de théories, de principes, de
méthodes et de données pertinentes afin d'améliorer le bien-être des hommes et
l'efficacité globale des systèmes.
 Ergonomie
Définition du métier d'ergonome: c'est le métier contribuant à la planification, la
conception, l'évaluation et la correction des tâches, des emplois, des produits, des
organisations en compatibilité avec les besoins, les capacités et les limites des personnes.
Objectifs de l'ergonomie:
Objectifs centrés sur les personnes: il s'agit d'assurer la santé, la sécurité, le confort, la
facilité d'usage, la satisfaction et le plaisir des personnes et de concevoir des systèmes qui
favorisent le développement de compétences.
Objectifs centrés sur la performance: il s'agit d'assurer l’efficacité, la productivité, la
fiabilité et la qualité.
Domaines d'application de l'ergonomie:
L'ergonomie physique: concerne les caractéristiques anatomiques, physiologiques,
biomécaniques, les postures de travail, les mouvements répétitifs, la disposition du
poste de travail, des terminaux, la sécurité et la santé des utilisateurs.
 Ergonomie
L'ergonomie cognitive: concerne les processus mentaux (perception, mémoire,
raisonnement, réponses motrices) dans les interactions humain-système, la charge
mentale, la prise de décision, la performance experte, l'interaction homme-machine,
la fiabilité humaine, le stress professionnel et la formation dans leur relation à la
conception personne-système.
L'ergonomie organisationnelle: concerne l'optimisation des systèmes sociaux-
techniques (structures organisationnelles, règles et processus), la communication et la
gestion des ressources des collectifs, la conception du travail, la conception des
horaires de travail, le travail coopératif, le télétravail, ...
➤L'ergonomie dans les NTIC(les nouvelles technologies de l'information et de la
communication): l'ergonomie doit être utilisée dans les NTIC parce que
les nouvelles technologies sont de plus en plus puissantes et « envahissantes» alors que les
utilisateurs sont de moins en moins compétents.
 Ergonomie
➤L'ergonomie dans les NTIC(les nouvelles technologies de l'information et de la
communication): l'ergonomie doit être utilisée dans les NTIC parce que les logiciels ont de
plus en plus de fonctionnalités, mais moins de 40% d'entre elles sont réellement utilisées.
L'introduction de nouveaux dispositifs informatiques en entreprise correspond souvent à
une
baisse de la productivité.
Dans les projets à forte composante technologique, l'utilisateur final est souvent oublié,
alors qu'on devrait se poser les questions qu'est ce que l'utilisateur achète, une technologie
ou un produit ? Qu'est ce que le produit permet à l'utilisateur de faire?
➤L'ergonomie est à l'intersection de plusieurs disciplines entre autres l'informatique
(programmation, intelligence artificielle, génie logiciel), la psychologie cognitive, les
sciences de l'éducation, l'antropologie, la sociologie, la philosophie, la linguistique, la
communication
 Ergonomie des logiciels
➤Les critères ergonomiques constituent une classification des propriétés d'une
interface homme-machine qui conditionnent son utilisabilité.
➤Ils permettent d'évaluer l'utilisabilité d'un logiciel (évaluation analytique) en
servant de base pour l'établissement de grilles d'évaluation.
➤Ils servent de guide lors de la conception d'une interface utilisateur en aidant les
concepteurs à prendre en compte (dès la phase initiale du développement) les
aspects ergonomiques du logiciel.
➤Les principaux critères ergonomiques sont: compatibilité, guidage, cohérence
(homogénéité), adaptabilité, signifiance des codes, charge de travail, contrôle
explicite et gestion des erreurs.
 Ergonomie des logiciels: compatibilité
➤La compatibilité est la capacité du logiciel à s'intégrer dans l'activité réelle des
utilisateurs. Ce critère mesure l'adéquation du logiciel avec le contexte physique et
social dans lequel il est utilisé (environnement de travail). L'objectif est de réduire
le transfert de connaissance entre le métier et l'utilisation du logiciel. Les éléments
de l'interface doivent être agencés en fonction de la tâche.
➤Pour satisfaire ce critère il faut:
 Parler le langage de l'utilisateur (éviter le jargon informatique)
 Utiliser des métaphores familières
 Présenter les informations de façon cohérente par rapport aux autres supports de travail
(documents papier, formulaires, organigrammes, directives, etc.)
 L'accès aux fonctions doit être compatible avec la tâche de l'utilisateur,
 Ergonomie des logiciels: guidage
Le guidage est l'ensemble des moyens mis en oeuvre pour assister l'utilisateur dans
l'utilisation du logiciel. Faire connaître à l'utilisateur l'état du système et lui permettre
d'établir des liens de causalité entre ses actions et l'état résultant. Le but est de faciliter
l'utilisation et son apprentissage du système. L'utilisateur doit comprendre les
interactions que l'on attend de lui par un fonctionnement qui apparaît clairement.
Il existe deux types de guidage:
 Le guidage explicite (à travers les messages, bulles d'aide, boîtes de dialogue, ...).
 Le guidage implicite (en grisant les fonctions inactives).
➤Il y a quatre sous-critères de guidage: incitation, groupement/distinction, retour
utilisateur et lisibilité.
 Ergonomie des logiciels:
guidage/incitation
➤Le sous-critère d'incitation réunit les moyens visant à conduire l'utilisateur à effectuer des
actions spécifiques. L'incitation aide l'utilisateur dans son interaction avec le logiciel en
lui fournissant les éléments nécessaires pour l'utiliser correctement. Le but est d'éviter des
apprentissages fastidieux et réduire les risques d'erreur.
➤Les conditions de satisfaction de ce sous-critère sont:
 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).
 Ergonomie des logiciels:
guidage/groupement-distinction
➤Le sous-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é). Pour ce faire deux attributs graphiques sont utilisés: le format de
présentation (couleur, forme, syntaxe, ...) et la position à l'écran (localisation,
bordure, ...).
➤Le sous-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.
>Conditions de satisfaction de ces deux sous-critères:
• Regrouper les informations de même type par le format ou par la position (regroupement par menus,
bordure, ...).
• Distinguer par une présentation différente ou un emplacement différent, les informations distinctes pour
éviter les risques de confusions.
 Ergonomie des logiciels: guidage/retour
utilisateur
➤Le sous-critère retour utilisateur 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
(feedback) en réponse à chacune de ses actions. Le respect de ce critère 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 et apprend plus rapidement à l'utiliser.
►Recommandations de satisfaction de ce sous-critère
 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é.
 Ergonomie des logiciels:
guidage/lisibilité
➤Le sous-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. Pour ce faire, il faut prêter attention aux polices de caractères
(diversité, taille, attributs, minuscules/majuscules, ...), aux couleurs en général
(choix, contraste, but, ...), aux icônes (dimensions, choix des symboles, ...), à la
disposition des éléments (alignement, graphisme, ...).
>Pour satisfaire ce sous-critère il faut:
• Utiliser une police de caractère lisible (éviter les italiques à l'écran, ...).
• Soigner les espacements (interligne) et les alignements (justification).
• Adapter la taille des icônes de manière à permettre leur identification.
• Soigner les contrastes (choix des couleurs pour le fond et le premier plan).
• Prendre en compte la configuration de la machine cible (résolution, ...).
 Ergonomie des logiciels: cohérence-homogénéité
➤Le critère de cohérence concerne l'homogénéité globale de l'interface homme-
machine. L'homogénéité rend le système stable, donc prévisible aux yeux de
l'utilisateur. Ce critère rend l'apprentissage plus rapide car ce qui est appris à un
endroit est également applicable ailleurs. L'objectif est de respecter une logique
cohérente pour: la présentation (graphisme, localisation, vocabulaire, format,
syntaxe, ...), le comportement (réaction du système, messages, retours sonores,...)
Recommandations du critère:
• Utiliser le même schéma d'agencement pour toutes les fenêtres (gabarit d'écran appelé 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, ...).
 Ergonomie des logiciels: adaptabilité

➤L'adaptabilité d'un système (logiciel, application ou site web) caractérise la

capacité de son interface utilisateur à réagir et à s'adapter en fonction du contexte
et selon les besoins et les préférences des 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.
➤Le critère d'adaptabilité est composé de deux sous-critère: flexibilité et prise en
compte de l'expérience utilisateur.
 Ergonomie des logiciels:
adaptabilité/flexibilité
➤Le sous-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.
➤Recommandations de satisfaction de ce sous-critère:
• 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 fenêtres de
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).
 Ergonomie des logiciels: adaptabilité/prise en
compte de l'expérience
>La prise en compte de l'expérience de l'utilisateur concerne les moyens mis en
œuvre pour respecter le niveau d'expérience de l'utilisateur de l'application ou du
site web. 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 leurs profils.
>Recommandations de satisfaction de ce sous-critère:
• 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.
 Ergonomie des logiciels, 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
(logiciel, application web. ...). Il se décompose en deux sous-critères:
actions explicites et contrôle utilisateur.
➤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.
➤ C'est un facteur important d'acceptation du logiciel : les utilisateurs aiment se
sentir au contrôle de la machine.
➤ Si l'utilisateur a toujours le contrôle du dialogue, les réactions du système sont
mieux prévisibles et l'apprentissage devient facile.
 Ergonomie des logiciels, contrôle
explicite/actions explicites
➤Le sous-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. Seules les opérations explicitement demandées par l'utilisateur doivent
être effectuées par le système. Les opérations devraient être effectuées au moment
où on les invoque sauf s'il s'agit d'actions qui sont explicitement différées,
(déclenchement temporisé, synchronisation avec la fin d'un autre processus, etc.).
➤ Recommandations de respect de ce sous-critère:
▪ 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.
 Ergonomie des logiciels, contrôle
explicite/contrôle utilisateur
➤Le sous-critère de contrôle utilisateur concerne le fait que l'utilisateur doit
toujours avoir la main et pouvoir contrôler le déroulement (interrompre, reprendre)
les traitements effectués par l'application. Il vise à rendre l'utilisateur autonome
dans son interaction avec le système en lui donnant la maîtrise du processus.
➤ Recommandations de respect de ce sous-critère:
▪ 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
Ergonomie des logiciels, gestion des 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é de l'application. L'objectif prioritaire est de
minimiser les interruptions dues aux erreurs (maximiser la performance,
l'efficience, la productivité).
• Il est composé de trois sous-critères: protection contre les erreurs, qualité des
messages d'erreur, correction des erreurs.
• ➤ Recommandations du critère:
• 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 (où 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
 Ergonomie des logiciels, gestion des
erreurs/protection
contre les erreurs
➤ 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 tache. 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 du sous-critère:
• Mettre en évidence les commandes non disponibles (griser)
• Fournir la liste des valeurs possibles, des unités, etc
• 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)
Ergonomie des logiciels, gestion des erreurs/
qualité des messages d'erreur
Le sous-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 peut favoriser 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).
➤ Recommandations du sous-critère:
• Placer les messages d'erreur là où l'utilisateur est censé regarder
• Afficher des messages d'erreur explicites (utiliser le langage de l'utilisateur)
• Eviter les textes trop longs (utiliser des liens. des références....)
• Eviter les textes réprobateurs
• Faire en sorte que les textes soient autosuffisants.
Ergonomie des logiciels, gestion des erreurs/
correction des erreurs
➤Le sous-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.
Selon le type et la gravité de l'erreur: 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, corriger automatiquement
l'erreur.
➤ Recommandations du sous-critère:
• Mettre en évidence le champ ou l'élément erroné
• Permettre d'annuler une action ou une série d'actions
Ergonomie des logiciels, 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 de 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 physiologique) intervient assez peu.
➤ Le critère de la charge de travail est composé de deux sous-critères: brièveté et
densité informationnelle.
 Ergonomie des logiciels, charge de travail/brièveté
➤ Le sous-critère de brièveté regroupe l'ensemble des moyens visant à réduire la
charge perceptive et mnésique de l'utilisateur pour les éléments individuels
(champs d'un formulaire, composants visuels, ...) d'entrée ou de sortie de
l'interface utilisateur. Il s'agit donc notamment de limiter autant que possible le
travail de lecture de l'utilisateur (on parle également de concision). Ce sous-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.
➤ Recommandations du sous-critère:
▪ Limiter le nombre d'options dans un menu ou dans une liste déroulante,
▪ Eviter les libellés trop longs,
▪ Réduire le nombre d'actions élémentaires pour atteindre un objectif donné,
▪ Eviter à 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.
 Ergonomie des logiciels, charge de travail/densité
informationnelle
Le sous-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 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 de la densité informationnelle de
l'interface.
Recommandations du sous-critère:
• N'afficher que les informations pertinentes pour effectuer la tâche (boites de dialogue
simples.
représentations graphiques, ...)
▪ Eviter les écrans trop chargés
▪ Eviter les liens trop nombreux dans un texte affiché sur une page web
▪ Eviter les textes trop verbeux (dialogue simple, phrases courtes)
Ergonomie des logiciels, signifiance des codes
• La signifiance des codes et dénominations caractérise l'adéquation entre l'objet.
• l'information ou le comportement présentés en entrée et son référent (l'objet ou
l'action qu'il représente). Il ne suffit pas de transmettre un message à l'utilisateur,
ce dernier doit le comprendre. 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 du critère:
• Eviter les termes techniques (jargon). parler le langage de l'utilisateur
• Reproduire le comportement habituel des objets (par exemple 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).
 Ergonomie des sites web
• L'ergonomie d'un site web est la cherche d'une réponse efficace aux attentes d'un
utilisateur pour qu'il ait une navigation confortable. L'ergonomie d'un site web
repose sur quatre piliers : l'utilité, l'utilisation, le design et la satisfaction.
• Les raisons qui poussent un utilisateur à quitter un site web souvent par
manque de temps ou par agacement
▪ le site est lent à charger
▪on ne comprend pas directement ce que propose le site
▪On se perd sur le site
▪ les textes sont peu ou pas lisibles
▪il y a trop d'information
Ergonomie des sites web, exemples
Quelques exemples d'ergonomie d'un site web
• Slogan: quelques mots simples et clairs pour décrire ce que vous vendez.
• Simplicité: utilisez le blanc de votre page pour mettre en avant votre contenu.
• Lisibilité de la page: hiérarchisez vos éléments pour faciliter l'accès à
l'information.
• Lisibilité des textes: oubliez les grands paragraphes illisibles, mettez en forme
vos textes.
• Contraste: choisissez vos palettes de couleurs et créez du contraste entre vos
éléments.
• Boutons d'action: ne changez pas l'emplacement de vos boutons, donnez leur
juste plus de la forme.
 Ergonomie des sites web, exemples
Quelques exemples d'ergonomie d'un site web
• Navigation: privilégiez un menu simple et en haut de votre page comme
l'utilisateur s'y attend.
• Mobilité: ne manquez aucun utilisateur, pensez à une version mobile.
• Les formulaires: simplifiez au maximum vos formulaires.
• Chargement rapide: rendez le chargement de vos pages le plus rapide possible
sur tous les supports.
• Recherche: ajouter un champ de recherche à votre site pour aider l'utilisateur à
trouver l'info.
• Page 404: personnalisez votre page 404 pour diriger l'utilisateur ailleurs sur votre
site.
 Ergonomie des sites web, les règles
• Ces exemples d'ergonomie découlent de l'observance des règles d'ergonomie suivantes:
• architecture, navigation, organisation visuelle, cohérence, convention, information,
compréhension, assistance, gestion des erreurs, rapidité, liberté, accessibilité, et
satisfaction.
• L'architecture: c'est l'organisation du contenu (pages web) dans le site: quel page
mettre dans quel menu.
• Navigation: définir les règles de déplacement dans le site (lien d'un point vers un
• autre).
• la page d'accueil est très importante pour attirer l'utilisateur. C'est le point d'accès vers
les autres pages.
• la possibilité d'aller vers d'autres pages via des liens hypertexte à partir de la page
d'acceuil la date de dernière mise à jour et l'adresse de l'auteur doivent être dans la page
mettre un lien de navigation vers la page d'acceuil dans chaque page mettre un bandeau
de navigation dans chaque page.
 Ergonomie des sites web, les règles
• Organisation visuelle: C'est le design de la page web.
= parties bien organisées pas trop d'information
• informations complémentaire lors de l'appui de la souris sur un élément
(infobulles, couleur de bouton qui change, etc).
• réduire les éléments d'interaction et de navigation: libellés concis, mots clés.
• format de publicité adapté (pas trop de publicité, éviter les pop-up).
> Cohérence:
• localisations des éléments, format de présentation.
• la même convention que les autres sites du même type.
 Ergonomie des sites web, les règles
et Convention:
> Convention:
• menu horizontal ou vertical à gauche
• pied de pages pour informations annexes (copyright, date, etc).
• résultat de recherche sous forme de liste.
• changement de couleur d'un lien au passage de la souris.
• Information:
• toute information pour informer et prévenir l'internaute
• menus visibles sur toutes les pages
• mettre les logos en haut à gauche sur toutes les pages.
• zone de recherche en haut
 Ergonomie des sites web, les règles
Convention:
• > Convention:
• menu horizontal ou vertical à gauche
• pied de pages pour informations annexes (copyright, date, etc).
• résultat de recherche sous forme de liste.
• changement de couleur d'un lien au passage de la souris.
• Information:
• toute information pour informer et prévenir l'internaute
• menus visibles sur toutes les pages
• mettre les logos en haut à gauche sur toutes les pages.
• zone de recherche en haut
• ➤ Compréhension:
• facilité la compréhension à l'internaute:
• ▪ vocabulaire non technique, symboles adaptés, etc.
 Ergonomie des sites web, les règles
• > Assistance:
• guider et assister l'internaute
• auto-complétion, bulles aide, etc
• adapté le site aux besoins de l'internaute.
• adaptation automatique selon la plateforme utilisée (pc, tablette, smartphone).
• demande de confirmation pour actions à risque
• valider les données saisies.
• Gestion des erreurs:
informer l'internaute en cas d'erreurs.
l'empêcher si possible (limite de saisie par exemple)
= correction facile et guidage
• champs obligatoires. libellés, limiter la saisie de données.
 Ergonomie des sites web, les règles
• ➤ Rapidité:
• optimiser la navigation
• ■ éviter les actions inutiles
• ne pas demander deux fois la même chose
• facilité les interactions.
• Liberté:
• contrôle assuré par l'internaute.
• M éviter l'intrusion abusif
• retourner à l'accueil en un seul clique
• possibilité de bloquer certains éléments (vidéo, pub, etc)
• ne pas décider à la place de l'internaute (modification de valeurs, publicité obligatoire, etc)
• Accessibilité:
• Pré-remplir les champs (dafe)
• rendre le site plus facilement accessible (prévoir tous les outils nécessaires pour l'affichage
• du site (javascript, flash playe pdf reader, etc).