IHM

UI/UX DESIGN

Botozou A. YAMEOGO
Orgnaisation du cours
Astuce
Dans cet exemple, vous
entamez la présentation
avec un élément
inattendu.
Pendant que le public
cherche un chiffre, vous le
surprenez avec la
diapositive suivante.
UI/UX DESIGN
Objectifs
✓ Intégrer l'ergonomie et l’Expérience utilisateur dans les processus de
conception
✓ Appréhender les normes et techniques existantes pour améliorer la qualité des
interfaces, produits et services
✓ Modéliser les utilisateurs et les tâches liées à une application, un produit ou un
service pour adapter son IHM
✓ Réaliser la maquette d’un (e) produit/Solution au moyen d'outils de design
✓ Evaluer la qualité d'une interface selon des critères ergonomiques spécifiques
Compétences
Savoir / Savoir Faire

✓ Communiquer et travailler avec des UX designers

✓ Maîtriser les principes et les étapes de la démarche
Design Thinking
✓ Identifier les éléments incontournables de l'expérience
utilisateur
✓ Intégrer le design thinking dans vos projets
professionnels
✓ Conduire des tests utilisateurs
Deroulement
❑ Définitions, enjeux et principes
❑ Comprendre le Design
❑ Design de l’expérience utilisateur
❑ Outils et Démarche de conception
Definition,
enjeux et Astuce
Dans cet exemple, vous

principes
entamez la présentation
avec un élément
inattendu.
Pendant que le public
cherche un chiffre, vous le
surprenez avec la
diapositive suivante.
 Plan
➔ Définition

➔ enjeux

➔ ergonomie

➔ Ergonomie Web

➔ Idées reçus
Définitions
IHM
Interface Homme – Machine
Interactions Homme - Machine

Mais aussi
Communication Homme – Machine
Dialogue Homme – Machine
IHM - Définitions
Interface Homme - Machine
Ensemble des dispositifs matériels et logiciels permettant à un utilisateur humain
d’interagir avec un système interactif

Interaction Homme - Machine

Ensemble des actions permettant la communication entre un système interactif et
son utilisateur humain
Définitions

▪ L'étude des Interactions 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

10
Domaine pluridisciplinaire

▪ C'est un domaine scientifique qui est au

confluent de nombreuses disciplines qui
concernent :
• L’humain et ses aspect cognitifs
➔ Sciences cognitives, ergonomie physiologique et cognitive,
utilisabilité
➔ Perception, physiologie, psychologie, sociologie, …
➔ Modélisation du comportement, modèles mentaux, …
• 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)
11
Domaine pluridisciplinaire
▪ L’IHM est un domaine fortement pluri- et interdisciplinaire.
Intelligence
Artificielle
Informatique
Programmation
Ergonomie
IHM Utilisabilité
Graphisme
Communication

Didactique
12
Définitions
▪ Au sens large, la notion d'interface représente un dispositif placé à la
limite commune de deux entités/systèmes qui communiquent.

Interface
S1 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 :
• La représentation externe de l'état de la machine (image du système)
• Les organes sensoriels (perception) et moteurs (actions) de l'utilisateur
13
Définitions
▪ Une autre définition de l'interaction homme-machine met
en évidence trois notions importantes

• 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)

14
Importance de l’IHM
▪ Créer une bonne interface utilisateur est une tâche difficile
mais extrêmement importante car c'est souvent sur son
interface utilisateur qu'un système interactif est jugé.

• L'interface utilisateur constitue la vitrine du produit

▪ 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).
15
 Importance de l’IHM
▪ 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
• Ces compétences sont de plus en plus recherchées par les
employeurs et les responsables RH.

16
Les éléments de l’IHM

▪ Dans l'étude des interactions 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.
▪ Une bonne connaissance de ces trois domaines
est donc nécessaire à la réalisation d'une interface
homme-machine réussie.
17
Communication / Dialogue
▪ Concevoir une bonne interface consiste essentiellement à résoudre un
problème de communication.

