Directives de conception et principes de conception Design

Directives de conception et 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 graphiquement au 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

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: Colour Ch. 10: Behaviours Ch. 11: Language

Autres exemples … • Joel’s Guidelines (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.

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: • Tester avec des vrais utilisateurs. • Les utilisateurs ont une mémoire à court terme limitée à seulement 7± 2 choses

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 • 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 fair « 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. …

Ronald Baecker’s Design Guidelines (modified by M. Mc. Guffin) • Heavily Influenced by 30 “design elements” in P. Heckel, The Elements of Friendly Software Design, The New Edition, Sybex, 1991 • Principles organized as follows: – – The design and the design process The user The technology and the interaction User support

Design principles: The designer and the design process • 1. Be humble, and iterate often – You won’t get it right the first time … – Or the second time either : -) • 2. 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

Design principles: The designer and the design process • 3. Use multidisciplinary design teams – – – Software User interface design Social/behavioral science Visual/graphic design Domain expertise • 4. Really know the subject matter – Deep domain expertise required

Design principles: The designer and the design process • 5. Consider the physical environment – Example: Workstation ergonomics – Example: Mobile use – Example: using the Internet for distribution of content (web publishing) • 6. Consider the work (or school or play) environment

Design principles: The user • 7. Really know “the user” – Who is a typical user? Who are all the users? – Observe, ask, have users participate on design team • 8. Employ the user’s knowledge – Communicate with appropriate metaphors • Example: Virtual museum • Example: Electronic book – 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

Design principles: The user • 9. 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) • 10. 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

Design principles: The technology and the interaction • 11. Exploit new hardware paradigms – Example: mobile devices linked at high-bandwidth – Example: speech I/O, non-speech audio – Example: Novel 3 D input / output devices • 12. Communicate visually and articulately – Focus the user’s attention • Key information at the tracking symbol (cursor) • Graceful methods to grab the user’s attention – Structure the user’s interface • A frame of reference, a mental map • Use gestalt principles from graphic design

Application Example: Sabre Travel Booking Development Before After

Design principles: Technology & interaction • 13. 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 • 14. 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 • 15. Enable articulate expression by users – Example: Widgets for controlling rectangular areas

Widget for controlling rectangular areas

Design principles: User support • 16. 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 • 17. Minimize user frustration – Consistency whenever possible – Error messages should use language that reduces defensiveness • 18. 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 cher ?

Questions • Seriez-vous capables de distinguer entre un principe de conception, et une directive de conception ? • Quels sont les avantages de ces choses ? Les désavantages ?