Interaction Homme-Machine Cours 5 : modèles conceptuels

Année 2017/2018 – Et3 Info - Polytech Paris-Sud Cédric Fleury (cedric.fleury@lri.fr)

Une partie de ce cours est basée sur les transparents de Ignacio Avellino, Anastasia Bezerianos et Michel Beaudouin-Lafon

https://www.lri.fr/~cfleury/teaching/et3-info/IHM-2018/

Modèle conceptuel

Modélise le fonctionnement du système :

2

Réponses

Feedback

Commandes

Opérations Données

The design of everyday things

Les objets quotidiens reflètent les problèmes de conception d’interfaces

Poignets de portes Machines à laver Téléphones etc.

Introduit les notions «d’affordances», de métaphore, de modèle conceptuel

Donne des règles de conception

3

(Norman, 1990)

Modèles mentaux Modèles conceptuels Métaphores Affordances Feedbacks Signifiants Mappings Contraintes …

4

Modèles mentauxQu’est-ce que c’est ?

Comment ça fonctionne ?

5

Modèles mentauxModèles mentaux des utilisateurs

Représentent la compréhension des utilisateurs du modèle conceptuel réel

Ils peuvent provenir : D'autres appareils connus par l'utilisateur De notre comportement (ou celui d'une autre personne) Des guides d’utilisation

Bases d’un design adapté

Ils permettent de prédire l’effet de nos actions

Souvent incomplets, inconsistants, et ils changent avec le temps

6

Modèle conceptuel et modèle mental

7

Modélisation conceptuelle

8

Modèle de conception La façon dont le concepteur veut que l’utilisateur voit le système Doit cacher les aspects techniques Doit se référer à ce que l’utilisateur souhaite faire avec le système

Image du système Ce que l’utilisateur voit réellement du système (y compris sa documentation) Ce qui lui permet de construire son modèle mental

Modèle mental de l’utilisateur Construit à partir de son interpretation de l’image du système, de son experimentation, de ce qu’il en a lu, etc

Exemple

9

Votre mission : baisser la température du congélateur sans changer celle du réfrigérateur

Don Norman, The Design of Everyday Things

Exemple

10

Don Norman, The Design of Everyday Things

Modélisation conceptuelle

Correspondance entre modèle conceptuel et modèle mental Améliorée par un bon usage de métaphores Améliorée en exploitant les affordances Améliorée en suivant des règles de conception

En cas de mauvaise correspondance Erreurs de manipulation Frustration Faible productivité

11

MétaphoresTransposition, par analogie, d’une relation entre plusieurs objets vers un autre ensemble d’objets

12

+ =

Mac OS - 1984

Métaphores

On transpose les caractéristiques de l'objet d’origine.

Ouvrir un dossier, mettre à la poubelle, etc.

13

Mac OSX El CapitanMac OSX El Capitan

Métaphores

Buts : «Économiser» en apprentissage

Se baser sur des connaissances existantes

Exploiter les propriétés déjà connues du monde réel

Le but n’est pas de simuler un bureau réel mais d’exploiter notre connaissances du bureau réel

14

Affordances

Capacités perçues directement des actions possibles sur un objet

La forme, la taille, l’aspect de l’objet suggère ce que l’on peut faire avec

« Much of everyday knowledge resides in the world, not in the head » (Norman, 1988)

15

Affordances

Vous devez pousser ou tirer cette porte ?

16https://1000awesomethings.files.wordpress.com/2010/09/what-do-you-do.jpg

Affordances

Vous devez pousser ou tirer cette porte ?

17

http://www.zinteriors.co.uk/office-partitioning/images/laminate-double-door-samples.jpg

18

Affordances en IHM

Causalité (et feedback)L’état du système juste après une action est perçu comme le résultat de l’action

Est-ce que le système travaille sur ma requête ? En cause des clics de souris interminables, accumulés, qui exécutent la même action plusieurs fois

Bon feedback : Immédiat Clair et informatif Pas excessif Opportun Priorisé

19

Exemple

20

?

?

Feedback

Excès de feedbacks => feedbacks ignorés Machine à laver qui sonne à 3h du matin

Feedback non interprétable ou non nécessaire => gênant Alarme de ceinture sur le siège passage

21

SignifiantsComposante de l’affordance qui oriente son périmètre d’action (i.e., il montre où l’affordance crée une action)

Affordances: quelle action ?

Signifiants: où ? quel type d’action ?

Un indicateur perceptible (visuel, auditif) qui explique l’attitude à adopter face à un objet

Plus importants que les affordances pour interagir avec un système

22

Don Norman, The Design of Everyday Things

Signifiants

23https://1000awesomethings.files.wordpress.com/2010/09/what-do-you-do.jpg

Signifiant

Affordance

Mappings

Les bons mappings sont naturels, ils contiennent des analogies :

Spatiales Perceptuelles Biologiques ou culturelles

Avantages des mappings naturels Compréhension immédiate Mémorisation facile Utilisation facile

24

MappingsRelation entre le contrôle / l’action et le résultat attendu

Exemple : Trouvez la correspondance entre les plaques de cuisson et ces contrôles

25http://www.baddesigns.com/ranges.html

MappingsExemple : Trouvez la correspondance entre les plaques de cuisson et ces contrôles

26

http://www.baddesigns.com/ranges.html

http://4.bp.blogspot.com/-cPgEuiHsxko/Uc1q8Oq0k2I/AAAAAAAAKkI/fH3hGqNPKPo/s1600/IMG_20130628_151653.jpg

ContraintesElles limitent la façon d’utiliser un objet

Basées sur les propriétés inhérentes à l’objet Physiques

Culturelles

Sémantiques

Logiques

27

Mac Book Air connecteur USB. Image Personnelle—Ignacio Avellino

Contraintes

Évitent à l’utilisateur de faire des erreurs

28

Microsoft Windows 95

Résumé

Principes de conception (Norman)

Visibilité : l’état d’un système en observant l’interface

Affordances : actions perçues

Mappings : correspondances entre actions et résultats

Feedbacks et signifiants : informer l’utilisateur

Métaphores : «Économiser» en apprentissage

Contraintes : éviter les erreurs

29