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 Nettoyage à sec

30 ASUS PadFone

31 La forme du cellulaire (et de son port dans la tablette) établit une contrainte physique, empêchant à lutilisateur de linsérer dans la tablette avec la mauvaise orientation.

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

33 Création dalarme sur téléphone Android Pourquoi le bouton OK est grisé ?

34 EdgeWrite ( ) 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 ? ?

38 De POET, page 97

39

40

41 Solutions dans POET, pages 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 (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

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) dun 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 lutilisateur – 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 dun modèle conceptuel!

54 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

55 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

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

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

70 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

71 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

72 Retour Parfois, lutilisateur veut même un retour avant dexé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!

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

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

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

86 Réponses… Beaucoup dentraî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 lusage 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?

91 Révision 7 concepts: 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 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

95 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.

96

97 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

98

99

100

101

102

103

104

105

106 Le livre:

107


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