Directives et principes de conception tirées du livre Designing Interfaces: Patterns for Effective Interaction Design de Jenifer Tidwell Chapitre 1.

Présentation au sujet: "Directives et principes de conception tirées du livre Designing Interfaces: Patterns for Effective Interaction Design de Jenifer Tidwell Chapitre 1."— Transcription de la présentation:

1 Directives et principes de conception tirées du livre Designing Interfaces: Patterns for Effective Interaction Design de Jenifer Tidwell Chapitre 1

2 1.1 Safe Exploration Laissez l'utilisateur explorer sans se perdre ni se mettre dans le trouble Exemples: –essayer différents filtres ou effects speciaux dans un éditeur d'images, avec un bouton "Undo" pour revenir à l'image originale après chaque essai –explorer un site web en cliquant sur les liens disponibles, sans qu'une musique forte commence à jouer soudainement, et sans que des nouvelles fenêtres ou cadres apparaissent, permettant ainsi un comportement prévisible avec le bouton "Back" pour supporter la navigation –explorer des fonctionalités sur un téléphone cellulaire, sans avoir peur de payer des frais imprévus

3 1.2 Instant Gratification Permettez à l'utilisateur d'accomplir leur première tâche le plus facilement possible Exemple: –le premier tableau dans un jeu vidéo peut être très simple, pour permetter à l'utilisateur de se familiariser avec les contrôles et atteindre un premier but rapidement, l'encourageant à continuer à jouer

4 1.4 Changes in Midstream Permettez à l'utilisateur d'interrompre une tâche et, idéalement, d'y revenir plus tard Exemples: –fermer un PDA et le réouvrir plus tard, le retrouvant dans le même état (par exemple: avec des données à moitié entrées dans un formulaire) –faire "Back" et "Forward" dans un fureteur web et retrouver un formulaire avec les mêmes données entrées dans les champs –éviter les boîtes de dialogue modales, avoir plutôt des boîtes de dialogue "modeless" qui peuvent être déplacées temporairement pour interagir avec la fenêtre principale

5 1.5 Deferred Choices Permettez à l'utilisateur d'entrer le minimum d'informations pour accomplir leur tâche Exemples: –Minimisez le nombre de champs obligatoires dans un formulaire, et indiquez quels champs sont obligatoires –Quand un utilisateur crée un compte ou crée un nouveau projet ou fichier, n'obligez pas l'utilisateur de répondre à plein de questions qui ne l'intéressent peut-être pas ou auxquelles l'utilisateur ne connais peut-être pas la réponse encore

6 1.7 Habituation (1/5) Lorsque possible, permettez à l'utilisateur de former des gestes ou actions habituels pour aller plus rapidement, et attention de ne pas laisser ces habitudes entraîner des erreurs

7 1.7 Habituation (2/5) Essayez d'être cohérent ("consistent") d'une application à l'autre Exemple: –Dans emacs, la suite de touches Ctrl-A, Ctrl-X, Ctrl-S déplace le curseur au début du fichier (Ctrl-A) et ensuite sauvegarde le fichier (Ctrl-X, Ctrl-S) –Par contre, dans MS Word, la même suite va sélectionner tout le fichier (Ctrl-A), couper la sélection (Ctrl-X), et sauvegarder (Ctrl-S) –DONC: il est mieux d'être cohérent dans les raccourcis utilisés d'une application à une autre

8 1.7 Habituation (3/5) Soyez cohérent à l'intérieur d'une même application. Évitez qu'un même geste ou raccourci active différentes fonctions dans des modes différents d'une même application.

9 1.7 Habituation (4/5) Pour les actions rares et déstructives, il est bien d'avoir une étape de plus pour confirmer, mais même avec une étape de plus l'utilisateur peut s'habituer à toujours répondre "oui", ce qui risque dentraîner une erreur dans le cas rare où il faut répondre "non" Solutions possibles: –changer l'emplacement des boutons "oui" et "non" de façon aléatoire pour nuire à la formation d'habitudes –toujours permettre un "undo", par exemple même après avoir effacé un fichier

10 1.7 Habituation (5/5) Je me suis habitué à sélectionner lavant dernière option (exemple de gauche), ce qui ma induit en erreur quand je suis arrivé à la vidéo à droite.

