Quelques concepts de base

Interfaces utilisateurs

• Ne sont pas juste des interfaces graphiques avec souris et clavier

Interfaces utilisateurs

• Ne sont pas juste des interfacesaux objets avec un CPU embarqué

Comment concevoir les interfacesaux « 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 apprendreen observant ces interfaces

Comment concevoir les interfacesaux « 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 lescontrôles et le résultat

• Besoin d’un retoursuite à 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 interfacequi suggère et qui déterminecomment 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 ouje pousse?

De quel côté? Ah, je poussesur le côté droit.

Est-ce que c’est une porte?

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émentairessur une bicyclette d’enfant

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’alignementdans 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?

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

– 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

De POET, page 83

Nettoyage à sec

ASUS PadFone

ASUS PadFoneLa 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.

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 unebonne chose ?

Création d’alarme sur téléphone Android

Pourquoi le bouton “OK”est grisé ?

EdgeWrite( http://depts.washington.edu/ewrite/ )

• Une façon méchanique de simplifier la reconnaissance de caractères, avec des contraintes physiques

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 contresde ces solutions?

Un autre fourneau

Des sèche-linges

Le mapping dans un robinet

entrées: chaud, froidsorties: 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 conceptuelExemple: 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 conceptuelExemple: le Rockin’ Mouse (Balakrishnan et al. 1997)

• Souris à quatredegré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 quiressemblent à des objetsde la vie quotidienne

• 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êtresest 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 …

Exemples de métaphores

Métaphores

• Mais attention: une métaphoren’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

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 diapode André Milton)

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 diapode André Milton)

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 diapode André Milton)

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 diapode André Milton)

Les pédales virtuelles.

(adapté d'un diapode André Milton)

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ésultatdes actions de l’utilisateur

• Habituellement visuel, mais peutimpliquer 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 rapprochede 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!

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 serventtous 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 (« 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!

Une solution inacceptable

De POET page 32

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 bonneutilisabilité? Est-il plusfacile à concevoir? Pourquoi?

Révision• 7 concepts:

• affordances• contraintes• modèles conceptuels• métaphores• mapping• visibilité• retour (« feedback »)

• Un exemple de chaque, s.v.p. ?

Question

• Quelle est la différence entreun 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: