Quelques concepts de base. Interfaces utilisateurs Ne sont pas juste des interfaces graphiques avec...
-
Upload
corbin-nguyen -
Category
Documents
-
view
106 -
download
0
Transcript of Quelques concepts de base. Interfaces utilisateurs Ne sont pas juste des interfaces graphiques avec...
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: