Cours 3

Interfaces et interactions
Humain-Machine
avec des maquettes
INFO
Stéphanie Jean-Daubias
[Link]-Daubias@[Link]
[Link]
L3

Dernière mise à jour

02/02/2024 04:56
Déroulement
• Cours Organisation de l’UE Introduction
• Cours Introduction l’IHM
• Cours Conception
VOUS ÊTES
• TP ICI
en équipes
Conception • Vidéo en équipes
• Cours IHM maquettes
TP maquettage

Tests • Cours Théories générales pour l’ergo

• Cours Tests utilisateurs utilisateurs • TP évaluation ergo théories avec JADE
• TP test utilisateurs • Cours Éléments d’IHM – guides de style
• TP rapport d’évaluation ergonomique
• Cours Critères d’évaluation généraux
• TP évaluation ergo critères avec JADE
Ergonomie • Cours Critères d’évaluation Web
• TP noté rapport d’évaluation ergo Web
• Cours Critères d’évaluation mobile
• TP évaluation ergo mobile
• TP évaluation complète JADE Préparation • Cours Critères d’évaluation Handicap
• TP vidéo pédagogique de l’examen • TP maquettage

Examen
+ vraie vie

—2
62
➢ Introduction
 Interfaces
 Interactions

—3
62
Rappels
 Méthodes de conception IHM
 centrées utilisateurs
(basées sur l’analyse du comportement des utilisateurs)
intérêt des
 prototypées maquettes
 intégrant une évaluation précoce
 itératives (amélioration progressive de l’IHM)
➢ Efficacité des maquettes
 3 phases de maquettage pour lever la plupart des problèmes

—4
62
Maquettes
 Des maquettes, pour quoi ?
 conception, choix de conception
 preuve de faisabilité
 moyen de communication
 Des maquettes, pour qui ?
 clients (commanditaire)
 équipe de conception
 utilisateurs (testeurs, finaux)
 support de communication commerciale
 Des maquettes, quand ?
 le plus tôt possible
 très tôt dans le processus de conception
 jusqu’aux premières versions du système
—5
62
✓ Introduction
➢ Interfaces
 écrans
 éléments d’interfaces graphiques
 maquettes
 Interactions

—6
62
Écrans
 Différents types
 Différentes tailles

—7
62
Écrans et maquettage EXEM
PLE

 En largeur
 vue d’ensemble de l’application
 statique
 En profondeur
 certaines fonctionnalités détaillées
 parcours d’un utilisateur dans l’application
 dynamique (fonctionnel ou simulé)

—8
62
✓ Introduction
➢ Interfaces
 écrans
 éléments d’interfaces graphiques
 maquettes
 Interactions

—9
62
(Écran) – Fenêtre – Icône – Menu – Curseur – Bouton – Liste – Groupe – Autres – (Maquette) – (Prog évé) – (Interact)

Interfaces graphiques
 Composant/élément d’interface graphique
 widget : windows gadget
 élément visuel d'une interface graphique
 bouton, listes, menus, barre de défilement…
 Paradigme WIMP
 Windows
 Icons
 Menus
 Pointers
 Post-WIMP
 mobile, tactile
 interactions innovantes
 Importance d’un vocabulaire précis
 communication du projet
 vocabulaire concepteur vs. vocabulaire utilisateur
10
—
LifIHM : SJD – LIRIS – UCBL 62
 (Écran) – Fenêtre – Icône – Menu – Curseur – Bouton – Liste – Groupe – Autres – (Maquette) – (Prog évé) – (Interact)

WIMP - Windows, Icons, Menus, Pointers

Fenêtres : vocabulaire
barre de titre
barre de menu

barres d’outils
/ruban

fenêtre

barre d’état

11
—
LifIHM : SJD – LIRIS – UCBL 62
(Écran) – Fenêtre – Icône – Menu – Curseur – Bouton – Liste – Groupe – Autres – (Maquette) – (Prog évé) – (Interact)

