1

Conception en IHM (1/2)

Mountaz Hascoët, Univ. Montpellier 2

1

It’s where you stand with a foot in two worlds– the world of technology and the world of people and human purposes – and you try

to bring the two together.

Mitch Kapor, 1996

What is Design?

2

Réussir la conception, un défi?

3

Capacités humaines

Les impacts d’une conception ratée

• Impacts différents selon les domaines• Pour des systèmes critiques

– Risques: accidents

• Pour les IHM des systèmes industriels et commerciaux – Risques: baisse de productivité, surcharge de stress,

augmentation des maladies liées au stress

• Pour les IHM web, IHM de logiciels choisis librement – Risques: pertes de parts de marché, désaffection généralisée,

perte de confiance et/ou d’intérêt de communication

4

2

Différentes Approches de la conception en IHM

1. Pragmatique et créative – avec les utilisateursConception centrée sur l’utilisateur, user experiences

2. Ergonomie heuristique – sans les utilisateursGuides de styles pour la construction d’une ihm

3. Ergonomie analytique – avec les utilisateurs Analyse formelle de l’activité

Approches hiérarchiques de l’activité

4. Sciences cognitives, psychologie Principales caractéristiques de l’humain sur les plans cognitifs,

perceptifs et moteurs.Know your users

5

Ces Approches sont différentes et complémentaires

L’humain au centre de la conception des systèmes

• Motivations– Forte imbrication entre l’activité des humains et les outils

qu’ils conçoivent, réalisent, et utilisent • Co-évolution

– Se rapprocher d’interactions dont l’utilité et l’intérêt sont réels et souhaitables

• Sustainable HCI – IHM durable

• Evolution des Approches pragmatiques– Conception centrée sur l’utilisateur– Conception participative– Conception en contexte– User experience

6

Conception centrée sur l’utilisateur

• Conditions nécessaires– Analyse de tâches des utilisateurs du système

– Analyse détaillée de cas pratique d’utilisation

– Performance évaluée en terme de bénéfices humains

– Prise en compte les capacités humaines

– Adaptabilité aux évolutions des besoins humains

• Approche holistique– “Human-Centered System Design is necessarily holistic and ecological and is

concerned with usefulness, usability, sustainability, cultural and political factors, infrastructure, and standards. A human-centered analysis addresses the variety of concrete social situations that exist in the field of practice.” [1]

• Références[1] NSF WORKSHOP ON HUMAN-CENTERED SYSTEMS 1997 - http://www.ifp.illinois.edu/nsfhcs/

[2] Don Norman, « the design of everyday things » chapitre

[3] Human-centred design for interactive systems (ISO 9241-210, 2010)

7

Conception Participative

• Définition d’un ensemble de techniques d’analyse et de conception• Introspection

– protocole de verbalisation des actions

– technique d’incident critique

– interview

• Observation directe

• Scénario de conception

• Storyboard

• Maquettage papier

• Brainstorming

• Walkthough