18
Prise en compte de l’utilisateur
Approche technocentrée
Centrée sur la machine et ses possibilités
l’utilisateur doit s’adapter à la machine
pointe vue du concepteur

Approche anthropocentrée
Centrée sur l’humain et ses besoins
La machine doit d'adapter à l’utilisateur
Point de vue utilisateur
Prise en compte de l’utilisateur
la métaphore du bol de céréales
Adapter l’IHM (1)
Aux caractéristiques de l’utilisateur / les facteurs humains
Différences physiques (âge, handicap)
connaissances et expérience (novice, expert, professionnel)
dans le domaine de la tâche
en informatique, sur le logiciel
caractéristiques psychologiques
visuel/auditif, logique/intuitif, analytique/synthétique …..
Caractéristiques socioculturelles
format de dates 05.10.2000, des nombres décimaux 17,42 / 17.42
sens d’écriture
Signification des icônes, des couleurs
 Adapter l’IHM (1)
Au contexte
Grand public (proposer une prise en main immédiate)
loisirs( rendre le produit attrayant)
industrie ( augmenter la productivité)
système critiques (Assurer un risque zéro)

Caractéristiques de la tâche
Usage occasionnel, régulier, quotidien, tâche répétitive
Sensible aux modifications de l’environnement, risquée, contrainte par le temps …