WIMP - Multifenêtrage
 Fenêtre inactive/ fenêtre active (avec focus)
 Multifenêtrage avec superposition fenêtre inactive

 à éviter : inconvénients fenêtre active

 informations masquées |
 temps d’accès aux fenêtres masquées
 via la barre des tâches

 Multifenêtrage sans superposition

 mosaïque

12
—
LifIHM : SJD – LIRIS – UCBL 62
(Écran) – Fenêtre – Icône – Menu – Curseur – Bouton – Liste – Groupe – Autres – (Maquette) – (Prog évé) – (Interact)

WIMP - Types de fenêtres

 Fenêtres d’applications  Fenêtres de documents
 MDI : Multiple Document Interface  1 instance de l’application
 1 unique instance de l’application par document
 fenêtre principale : espace de travail  adapté au multi écran
 fenêtres filles : les documents

13
—
LifIHM : SJD – LIRIS – UCBL 62
(Écran) – Fenêtre – Icône – Menu – Curseur – Bouton – Liste – Groupe – Autres – (Maquette) – (Prog évé) – (Interact)

WIMP - Fenêtres utilitaires

 Fenêtre flottante
 palette d’outils
 barres d’outils flottantes

 Fenêtre jaillissante (pop-up)

à l’initiative du système
 bulle d’aide / info-bulle

 informations contextuelles

 messages (différents types)

 question, information, avertissement, erreur bloquante
 indication de progression 14
LifIHM : SJD – LIRIS – UCBL —
62
(Écran) – Fenêtre – Icône – Menu – Curseur – Bouton – Liste – Groupe – Autres – (Maquette) – (Prog évé) – (Interact)

WIMP - Fenêtres de dialogue

 Fenêtre/boîte de dialogue (lié à une action de l’utilisateur)
 pour l’interaction entre le système et l’utilisateur
 séparation (temps et lieu) entre spécification
et exécution de la commande
 vocabulaire : fenêtre secondaire, surgissante, pop-up

fenêtre appelante

fenêtre secondaire

15
—
LifIHM : SJD – LIRIS – UCBL 62
(Écran) – Fenêtre – Icône – Menu – Curseur – Bouton – Liste – Groupe – Autres – (Maquette) – (Prog évé) – (Interact)

WIMP - Windows, Icons, Menus, Pointers

 Icônes : symbole graphique interactif
 fenêtres "iconisées"
 objets, parfois associés à un état
 corbeille, disques
 applications
 documents, dossiers
 actions
 enregistrer , lancer la reconnaissance vocale
 Utilisation
 pour donner un accès direct à des commandes fréquentes
 (associées à un libellé)
 intégrées à un bouton, un menu

16
—
LifIHM : SJD – LIRIS – UCBL 62
(Écran) – Fenêtre – Icône – Menu – Curseur – Bouton – Liste – Groupe – Autres – (Maquette) – (Prog évé) – (Interact)

WIMP - Windows, Icons, Menus, Pointers

 Menu
 ensemble d’items
 liste de commandes déclenchées par un clic
 mise en évidence (surbrillance) de l’option choisie
 Différents types de menus
 déroulant
 à partir d’un point d’entrée
 contextuel (pop-up)
 à partir de la position du curseur
 éventuellement circulaires (pie menu)

17
—
LifIHM : SJD – LIRIS – UCBL 62
(Écran) – Fenêtre – Icône – Menu – Curseur – Bouton – Liste – Groupe – Autres – (Maquette) – (Prog évé) – (Interact)

WIMP - Windows, Icons, Menus, Pointers

 Caractéristiques
 hiérarchique
 indiqué par 
 pour regrouper des sous-items

 détachable (tear-off)
 contenant généralement une palette
qui se transforme en fenêtre utilitaire

18
—
LifIHM : SJD – LIRIS – UCBL 62
(Écran) – Fenêtre – Icône – Menu – Curseur – Bouton – Liste – Groupe – Autres – (Maquette) – (Prog évé) – (Interact)

