Directives et principes de conception tir

1
Directives et principes de conception tirées du
livreDesigning Interfaces Patterns for
Effective Interaction Designde 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é copiercoller 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
livreDesigning Interfaces Patterns for
Effective Interaction Designde 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ésentent 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
(No Transcript)
21
(No Transcript)
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
drawingZeleznik 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