modèle de tâche - polytech nice sophia:...
TRANSCRIPT
Modèle de tâche
Conception et évaluation des interfaces Homme-Machine
Master 2 IFI – EPU SI 5
Philippe Renevier-Gonin
2/121
Démarche centrée Utilisateur
Analyse des besoins
Conception
Conception logicielle
Codage
Tests unitaires
Tests d’intégration
Tests utilisateur
Evaluation
ergonomique
Note : le cycle de vie d’une interface est ici représenté en V de manière analytique…
3/121
Démarche centrée utilisateur
• Conception centrée utilisateur
– Modèle utilisateur
– Modèle de tâche
– Modèle de l’interaction
– Concept du domaine
• Évaluation centrée utilisateur
4/121
Terminologie
• Tâche
– but et procédure
• Procédure
– ensemble de sous-tâches liées
• Tâche élémentaire
– décomposable en actions physiques (et informatiques)
• Action physique
– déclanchement d’une entrée pour le système
5/121
Théorie de l'Action
• D. Norman “User centered design”, 1986
– L'utilisateur modélise le monde en termes de
variables psychologiques
– Le monde réel se manifeste en termes de variables
physiques
ButsSystèmephysique
Distanced’évaluation
Distanced’exécution
6/121
Théorie de l'Action
Intention Évaluation
Spécificationd’actions
Signification de
l’expression
d’entré
Exécution
Forme de
l’expression
d’entré
Interprétation
Signification de
l’expression
de sortie
Perception
Forme de
l’expression
de sortie
Buts
Dis
tance d
’Exécution
Dis
tance d
’Evalu
atio
n
Dis
tance A
rtic
ula
toire
en E
ntr
ée
Dis
tance S
ém
antique
en E
ntr
ée
Dis
tance S
ém
antiq
ue
en E
ntré
e
Dis
tance A
rticula
toire
en S
ortie
7/121
Démarche
• Analyser l’activité des utilisateurs
– Nominale
– Exceptionnelle
• Identifier les concepts (variables psychologiques)
• Énumérer les opérations (tâches)
• Organiser ces opérations (hiérarchie de tâches)
• Décorer les tâches
• Évaluer la décomposition
8/121
Décoration d’une tâche
• Concepts du domaine
• Pré-conditions
• Post-conditions
• Fréquence
• Complexité
• Criticité
• Contraintes temporelles
• etc. (selon domaine)
9/121
Modèle de tâche en résumé
• Requiert d’appréhender les utilisateurs
• Nécessite d’appréhender les concepts du
domaine
– Les notions nécessaires à l’interaction
– Les objets manipulés
• détermine les actions (les tâches) à réaliser
10/121
HTA : Hierarchical Task Analysis
séquence
suite non
ordonnée
boucle
alternative
alternative non
stricte
Une tâche
11/121
Séquence : exemple des crêpes
• Autre exemple : installer un logiciel (exécuter
l’installation, choisir l’emplacement, les options, lancer
l’installation proprement dite)
Manger des
crêpes
Acheter les
ingrédients
Préparer la
pâte
Faire cuire la
pâte
Déguster les
crêpes
si la pâte a
reposé 2h
12/121
Suite non ordonnée : exemple des crêpes
Acheter les
ingrédients
Acheter du
lait (1 litre)
Acheter des
œufs (6)
Acheter de la
farine (500 g)
Acheter du
sucre vanillé
Acheter du
sel
Acheter de
l’huile
• Autre exemple : préparer les transparents d’une
présentation (images, films, transparents)
Optionnelle : si
crêpes sucrées
13/121
Alternative : exemple des crêpes
• Autre exemple : choisir une imprimante dans une boite
de dialogue d’impression
Battre avec un
fouet
Mélanger la
farine dans le
lait
Utiliser un
batteur
électrique
Tamiser la
farine
14/121
Alternative non stricte : exemple des crêpes
Faire cuire la pâte
(une crêpe)
Faire sauter
les crêpes
Retourner les
crêpes avec
une spatule
Verser une louche
de pâte dans la
poêle chaude
• Autres exemple : utiliser un clavier dans un champs
texte ou une souris (menu déroulant, boutons plus et
moins) pour régler une valeur
jusqu’au changement
complet de texture
Faire cuire
une face
Faire cuire
l’autre face
15/121
Boucle : exemple des crêpes
• Autre exemple : toutes tâches répétitives ou itératives
comme la navigation sur internet, l’édition de
transparents, etc.
Faire cuire la pâte
(une crêpe)
tant qu’il reste
de la pâte
16/121
Manger des crêpes
Mélanger les œufs,
2 cuillères à soupe
d’huile et le sel
Mélanger la farine
tanisée dans le lait
Verser les œufs
dans le mélange
farine-lait
Sucrer avec deux
sachets de sucre
vanillé
Manger des
crêpes
Acheter les
ingrédients
Préparer la
pâte
Faire cuire la
pâte
Déguster les
crêpes
si la pâte a
reposé 2h
Faire
sauter les
crêpes
Retourner
les crêpes
avec une
spatule
Verser une
louche de pâte
dans la poêle
chaude
changement
de texture
Faire
cuire
une
face
Faire
cuire
l’autre
face
Battre
avec un
fouet
Utiliser un
batteur
électrique
Tamiser la
farine
Ach
eter du
lait (1 litre)
Ach
eter des
œufs (6
)
Ach
eter de la
farine (5
00 g
)
Ach
eter du
sucre v
anillé
Ach
eter du
sel
Ach
eter de
l’huile
Optionnelle : si
crêpes sucrées
17/121
CTT, un autre outil
• Découpage hierarchique en tâche sous-tâche
• Tâche Système, Utilisateur, Interaction, Abstraite
• Liaison entre les tâches
18/121
CTT, aperçu
Un environnement : http://giove.cnuce.cnr.it/ctte.html
19/121
UAN : User Action Notation
• User Action Notation [Hartson & Hix]
• Outil applicable à différents niveaux
– Décomposition de tâches en sous-tâches et relations
temporelles
– Décomposition de tâches élémentaires
20/121
UAN (niveau tâche)
21/121
Analyse des besoins…
• Comment déterminer les tâches ?
– Établir/consulter le cahier des charges
• Comment communiquer entre
– Psychologues-ergonomes (analyse de l’activité,
évaluation ergonomique)
– Graphistes (conception de l’interface)
– Informaticien (développement, tests)
– Utilisateurs
22/121
L’approche par scénario
• En IHM (descriptions détaillées du contexte
d'utilisation pour la conception) [Carroll 1995]
• En ingénierie logicielle ("cas d'utilisation" et
description narrative d'usage) [Jacobson 1995].
• Pour les systèmes d'information (configuration
sociale et environnementale d'un système et
impact [Kyng 1995] )
23/121
Rôles des scénarios
• Simplicité et accessibilité aux acteurs [Carroll 1995]
• Langage commun pour tous les participants facilitant la coopération [Kyng 1997]
• Catalyseur de la participation des acteurs, de leur créativité et des implications dans choix de conception [Ackoff 1979].
• Concrétisation du produit et flexibilité. Intégration de plusieurs niveaux d’abstraction : d’abstrait à concret [Carroll 2000].
24/121
Démarche de conception
Analyse des besoins
Conception
Conception
logicielle
Codage
Tests Unitaires
Tests d’intégration
Tests UtilisateursEvaluation
ergonomique
Analyse de l’activité Scénario
d’activité
Analyse de la tâche
réelle
Scénario de la
tâche réelle
conception
25/121
Exemples de format d’un scénario
• Représentation narrative (illustrée)
• Story-board
• Graphe en ligne (découpage en fonction des
tâches)
• Graphe de déplacement (accompagné de
description)
• Animation
26/121
Diffusion d’information contextuelle, géolocalisation, saisie d’information,
évaluation collective, diffusion de connaissances établies antérieurement
Séquence K.
11:04:30 C. trouve une pièce de métal (un culot de forge), elle l’apporte à V. qui arrête
immédiatement son activité, ils reviennent à l’endroit où était C. Elle tente de retrouver l’endroit
exact où le culot de forge a été trouvé, mais la localisation reste approximative. Tout le monde
se regroupe autour de cette découverte. V. recherchait ce type d’élément pour confirmer son
hypothèse de la présence de forge dans cette zone.
11:06:45 l’élément est localisé sur la carte et analyser par V. pendant que M. et C. recherche
d’autre indice sur la zone de découverte. Une première analyse de la position de l’élément
oriente la recherche d’autres indices près de cet élément.
V., C. & M.
Fond de carte
Découverte d’un élément hautement significatif avec perte partielle de
localisation
Thèmes
Acteur(s) mobilisé(s)
Support(s) utilisé(s)
Sortie de la séquence
Description narrative
27/121
Story-board
Extrait du projet européen GLOSS – équipe IIHM (LIG)
28/121
Une exemple de graphe en ligne
• Chaque ligne de temps = activités d’un utilisateur
• Chaque carré de couleur numéroté = une sous tâche par exemple :
– communications (gestuelles ou verbales) pour les carrés "31"
– les déplacements pour les carrés "22".
Extrait du projet FT
Houria II – équipe
IIHM (CLIPS-LIG)
29/121
Un graphe de déplacement
Extrait du projet FT
Houria II – équipe
IIHM (CLIPS-LIG)
30/121
Représentation dynamique
Extrait du projet FT
Houria II – équipe
IIHM (CLIPS-LIG)
31/121
Démarche de conception
Analyse des besoins
Conception
Conception
logicielle
Codage
Tests unitaires
Tests d’intégration
Tests utilisateursEvaluation
ergonomique
Analyse de l’activité Scénario
d’activité
Analyse de la tâche
réelle
Scénario de la
tâche réelle
Scénarios
projetés
32/121
Scénarios projetés
• Scénarios projetés abstraits
– Fonctions de la future interface sans détail
– Support à l’élaboration des spécifications externes
• Scénarios projetés concrets
– Interactions futures
– Résultat de la phase des spécifications externes
33/121
• Un archéologue travaille
• Il trouve un objet
• La découverte est retirée du site
• L’objet est sauvegardé dans une base de données
• Un archéologue approche de là où était l’objet
• La découverte est disponible sur le terrain
Exemple de scénario projeté abstrait
34/121
• Un archéologue travaille, avec LDPV (dgps, télémétrie, ortientation, wifi)
• Il trouve un objet, le prend en photo
• La découverte est retirée du site
• Chaque fois que le DPV détecte un réseau, iltransfert ses objets stockés
• Un archéologue avec LLTM approche de cet endroit. LLMT est une tablette localisée (dgps, orientation) avec une caméra fixée au dos et une localisation relative de l’utilisateur
• Via LLTM, La découverte est disponible sur le terrain : il faut regarder à travers LLTM pour voir les objets
Exemple de scénario projeté concret
LDPV : Le Dispositif de Prise de Vue
LLTM : La Lentille Magique Tangible
35/121
Exemple : le loto
• scénario 1 : Philippe a envie de jouer au loto. Aussi, il
décide de jouer à votre loto. Il joue 6 numéros.
Simplement, il n'a aucune idée quant aux numéros à
choisir. Il décide que le hasard fera bien les choses.
• scénario 2 : Philippe croit aux statistiques. Alors il
décide de voir les derniers tirages au sort pour savoir
quoi jouer. Ayant prix des notes des numéro qui
sortent le moins souvent, il décide d'aller jouer une
grille.
36/121
Exemple : le loto
• scénario 3 : Philippe a joué ses numéros fétiches. Il désire en faire sa grille par défaut.
• scénario 4 : Philippe décide, comme d'habitude, de jouer ses numéros fétiches. Seulement, écoutant son horoscope, il décide de modifier 3 numéros. Il valide alors la grille. La fois d’après, il décide que ces modifications sont définitives. Il décide de faire de cette nouvelle grille sa grille de numéros fétiches.
• scénario 5 : Philippe choisit une grille de numéros fétiches parmi sa liste de grilles.
37/121
Exemple : le loto
• scénario 6 : Philippe est impatient de voir le résultat du
dernier tirage. Mais pas de chance, il n'a rien gagne,
comme lui montre le comparatif entre le tirage et la
grille qu'il a joue la veille.
• scénario 7 : Philippe assiste en direct au tirage. Il voit
le compte à rebours qui arrive finalement à 0, puis il
voit les numéros tirés les uns après les autres.
38/121
Exemple : le loto
• Les utilisateurs : un (minimum) requis dans
l’utilisation d’un ordinateur (souris, clavier ??)
et connaissance des règles
• Les concepts :
– Numéros, grille,
– Grille(s) favorite(s), historique des grilles jouées
– Règles, résultats, gains,
– Tirages, historique des tirages, statistiques
39/121
Exemple : le loto
Consulter Jouer une Grille
Choisir un numéro Jouer au hasard Jouer une grille fétiche Enlever un numéro
Enregistrer en tant
que grille fétiche
Valider la grille
jouée
Si nb case cochée < 6 Si nb case cochée >= 1
Si nb case cochée = 6
Anciens tirages résultatsTirage en direct
Tâche optionnelle
Jouer au numéro mis de côté
Mettre côté un numéro
Tâche optionnelle
Si un numéro de côté
Jouer au Loto
Jouer la dernière grille
40/121
Granularité
• Où s’arrêter dans la décomposition ?
– Pendant l’analyse : aux tâches élémentaires
– Rappel : une tâche élémentaire = une tâche
décomposable en actions physiques et informatiques
• Quand préciser l’interaction ?
– Frontière entre l’analyse et la conception
– Enrichissement de l’arbre des tâches au fur et à
mesure
41/121
UAN : action
42/121
UAN : retours d’information
43/121
Exemple avec UAN
Tâche : faire une grille du loto
Action Utilisateur Retour d’information du système Etat interne du système
(choix_numéro,
numéro_de_côté,
hasard,…)*
Liste_selection =
card(Liste_selection) = 6
Tâche : choix_numéro (cas d’une grille)
Action Utilisateur Retour d’information du système Etat interne du système
~ case(ni+1)
M
outline(case(ni+1)),
case(ni+1) !
Liste_selection = {n1, …, ni}
Si card(Liste_selection) < 6,
Liste_selection = Liste_selection U { ni+1 }
44/121
Exemple avec UAN
TACHE : effacer plusieurs fichiers
Action Utilisateur Retour d’information du système Etat interne du système
(S
(~[icône(fichier)]
M
M )+
S )+
icône(fichier)-!: icône(fichier)!
icône(fichier)!: icône (fichier)-!
sélection = sélection U fichier
sélection = sélection - fichier
~[icône(fichier)]
M
~[x,y]+ outline(icônes) > ~
~[icône(poubelle)] outline(icônes) > ~
icône(poubelle)!
M erase(icônes)
icône(poubelle)!
marquer les fichiers à effacer
sélection=
La conception :
les spécifications externes (introduction)
46/121
Modèle des concepts informatiques
• Principe
– Association entre des objets informatiques et des
concepts du domaine
– Association entre des opérations et des tâches
• Objectifs et Résultats
– Maquette
– Réalisation des tâches (scénarios)
47/121
Démarche
• Etablir correspondance entre
– Concepts du domaine
– Objets informatiques
• Distinguer parmi les objets informatiques
– Ceux spécifiques(dépendants) au(du) domaine
– Objets de l’IHM (pas toujours dépendants)
• Sélectionner les services généraux de l’IHM
• Concevoir la maquette…
48/121
Services généraux
• Aide
– factuelle
(qu’est-ce que c’est ?)
49/121
Services généraux
• Aide
– factuelle (qu’est-ce que c’est ?)
– Aide procédurale (comment faire pour ?)
50/121
Services généraux
• Aide
– factuelle (qu’est-ce que c’est ?)
– procédurale (comment faire pour ?)
– contextuelle
51/121
Services généraux
• Copier-coller
• Défaire-refaire
– encourage l’exploration
– Si pas possible: prévenir l’utilisateur.
• Valeurs par défaut
(performances)
– statiques mais ajustables
– dynamiques (dernière valeur utilisée)
• Personnalisation
(préférences)
52/121
Services généraux
Retour d ’information (feedback)
Immédiat
Informatif
53/121
Services généraux
Retour d ’information (feedback)
Processus long
Honnêteté
Correction d ’erreur
54/121
Pour le reste…
• QOC : Question Option Critère [McLean]
– Aide à la prise de décision
Question
Option 1
Option 2
Option n
Critère 1
Critère 2
Critère m
55/121
Exemple : pour le loto
• Représentation de la grille
– Tableau à cocher
– Tableau de checkboxes
– 6 champs textes
– 6 menus déroulants
56/121
Meilleur représentation de la grille ?
Représentation
de la grille
Cohérence
avec l’existant
Facilité de
programmation
Accessibilité
Rapidité
de choix
Outils pour la conception
Perception visuelle
et Guides Ergonomiques
58/121
ICS : Interacting Cognitive Subsystems
Sous Système
morphono-
lexical
(MPL)
Sous Système
propositionnel
(PROP)
Sous Système
implicationnel
(IMPLIC)
Sous Système
objet
(OBJ)
Sous Système
acoustique
(AC)
Sous Système
visuel
(VIS)
Sous Système
articulatoire
(ART)
Sous Système
état physique
(BS)
Sous Système
mouvement
(LIMB)
[Phil Barnard, Cognitive aspects of HCI]
59/121
ICS
• Sous systèmes sensoriels (capture des données
physiques)
– AC : ce que l'on entend
– VIS : ce que l'on voit
– BS : ce que l'on sent de son propre corps
• Sous systèmes perceptuels (structure abstraite
des images et du son)
– MPL : ce que l'on "entend dans la tête"
– OBJ : ce que l'on "voit dans la tête"
60/121
ICS
• Sous systèmes centraux
– PROP : ce que l'on sait a priori sur le monde
(identité des objets, leurs relations)
– IMPLIC : ce que l'on sait a posteriori sur le monde
("feeling", impressions)
• Sous systèmes effecteurs
– ART : ce que l'on a l'intention de dire
– LIMB : ce que l'on a l'intention de faire
61/121
ICS : la perception
• La perception est active :
– il existe un ensemble de sous systèmes qui
interviennent dans la perception
– c'est la transformation d'un signal physique en
représentations internes
– il existe plusieurs représentations qui participent à
l'action de percevoir
62/121
Exemple : la vue
VIS OBJ PROP
L'œil capte un signal
(S) lumineux
S SH OI
Patterns
d'ombres et de
lumières
Un ensemble de
surfaces qui
appartiennent à
différents objets
Une pièce avec
un bureau, des
chaises, etc.
1 2 3
1) Transformation du signal S sous forme d'une structure hiérarchique (SH)
2) interprétation de SH comme un ensemble d'objets identifiés (OI)
3) influence de PROP sur la perception OI :
- adapter aux connaissances des objets (reconnaissance)
- "remplir" les trous (fusion / blending)
- lever les ambiguïtés et imposer un point de vue (images d'Escher)
63/121
exemples
Fusion
Ambiguïtés (une œuvre
d'Escher)
64/121
ICS : perception d'une scène
• Les objets sont perçus et organisés
hiérarchiquement.
• Cette structure traduit la manière dont on
explore l'information de nature visuelle
• exemple : la scène du bureau
65/121
La scène du bureau : l'image
66/121
La scène du bureau : le graphe
"le bureau"
L'arbre droit Le nuageL'arbre gauche Le livre Le bloc note La pile gauche
Le texte Le stylo
Le mur gauche Le mur droit Le mur du fond Le plafondLe sol
Le cadre L'étagère Le néon avant Le néon arrière
La fenêtre La table La chaise
La ligne 1 La ligne n
Le mot 1 Le mot n'
67/121
Les concepts
• Le sujet psychologique : l'objet qui attire notre attention
(focus d'attention)
• contexte du sujet psychologique : ensemble des objets de
même niveau dans l'arborescence
• chemin de transition : exprime les changements
successifs de sujet psychologiques au cours du temps
• sujet pragmatique : objet d'un groupe qui sera le prochain
sujet psychologique (y compris lors du premier coup
d'œil
68/121
Notation
La table Bloc note Livre, piles de papier Stylo, texte
Constituant parent du
Sujet Psychologique
Contexte du
Sujet
Psychologique
Sujet
Psychologique
Constituants fils
du Sujet
Psychologique
Hypothèse : on se place dans la scène du bureau et le sujet psychologique est le bloc note
Les "mouvements" possibles :
"up" : monter d'un niveau
dans la hiérarchie
"down" : descendre d'un niveau
dans la hiérarchie
Changement de sujet
au même niveau
69/121
Détermination des groupements
• Proximité
• partage d'une même couleur
• partage d'une même forme (la couleur domine
la forme)
• l'adjacence
• la superposition ou l'intersection
• sujet pragmatique initial : un élément qui se
distingue dans un groupement
70/121
Exemple de groupements
71/121
Application à l'IHM
Ventilation
Chambre 101
Chambre 102
Chambre 103
Chambre 104
On Off
Ventilation
Chambre 101
Chambre 102
Chambre 103
Chambre 104
On Off
72/121
Passage de On à la chambre : cas 1
Ventilation
Chambre 101
Chambre 102
Chambre 103
Chambre 104
On OffColonne
On()
« On », ( ),
( ), ( ) ( ) ,
fenêtreColonne
On
Col. Ventil,
Col Off« On », ( ), ( ),
( ), ( )
fenêtreColonne
Ventil.
Col. On,
Col Off
« Ventilation »,
Chambre 101,
…
Colonne
Ventil.Ventil.
Ch.. 101,
Ch. 102, … « V », « e », etc.
Ch. 101.
73/121
Application à l'IHM
Ventilation
Chambre 101
Chambre 102
Chambre 103
Chambre 104
On Off
Ligne
101() « Ch. 101 », ( ), ( ) ,
Ligne
101Ch. 101 () , ( ) « Ch. » , 101
Outils pour la conception
Perception visuelle
et Guides Ergonomiques
75/121
Compatibilité
critères ergonomiques (1/7)
• Respect (intégration et cohérence) du contexte
d’utilisation (environnement de l’utilisateur)
– Langage utilisateur
• Vocabulaire
• Libellé unique
– Respect de l’activité
• Pas de surcharge cognitive
• Accès "direct" aux commandes
[Bastien & Scapin]
76/121
Guidage
critères ergonomiques (2/7)
• Assister l’utilisateur dans l’utilisation de l’IHM
– Incitation
• Griser les commandes non disponibles
• Fournir une liste des éléments disponibles
• Donner le format de saisie
– Regroupement / distinction des informations
– Retour d’information (immédiat)
– Lisibilité
• Police de caractère (4 max)
• Lettre sombre sur fond clair
• Phrase assez long (point de fixation)
[Bastien & Scapin]
77/121
Homogénéité
critères ergonomiques (3/7)
• Cohérence globale de l’IHM, logique
d’utilisation
– Schéma d’agencement
– Sémantique d’interaction constante
– Vocabulaire
[Bastien & Scapin]
78/121
Flexibilité
critères ergonomiques (4/7)
• Capacité de l’IHM à s’adapter
– Multi-modalité
– Personnalisation
– Raccourcit
[Bastien & Scapin]
79/121
Contrôle (par l’) Utilisateur
critères ergonomiques (5/7)
• Maîtrise de l’IHM par l’utilisateur
– Validation des commandes importantes ou
irréversibles
– Interruption des processus longs
– Retour en arrière
[Bastien & Scapin]
80/121
Traitement des erreurs
critères ergonomiques (6/7)
• Objectifs : minimiser les interruptions
• Trois types d’erreurs– Erreur de perception (mise en évidence, ressemblance)
– Erreur de raisonnement (transition – cohérence, mémoire : reconnaître plutôt que se souvenir)
– Erreur d’action (loi de Fitz, Erreur de touche / de sélection, allers-retours clavier-souris)
• Prévention (guidage, contrôle utilisateur)
• Correction– Signaler le plus tôt possible
– Retour en arrière, interruption
– Message explicatif et correctif
– Aide en ligne disponible
[Bastien & Scapin]
81/121
Concision
critères ergonomiques (7/7)
• Capacité de l’IHM à réduire les efforts perceptifs,
mémoriels et cognitifs des utilisateurs
– Ne pas surcharger d’information
– Limiter le nombre d’action
• Minimiser les saisies
• Eviter les textes trop verbeux
• Ne pas demander à l’utilisateur ce qu’il voudrait que l’IHM fasse
• Limiter la mémorisation d’informations d’une fenêtre (étape) à une
autre
[Bastien & Scapin]
82/121
Perception de l’écran
• Découverte en "Z"
• Regroupement en zone
1. Très visible, peu accessible
2. Très visible
3. Peu accessible
4. Très accessible
5. La plus visible et accessible
6. Très accessible
7. Peu accessible
8. Peu visible, peu accessible
9. Peu accessible
1 2 3
654
7 8 9
83/121
Organisation de la fenêtre
• Classement par ordre d’importance par ordre de
lecture
Commandes
Message à lecture optionnelle
Outils ZONE DE TRAVAIL
84/121
Utilisation des couleurs
• Perception centrée sur le jaune-vert
– bleu (périphérique) pour encadrer
– bleu saturé à éviter pour du texte et petits objets
– Couleurs saturées (claires) pour les fonds
• Codage d’un état
– Utilisation de 7 (+/- 2) couleurs maximum
– Utilisation avec une autre mise en valeur
– Respecter l’interprétation culturelle
85/121
Icônes
• Utilisation pour des commandes fréquentes
• Utilisation conjointe à un libellé
• Limitation du nombre (12 au mieux, 20 max)
• Construction à différents niveaux d’abstraction
– Ressemblance (bouton stop des premiers navigateurs)
– Descriptif (bouton de justification des éditeurs)
– Exemple (bouton souligner S)
– Caricatural (bouton d’impression)
– Analogie (couper = ciseaux, sauver = disquette)
– Symbolique (image abstraite : logo de sport)
– Arbitraire (bouton "actualiser" des navigateur)
[J.F. Nogier]
Difficulté
d’interprétation
86/121
Mise en évidence
• Efficacité implique exception
• Durée déterminée par le besoin de mise en évidence
• Perception visuelle (ICS)
– Inversion vidéo
– Police de caractère, structure du texte
– Taille
• Respect de la perception de la l’état de l’objet (ne pas induire de fausse idée)
• Clignotement, animation, son
– À utiliser avec parcimonie
– Offrir la possibilité de l’arrêter
[J.F. Nogier]
87/121
Message
• Affirmatif
• Forme Active
• Constructif (non critique)
• Sans impasse
• Respecter l’ordre des actions
– Cliquez sur continuer après avoir insérer le cd
• Sans ambiguïté
• Cohérent avec le reste de l’IHM
88/121
Illusion d’optique
• http://ophtasurf.free.fr/
Hall of Shame
http://homepage.mac.com/bradster/iarchitect/shame.htm
90/121
Hall of Shame
91/121
Hall of Shame
92/121
Hall of Shame
De la conception externe à
la conception logicielle
Comment réutiliser tout ce que vous
connaissez déjà…
94/121
IHM et UML
• Use case = tâches systèmes
– (tâche utilisateurs sous-entendues)
• Diagramme de séquence
– commence juste après l’interface (appel de la partie
métier)
• Souvent : « classe système » = Façade
• Reste à faire l’Interface Utilisateur…
– Séparation Métier – IHM (c.f. PAC-AMODEUS)
– Séparation par fonctionnalité (c.f. PAC)
95/121
PAC (Modèles à agents)
• [Coutaz 88]
• Trois facettes :
– Présentation (C + V de MVC)
– Abstraction (M de MVC)
– Contrôle : communication entre agent et expression des dépendances (liaison) entre A et P
• Hiérarchisation :
– Arbre : relation père-fils
– Heuristique de conception
– Communication par message
96/121
PAC (Modèles à agents)
• PAC
Aspects réalisation
• Aucune recommandation
• dépend de la plate-formed’accueil
• 1 agent = 1 module C, 1 objet, 1 objet par facette
(comme MVC)
97/121
Exemple d’implémentation PAC
• Classe Abstraite pour le controleur– Implémentation par défaut de certaines méthodes
• Interfaces logicielles pour l’Abstraction et la Présentation – Possibilité d’héritage
• Communication par message – Une « String » pour identifier le type de message
– Un objet en attachement (peut être n’importe quoi)
– Traitement : test sur le type de message et traitement adéquate (cast sur l’attachement)
98/121
Exemple d’Abstraction et de Présentation
package PAC;
public interface Abstraction {
public void affecteControleur(Controleur c);
public void recoitMessage(String type, Object attachement);
}
package PAC;
public interface Presentation {
public void affecteControleur(Controleur c);
public void recoitMessage(String type, Object attachement);
}
99/121
Exemple de Controleurpackage PAC;
import java.util.ArrayList;
public abstract class Controleur {
protected Abstraction a;
protected Presentation p;
protected ArrayList<Controleur> enfants = new ArrayList<Controleur>();
protected Controleur parent;
public abstract void recoitMessageControleur(String type, Object attachement);
public abstract void recoitMessagePresentation(String type, Object attachement);
public abstract void recoitMessageAbstraction(String type, Object attachement);
public void affecteParent(Controleur p) { this.parent = p; }
public void ajouteEnfant(Controleur arg0) {
if (! enfants.contains(arg0)) {
enfants.add(arg0);
arg0.affecteParent(this);
}
}
protected void dispatchDownMessage(String type, Object att) {
for (Controleur c : enfants) { c.recoitMessageControleur(type, att); }
}
protected void dispatchUpMessage(String type, Object att) {
if (parent != null) parent.recoitMessageControleur(type, att);
}
}
100/121
Un exemple d’application de PAC
Capturer un objet (réalité cliquable)
Voir les deux vidéos : utilisatrice (équipement) et capture (déroulement du scénario)
101/121
Exemple de hiérarchie PAC
Hiérarchie PACDonnées à afficher
(ANF)
Données numériques
localisées (ANF)
Objets
sauvés
Caméra
Localisation
Orientation
Terrain
augmenté
Réalité
cliquable
Représentation
physique
Passerelle
Représentation
numérique
102/121
Représentation
physique Représentation
numérique
hiérarchie PAC
Réalité
cliquable
Exemple de circulation de message
Passerelle
Evénements
souris (stylet)M1’
M2
M2
M2
M2’M2’’
M1
103/121
Règles Heuristiques
• Ensemble de règles heuristiques pour construire
la hiérachie d'agents PAC du Contrôleur de
Dialogue dans PAC-Amodeus à partir d’une
maquette
• Source Modèle d’architecture des systèmes
interactifs, chapitre 7.
104/121
R2 : Vue multiple
• Agent vue multiple d'une "œuvre"
?
Place
Route
Movable Object
Static Object
Point
.
x
Anchor x (m):
Anchor y (m):
Mouse x (m): 12
Mouse y (m): 15
Length (m):
Wall
Wall
Environment Zone Region Preferences
?
Place
Route
Movable Object
Static Object
Point
.
x
Anchor x (m):
Anchor y (m):
Mouse x (m): 12
Mouse y (m): 15
Length (m):
Wall
Environment Zone Region Preferences
ChaleurEnvironnement
105/121
R2 : Vue multiple
• Agent vue multiple d'une "œuvre"
• Un superagent garantit la cohérence visuelle
106/121
PAC et MVC : vue multiple
C
A
C
P
C
P
M
C V1
V2
107/121
D’autres Heuristiques
• R1 : fenêtre = un agent
• R3 : Palette de concepts
– Une palette de classes de concept = un agent
– Une barre de menu = un agent
• R4 : zone d’édition
– Une zone d’édition = un agent
– Condition : être suffisamment complexe
• R5 : correspondance agent / concept
– Un concept complexe = un agent
108/121
Heuristiques de liaison
• R6 : d’une fenêtre à une autre
– Les deux sont sous le même agent parent commun
• R9 : Ciment syntaxique
– Agent ciment pour "analyse syntaxique distribuée”
109/121
R9 : Ciment syntaxique
• Agent ciment pour
"analyse syntaxique
distribuée"
• Un superagent cimente
les actions distribuéessuperagent
ciment
agent agentagent
action de l'utilisateur
action de l'utilisateur
action de l'utilisateur
110/121
Heuristiques de simplification
• R10 : un agent fils unique peut être regroupé
avec son père
– Attention à la modularité / réutilisation / évolution
• R11 : un agent dont la fonction est réalisée par
un objet de la boîte à outils graphique devient
un composant de la présentation de son père.
111/121
Corollaire de R11
• Un objet d’interaction non implémenté par la
plate-forme -> un agent
Un espace de travail -> un agent
Un objet mur -> un agent
112/121
Délégation sémantique
• Usage de la délégation sémantique pour performance.
– Dans l'exemple du robot mobile, le A de l'agent mur
contient la modélisation
– de mur dans les termes
du domaine (mètres,
non pas pixels).
• Evite les appels au NF
pendant le tracé du mur.
– Système de cache
Anchor x (m): 12
Anchor y (m): 10
Mouse x (m): 13
Mouse y (m): 2
Length (m): 8.1
?
Place
Route
Movable Object
Static Object
Point
.
x
Wall
Updated Values as the mouse moves
Rubber Banding as the wall is resized
Environment Zone Region Preferences
113/121
Modèle hybride
entre Arch et PAC: Modèle PAC-Amodeus
Partie IHM
114/121
Exemple de développement : TROC
projet France Telecom – IIHM (LIG)
• Définition du jeu
– Qui joue
– Contexte du jeu
– Règle du jeu
• Arbre de tâche
Analyse des besoins
Conception
Conception logicielle
Codage
Tests unitaires
Tests d’intégration
Tests utilisateur
Evaluation
ergonomique
Note : le cycle de vie d’une interface est ici représenté en V et sans retour sur les
étapes précédentes de manière analytique…
115/121
TROC : analyse des besoins
116/121
Troc : spécifications exeternes
117/121
Troc : un exemple
d’architecture
118/121
Troc : architecture pac (-amodeus)
119/121
Troc : architecture pac (-amodeus)
120/121
Troc : retour d’expérience,
reconception
120
121/121
Troc : architecture après re-conception