WIMP - Windows, Icons, Menus, Pointers

 Dispositifs de pointage (souris, trackball, joysticks…)
 Curseur / pointeur
 indicateur visuel de la position à l’écran, dans le texte
 Différents types
 positionnement dans l’écran
 positionnement dans un texte
 attente
 lien hypertexte, objet cliquable
 déplacement
 redimensionnement
 …

19
—
LifIHM : SJD – LIRIS – UCBL 62
(Écran) – Fenêtre – Icône – Menu – Curseur – Bouton – Liste – Groupe – Autres – (Maquette) – (Prog évé) – (Interact)

Boutons pour exécuter une action

 Bouton poussoir
 pour exécuter une action
 bouton d’action, boutons graphiques d’une barre d'outils
 effet 3D
 différents états
 1 à 2 positions stables
 relâché
 dans certains cas enfoncé : palette affichée

20
—
LifIHM : SJD – LIRIS – UCBL 62
(Écran) – Fenêtre – Icône – Menu – Curseur – Bouton – Liste – Groupe – Autres – (Maquette) – (Prog évé) – (Interact)

Boutons pour faire un choix

 Bouton radio
 pour faire 1 choix parmi n alternatives exclusives
 cocher un bouton enlève le choix antérieur
 n positions possibles dans un groupe de n boutons radio

 Interrupteur à bascule / à glissière

 pour faire 1 choix parmi 2 alternatives exclusives
 2 positions stables : activé / non activé

 Case à cocher
 pour sélectionner n options non exclusives
 chaque case est une bascule à n positions
 n=2 : cochée / non cochée
 n=3 : cochée / non cochée / partiellement coché

21
—
LifIHM : SJD – LIRIS – UCBL 62
(Écran) – Fenêtre – Icône – Menu – Curseur – Bouton – Liste – Groupe – Autres – (Maquette) – (Prog évé) – (Interact)

Listes pour regrouper des items

 Liste
 contenu ordonné affiché en permanence
 éventuellement items masqués + barre de défilement
 sélection simple ou multiple (ctrl/shift/cases à cocher)
 Liste déroulante
 valeur choisie toujours visible (un seul élément)
 contenu exhaustif visible après un clic sur la flèche
 valeur éventuellement éditable (sélection ou saisie directe)
 Liste arborescente
 contenu hiérarchisé
 choix par l’utilisateur du contenu affiché ( déployé)

22
—
LifIHM : SJD – LIRIS – UCBL 62
(Écran) – Fenêtre – Icône – Menu – Curseur – Bouton – Liste – Groupe – Autres – (Maquette) – (Prog évé) – (Interact)

Composants pour organiser la fenêtre

 Boîte de regroupement / conteneurs
 pour regrouper des composants
 classeur à onglets
 des informations structurées en pages
 étiquetées dans un onglet
 Barre de séparation
 pour matérialiser des (sous-)groupes
 Volets
 redimensionnables (et déplaçables)
 pour laisser l’utilisateur organiser l’écran

23
—
LifIHM : SJD – LIRIS – UCBL 62
(Écran) – Fenêtre – Icône – Menu – Curseur – Bouton – Liste – Groupe – Autres – (Maquette) – (Prog évé) – (Interact)

Zones de texte
 Zones de saisie mono-ligne
 texte sur une seule ligne
 correspondant à 1 unité d’information
 Zones de saisie multi-lignes
 (redimensionnable)
 (barre de défilement)
 Zones de texte non éditable
 dont étiquettes

24
—
LifIHM : SJD – LIRIS – UCBL 62
(Écran) – Fenêtre – Icône – Menu – Curseur – Bouton – Liste – Groupe – Autres – (Maquette) – (Prog évé) – (Interact)

Molettes et sélecteurs
 Molette d’incrément
 pour ajuster une valeur initiale (précisément)
 par incrément ou décrément : min / max / pas
 (éventuellement par saisie)
 Sélecteurs
 pour sélectionner une valeur (peu précisément)
 (éventuellement avec affichage de la valeur)
 2 types
 sélecteur rotatif : potentiomètre
 sélecteur rectiligne : glissière

