Directives de conceptionet principes de conception

(“Design guidelines”, “design principles”)

• Des énoncés qui donne des conseils sur comment procéder;des règles

• Exemples (Hansen 1971)– “Connaître ton utilisateur”– “Minimiser le besoin de mémoriser”

• Exemple: permettre de selectionner graphiquementau lieu de mémoriser des codes

– “Optimiser les opérations”• Exemple: avoir des racourcis clavier

– “Concevoir en vue des erreurs possibles”• Exemple: toujours permettre un undo

D’autres exemples …

• Rubinstein et Hersh (1984)– .....– 2. Separate design from implementation– .....– 4. Develop an explicit use model– .....– 87. Articulate the evaluation goals– .....– 93. Videotape real users

“Tog On Interface”(livre de Bruce Tognazzini, 1991)

• Présente 200 directives reliées à la conception des interfaces sur le Macintosh, touchant les sujets suivants:– The Design Process– Positively Determining System Behaviour– Positively Influencing User Perceptions and User Behaviour– Promoting Consistency– Making the Interface “Visible”– Reducing or Eliminating Navigation– Conceptual Models and the System Image– Human-Computer Conversation, Vocabulary– Screen Objects, Menus, Icons, Fonts, Error Messages– User Testing– Minimizing Impact of New Releases on Old Users

Macintosh Human Interface Guidelines• “...describes the way to create products that optimize

the interaction between people and Macintosh computers” (Apple Computer, Addision-Wesley, 1992)– Ch. 1: Human Interface Principles– Ch. 2: General Design Considerations– Ch. 3: Human Interface Design and the Development Process– Ch. 4: Menus– Ch. 5: Windows– Ch. 6: Dialog Boxes– Ch. 7: Controls– Ch. 8: Icons– Ch. 9: Color– Ch. 10: Behaviors– Ch. 11: Language

D’autres exemples …

• Les principes de Joel Spolsky (http://www.joelonsoftware.com)– A user interface is well-designed when the program behaves

exactly how the user thought it would.– If your program model is nontrivial,

it's probably not the user model.– Every time you provide an option,

you're asking the user to make a decision.– Users Don’t Read the Manual.– In fact, users don’t read anything.– Users can’t control the mouse very well.– Users can’t remember anything.

• Les premiers 6 chiffres sont une espèce de numéro de compte

• Les 5 derniers chiffres, dans ce cas, veulent dire “Bourse pour étudiant canadien de 3e cycle”– Je suis obligé de garder une liste de ces

“codes magiques” dans un fichier ASCII que je consulte à chaque fois que je remplis ces formulaires

• Si on remplaçait ce formulaire avec un site site, quelle serait une meilleure façon de saisir ces numéros ?

Directives et principes de conception

• On distingue entre …– Les directives de conception: plus précises, plus détaillées,

s’appliquent dans moins de cas mais disent plus précisément que faire. Exemple:

• Toujours mettre le bouton « Okay » à gauche du bouton « Annuler » dans les boîtes de dialogue.

– Les principes de conception: plus généraux, plus fondamentaux, plus vagues; s’appliquent dans plus de cas mais peuvent être moins évidents à appliquer. Exemples:

• Connaitre vos utilisateurs.• Les utilisateurs ont une mémoire à court terme limitée à

seulement 7±2 choses (voir « The Magical Number Seven, Plus or Minus Two » de George Miller)

Directives et principes de conception

• Avantages:– Stimulent des idées– Servent comme listes de vérification qui donnent des

conseils utiles– Peuvent être utilisés pour évaluer une interface

(évaluation heuristique)

• Désavantages:– Parfois erronés– Il y a parfois des contradictions entre deux directives ou

deux principes, nécessitant des compromis– Souvent trop vagues ou bien trop spécifiques pour l’interface

devant nous– Peuvent être trop nombreaux

• Exemple: Smith et Mosier: 679 (!!) directives (1984)

Des principes de Shneiderman:8 règles d’or

• 1. Être cohérent (« consistent »)– Les mêmes suites d’actions pour des tâches semblables– Les mêmes termes employés à différents endroits pour

référer au mêmes concepts– Les mêmes couleurs, polices, emplacements, widgets, etc.

utilisés dans des situations analogues– Exemples d’exceptions:

• Boîte de dialogue pour confirmer avant de supprimer un fichier (pour les autres actions, on n’a pas normalement besoin d’une étape de confirmation)

• Ne pas montrer les mots de passe qui sont entrées

8 règles d’or de Shneiderman (suite)

• 2. Concevoir pour différents utilisateurs– Donner des explications pour les utilisateurs néophytes– Offrir des racourcis de claviers pour les experts– Concevoir pour des utilisateurs qui n’ont pas de

• Souris• Clavier• Vision parfaite• Contrôle parfaite de leurs mouvements• Etc.

8 règles d’or de Shneiderman (suite)

• 3. Donner un retour visuel informatif– Un retour pour chaque action de l’utilisateur

– Pour des actions infréquentes et/ou majeures, donner un retour visuel plus important

• 4. …• 5. …• 6. Permettre de faire « undo »

– Ça encourage l’utilisateur d’explorer l’interface

– Rend les erreurs moins graves

– Exemple: selon Aza Raskin, nos logiciels ne devraient jamais complètement effacer un fichier

• 7. …• 8. …

Quelques directives de conceptiondu prof. Ronald Baecker

(modifiées by M. McGuffin) …

Principes de conception de Baecker

• Be humble, and iterate often– You won’t get it right the first time …– Or the second time either :-)– (Exemples: facebook, gmail, …)