• Références[1] Interliving web site (http://interliving.kth.se/publications/thread/)

[2] Cours de S. Conversy, ENAC

8

3

Conception en contexte

Contextual design unifies design, marketing, delivery, and support in a

coherent response to the customer [1]

– Introduit par Karen Holtzblatt en 1999

– Perspective marketing et distribution en plus

– Références[1] Hugh Beyer and Karen Holtzblatt. 1999. Contextual design.

interactions 6, 1 (January 1999), 32-42.

[2] http://en.wikipedia.org/wiki/Contextual_design

9

Conception en contexte

– Définition d’un processus de conception en 7 étapes [1]1. Discussion avec les clients en contexte et recueil de données

2. Interprétation des données selon des modèles pluridisciplinaires

3. Consolidation des données en prenant en compte plusieurs utilisateurs

4. Génération d’idées de solution prenant en compte 1-2-3

5. Structuration du système

6. Maquettage papier

7. Conception logicielle

– Références[1] Hugh Beyer and Karen Holtzblatt. 1999. Contextual design. interactions 6, 1

(January 1999), 32-42.

10

User Experience

• Approche à très large spectre regroupe toutes les précédentes• Trois aspects complémentaires

– Communication visuelle pour la conception• Croquis • Storyboards• Maquettes papiers, Maquettes fil de fer (wireframe)

– Videos

• Prototype

– Conception participative• Wizard of Oz, • Verbalisation des pensées, • Examen par les pairs

– Sketch boards (Posters)

• Brainstorming

– Analyse retrospective des succès en conception ou des échecs

11

Sketching – Croquis (1/3)

« Sketching is not about drawing. Rather, it is about design»

W. Buxton

12Sketchs from Richard Wand

Sketch from UC Calgary

4

Sketching – Croquis (2/3)

• Quelques trucs

– Bibliothèque de croquis

– Templates

– Clipart

13Bibliothèque de croquis extraites de Greenberg, Carpendale, Marquadt, Buxton, Sketching the User Experiences

Sketching – Croquis (3/3)

• Les éléments importants

– Les dessins

– Les flèches

– Les annotations graphiques

– Les annotation écrites

14Croquis avec annotations textuelles, flèches et annotations graphiques, extrait deGreenberg, Carpendale, Marquadt, Buxton, Sketching the User Experiences

Du croquis au StoryBoard

Un storyboard est un enchaînement de croquis permettant de décrire une partie de l’interaction

• Le StoryBoard est composé– Images clés

• Croquis représentant les moments clés de l’interaction• Copies d'écran éditées si redesign

– Organisation/composition des images clés• Qui rend les transitions entre les images clés faciles à suivre

• Plusieurs types de storyboard– Le storyboard simple

• Une liste d’images clés disposées en flux de lecture habituel (de gauche à droite et de haut en bas)

– Le storyboard avec branchement– Le storyboard libre

• Vers la bande dessinée 15

DESIGN IS REDESIGN

Exemple: Redesign d’une fonctionnalité existante

1. Scénario 1 de type use case

2. Version storyboard du scénario 1

3. Storyboard 2 une alternative au scénario 1

4. Quel aurait été le scénario de conception ?

16

5

Exemple (1)

• Fonctionnalité :– Ajout d'une liste d'étudiants à un cours dans un ent

• Scénario de type « use case »• Page d’accueil, la secrétaire clique sur le lien « Utilisateurs »• Page « utilisateurs », la secrétaire clique sur le lien « ajouter une

liste d’étudiants » – La page qui s’affiche n’est pas pertinente

• La secrétaire revient à la page précédente et choisit cette fois le lien « inscrire une classe »

• La page propose un import csv que la secrétaire choisit• Le système demande un fichier et le type de colonnes• Le choix fait , et le fichier uploadé, un message d’erreur est affiché

indiquant que l’opération n’a pas pu avoir lieu.

• Attention : le plus souvent un scénario de conception n’est pas un scénario de type « use case ».

Exemple (2)

• Storyboard du scénario de type use case

Fdsfdsqovxcvj oiovcx vcoxipoi vcxopioF dsfdsqovxcvj oiovcx vcoxipoi vcxopioFdsfdsqovxcvj oiovcx vcoxipoi vcxopio Fdsfdsqovxcvj oiovcx vcoxipoi vcxopioFdsfdsqovxcvj oiovcx vcoxipoi vcxopioF dsfdsqovxcvj oiovcx vcoxipoi vcxopioFdsfdsqovxcvj oiovcx vcoxipoi vcxopio Fdsfdsqovxcvj oiovcx vcoxipoi vcxopioFdsfdsqovxcvj oiovcx vcoxipoi vcxopioF dsfdsqovxcvj oiovcx vcoxipoi vcxopio

Fdsfdsqovxcvj oiovcx vcoxipoi vcxopio Fdsfdsqovxcvj oiovcx vcoxipoi vcxopio

Description de la version 1 à faire évoluer vers version 2 20Description de la version 1 à faire évoluer vers version 2

6

Exemple (3) – Storyboard alternatif

Voulez-vous:� Inscrire tous les étudiants de xxx dans yyy ?� Inscrire une partie seulement des étudiants de

xxx avant dans yyy ? Fdsfdsqovxcvj oiovcx vcoxipoi vcxopioF dsfdsqovxcvj oiovcx vcoxipoi vcxopioFdsfdsqovxcvj oiovcx vcoxipoi vcxopio Fdsfdsqovxcvj oiovcx vcoxipoi vcxopioFdsfdsqovxcvj oiovcx vcoxipoi vcxopioF dsfdsqovxcvj oiovcx vcoxipoi vcxopioFdsfdsqovxcvj oiovcx vcoxipoi vcxopio Fdsfdsqovxcvj oiovcx vcoxipoi vcxopioFdsfdsqovxcvj oiovcx vcoxipoi vcxopioF dsfdsqovxcvj oiovcx vcoxipoi vcxopio

Fdsfdsqovxcvj oiovcx vcoxipoi vcxopio Fdsfdsqovxcvj oiovcx vcoxipoi vcxopio

Opération effectuée: les étudiants suivants ont été inscrits

Valider Annuler

Description de la version 2

Quel problème pose le scénario de type use case?

Quel aurait été le scénario de conception?

22

Maquettes papiers

23

Extrait de Nielsen Norman Group

Adopte un jeu

Wireframeou maquette numérique

• Outils

– éditeur dessin/images

– Outils dédiés

24Outils dédiés au wireframe d’après Grace Smith http://mashable.com/2010/07/15/wireframing-tools/

7

Le design décortiqué

• Design is ReDesign(T. Green)

• Design Funnel(W. Buxton, inspired by S. Pugh)– Elaboration

• Engendrer beaucoup d’idées et les développer par croquis, storyboard, maquettes, etc

– Réduction• Faire des choix ie décimer beaucoup d’idées

– Design funnel = processus d’itération de phases d’élaboration/réduction pour converger vers la solution à partir du problème. A chaque itération, la description de la solution retenue devient plus détaillée.

25

Le changement de perspectives

• Perspective horizontale (apparence globale)

– Peu de détails sur chaque aspect mais assez de détails sur l’ensemble de l’interface pour l’appréhender comme un tout

• Perspective verticale (interaction détaillée)

– Choix d’un point particulier de l’ihm et développement des détails de toutes les interactions possibles sur ce point

26

Le changement de perspectives

• Les deux perspectives sont applicables et utiles à tous les moments de la conception

– Croquis, Storyboard, Wireframe, Maquette papier, Maquette vidéos, Prototype

– La coexistence des deux perspectives peut être déstabilisante

=> identifier les deux perspective suffit à mieux maîtriser l’utilisation et le changement de perspective

27

Ergonomie Heuristique

28

8

Pourquoi des heuristiques?

• Règles simples pour contrôler le Look-and-feel– Look = apparence

– Feel = interaction

• Condensé de résultats d’expériences passées– Les recettes qui marchent

• Identification– The medium is the message

• Réutilisation – Facilité d’appropriation

29

• Multitude de règles écrites...

… pour des systèmes de fenêtrage différents Motif, Windows, Mac, etc.

… pour des sociétés différentes (culture d ’entreprise forte)

• Ecrites sous différentes formes– Critères Ergonomiques pour l’Évaluation d’Interfaces Utilisateurs, J. M.

Christian Bastien and Dominique L. Scapin, INRIA, RR, 1993

– 10 heuristiques de Nielsen,

– 8 règles d’or de Shneiderman, etc.

– Tous les guides de styles des concepteurs des systèmes de fenêtrage (KDE, GNOME, Microsoft, Apple) et éditeurs de logiciel

– Normes ISO (internationales)• Human-centred design for interactive systems (ISO 9241-210, 2010)

30

Savoir adapter les heuristiques

Règles ergonomiques minimales

1. COHERENCE

2. MANIPULATION DIRECTE

3. FEED-BACK

4. SIMPLICITE / CONCISION

5. LISIBILITE

6. ADAPTABILITE

7. AIDE

31

Cohérence

• Objectifs– Faciliter l ’apprentissage – Faciliter l ’utilisation

• Plusieurs types de cohérences– cohérence interne à l ’application– cohérence externe

• avec d ’autres interfaces• sur les commandes génériques

– ouvrir, fermer, déplacer, copier, coller

– cohérence avec la métaphore• dans une certaine limite...

32

9

Exemple de problèmes liés à l’absence de cohérence…

33

Pièges/limites de la cohérence

• Répéter les erreurs du passé �

• Incompatible avec l ’évolution• exemple: l ’évolution des claviers

• Incompatible avec les modes

34

Manipulation directe

• « Point and Clic instead of remember and type » Shneiderman ~80

• Motivations– s’affranchir d ’une syntaxe compliquée

– donner le contrôle à l ’utilisateur

• Principes simples et anciens– représentation graphique des objets d’intérêts

– utilisation d ’actions physiques sur ces objets

– ⇒ fondement des interfaces dites WIMP • Window Icon Menu Pointer

35

Manipulation directe

• développement de métaphores• modes opératoires

– rapides, incrémentaux, réversibles– dont les effets sur les objets doivent apparaître

instantanément• rôle du feedback très important• « continuité » de l’interaction

• apprentissage progressif– connaissance partielle doit suffire– essais / erreurs

• importance du undo / redo

36

10

WIMP ≠ Manipulation directe

• WIMP = Window, Icon, Menu, Pointer

• Menus, fenêtres modales?– Peu ou pas de manipulation directe• Rappel définition : Une fenêtre modale est une fenêtre qui

intercepte toutes les entrées de l ’utilisateur. Elle retient donc l ’attention et rend inactives toutes les autres fenêtres.

• Toolbar et autres widgets?• Représentation des objets d’intérêts?

• Manipulation directe de ces objets ?

• Opérations réversibles, incrémentales?

• Métaphores?

37

Manipulation directe

38

Han, J. Y. 2007. Perceptive Pixel, MediaWall.Han, J. Y. 2005. Low-Cost Multi-Touch Sensing through Frustrated Total Internal Reflection. In Proceedings of the 18th Annual ACM Symposium on User Interface

Software and Technology.

Shen, C.; Vernier, F.D.; Forlines, C.; Ringel, M., "DiamondSpin: An Extensible Toolkitfor Around-the-Table Interaction", ACM Conference on Human Factors in

Computing Systems (CHI), pp. 167-174, April 2004 (ACM Press, TR2004-005)

http://cs.nyu.edu/~jhan/ftirsense/index.html http://www.ted.com/talks/redirect?key=j_han [2006]

Discussion sur la manipulation directe

39

Dimp – video longue

Dimp – exemples courts

De la manipulation directe à l’interaction instrumentale

Feedback

• Informer pour faciliter la compréhension

– contexte courant

– navigation (d ’où je viens?, où puis-je aller?)

– présentation des options

– progression des opérations

• Prévenir des situations d ’erreur

– messages explicites

– suggestions d ’actions

40

11

Défauts de feedback : exemples

• Correction automatique des marges

– De combien? Prévisualisation du résultat avant de le faire?

• Saisie des tabulations (feedback incitatif)

41

Simplicité et concision

• Actions fréquentes

– => commandes concises

• Éviter de surcharger l'écran

– Affichage de l’info utile pour l’activité en cours

42

Concision - Abréviation

• Objectifs– accessible explicitement, compréhensible, facilement

mémorisable

• Règles usuelles pour la construction des abréviations– caractère spécial + 1ère lettre de la commande (CTRL-D)– troncature maximum (DEL)– troncature 2 lettres (CD)

• la plus efficace en terme de mémorisation + temps d ’éxécution

• A éviter dans le choix des abréviations– abréviations proches mais aux effets très différents

• Exemple – sous unix: rm *~ et rm * ~

43

Lisibilité / compréhension

• Lisible

– discriminable, identifiable

– la lisibilité facilite la lecture

• Compréhensible

– appréhendable d'emblée par la raison et/ou par les sens

• Lisible => compréhensible ?

44

12

Critères de lisibilité

• Les critères de lisibilité varient selon les média– Lisibilité du texte – Lisibilité des diagrammes– Lisibilité des cartes géomatiques– Etc

• Texte– contrastes

• Lisibilité web écran - Normes W3C

– polices• difficulté : contexte variable média, lumière, résolution, etc. • certaines polices spécialisées en lisibilité à l'écran

– > discrimination facile des caractères/chiffrescomme par exemple: O, Q, 0

45

Adaptabilité ≠ Adaptativité

• Adaptabilité

– Personnalisation explicite par l ’utilisateur

– choix du lexique, préférences de présentation, modalités du dialogue

– La difficulté

• l’interface de configuration

• souvent mal conçue

46

Adaptativité

• personnalisation dynamique et automatique– à partir de l ’expérience de l ’utilisateur ou des

opérations déjà effectuées

• très controversée... – perte de contrôle de l’utilisateur

– non prédictibilité du comportement de l ’interface

– Caractère intrusif• effort nécessaire pour s’adapter aux modifications

• difficulté à se faire un modèle conceptuel de l ’interface

• rupture du principe de cohérence

47

Aide

• différents types d ’aide– aide par incitation

• guider les entrées en affichant les unités de mesure

• expliciter les propriétés des données (longueur, format, etc)

– assistance contextuelle• à propos de commande

• suppose que l ’utilisateur connaît déjà la commande

– tutorial, assistant ou version débutant

– système d ’aide orienté tâche

48

13

Aide

• propriétés de base d ’un bon système d ’aide

– disponible à tout moment

– non intrusif

– précis et robuste

– consistent et flexible

• ex: les bulles d ’aide du Macintosh

– orienté tâche

49

Systèmes d ’aide avancés

• Principe– s ’appuie sur

• un modèle utilisateur construit à partir de son activité

– expériences– préférences– erreurs

• des connaissances sur l ’activité du domaine

– => le système présente l ’aide à l ’utilisateur

• sur la tâche qu ’il est en train d ’accomplir

• adaptée à son niveau d ’expérience

• Avantages– aide orientée tâche– aide pour l ’amélioration

des performances

• Limites– dépendent du modèle

utilisé

50

Système d ’aide et modèle conceptuel

• Messages d ’aide– composés d ’une explication sur

• des données présentes à l ’écran (ce qu ’elles contiennent)• des commandes (ce qu ’elles font)• des modalités d ’interaction (comment faire)

– construits automatiquement à partir du modèle conceptuel de l ’interface

• par invocation de règles• si <condition> alors <description msg aide>• Exemple

– Si ?objet sélectionné pour aide – et ?objet invoque commande ?cmd– par modalité d ’interaction ?inter– et ?cmd a pour paramètre ?param– alors afficher : « Pour ?inter ?cmd il faut spécifier les arguments ?param »

51

Modèles utilisateurs pour systèmes d ’aide en ligne

• Différents types de modèles– modèle par quantification

• niveaux d ’expertise• ++ : nécessite peu d ’informations• -- : un peu grossier

– modèle par stéréotype• construction d ’un stéréotype de l ’utilisateur

– à partir de son comportement

• invocation de l ’aide contextuelle correspondant au stéréotype de l ’utilisateur courant

• --: coût de construction du stéréotype et du système expert sous-jacent

– modèle par étalon• modèle étalon = modèle d ’un utilisateur expert • les modèles des autres utilisateurs sont décrits en terme de différences avec

l ’étalon• invocation de l ’aide contextuelle à partir des différences avec l ’étalon• ++ : conseils pour amélioration des performances des utilisateurs

52