25
—
LifIHM : SJD – LIRIS – UCBL 62
(Écran) – Fenêtre – Icône – Menu – Curseur – Bouton – Liste – Groupe – Autres – (Maquette) – (Prog évé) – (Interact)

Autres composants
 Lien hypertexte
 texte cliquable
 généralement associé à une URI
 liens visités affichés différemment
 Tableau/grille
 organisation visuelle à 2 dimensions
 pleinement lisible
 pour structurer des données
 lignes, colonnes, en-têtes
 Indicateur de progression
 numérique / graphique / textuel
 Sélecteur de date
 organisation visuelle à 2 dimensions
 attention au cas de la naissance 26
—
LifIHM : SJD – LIRIS – UCBL 62
(Écran) – Fenêtre – Icône – Menu – Curseur – Bouton – Liste – Groupe – Autres – (Maquette) – (Prog évé) – (Interact)

Intitulés des composants

 Étiquette
 texte
 associé à certains composants
 menu, item de menu, bouton, etc.
 pour décrire l’IHM (titres notamment)

27
—
LifIHM : SJD – LIRIS – UCBL 62
✓ Introduction
➢ Interfaces
 écrans
 éléments d’interfaces graphiques
 maquettes
 Interactions

28
—
62
 Différents types de maquettes
 Maquette papier + post-it + dessin à la main
 organisation de l’écran : compréhension du besoin, facilement modifiable
 mais : pas à l’échelle, peu évolutive, peu réaliste

 Maquette « fil de fer » (wireframe / croquis) : papier ou via outil

 + réaliste : blocs de contenus, intitulés, hiérarchie, meilleures proportions
 mais : noir et blanc, design exclu

 Maquette graphique (mock-up)

 + abouti : début de design
 mais : statique
 Prototype
 interactif, testable

basse haute
définition définition

maquette maquette maquette prototype appli finale

29
papier fil de fer graphique compétences en développement —
62
Outils de maquettage
 Papier + post-it
 Outils de diaporama
 PowerPoint…
 Outils de maquettage
 Balsamiq, Mocking Bird, [Link]/Diagrams (More shapes>Software),
Figma, Pencil, Alva, Sketch, Adobe XD…
 Quant-UX (maquettage + tests utilisateurs)
➢ pour se concentrer sur les aspects conception / ergonomie
sans être déconcentré par les aspects techniques, développement
 Outils de développement classiques
 cf. page de l’UE
 Complément : programmation pour l'IHM

30
—
62
Choix du type d’interface
 Croquis
 Mobile Android
 Mobile iPhone

 Web / multiplateforme
 taille
 proportion de l’écran

31
—
62
Choix des composants
 D’un type donné, éventuellement complété par d’autres

32
—
62
Propriétés des composants
 Pour spécifier les caractéristiques des composants
 type, nom, contenu
 aspect (dimensions,
mise en forme,
couleurs…)
 position, alignements
 …

33
—
62
 Dans Quant-UX…
ajout d’écrans, gestion de la modes configuration
de composants maquette d’affichage des composants

34
—
62
✓ Introduction
✓ Interfaces
➢ Interactions
 programmation événementielle
 événements
 types et tâches d’interaction
 maquettes interactives
 vidéo de démonstration

35
—
62
Types de programmation
Dialogues directifs
 Principe
 enchaînements entre les différents traitements préfixés
Traitement 1 Nom du client ?
> Dupont

Adresse ?
> 3 rue des platanes
Traitement 2
Dupont, 3 rue des platanes
Confirmer ? (o/n)
> s
Traitement 3 Veuillez entrer 'o' ou 'n', svp.
>

// Traitement 1
Afficher "Nom du client ? :"
Attendre Nom
Effectuer traitement sur Nom
...
36
—
62
 Types de programmation
Dialogues réactifs
 Principe
 possibilité d’embranchements selon les réponses de l’utilisateur

Proposer choix Proposer choix