• Follow a user-centered design process– Study work practice– Observe users as they use a system– Ask users with surveys, questionnaires, interviews– Try to put user(s) on the design team

Principes de conception de Baecker

• Use multidisciplinary design teams– Software– User interface design– Social/behavioral science– Visual/graphic design– Domain expertise

Principes de conception de Baecker

• Really know “the user”– Who is a typical user? Who are all the users?– Observe, ask, have users participate on design team

• Employ the user’s knowledge– Communicate with appropriate metaphors

• Exemple: livre électronique qui permet de “tourner” et “feuilleter” des pages

• Example: dans le domaine financier, utiliser le vert pour les gains, le rouge pour les pertes

– Speak the user’s language• The user’s jargon, not computer jargon

• Example: Points and picas for typographers

• Movie authoring software: NTSC Timecode — HH:MM:SS:FF

Principes de conception de Baecker

• Build a mental model in the user’s mind– Begin with the metaphor– Example: Images made of pixels (painting program)

or lines (drawing program)– Example: Financial data on a gridded worksheet

with rows and columns (spreadsheet)

• Design for varieties of user expertise– Example: novice and experienced users (e.g. shortcuts)– Example: user customization (adaptable interfaces)– Example: individual use, and collaborative use

Principes de conception de Baecker

• Exploit new hardware paradigms– Example: mobile devices linked at high-bandwidth– Example: speech I/O, non-speech audio– Example: Novel 3D input / output devices

• Communicate visually and articulately– Focus the user’s attention

• Infobulles et d’autres informations situées au curseur

• Méthodes subtiles pour attirer l’attention(couleur; animations très restraintes)

– Communiquer de l’information par des moyens visuels pour permettre de remarquer des patrons et filter visuellement

Interface de réservation de voyage(Sabre Travel Booking)

Avant Après

Principes de conception de Baecker

• Respond to the user’s actions in a way that is clear and comprehensible– Speed and predictability of response– Complete, terse, comprehensible feedback– Hidden system state (modes) kept to a minimum

• Example: Cut and Paste

• Example: hitting “Undo” and not knowing what will be undone

• Orient the user in the world– Where am I? Where have I been? Where can I go?– Example: Web sites with and without site maps– Example: Online form with and without indication of number of

steps to perform

Principes de conception de Baecker

• Anticipate that users will have “problems”– Huge varieties of users, tasks, contexts– Need to anticipate and, if possible, prevent “errors”– Need for online help, error handling, training, support

• Minimize user frustration– Consistency whenever possible– Error messages should use language that reduces

defensiveness

• Make your design simple– Elegance and simplicity aid everyone involved — the designer,

