La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Quelques concepts de base. Interfaces utilisateurs Ne sont pas juste des interfaces graphiques avec souris et clavier.

Présentations similaires


Présentation au sujet: "Quelques concepts de base. Interfaces utilisateurs Ne sont pas juste des interfaces graphiques avec souris et clavier."— Transcription de la présentation:

1 Quelques concepts de base

2 Interfaces utilisateurs Ne sont pas juste des interfaces graphiques avec souris et clavier

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 dinterfaces 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 dun 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 daccomplir quelque chose, qui « afford » (en anglais) Une propriété ou un aspect dune interface qui suggère et qui détermine comment linterface 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 quon pose des choses par dessus; il a une affordance pour le support des objets – Une chaise a une affordance permettant quon sassoit dessus

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

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

11 Dautres exemples…

12

13

14 Manque daffordances?

15

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 linteraction 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 denfant

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 largent – 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 dune souris Exemple: une barre de défilement virtuelle Exemple: une grille dalignement 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?

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 – 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 à lavant: contrainte sémantique Lumière rouge en arrière, texte à lendroit: contraintes culturelles Il reste seulement une place pour le dernier bloc: contrainte logique

28 De POET, page 83

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

30 Mapping

31 ? ?

32 De POET, page 97

33

34

35 Solutions dans POET, pages Quels sont les pours ou les contres de ces solutions?

36 Un autre fourneau

37 Des sèche-linges

38

39

40

41

42 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!

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

44 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

45 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) dun curseur 3D ? – Plusieurs mappings sont possible – Existe-t-il un modèle conceptuel rendant le mapping mémorable?

46 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 lutilisateur – Ad hoc, improvisé, informel, incomplet – Peut comprendre des erreurs et des superstitions Les deux sont typiquement différents du vrai système!

47 3 sortes de boutons ??? Une complexité excessive nuit à la formation dun modèle conceptuel!

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

49 Logiciel de traitement de texte est comme un dactylographe – La touche « retour chariot » Les dossiers virtuels sont comme des dossiers physiques contenant des papiers Lespace « derrière » les fenêtres est comme la surface dun 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 senvoient 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 … Exemples de métaphores

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

51 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

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

53

54 Retour Une indication du résultat des actions de lutilisateur 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 dun appareil

55 Retour Devrait permettre à lutilisateur de sapercevoir sil 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

56 Retour Parfois, lutilisateur veut même un retour avant dexécuter une action – prévisualisation, aperçu avant impression

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

58

59 Le volume est élevé ou non?

60 Exemple: un site web …

61 Exemple: un site web (2)

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

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

64 Codes de téléphone Ces affordances ne sont pas visibles!

65 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 ?

66 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

67 Quelques conseils Dans une interface simple, – Un bouton (ou contrôle) par fonction! Sil 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, cest peut-être signe dune faiblesse de votre conception Dans une interface plus complexe, – Utiliser un écran pour permettre un retour visuel riche est flexible

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

69 Question Comment font les pilotes davions pour interagir avec tellement de contrôles et dinstruments?

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

71 Questions?

72 Exercise Concevez un appareil multifonctionnel qui combine les fonctionnalités suivantes: – Radio AM/FM – Magnétophone – 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 Remarque: permettez lusage de la radio et du réveil matin dans le noir!

73 Une solution inacceptable De POET page 32

74 Un autre appareil multifonctionnel: Le 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?

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

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

77

78 Conclusion Des exemples de conception sont partout! – Les autos, les crayons, les livres, les lavabos, les vêtements, les portes, etc. Observez la multitude dinterfaces 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

79 Quelques mots de la fin de POET (Norman, pages ) 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.

80

81 Proposition pour des nouveaux objets quotidiens, ou Lutilité versus lutilisabilité: 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

82

83

84

85

86

87

88

89

90 Le livre:

91 I have recently developed a cellular phone accessory that is taking the market by storm. It will work with all cellular phones today. Because all of you are my friends I am going to allow you to obtain one of these babies for yourself at the rock bottom price of $29.95 each.

92


Télécharger ppt "Quelques concepts de base. Interfaces utilisateurs Ne sont pas juste des interfaces graphiques avec souris et clavier."

Présentations similaires


Annonces Google