Répéter
Attendre Choix
Si Choix=Choix 1 Alors
Attendre choix Exécuter Traitement 1
Si Choix=Choix 2 Alors
choix 1 choix 2 Exécuter Traitement 2
Fin Répéter
Traitement 1 Traitement 2

37
—
62
Types de programmation
Programmation événementielle
 Principe
 le système agit selon l’arrivée des événements
Répéter
Effectuer tâches système
Entretenir curseur
Si événement alors
Ok Annuler
Récupérer événement suivant
Distribuer événement
Fin Répéter
FonctionSaisie
Distribuer événement =
FonctionOk Si événement 1 alors traitement 1
Si événement 2 alors traitement 2
FonctionAnnuler ...

38
—
62
Programmation événementielle
File d’événements
 Principe
 gère l’arrivée et l’exécution des événements
 FIFO : first in first out
événements événements
systèmes utilisateur

Ok Annuler

39
—
62
✓ Introduction
✓ Interfaces
➢ Interactions
 programmation événementielle
 événements
 types et tâches d’interaction
 maquettes interactives
 vidéo de démonstration

40
—
62
Événements
 Déclenchement
 par l’utilisateur
 via souris, tactile
 double clic, clic droit, clic
(Click = MouseDown
+ MouseUp)
 déplacements
(MouseMove, Enter, Exit)
 via clavier
 appui d’une touche (KeyPress = KeyDown + KeyUp), Enter
 saisie dans une zone de texte (Change)

 par un timer / périodiquement

 splash screen
 rafraîchissement de l’écran
 par le système
 dessin (composant devient visible)
 activation (arrivée du focus sur une fenêtre)
 requête réseau, insertion d’un disque amovible… 41
—
62
✓ Introduction
✓ Interfaces
➢ Interactions
 programmation événementielle
 événements
 types et tâches d’interaction
 maquettes interactives
 vidéo de démonstration

42
—
62
Les types d’interaction

 Quel type d’interaction pour quelle commande ?

43
—
62
Association type d’interaction / usages

 Langage (semi)naturel
 dictée de SMS, de comptes-rendus médicaux
 commandes simples : Quelle température fait-il ?, Morceau suivant
 Langage de commande (expert)
 configuration, programmation
 Menus
 besoin de visualiser les commandes potentielles
 Formulaires
 interrogation de l’utilisateur par le système,
saisie d’informations nombreuses
 Requêtes
 interrogation du système par l’utilisateur
 Manipulation directe, interaction tactile (grand public)
 graphique 44
—
62
Les tâches de l’interaction graphique

 Quels composants graphiques pour quelle tâche ?

45
—
62
Tâche de déclenchement

 Boutons
 attention à la surcharge de l’écran
 Menus
 si un nombre suffisant de fonctionnalités
 Glisser - déposer
 glisser - lâcher, glisser - déplacer, drag and drop
 l’action dépend de la source et de la destination
 glisser - déposer un fichier sur un même disque : déplacement
 glisser - déposer un fichier sur des disques différents : copie
➢ pas grand public

46
—
62
Tâche de saisie

 Saisie de texte
 zone de saisie
 + clavier (virtuel)
 Saisie de quantités / valeurs numériques
 zone de saisie
 sélecteur ou molette
 + souris/clavier
 Saisie de positions, de tracés
 pointage

47
—
62
Tâche de sélection

 Choix d’un élément dans un ensemble

 boutons radio
 interrupteurs
 liste déroulante, liste avec sélection simple
 Choix de plusieurs éléments dans un ensemble
 cases à cocher
 liste avec sélection multiple (pas grand public)
 par ajout/retrait (ctrl)
 par intervalle (shift)
 liste double (pas grand public)
 Choix d’un fichier
+

48
—
62
Tâche de défilement

 Barre de défilement (ascenseur)

 verticale ou/et horizontale
 défilement manuel
 1 unité d’information, 1 page écran, en % du document
 défilement automatique
 si modification de la quantité d’information
 Solutions alternatives
 interface adaptable (responsive)
 version design