Contraintes techniques
Plateforme
Mémoire, bande passante
Écran, capteurs, effecteurs
COBOL Réutilisation de code ancien
 EXERCICES DE RAPPEL (Q#01)
Complétez par :

A. Interface Homme Machine

B. Interaction Homme Machine

1 2
L’IHM en tant que {….} Est l’ Ensemble L’IHM en tant que {….} Est l’
des dispositifs matériels et logiciels Ensemble des actions permettant la
permettant à un utilisateur humain communication entre un système
d’interagir avec un système interactif. interactif et son utilisateur humain.

L’étude des {….} s’occupe des moyens et outils permettant à un humain de

contrôler, de communiquer et d'interagir avec un système interactif.

23
EXERCICES DE RAPPEL (Q#02)
L’IHM est connue être un domaine pluri- et interdisciplinaire!
Classez les disciplines suivantes en fonction de l’objet étudié.
ASPECTS COGNITIFS DE L’HUMAIN
-1. Sciences cognitives
-2. Ergonomie
-3. Evénements
-4. Architecture logicielle
-5. Utilisabilité
-6. Perception
-7. Physiologie
-8. Evénements ASPECTS TECHNIQUES DE LA MACHINE
-9. Psychologie
-9. Architecture logicielle
-10. Sociologie
-11. Modèles mentaux
- 24
EXERCICES DE RAPPEL (Q#03)
Déterminez les trois éléments essentiels étudiés par l’IHM.

-1. Homme Les 3 éléments de l’IHM

-2. Ergonomie
-3. Evénements 1. …………………………………..
-4. Machine
-5. Utilisabilité 2. …………………………………..
-6. Physiologie
-7. Evénements 3. …………………………………..
-8. Interface
-9. Architecture logicielle

25
 EXERCICES DE RAPPEL(Q#03)
Complétez par :

A. Technocentrée
B. Anthropocentrée

1 2
Dans l’approche {….} Dans l’approche {….} la
l’utilisateur doit s’adapter à la conception est centrée sur
machine. l’humain et ses besoins.

26
Interface et Interactions

L'interface utilisateur doit mettre en

relation les entrées/sorties de la machine
avec celles de l'humain.

27
 Interface et Interactions
▪ Entrées/sorties de la machine :
• Les périphériques d’entrée
• Les périphériques de sortie
▪ Entrée 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 28
Interface et Interactions

Dans les applications classiques

qu’est ce qui est réellement utilisé?

29
 Interface et Interactions
▪ Entrées/sorties de la machine : Les périphériques d’entrée
• Clavier,
• Dispositif de pointage
➔Souris,
➔Touchpad,
➔écran tactile,
➔Joystick (manettes)
• Son
➔Microphone,
➔Reconnaissance vocale
➔Reconnaissance de son/musique
• Image
➔cameras
30
 Interface et Interactions
▪ Entrées/sorties de la machine : Les périphériques d’entrée
• Capteurs
➔Température, hygromètre, composition de l’air, lumière …

➔Orientation, proximité, mouvement, altitude …

➔ Fréquence cardiaque, niveau sonore, pression, odeurs,

31
Interface et Interractions
▪ Entrées/sorties de la machine : Les périphériques de sortie
• Ecran

• Imprimantes

• Haut parleurs

• Ecouteurs

• Retour de force, retour haptique

32
 Interface et Interactions
▪ Entrées/sorties de la machine : Les périphériques de sortie
• Visualisation 3D

33
L’interface graphiques (GUI)

▪ Dans la majorité des applications classiques, l'interaction

homme-machine fait appel aux périphériques de base que sont
: l'écran, le clavier et la souris (et ses substituts).

▪ 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).
34
L’interface graphiques (GUI)
▪ 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, …
• ...
35
Les styles d’interaction

Les styles d'interaction (ou paradigmes d'interaction)

caractérisent différentes manières et des moyens de
dialoguer entre un humain et une machine.

36
Les styles d’interaction

▪ Quelques styles d’interaction classiques :

• Style conversationnel (langage de commandes,
shell-scripts, …)
• Interaction par formulaires ou tableurs
• Sélection par menus (plus nécessaire de se
souvenir des commandes)
• Navigation hypertextuelle (point-and-click)

37
Les styles d’interaction

▪ Quelques styles d’interaction classiques :

• WIMP (Windows-Icônes-Menu-Pointers: 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
• Interfaces multimodales (qui combinent les modalités)
• ...
38
Interactions WIMP
▪ Les interfaces utilisateur qui intègrent ces éléments graphiques
(composants visuels / Widgets / Controls) sont désignées par l'acronyme
WIMP qui est l'abréviation de :
• Windows : 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)
▪ Une interface de type WIMP peut faire appel à différents styles
d'interaction (même si on parle parfois du style d'interaction WIMP). 39
 Manipulation directe

▪ Parmi les styles d'interaction classiques figure la manipulation

directe qui est utilisée dans un grand nombre d'interfaces.

▪ 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.
40
Manipulation directe
▪ La manipulation directe est particulièrement bien
adaptée aux interfaces avec écrans tactiles
(smartphones, tablettes, bornes interactives, …)

▪ Un slogan
▪ Point and click instead of remember and type

41
Manipulation directe
▪ 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

42
 Manipulation directe

▪ 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

43
Interaction multimodale
▪ Combinaison de moyens d’entrée

• Interaction à deux mains

• « mets-ça ici » : voix + geste

Mets-ça… …Ici

44
Réalité Virtuelle
▪ Simulation informatique d’un environnement dans lequel l’utilisateur a
l’impression d’évoluer

• Immersion dans un monde 3D

• Utilisateur représenté par un avatar

45
Réalité augmentée
▪ Réalité augmentée

• Superposition d’une image (virtuelle) sur le réel

• Le virtuel est projeté sur le réel en temps réel
• Sur écran

• Via des lunettes

• Sur le réel 46
Réalité mixte
▪ Réalité mixte

• Superposition d’une image (virtuelle) sur le réel en temps réel

➔Dispositif de sortie

• Avec laquelle on peut interagir

➔Dispositif d’entrée

47
Réalité mixte

48
Réalité diminuée
▪ Suppression d’un élément sur une image « réelle » en temps réel

49
Interface tangible
▪ Association d’objet réels et numériques
• action directement sur les objets
• Interaction plus simple et intuitive

50
Systèmes interactifs
▪ 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..
▪ 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, …)
▪ Certains systèmes plus spécifiques
• Robotique, informatique vestimentaire (wearable)
• Réalité virtuelle et Réalité augmentée
• Interfaces multimodales
• Intelligence artificielle, machine learning, …
51
Systèmes interactifs
▪ 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 a la
restitution des sorties du système.
• Le noyau fonctionnel qui contient tous le reste et notamment les
composants qui effectuent des traitements, des calculs, qui gèrent
les informations et le stockage des données, communique avec
d’autres systèmes, etc

