1. No category

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
jacques.bapst@hefr.ch
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
jacques.bapst@hefr.ch
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
jacques.bapst@hefr.ch
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
jacques.bapst@hefr.ch
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
jacques.bapst@hefr.ch
ð
: 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
jacques.bapst@hefr.ch
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