49
—
62
Tâche de spécification

 Spécification d’ordre  Spécification d’arguments

 listes modifiables  boîtes de dialogue

 boîtes de propriétés
 aperçu des modifications sur l’objet

50
—
62
Tâche de transformation

 Poignées de manipulation
 laisser la possibilité de redimensionner
 fenêtres
 dessins, images
 redimensionnement
 suivant un axe
 horizontal
 vertical
 suivant les deux axes à la fois

 proportionnellement : MAJ (pas grand public)

 concentriquement : CTRL (pas grand public)

51
—
62
✓ Introduction
✓ Interfaces
 écrans
 éléments d’interfaces graphiques
 maquettes
➢ Interactions
 programmation événementielle
 événements
 éléments d’interaction
 maquettes interactives
 vidéo de démonstration

52
—
62
Maquettes interactives
Principe
 Pour simuler les interactions entre l’utilisateur et le système
avec plus de réalisme
 principe
 simuler les interactions par empilement d’écrans
 c’est le royaume de l’illusion pour remplacer la programmation

53
—
62
Maquettes interactives
Lier des écrans
 Principe
 lien entre un composant et un autre écran
 un clic sur le bouton Valider
 provoque l’affichage de l’écran de bilan

54
—
62
Maquettes interactives
Dérouler un menu
 Principe
 lien entre l’écran initial où le menu est replié
 et un écran (partiel) où le menu est déroulé

55
—
62
Maquettes interactives
Lier des données
 Principe
 définition de variables
 associées à plusieurs composants
 une entrée de valeur dans un composant sera répercutée dans l’autre
composant lors de l’exécution de la maquette

56
—
62
Maquettes interactives
Embranchements
 Principe
 lien entre un composant et deux autres écrans
 selon une condition
 un clic sur le bouton Valider provoque l’affichage de l’écran de bilan
 version geek
avec le code promo 42
 version normale
dans les autres cas

57
—
62
Maquettes interactives
Exemple

58
—
62
✓ Introduction
✓ Interfaces
 écrans
 éléments d’interfaces graphiques
 maquettes
➢ Interactions
 programmation événementielle
 événements
 éléments d’interaction
 maquettes interactives
 vidéo de démonstration

59
—
62
Vidéo de démonstration d’une maquette
 Scène d’introduction : mise en contexte
 (écran de présentation)
 pour comprendre qui sont les utilisateurs
 éventuellement  rôles
 pour comprendre le besoin/le problème
 Proposition de la solution
 votre appli est introduite comme une solution à ce problème
 Présentation de l’appli (maquette interactive commentée)
 sur fond pertinent par rapport au scénario
 capture vidéo de la maquette ( 5 écrans par rôle)
 avec explication du fonctionnement de l’appli
pour les  rôles
 Retour à la situation initiale
 comprendre que l’appli a résolu/va résoudre le problème
 Conclusion
 phrase de conclusion sur l’appli ou la résolution du problème
60
 crédits (PAS de n° d’étudiants, noms PAS obligatoires) —
62
 Organisation LifIHM : les premiers TP
Groupes, équipes, binômes

vendredi vendredi vendredi

groupe
V42
TP1 TP2 TP3

lundi lundi

binôme
équipe
E01 binôme

61
—
62
✓ Introduction
✓ Interfaces
 écrans
 éléments d’interfaces graphiques
 maquettes
✓ Interactions
 programmation événementielle
 événements
 éléments d’interaction
 maquettes interactives
 vidéo de démonstration
➢ À vous de jouer !
62
—
62
 TP2 maquettage
 Objectif
 créer une maquette correspondant à la solution imaginée précédemment
 Connaissances/compétences
 concevoir une maquette
 utiliser un outil de maquettage
 créer l’interface (écrans, composants, propriétés)
 simuler les interactions (enchaînement des écrans, lien entre données, OR)
 respecter des contraintes données (respecter le délai et la forme du rendu)
 Évaluation
 qualité de la maquette
 quantité d’écrans
 présence des différents éléments et interactions demandés

63
—
62