52
REVISION NOTIONS D’IHM

https://qruiz.net/Q/?CBmQeG 53
➔ Notion D’ergonomie
 Ergonomie - Définition
L’ERGONOMIE, POUR CONSIDÉRER L’HOMME DANS LE RAPPORT HOMME-MACHINE

L’ergonomie est une discipline, une démarche, un point de vue que

l’on peut appliquer à tout ce qui nous entoure. Au sens le plus
général, elle concerne les outils utilisés par l’être humain.

Définition d’Alain Wisner

“ C’est l’ensemble des connaissances scientifiques relatives à l’Homme et

nécessaires pour concevoir des outils, des machines et des dispositifs qui puissent
être utilisés avec le maximum de confort, de sécurité et d’efficacité. ”
Alain Wisner
IHM/ergonomie, domaine pluridisciplinaire
Ergonomie VS design
Design : ??
Ergonomie : constant (aux évolutions de la science près)
Ergonomie
Généalogie
L’ergonomie web est la petite fille de l’ergonomie de façon générale.
Objectifs communs
Outils spécifiques
Ergonomie

Un produit ergonomique est un produit utile et utilisable

Le critères d’utilité et
d’utilisabilité doivent être
réunis pour obtenir une
interface ergonomique
Ergonomie
Notion d’utilité
La notion d’utilité concerne ce que votre produit ou votre service
permet de faire

autrement dit, ce à quoi il sert pour l’utilisateur.

Pour en juger, vous devez donc nécessairement avoir une idée des
besoins et envies de vos visiteurs.
Ergonomie

Notion d’utilisabilité

«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é. »
La norme ISO 9241
Ergonomie
Notion d’utilisabilité

4 notions importantes :
- utilisateurs
- efficacité,
- Efficience
- satisfaction
Ergonomie
L’utilisateur
l’on travaille à destination d’un utilisateur spécifique, qui a des
buts également spécifiques et qui évolue dans un contexte bien
précis.

Celui-ci est principalement composé de l’environnement

technologique, social, d’ambiance dans lequel se trouve
l’internaute

le but doit donc être de concevoir une interface au service de

l’internaute et de la réalisation de ses tâches, tout en tenant
compte du contexte d’utilisation
Ergonomie
Efficacité
Le premier objectif d’une interface utilisable, c’est
l’efficacité.

Cela signifie qu’un utilisateur doit réussir à faire ce qu’il

veut faire.

L’efficacité implique notamment des notions d’aisance

d’utilisation et de facilité d’apprentissage
Ergonomie
Efficience
pouvoir le faire rapidement et avec le
moins d’erreurs possible.

Cette dimension est critique sur les interfaces spécialisées,

les applications métier, les outils et, plus largement, sur
celles où les nécessités de conserver des clients
existants sont fortes
Ergonomie
satisfaction
votre objectif doit être de mettre votre produit ou votre solution au
service de ses utilisateurs

Le Web est très spécifique par rapport à l’ergonomie des interfaces

homme-machine, principalement sur ce critère de satisfaction
utilisateur.

C’est en effet un support multifonction, qui permet, certes, la réalisation

de certaines tâches mais qui intègre également de manière très
marquée des composantes esthétiques, marketing et, plus largement,
de plaisir.
Ergonomie

une boîte à
un arrosoir
mouchoirs
radiocommandée
Idées reçues sur l ’ergonomie
C’est facile
Difficile, long et coûteux

C’est une opération esthétique de l’écran

Nécessite une approche précoce, méthodique, itérative, expérimentale

C’est seulement une affaire de goût, de bon sens, d’intuition

Des règles à respecter, qui ont des fondements scientifiques

Il existe une méthode miracle

Pas de solution clé en main
Des points de repères théoriques et expérimentaux, des savoir-faire, des questionnements
Des équilibres à trouver, des compromis à faire