Quelques concepts de base

Présentation au sujet: "Quelques concepts de base"— Transcription de la présentation:

1 Quelques concepts de base

2 Interfaces utilisateurs
Ne sont pas juste des interfaces graphiques avec souris et clavier Watch: Casio Technowear Mens Digital Watch Calculator CA53W-1  Cellphone: LG CU500 PDA: Palm Tungsten W (GSM/GPRS)

3 Interfaces utilisateurs
Ne sont pas juste des interfaces aux objets avec un CPU embarqué

4 Comment concevoir les interfaces aux « objets quotidiens »?
Donald A. Norman, The Psychology of Everyday Things (POET) ou The Design of Everyday Things, 1988 Les interfaces sont partout: > « objets quotidiens » Beaucoup d’interfaces frustrantes: magnétoscope programmable, montre digitale multifonctionnelle avec 4 boutons, téléphone de bureau, etc. On peut beaucoup apprendre en observant ces interfaces

5 Comment concevoir les interfaces aux « objets quotidiens »?
7 concepts clés dans le livre POET de Norman: affordances contraintes mapping modèles conceptuels métaphores retour (« feedback ») visibilité

6 Exemple: un robinet Besoin de contrôles (température, débit)
Besoin que ces contrôles soient visibles Besoin de savoir comment fonctionner les contrôles Besoin de connaître le le mapping entre les contrôles et le résultat Besoin d’un retour suite à nos actions, de préférence rapidement

7 Affordance Définie en premier par le psychologue James J. Gibson, ensuite utilisée par Norman La définition originale a évolué avec le temps Quelque chose qui permet, qui offre le moyen d’accomplir quelque chose, qui « afford » (en anglais) Une propriété ou un aspect d’une interface qui suggère et qui détermine comment l’interface peut être utilisée Exemples: poignées, boutons, leviers, contrôles, etc.

8 Affordance Souvent les affordances qui nous intéressent sont des contrôles Un bouton permet d’être appuyé ou tourné Un levier permet d’être tiré ou glissé Un marteau permet de frapper Les affordances peuvent aussi être passives et immobiles Une poignée permet d’être tenue Un bureau permet qu’on pose des choses par dessus; il a une affordance pour le support des objets Une chaise a une affordance permettant qu’on s’assoit dessus

9 Poignées de portes Je tire ou je pousse?
Ah, je pousse sur le côté droit. Est-ce que c’est une porte? De quel côté?

10 Les affordances … Devraient être visibles!
Devraient suggérer comment on peut les utiliser Autres exemples d’affordances ? Visibles ou invisibles, bien ou mal conçues?

11 D’autres exemples…

12 D’autres exemples…

13

14 Manque d’affordances?

15 Manque d’affordances?

16 Question Quel est le nombre minimal de boutons nécessaires dans une interface pour accéder à N fonctions?

17 Le projecteur Leitz Pravodit

18 Les contraintes Dans un certain sens, le contraire des affordances
Limitent ou découragent certaines actions Empêchent les erreurs Peuvent aider à suggérer comment utiliser (ou ne pas utiliser) une interface Souvent, elles facilitent l’interaction en simplifiant les actions possibles

19 Les contraintes Exemple: un mur qui aide un bébé à se tenir debout
Exemple: des règles Exemple: une contrôle linéaire Exemple: roues supplémentaires sur une bicyclette d’enfant Ruler: French curve: Training wheels:

20 Empêche des erreurs

21 Les contraintes Exemples de contraintes utilisées comme rappels:
Un guichet automatique qui redonne la carte avant de donner l’argent Laisser ses clés et argent dans ses souliers sur la plage Laisser ses clés dans le frigo (!)

22 Les contraintes Exemple: la surface 2D en dessous d’une souris
Exemple: une barre de défilement virtuelle Exemple: une grille d’alignement dans un logiciel de dessin Exemple: toujours demander un nom de fichier avant de permettre de sauvegarder