11 1.11 Streamlined Repetition Permettez à l'utilisateur de facilement répéter une commande plusieurs fois Exemples: –raccourcis clavier pour activer une commande avec une touche –fonctionalité copier+coller pour remplir des champs différents avec le même texte –les "bookmarks" (signets) qui permettent de sauvegarder un état, une vue, une adresse, dans un fureteur ou autre application –les menus détachables ("tear-off menus") –boîte de dialogue "Rechercher + remplacer" un seul bouton pour remplacer et rechercher la prochaine occurrence un bouton pour remplacer toutes les occurrences d'un seul coup –fonctionalité pour enregistrer et répéter des macros –langages de scripting

12 À lire... Les autres patrons de conception dans le chapitre 1 du livre de Jenifer Tidwell –(En fait, dans le chapitre 1, ce sont pas vraiment des patrons de conception, mais simplement des directives ou principes de conception. Les vrais patrons paraissent dans les chapitres suivants.)

13 Directives et principes de conception tirées du livre Designing Interfaces: Patterns for Effective Interaction Design de Jenifer Tidwell Chapitre 2

14 Chapitre 2: Organizing the Content Remarques générales Au début de la conception, essayez de planifiez le contenu de votre logiciel avant de planifier comment il sera présenté. On appelle cette étape le "information design" ou "information architecture".

15 Chapitre 2: Organizing the Content Remarques générales (suite) Bien des logiciels (et sites web) présented une ou plusieurs des choses suivantes: –une liste d'objects (exemples: courriels, photos, documents) –une liste de catégories de sujets –une liste d'actions ou de tâches (exemples: commandes dans un menu déroulant) –une liste d'outils Ces choses peuvent être présentées à un utilisateur sous forme de –Une simple liste –un tableau 2D, souvent triable par colonne –un arbre hiéarchique –un espace de travail (exemple: bureau virtuel) –une carte géographique (exemple: maps.google)

16 2.5 Canvas Plus Palette Une palette d'outils à côté d'une toile. Les outils servent à créer des objets sur la toile. Un patron connu aux utilisateurs Utilisez des icônes (et peut-être des étiquettes en texte aussi) dans votre palette d'outils, pour que l'utilisateur reconnaît que c'est une palette La plupart des outils dans la palette devrait créer un objet semblable à l'icône correspondant, sauf peut-être dans le cas d'outils pour faire une sélection (flêche, lasso), zoom (loupe), ou défilement (main)

17 Microsoft Paint

18 Photoshop

19 2.6 Wizard bon pour des tâches longues ou compliquées, que l'utilisateur ne veut pas effectuer souvent et ne veut pas avoir un contrôle fin réduit la charge cognitive sur l'utilisateur, car seulement un ensemble de choix limité est présenté à chaque étape ATTENTION: peut être très mal pris par des utilisateurs experts qui veulent un contrôle fin Briser votre tâche en un certain nombre d'étapes (au moins 3, probablement moins que 15) Si les choix de l'utilisateur rendent certaines étapes plus pertinentes, enlever ces étapes Montrer le progrès de lutilisateur dans les étapes Permettez à l'utilisateur de naviguer avec des boutons pour reculer ou avancer Essayez d'avoir des choix, sélections, et champs par défaut

20

21

22 2.10 Multi-Level Help Lisez le livre pour un résumé du patron Question: Cela vous arrive parfois dappuyer sur F1 pour avoir de laide ? Question: Cela vous arrive de faire une recherche Google pour avoir de laide ? Question: Est-ce vrai que personne prend le temps de lire les manuels dutilisateurs avec les nouveaux produits / logiciels ? Comment sassurer quun nouvel utilisateur va prendre le temps de lire un message important la première fois quil utilise votre logiciel ?

23 Les infobulles (tooltips)

24 Tip of the Day

25 Quand on lance Autodesk Maya, on voit cette fenêtre souvrir par dessus la fenêtre principale : One minute movies

26 Lorsquon lance Autodesk Sketchbook la première fois:

27 Gmail: lorsque le look-and-feel du inbox a changé

28 Couvert plastique sur un nouveau téléphone

29 Sur le PadFone de ASUS

30 Google Earth sur un dispositif mobile: nous invite à essayer les gestes

31 Lineogrammer: creating diagrams by drawing Zeleznik et al. 2008

32 « Dis-moi et joublierai, montre-moi et je me souviendrai, implique-moi et je comprendrai »

33 À lire... Les autres patrons de conception dans le chapitre 2 du livre de Jenifer Tidwell