modèle de tâche philippe renevier [email protected]
TRANSCRIPT
![Page 2: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/2.jpg)
2/84
IHM : I comme...
Interaction ou Interface :
• actions (mutuelles) entre acteurs
• dispositifs (techniques), vecteurs de communications
Fonctionnalités proposées par la
machine
Utilisateurs
Système Interactif
![Page 3: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/3.jpg)
3/84
IHM : HM comme...
… comme Homme (être humain)
• des interfaces utilisables !?!
… comme Machine
• des fonctionnalités utiles
Fonctionnalités proposées par la
machine
Utilisateurs
Objectifs : Concevoir des
systèmes à la fois utiles et utilisables
Qui ?Pourquoi ?Comment ?Dans quelles conditions ?Etc.
![Page 4: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/4.jpg)
4/84
Chemin à suivre
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…
![Page 5: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/5.jpg)
5/84
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
![Page 6: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/6.jpg)
6/84
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
![Page 7: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/7.jpg)
7/84
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
![Page 8: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/8.jpg)
8/84
Théorie de l'Action
Intention Évaluation
Spécificationd’actions
Signification de
l’expressiond’entré
Exécution
Forme de
l’expressiond’entré
Interprétation
Signification de
l’expressionde sortie
Perception
Forme de
l’expressionde sortie
Buts
Dis
tanc
e d
’Exé
cutio
nD
istance d ’Evaluation
Dis
tanc
e A
rtic
ulat
oire
en
Ent
rée
Dis
tanc
e S
éman
tique
en
Ent
rée
Distance S
émantique
en Entrée
Distance A
rticulatoire en S
ortie
![Page 9: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/9.jpg)
9/84
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
![Page 10: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/10.jpg)
10/84
Décoration d’une tâche
• Concepts du domaine• Pré-conditions• Post-conditions• Fréquence• Complexité• Criticité• Contraintes temporelles• etc. (selon domaine)
![Page 11: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/11.jpg)
11/84
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
![Page 12: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/12.jpg)
12/84
HTA : Hierarchical Task Analysis
séquence
suite non ordonnée
boucle
alternative
alternative non stricte
Une tâche
![Page 13: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/13.jpg)
13/84
Séquence : exemple des crêpes
• Autre exemple : installer un logiciel (exécuter l’installation, choisir l’emplacement, les options, lancer 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
![Page 14: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/14.jpg)
14/84
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
![Page 15: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/15.jpg)
15/84
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
![Page 16: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/16.jpg)
16/84
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
![Page 17: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/17.jpg)
17/84
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
![Page 18: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/18.jpg)
18/84
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
Acheter du
lait (1 litre)A
cheter des œ
ufs (6)A
cheter de la farine (500 g)
Acheter du
sucre vanilléA
cheter du sel
Acheter de l’huile
Optionnelle : si crêpes sucrées
![Page 19: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/19.jpg)
19/84
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)– Utilsiateurs
![Page 20: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/20.jpg)
20/84
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] )
![Page 21: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/21.jpg)
21/84
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].
![Page 22: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/22.jpg)
22/84
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
![Page 23: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/23.jpg)
23/84
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
![Page 24: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/24.jpg)
24/84
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
![Page 25: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/25.jpg)
25/84
Story-board
Extrait du projet européen GLOSS – équipe IIHM (CLIPS-IMAG)
![Page 26: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/26.jpg)
26/84
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-IMAG)
![Page 27: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/27.jpg)
27/84
Un graphe de déplacement
Extrait du projet FT Houria II – équipe IIHM (CLIPS-IMAG)
![Page 28: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/28.jpg)
28/84
Représentation dynamique
Extrait du projet FT Houria II – équipe IIHM (CLIPS-IMAG)
![Page 29: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/29.jpg)
29/84
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
![Page 30: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/30.jpg)
30/84
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
![Page 31: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/31.jpg)
31/84
• 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é
![Page 32: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/32.jpg)
32/84
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éro. 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.
![Page 33: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/33.jpg)
33/84
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.
![Page 34: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/34.jpg)
34/84
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.
![Page 35: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/35.jpg)
35/84
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
![Page 36: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/36.jpg)
36/84
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
![Page 37: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/37.jpg)
37/84
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
![Page 38: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/38.jpg)
38/84
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
• Description d’une partie des symboles en annexe
![Page 39: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/39.jpg)
39/84
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 }
![Page 40: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/40.jpg)
40/84
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 à effacersélection=
![Page 41: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/41.jpg)
La conception : les spécifications externes (introduction)
![Page 42: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/42.jpg)
42/84
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)
![Page 43: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/43.jpg)
43/84
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…
![Page 44: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/44.jpg)
44/84
Services généraux
• Aide – factuelle
(qu’est-ce que c’est ?)
![Page 45: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/45.jpg)
45/84
Services généraux
• Aide – factuelle (qu’est-ce que c’est ?)
– Aide procédurale (comment faire pour ?)
![Page 46: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/46.jpg)
46/84
Services généraux
• Aide – factuelle (qu’est-ce que c’est ?)
– procédurale (comment faire pour ?)
– contextuelle
![Page 47: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/47.jpg)
47/84
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)
![Page 48: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/48.jpg)
48/84
Services généraux
Retour d ’information (feedback)
Immédiat
Informatif
![Page 49: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/49.jpg)
49/84
Services généraux
Retour d ’information (feedback)
Processus long
Honnêteté
Correction d ’erreur
![Page 50: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/50.jpg)
50/84
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
![Page 51: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/51.jpg)
Outils pour la conception
Perception visuelle
et Guides Ergonomiques
![Page 52: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/52.jpg)
52/84
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]
![Page 53: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/53.jpg)
53/84
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"
![Page 54: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/54.jpg)
54/84
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
![Page 55: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/55.jpg)
55/84
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
![Page 56: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/56.jpg)
56/84
Exemple : la vue
VIS OBJ PROP
L'œil capte un signal (S) lumineux
S SH OI
Book 1
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)
![Page 57: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/57.jpg)
57/84
exemples
Fusion
Ambiguïtés (une œuvre d'Escher)
![Page 58: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/58.jpg)
58/84
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
![Page 59: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/59.jpg)
59/84
La scène du bureau : l'image
Book 1
![Page 60: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/60.jpg)
60/84
La scène du bureau : le graphe"le bureau"
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
L'arbre droit Le nuageL'arbre gauche Le livre Le bloc note La pile gauche
Le texte Le stylo
La ligne 1 La ligne n
Le mot 1 Le mot n'
![Page 61: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/61.jpg)
61/84
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
![Page 62: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/62.jpg)
62/84
Notation
La table Bloc note Livre, piles de papier Stylo, texte
Constituant parent duSujet 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
![Page 63: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/63.jpg)
63/84
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
![Page 64: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/64.jpg)
64/84
Exemple de groupements
![Page 65: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/65.jpg)
65/84
Application à l'IHM
VentilationChambre 101
Chambre 102
Chambre 103
Chambre 104
On Off
VentilationChambre 101
Chambre 102
Chambre 103
Chambre 104
On Off
![Page 66: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/66.jpg)
Outils pour la conception
Perception visuelle
et Guides Ergonomiques
![Page 67: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/67.jpg)
67/84
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]
![Page 68: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/68.jpg)
68/84
Guidagecritè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]
![Page 69: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/69.jpg)
69/84
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]
![Page 70: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/70.jpg)
70/84
Flexibilitécritères ergonomiques (4/7)
• Capacité de l’IHM à s’adapter– Multi-modalité– Personnalisation– Raccourcit
[Bastien & Scapin]
![Page 71: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/71.jpg)
71/84
Contrôle (par l’) Utilisateurcritè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]
![Page 72: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/72.jpg)
72/84
Traitement des erreurscritè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]
![Page 73: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/73.jpg)
73/84
Concisioncritè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]
![Page 74: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/74.jpg)
74/84
Perception de l’écran
• Découverte en "Z"
• Regroupement en zone1. 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
![Page 75: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/75.jpg)
75/84
Organisation de la fenêtre
• Classement par ordre d’importance par ordre de lecture
Commandes
Message à lecture optionnelle
Outils ZONE DE TRAVAIL
![Page 76: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/76.jpg)
76/84
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
![Page 77: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/77.jpg)
77/84
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
![Page 78: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/78.jpg)
78/84
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]
![Page 79: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/79.jpg)
79/84
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
![Page 80: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/80.jpg)
80/84
Illusion d’optique
• http://ophtasurf.free.fr/
![Page 81: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/81.jpg)
Hall of Shame
http://homepage.mac.com/bradster/iarchitect/shame.htm
![Page 82: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/82.jpg)
82/84
Hall of Shame
![Page 83: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/83.jpg)
83/84
Hall of Shame
![Page 84: Modèle de tâche Philippe Renevier Philippe.Renevier@unice.fr](https://reader033.vdocuments.site/reader033/viewer/2022061618/551d9d81497959293b8bb29e/html5/thumbnails/84.jpg)
84/84
Hall of Shame