23 (Manque de) contraintes
La souris du iMac de Apple Autres exemples? Mouse:

24 Manque de contraintes?

25 Exemple de contraintes …
(vidéo de Bill Buxton avec barres de défilement découpées en carton posées sur une tablette numérisante)

26 Sortes de contraintes Physiques Logiques Sémantiques Culturelles
Exemple: lancer une arme nucléaire seulement avec deux clés, tournées en même temps, qui sont séparées de façon physique Logiques Sémantiques Relié à la signification des objets/symboles/mots Culturelles Exemple: ne pas cliquer si le curseur ressemble à un sablier

27 Exemples des sortes de contraintes
Couplage des blocs: contrainte physique Policier par-dessus la moto, face à l’avant: contrainte sémantique Lumière rouge en arrière, texte à l’endroit: contraintes culturelles Il reste seulement une place pour le dernier bloc: contrainte logique Motorcycle:

28 De POET, page 83

29 Nettoyage à sec

30 ASUS PadFone

31 ASUS PadFone La forme du cellulaire (et de son “port” dans la tablette) établit une contrainte physique, empêchant à l’utilisateur de l’insérer dans la tablette avec la mauvaise orientation.

32 Le “S Pen” (stylet) du Samsung Galaxy Note
La coupe transversale du stylet n’est pas circulaire; sa forme permet d’être inséré avec seulement une orientation. Est-ce une bonne chose ?

33 Création d’alarme sur téléphone Android
Pourquoi le bouton “OK” est grisé ?

