Quelques concepts de base

Interfaces utilisateurs Ne sont pas juste des interfaces graphiques avec souris et clavier Watch: Casio Technowear Mens Digital Watch Calculator CA53W-1  http://focuscamera.com/camera-store/casio-technowear-ca53w-1-ca53w1.html http://images.aandhmarketing.com/bigpics/casio/ca53w1.jpg Cellphone: LG CU500 http://activerain.com/image_store/uploads/6/5/5/1/5/ar11657062451556.jpg http://activerain.com/blogsview/25613/Borrow-Money-Like-You PDA: Palm Tungsten W (GSM/GPRS) http://www.geekzone.co.nz/content.asp?contentid=996

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

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: > 20 000 « 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

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é

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

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.

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

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

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?

D’autres exemples…

D’autres exemples…

Manque d’affordances?

Manque d’affordances?

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

Le projecteur Leitz Pravodit

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

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: http://spiff.rit.edu/classes/phys301/lectures/age/age.html http://spiff.rit.edu/classes/phys301/lectures/age/ruler_small.jpg French curve: http://www.typophile.com/node/33531 http://www.typophile.com/files/fc-339-black_6633.png Training wheels: http://www.performancebike.com/shop/profile.cfm?SKU=12001 http://www.performancebike.com/product_images/500/00-4911-NCL-SIDE.jpg

Empêche des erreurs

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

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

(Manque de) contraintes La souris du iMac de Apple Autres exemples? Mouse: http://www.boingboing.net/2007/09/01/soviet-genone-mouse.html http://www.theapplecollection.com/iMac/images/amtk_mouse.jpg

Manque de contraintes?

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)

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

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: http://blogs.sdf.unige.it/wordpressMU121/s2820424/ http://www.comparestoreprices.co.uk/images/le/lego-city-police-motorcycle.jpg

De POET, page 83

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

Mapping

Mapping ? ?

De POET, page 97

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

Un autre fourneau

Des sèche-linges

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!

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

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

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?

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!

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

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

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 …

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!

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

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

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

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

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

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

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

Le volume est élevé ou non?

Exemple: un site web …

Exemple: un site web (2)

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

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

Codes de téléphone Ces affordances ne sont pas visibles! Codes taken from http://www.yashy.com/star.codes.html Ces affordances ne sont pas visibles!

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

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

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

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

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

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

Questions?

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 l’usage de la radio et du réveil matin dans le noir!

Une solution inacceptable De POET page 32

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? Apple iPhone: http://cworld.files.wordpress.com/2007/10/iphone.jpg

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

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

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

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

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

Le livre: Book cover image: http://www.chindogu.com/chindogu/tenents.html

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.