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/4) 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/4) 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/4) 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/4) 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.10 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

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

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

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

14 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)

15 2.13 Two-Panel Selector Deux panneaux, un pour montrer un ensemble d'items, l'autre pour montrer le contenu (ou détails) de l'item sélectionné Exemples d'items: courriels, sections d'un site web, chansons, images, fichiers Ne fonctionne pas sur des écrans *très* petits de cellulaire (mais pourrait fonctionner sur en écran de Blackberry) Un patron connu aux utilisateurs L'utilisateur peut facilement déplacer leur focus d'attention entre les deux panneux, sans naviguer avec un dispositif d'entrée, pour mieux comprendre la relation entre différents items Montrez le contenu aussitôt qu'un nouvel item est sélectionné (sélection en un seul clic) Permettez une navigation via le clavier aussi (touches de flêches, et Tab)

16

17

18

19 2.14 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)

20 Microsoft Paint

21 Photoshop

22 2.15 One-Window Drilldown Remplissez la fenêtre complètement avec le contenu de l'écran ou du (sous)menu actuel. Quand l'utilisateur choisit une option ou un item de menu menant à un autre écran, on remplace le contenu complet de la fenêtre. Exemples: les lecteurs-web de courriel, et les menus sur le iPod pour sélectionner une pièce de musique ou un jour dans un calendrier Bon pour des petits écrans, pour des utilisateurs novices, ou pour des kiosques ou bornes Ce patron simplifie l'interface encore plus que le "two-panel selector" et oblige l'utilisateur à se concentrer sur un choix à la fois Fonctionne bien avec les boutons "Back" et "Forward" dans un fureteur web Si le dispositif ou plateforme pour lequel vous concevez n'a pas déjà des boutons "Back" et "Forward", rajouter un bouton pour reculer dans l'interface

23

24 iPhone

25

26 2.17 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

27

28

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

30