the implementer, and the user

Remarque

• Si vous avez à concevoir une interface de genre X, essayer de trouver des directives (ou même des principes) de conception spécifiques à X. Exemples:– Conception de site web– Conception d’appareil mobile– Conception de logiciel pour Mac OS X

• Question: comment / où en chercher ?

Questions

• Seriez-vous capables de distinguer entre un principe de conception, et une directive de conception ?

• Quels sont les avantages de ces directives et principes ?Les désavantages ?

Un exemple pour discussion …

Combien de clics sont nécessaires pour créer un nouveau compte? Clics 1, 2 …

Quel génie chez Microsoft a eu l’idée de trier par rangée? Clic 3 …

Clic 4

Comment créer un nouveau compte? Le bouton “Add…” semble prometteur.

Clic 5…

Est-ce que je peux saisir un nouvel identifiant ici? Non, ça va afficher un message d’erreur. Et si je clique sur

“Browse…” (clic 6)

… j’obtiens un autre champ de texte me demandant de saisir des chaînes, au lieu de voir un menu des identifiants connus.

(Quel principe est violé?) Clics 7, 8 pour reculer…

Clic 9 pour basculer vers l’onglet “Advanced”…

Et clic 10 pour le bouton “Advanced” (on est rendu très avancé!)

Clics 11, 12

Finalement, je peux saisir un nouvel identifiant.

Clic 13 pour créer (mais je n’ai pas fini; je veux rendre l’utilisateur Admin)

Clic 14 pour fermer cette fenêtre

Clic 15 pour changer d’onglet

Le nouvel utilisateur n’est pas là Clic 16 pour fermer cette fenêtre…

Clic 17 pour réouvrir …

Clics 18 et 19 …

Clic 20 pour changer d’onglet …

Clics 21 et 22 pour le mettre admin, ensuite clics 23, 24 pour tout fermer.

Un autre exemplepour discussion …

Je me sers du site web du FQRNT peut-être une fois au 6-12 mois. Je dois aller chercher où me loguer …

La page principale. Où sont les champs pour saisir mon identifiant et mot de passe? Pas facile de trouver où cliquer (les couleurs et la taille du lien ne ressortent pas).Est-ce que la page a besoin d’être si chargée d’informations?

Une erreur, entraînée par une des actions les plus fréquentes. Ça commence mal.

Je devrais pas plutôt voir cette page comme première étape?

Est-ce que la page a besoin d’être si chargée d’informations?

L’onglet “Rapport final du chercheur” semble prometteur, mais permet seulement de lire un document, qui n’est pas le rapport final.

“Accès au dossier du chercheur financé” ressemble au lien cliqué il y a 3 pages précédentes.

Il fallait que je lise tout sur la page, que je fasse une recherche pour le mot “approuver” (sans succès), et que je téléphone quelqu’un pour demander où cliquer et que j’envoie par courriel à cette personne une capture d’écran de mon fureteur web (15 minutes perdues par deux personnes).

Est-ce que le lien “Cliquez ici” pourrait avoir un nom plus déscriptif ?

Le couleurs sur ce site ne semblent pas tellement cohérentes d’une page à l’autre. (Brun, vert, bleu, orange, rouge, …)

Comparons à un site qui a plus d’utilisateurs …

Grâce à un “cookie”, le site se rappelle de mon identifiant.

Contrairement au site précédent, celui-ci est probablement utilisé par beaucoup d’utilisateurs quotidiens qui sont très habitués à l’interface et la disposition des informations. Le site peut donc se permettre de montrer beaucoup d’informations et d’avoir une interface assez chargée.

Toutefois, on remarque que les activités et les messages récents sont mis en évidence au centre de la page, et par les icônes rouges en haut qui ressortent visuellement.

• Si vous aviez à (re)faire la conception du site web précédent, comment pourrez-vous éviter les problèmes présentés (et d’autres problèmes semblables) ?– Gardez dans l’esprit que les profs sont seulement

un des utilisateurs du site.

• Y a-t-il des directives (ou des principes) de conception que nous pouvons proposer pour guider la conception des futures sites web ?