Directives et principes de conception tirées du livre

“Designing Interfaces: Patterns for Effective Interaction Design”

de Jenifer Tidwell

Chapitre 1

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

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

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

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

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

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

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.

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 d’entraî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

1.7 Habituation (5/5)

Je me suis habitué à sélectionner l’avant dernière option (exemple de gauche), ce qui m’a induit en erreur quand je suis arrivé à la vidéo à droite.

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

À 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.)

Directives et principes de conception tirées du livre

“Designing Interfaces: Patterns for Effective Interaction Design”

de Jenifer Tidwell

Chapitre 2

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".

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)

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)

Microsoft Paint

Photoshop

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 l’utilisateur 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

2.10 Multi-Level Help• Lisez le livre pour un résumé du patron

• Question: Cela vous arrive parfois d’appuyer sur F1 pour avoir de l’aide ?

• Question: Cela vous arrive de faire une recherche Google pour avoir de l’aide ?

• Question: Est-ce vrai que personne prend le temps de lire les manuels d’utilisateurs avec les nouveaux produits / logiciels ?

• Comment s’assurer qu’un nouvel utilisateur va prendre le temps de lire un message important la première fois qu’il utilise votre logiciel ?

Les infobulles (“tooltips”)

“Tip of the Day”

Quand on lance Autodesk Maya, on voit cette fenêtre s’ouvrir par dessus la fenêtre principale :

“One minute movies”

Lorsqu’on lance Autodesk Sketchbook la première fois:

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

Couvert plastique sur un nouveau téléphone

Sur le PadFone de ASUS

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

“Lineogrammer: creating diagrams by drawing”Zeleznik et al. 2008

• « Dis-moi et j’oublierai, montre-moi et je me souviendrai, implique-moi et je comprendrai »

À lire ...

• Les autres patrons de conception dans le chapitre 2 du livre de Jenifer Tidwell