34 EdgeWrite ( http://depts.washington.edu/ewrite/ )
Une façon méchanique de simplifier la reconnaissance de caractères, avec des contraintes physiques

35 Mapping Correspondance, ou relation, entre les entrées et les sorties
Devrait être naturel, evident, mémorable Exemple: correspondance spatiale directe

36 Mapping

37 Mapping ? ?

38 De POET, page 97

39

40

41 Solutions dans POET, pages 76-77
Quels sont les pours ou les contres de ces solutions?

42 Un autre fourneau

43 Des sèche-linges

44

45

46

47

48 Le mapping dans un robinet
entrées: chaud, froid sorties: température, débit température ≈ chaud – froid débit ≈ chaud + froid Vivent les robinets japonais!

49 Modèle conceptuel Modèle mental (qu’a un utilisateur) d’un système, permettant de prédire les effets de leurs actions et de comprendre les résultats Permet de répondre aux questions: Qu’est-ce que X? Qu’arrive-t-il lorsque Y? Pourquoi Z? Exemples: Arborescence dans un menu Fonctionnement du glisser-déposer des fichiers dans MS Windows

50 Modèle conceptuel Exemple: un logiciel de dessin simple
Objets: point, ligne, page Relations: Une ligne relie 2 points Une page contient 0 ou plus de lignes Actions sur les objets: Effacer une page Créer, supprimer, déplacer des points ou des lignes Attributs des lignes Couleur, style, graisse Actions sur les attributs: Changer ces attributs

51 Modèle conceptuel Exemple: le Rockin’ Mouse (Balakrishnan et al. 1997)
Souris à quatre degrés de liberté 2 translationnelles 2 rotationnelles (roulis et tangage) (Montrer vidéo) Comment effectuer une translation (x,y,z) d’un curseur 3D ? Plusieurs mappings sont possible  Existe-t-il un modèle conceptuel rendant le mapping mémorable?

52 Deux modèles Le modèle du concepteur
Systématique, logique, compréhensif Est développé avec la cohérence et l’élégance comme buts Le modèle de l’utilisateur Ad hoc, improvisé, informel, incomplet Peut comprendre des erreurs et des superstitions Les deux sont typiquement différents du vrai système!

53 3 sortes de boutons ??? Une complexité excessive nuit à la formation d’un modèle conceptuel!

54 Les métaphores Relient la structure et le fonctionnement du système à ceux d’un système plus simple est familier Permettent d’exploiter les connaissances antérieures et de former un modèle conceptuel Exemples: des icônes qui ressemblent à des objets de la vie quotidienne

55 Exemples de métaphores
Logiciel de traitement de texte est comme un dactylographe La touche « retour chariot » Les dossiers virtuels sont comme des dossiers physiques contenant des papiers L’espace « derrière » les fenêtres est comme la surface d’un bureau Les outils virtuels de dessin (crayon, pinceau, ciseaux, etc.) sont comme les outils physiques Les objets dans un logiciel Java sont comme des petites personnes qui s’envoient des messages et qui travaillent ensemble Le « shopping cart » (chariot ou panier d’épicerie) sur un site web commercial; les « bookmarks » (marque-pages) dans un fureteur web; les onglets; les menus; copier/couper/coller avec un « clipboard » (bloc-notes); « scroll » (comme un parchemin); dossier et fichier; « spreadsheet »; souris …

56 Métaphores Mais attention: une métaphore n’est pas une identité
Un logiciel de traitement de texte est comme un dactylographe, mais on peut insérer du texte!

57 Exemples de métaphores
Le boutons et le curseur sur un appareil numérique sont comme les touches de flèche et le curseur sur un ordinateur

58

59

60

61

62

63 Propellerhead - Reason
(propellerheads.de) Reason est conçu pour le musicien qui est déjà familier avec les interfaces physiques. L'avantage c'est que ceux qui connaissent ça peuvent facilement se retrouver. Il y a par contre plusieurs désavantages quand on se limite à des interfaces qui changent peu visuellement quand on les manipule. (adapté d'un diapo de André Milton)

64 Les développeurs de Reason on même décidé d'avoir une vue “de dos” qui permet de brancher/débrancher les instruments et boites d'effets. On voit des éléments graphiques qui ne sont là que pour faire semblant d'avoir de l'équipement analogue. (adapté d'un diapo de André Milton)

65 IK Multimedia - Amplitube
(ikmultimedia.com) Il y a des centaines d'effets et générateurs de son en format de plugin. Presque tout les séquenceurs accepte un ou plusieurs formats. Amplitube est un exemple de plugin pour la guitare. L'interface est très familières pour les guitaristes. (adapté d'un diapo de André Milton)

66 Le placement de micro et type d'amplificateur étaient dans le temps des décisions importantes avant l'enregistrement. Aujourd'hui, on peut faire ça après. (adapté d'un diapo de André Milton)

67 Les pédales virtuelles.
(adapté d'un diapo de André Milton)

68 Briser les métaphores par exprès: Vidéo de Treetype (Joshua Nimoy)

69 Briser les métaphores par exprès: Vidéo de Treetype (Joshua Nimoy)

70 Retour Une indication du résultat des actions de l’utilisateur
Habituellement visuel, mais peut impliquer les autres sens aussi Exemples: La tracée laissée par un crayon Le bouton sur un thermostat Des petites lumières indiquant l’état d’un appareil

71 Retour Devrait permettre à l’utilisateur de s’apercevoir s’il se rapproche de son but ou non, idéalement en temps réel Exemple: une barre de défilement pour naviguer un document, avec retour visuel soit pendant le glissement ou seulement sur relâchement

72 Retour Parfois, l’utilisateur veut même un retour avant d’exécuter une action prévisualisation, aperçu avant impression

73 Exemple de retour Lumière rouge indiquant la température

74

75 Le volume est élevé ou non?

76 Exemple: un site web …

77 Exemple: un site web (2)

78 Exemple: un site web (3) Le problème: manque de confirmation (c.-à-.d. de retour) !

79 Visibilité On veut que les affordances soient visibles!
On veut aussi que le retour soit visible!

80 Codes de téléphone Ces affordances ne sont pas visibles!
Codes taken from Ces affordances ne sont pas visibles!

81 Question Comment font les gens pour savoir comment interagir avec les > objets quotidiens ? Exemple: comment ferez-vous pour savoir comment utiliser cette poignée la première fois que vous la voyez ?

82 Réponse (partielle?) Les connaissances de comment utiliser les objets sont en partie encodées dans les formes physiques des objets, par exemple dans les affordances et contraintes présentées

83 Quelques conseils Dans une interface simple,
Un bouton (ou contrôle) par fonction! S’il y a moins de boutons que de fonctions, on va devoir avoir des modes  et des troubles associées… (exemples: magnétoscope programmable, montre digitale multifonctionnelle avec 4 boutons) Si des étiquettes sont nécessaires sur vos boutons, dans une interface simple, c’est peut-être signe d’une faiblesse de votre conception Dans une interface plus complexe, Utiliser un écran pour permettre un retour visuel riche est flexible

84 Mon téléphone de bureau
À quoi servent tous les boutons ???

85 Question Comment font les pilotes d’avions pour interagir avec tellement de contrôles et d’instruments?

86 Réponses… Beaucoup d’entraînement Des décennies de conception itérée
1 fonction par bouton!

87 Questions?

88 Exercise Concevez un appareil multifonctionnel qui combine les fonctionnalités suivantes: Radio AM/FM Magnétophone (« cassette player ») Lecteur de disques compactes Téléphone Répondeur de téléphone Horloge Réveil matin (qui peut activer une alarme, la radio, le magnétophone, ou le lecteur de CD) Lampe Téléviseur avec un écran de 5 cm En utilisant des technologies des années 80 Remarque: permettez l’usage de la radio et du réveil matin dans le noir!

89 Une solution inacceptable
De POET page 32

90 Un autre appareil multifonctionnel: Le téléphone intelligent (iPhone de Apple)
téléphone + appareil photo + assistant personnel + baladeur numérique + client courriel + fureteur web A-t-il plus de chances à avoir une bonne utilisabilité? Est-il plus facile à concevoir? Pourquoi? Apple iPhone:

91 Révision 7 concepts: Un exemple de chaque, s.v.p. ? affordances
contraintes modèles conceptuels métaphores mapping visibilité retour (« feedback ») Un exemple de chaque, s.v.p. ?

92 Question Quelle est la différence entre un widget et une affordance?

93

94 Conclusion Des exemples de conception sont partout!
Les autos, les crayons, les livres, les lavabos, les vêtements, les portes, etc. Observez la multitude d’interfaces autour de vous et réfléchissez Observez ce qui fonctionne bien ou mal, et pourquoi Cela vous rendra des concepteurs plus sensibles, sages, perspicaces, et illuminé(e)s

95 Quelques mots de la fin de POET (Norman, pages 216-217)
“Now you are on your own. If you are a designer, help fight the battle for usability. If you are a user, then join your voice with those who cry for usable products. Write to manufacturers. Boycott unusable designs. Support good designs by purchasing them, even if it means going out of your way, even if it means spending a bit more. And voice your concerns to the stores that carry the products; manufacturers listen to their customers. When you visit museums of science and technology, ask questions if you have trouble understanding. Provide feedback about the exhibits and whether they work well or poorly. Encourage museums to move toward better usability and understandability. And enjoy yourself. Walk around the world examining the details of design. Take pride in the little things that help; think kindly of the person who so thoughtfully put them in. Realize that even details matter, that the designers may have had to fight to include something helpful. Give mental prizes to those who practice good design: send flowers. Jeer those who don't: send weeds.”

96

97 Proposition pour des nouveaux objets quotidiens, ou L’utilité versus l’utilisabilité: Les chindogu (étranges outils) de Kenji Kawakami A Chindogu cannot be for real use A Chindogu must exist Inherent in every Chindogu is the spirit of anarchy Chindogu are tools for everyday life Chindogu are not for sale Humour must not be the sole reason for creating a Chindogu Chindogu is not propaganda Chindogu are never taboo Chindogu cannot be patented Chindogu are without prejudice

98

99

100

101

102

103

104

105

106 Le livre: Book cover image:

107