Le Design Centré Utilisateur User centred desing.

Présentation au sujet: "Le Design Centré Utilisateur User centred desing."— Transcription de la présentation:

1 Le Design Centré Utilisateur User centred desing

2 Technologies transparentes et UCD The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable from it. Weiser (1991) Un produit ERGONOMIQUE est TRANSPARENT comme une paire de lunettes Lergonome des NTIC joue un rôle essentiel dans la réalisation de produits CENTRES sur les UTILISATEURS

3 UCD et Utilisabilité Norme ISO 9241 (international standard for the ergonomic requirements for office work with visual display terminals) Définition dutilisabilité: "the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use."

4 Contexte environnemental Contexte cognitif USAGER CaractéristiquesObjectifs PRODUIT FormeContenu ASPECTS GRAPHIQUES SÉQUENCE ASP. SÉMANTIQUES DIALOGUE H/M CONTEXTE COMMANDES, MODALITE DEXPLORATION

5 PRINCIPES DE BASE SIMPLICITÉ INTUITIVITÉ CONSISTENCE SENSATION DE CONTRÔLE Moindre Étonnement Re-traitement Équité Maudits soient mes sabots ! Jai appuyé une autre fois sur la mauvaise touche ! Qui diantre a conçu ces commandes, un raton laveur ?

6 < 11-2 3-5 + 5 DONNEES NON DISPO. ? ? < 11-2 3-5 + 5 DONNEES NON DISPO. ? FORME : aspects graphiques

7 lorganisation visuelle Densité des éléments : ne pas dépasser le 30% de la page sur le web Organisation du contenu sur la base des lois de la Gestalt proximitésimilaritéfermeturecontinuationsymétrie

8 Les LOIS de la GESTALT peuvent être utiles pour lorganisation spatiale des éléments affichés à lécran 1.Chapitre 1.1 Paragraphe 1.2 Paragraphe 2. Chapitre 2.1 Paragraphe 1.Chapitre 1.1 Paragraphe 1.2 Paragraphe 2. Chapitre 2.1 Paragraphe Grâce au principe de proximité dans le deuxième cas il est plus facile de comprendre la structure

9 Original Basé sur Gestalt

10 Avec séparateurs Sans séparateurs

11 LA PERCEPTION structure la compréhension BOUTONS OU TITRES ? ?

12 Il est important de respecter les correspondances logico-spatiales entre ce que la personne VEUT FAIRE et ce qui lui semble FAISABLE et PERMIS Le MAPPING est une projection cartographique des rapports spatiaux et, par extension, il indique les correspondances conceptuelles entre les commandes et les fonctions FORME : aspects graphiques le concept de MAPPING

13 Taille et police des caractères DistanceTaille caract. 50 cm0,25 cm 50-90 cm0,5 cm 90-180 cm0,9 cm 180-360 cm1,8 cm 360-600 cm3 cm La lecture sur écran est 25% plus LENTE que sur papier ? Attention au contraste Texte/Fond FORME : aspects graphiques la lisibilité

14 FORME : aspects graphiques Les Couleurs Avantages: aider à grouper les infos montrer les relations entre éléments montrer les relations entre éléments captiver lattention captiver lattention Limiter le nombre de couleurs, maintenir cohérence, éviter la ChromostéreopsieLimiter le nombre de couleurs, maintenir cohérence, éviter la Chromostéreopsie Couleurs PERTINENTES à situation, usager, contexte… Couleurs PERTINENTES à situation, usager, contexte… Inconvénients : perturber lexploration visuelle créer confusion créer confusion perte dinfo pour certains usagers perte dinfo pour certains usagers Le problème du bleu Le problème du bleu

15 Problème technique: la couleur des boutons dépend de la configuration de Windows. Si Windows utilise un fond vert ou rouge les 2 textes disparaissent! Problème dassociations dues à la culture: vert = ok (comme pour les feux). Est-on SURS que dans ce cas yes soit la réponse ok? Problème darrogance culturelle: on impose des standards occidentaux! Problème physique : les personnes daltoniennes auront du mal à lire les boutons

16 FORME : aspects graphiques Les Couleurs Faire Prototypes en NOIR et BLANC (sect. 508 Rehabilitation Act) Faire Prototypes en NOIR et BLANC (sect. 508 Rehabilitation Act) Limiter le nombre de couleurs : Limiter le nombre de couleurs : 4 par page écran4 par page écran 7 au total7 au total

17 FORME : aspects graphiques Images et icônes Avantages: elles sont perçues plus vite que le texte elles sont plus facilement mémorisés elles sont plus facilement mémorisés elles disent plus avec moins elles disent plus avec moins elles ne posent pas de problèmes linguistiques elles ne posent pas de problèmes linguistiques Inconvénients : problèmes affichage/téléchargement elles sont inaccessibles au non voyants (Sect. 508) elles sont inaccessibles au non voyants (Sect. 508) elles ne sont pas toujours claires elles ne sont pas toujours claires

18 FORME : aspects graphiques Images et icônes Problèmes Culturels (flag problem) Limportance des expériences personnelles

19 Les trois types dicônes Ressemblance Référence Arbitraire Au moment du choix des icônes, il faut en évaluer (Barrier, 2000): liconicité la saillance léconomie visuelle lunivocité la familiarité lesthétique

20 Le phénomène dit «banner blindness» Toutes les images non sont pas VUES ! Les images colorées, clignotantes et séparées du reste de la page Ne sont PAS regardées, notamment dans le cas où le sujet est en train de rechercher une information précise Les images colorées, clignotantes et séparées du reste de la page Ne sont PAS regardées, notamment dans le cas où le sujet est en train de rechercher une information précise

21 Laccessibilité au contenu De plus en plus de Pays limposent par Lois (Section 508 USA, lois Stanca en Italie) Outils simples pour valider le code (ex. HTML Validator du W3C) Souvent il sagit de modifications minimes du code (ex.: tag pour les images)

22 Les quatre buts dune image L'image comme élément d'information L'image comme élément de navigation L'image comme élément de mise en page L'image comme élément de décoration

23 L'image comme élément d'information

24 L'image comme élément de navigation

25 L'image comme élément de mise en page

26 L'image comme élément de décoration

27 Une 5ème fonction… Les LOGOS Ce sont les outils marketing les plus efficaces (reconnus + vite que texte) Représentent limage de marque Véhiculent des valeurs Rappellent des souvenirs Mettent lutilisateur en confiance Esthétique et design

28 La BARRE des COMMANDES WINDOWS Les MENUS Les LIENS HYPERTEXTES Comment lorganiser ? Combien? En quelle relation ? Depth or Breadth? Graphiques ou textuels ? Où les placer ? Les POINTEURS Quel comportement ? Quelle taille ? FORME : COMMANDES, MODALITE DEXPLORATION

29 Windows : On ne peut pas en gérer au même temps plus que 7 On ne peut pas en gérer au même temps plus que 7 Conventions douverture/fermeture (apple/win) Conventions douverture/fermeture (apple/win) Les ouvrir près de laire cliquée Les ouvrir près de laire cliquée Stratégies : Stratégies : -overlapping strategy pour les novices -tiled strategy pour les experts FORME : COMMANDES, MODALITE DEXPLORATION

30 Menus : 4 façons de les ranger, selon les besoins: 4 façons de les ranger, selon les besoins: - Alphabétique - Par thème - Par fréquence dusage - Par importance relative Possibilité de pie menu (ok pour fitts law: MT = a + b log2(2A/W) ) Possibilité de pie menu (ok pour fitts law: MT = a + b log2(2A/W) ) Attention aux habitudes ! Attention aux habitudes ! FORME : COMMANDES, MODALITE DEXPLORATION

31 Widgets : Eviter aux utilisateurs de taper du texte (erreurs!) Mettre des étiquettes claires aux champs de saisie Utiliser les Radio Buttons pour options mutuellement exclusives ( plutôt que ) Utiliser 1 seul système dentrée des données Utiliser lautotabbing Eviter le scrolling dans les listes déroulantes Attention à conventions culturelles… FORME : COMMANDES, MODALITE DEXPLORATION

32 Widgets Usability : FORME : COMMANDES, MODALITE DEXPLORATION

33 Widgets Usability : FORME : COMMANDES, MODALITE DEXPLORATION

34 A propos de boutons...

35 USER CENTRED DESIGN USAGER CaractéristiquesObjectifs PRODUIT FormeContenu ASPECTS GRAPHIQUES SÉQUENCE ASP. SÉMANTIQUES DIALOGUE H/M CONTEXTE COMMANDES, MODALITE DEXPLORATION Contexte environnemental Contexte cognitif

36 Le CONTENU LA SÉQUENCE DES INFOS Comment les informations se structurent- elles dans la tête des utilisateurs ? LES ASPECTS SÉMANTIQUES Quelle langue? Quel langage ? LE DIALOGUE H/M Quest ce que lordinateur peut-il comprendre ? Respecte-t-il les maximes de GRICE ?

37 Le Contenu : la Séquence Eviter le phénomène dit lost in hyperspace, qui témoigne une surcharge cognitive : lutilisateur doit toujours savoir où il se trouve, doù il vient et où il peut aller Utiliser le Scrolling si les informations sont interdépendantes, le Paging si moins connexes LES HYPERTEXTES et lergonomie des liens LES HYPERTEXTES et lergonomie des liens

38 LES HYPERTEXTES Changement de la relation auteur/lecteur Incroyables avantages théoriques Mais concrètement… - perte dorientation (Otter & Johnson, 2000) - surcharge cognitive (Tricot et al. 2001) - vision par le trou de la serrure (Woods, 1984)

39 Différences texte/hypertexte Présence dEléments GRAPHIQUES Présence dEléments GRAPHIQUES Augmentation du MARQUAGE visuel du texte Augmentation du MARQUAGE visuel du texte Présence de texte simple et de texte constituant un lien hypertextuel (ACTION) Présence de texte simple et de texte constituant un lien hypertextuel (ACTION) Perte de la linéarité intra-page Perte de la linéarité intra-page Perte de la linéarité inter-pages. Perte de la linéarité inter-pages.

40 Présence déléments graphiques Les enseignants doutent profondément de la capacité du système scolaire à réduire les inégalités sociales et à assurer l'insertion professionnelle des élèves. Leurs désillusions apparaissent même plus fortes que celles exprimées par les élèves et les parents dans une enquête réalisée par la Fédération syndicale unitaire (FSU), première force syndicale de l'éducation nationale.

41 Augmentation du MARQUAGE visuel du texte Les enseignants doutent profondément de la capacité du système scolaire à réduire les inégalités sociales et à assurer l'insertion professionnelle des élèves. Leurs désillusions apparaissent même plus fortes que celles exprimées par les élèves et les parents dans une enquête réalisée par la Fédération syndicale unitaire (FSU), première force syndicale de l'éducation nationale. Les enseignants pour la fin du collège unique

42 Présence de texte simple et de texte constituant un lien hypertextuel Les enseignants doutent profondément de la capacité du système scolaire à réduire les inégalités sociales et à assurer l'insertion professionnelle des élèves. Leurs désillusions apparaissent même plus fortes que celles exprimées par les élèves et les parents dans une enquête réalisée par la Fédération syndicale unitaire (FSU), première force syndicale de l'éducation nationale. Les enseignants pour la fin du collège unique

43 Perte de linéarité intra-page Les enseignants doutent profondément de la capacité du système scolaire à réduire les inégalités sociales et à assurer l'insertion professionnelle des élèves. Leurs désillusions apparaissent même plus fortes que celles exprimées par les élèves et les parents dans une enquête réalisée par la Fédération syndicale unitaire (FSU), première force syndicale de l'éducation nationale. Les enseignants pour la fin du collège unique A la UNE Rubriques : - politique - économie - faits divers - météo

44 Perte de la linéarité inter-pages page actuelle A la UNE Rubriques Archives Approfondissements FSU (autre site) Pub

45 Un cas particulier : la page daccueil Créer une 1ère impression positive Faire en sorte quelle ressemble à un page daccueil (organisation, peu de contenu, bcp de liens) ! Accès à partir de toutes les pages sauf elle-même Annoncer les mises à jour Communiquer clairement le but du site

46 Ergonomie des liens hypertextes Problème de la couleur conventionnelleProblème de la couleur conventionnelle The Scent of information : les liens doivent :The Scent of information : les liens doivent : - bien prédire la page darrivée - bien prédire la page darrivée - ne pas être ambigus entre eux - ne pas être ambigus entre eux Choisir un texte parlantChoisir un texte parlant Pour plus de détails sur nos produits, cliquez ici Vous pouvez obtenir plus dinfos sur nos produits Si possible ne pas imbriquer le lien dans le texteSi possible ne pas imbriquer le lien dans le texte Faire attention aux retours à la ligne Faire attention aux retours à la ligne Toto Electroménager Division Informatique Attention à laire cliquable Attention à laire cliquable

47 Le Contenu: les aspects sémantiques Respecter le STYLE pour le Web: concise, scannable, objective Expérience Morkes & Nielsen 1997 : 5 version du site Travel Nebraska : marketese, scannable, concise, objective, or combined 51 sujets VDs: temps de recherche, nombre derreurs, score de mémoire, temps de réalisation du plan du site et satisfaction subjective (facilité perçue + qualité perçue, intérêt + look and feel)

48 Le Contenu: les aspects sémantiques Résultats : Condition Task Time Task Errors Memory Sitemap Time Subjective Satisfaction Promotional (control) 3590.820.411855.7 (194)(0.60)(0.14)(43)(1.5) Concise 209*0.400.65**130***7.1* (88)(0.70)(0.21)(41)(1.9) Scannable 229*0.30*0.55*1987.4* (86)(0.48)(0.19)(93)(1.8) Objective 2800.500.471596.9* (163)(0.53)(0.13)(69)(1.7) Combined 149**0.10**0.67***130**7.0* (57)(0.32)(0.10)(25)(1.6) Version Task Time Task Errors Memory Sitemap Time Subjective Satisfaction Overall Usability Promotional (control) 100 Concise172205142124156158 Scannable15727394130133147 Objective128164116121112127 Combined242818162142122224

49 Le Contenu: les aspects sémantiques Utiliser la pyramide inversée Faire attention aux problèmes de Langue et Langage globalisation and localisation Bastien ajoute que le texte doit être «balayable» (scanability) et lisible (readability): - Utiliser titres et sous-titres - Un concept par paragraphe - Information importante en début des phrases - Phrases importantes en début de paragraphes - Utiliser les termes les plus courts possible - Éviter les périphrases - Utiliser la forme active (et non passive) des verbes - Éviter doubles négations

50 Le Contenu : le dialogue homme-machine Consistency: cohérence parmi les règles qui gèrent les commandes Feedback et transparence de létat du système (gestion du temps) Anticipation des attentes Possibilité de raccourcis Respect du principe de COOPERATION de Grice et des maximes de - qualité - quantité - relation - manière

51 Gestion du temps et feedback 0.1 sec. = réaction instantanée 1 sec. = limite de lattention du sujet > 6 sec. = limite pour lenvoi dun feedback Sablier/montre si délai limité Barre davancement si délai plus important + signal sonore pour indiquer la fin Les indications sur le temps de téléchargement sont particulièrement importantes

52 Le principe de cooperation de Grice Linterprétation dune phrase dépasse la signification qui lui est conventionnellement attribuée. Les interlocuteurs qui participent à une conversation commune normalement respectent le Principe de Coopération et ses maximes. La violation des maximes peut répondre à deux mécanismes et entraîner deux types de conséquences : - linterlocuteur ne coopère plus désinvestissement dans la conversation (rupture) - linterlocuteur coopère toujours déclenchement dinterprétations (sous-entendus, sens « caché », ironie, etc.)

53 Le principe de cooperation de Grice La maxime de quantité ne pas donner plus dinformation que nécessaire Toutes les informations sur les cotations de la Bourse de Paris sont on-line dans cette page La maxime de qualité ne pas énoncer des propos faux et ne pas énoncer des propos pour lesquels il nexiste pas de preuves adéquates cliquez ici et gagnez 10.000 euros

54 Le principe de cooperation de Grice La maxime de relation être pertinent La maxime de Manière éviter lobscurité et lambiguïté error 404

55 Une communication ratée dans le dialogue h-m A laéroport Voyageur : sait-tu me dire quand il part le prochain avion pour Londres ? Ordinateur : oui Voyageur : et quand il part ? Ordinateur : qui? Voyageur : le prochain avion ! Ordinateur : quel avion ? Le principe de cooperation de Grice

56 Le but de lacte communicatif Se poser la question «quel est le BUT de ce message ?» Les sites Internet peuvent avoir 4 buts différents: informer (news…) informer (news…) vendre (e-commerce) vendre (e-commerce) enseigner (e-learning) enseigner (e-learning) amuser/divertir (jeux en ligne…) amuser/divertir (jeux en ligne…)

57 Visibility of system status Les HEURISTIQUES de NIELSEN Match between system and the real world User control and freedom Consistency and standards Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help users recognize, diagnose, and recover from errors Help and documentation Des Principes Généraux aux Lignes Guides

58 Les PRINCIPES rajoutés par TOGNAZZINI Anticipation of needs Learnability Track state Readability Des Principes Généraux aux Lignes Guides Use of Metaphors

59 Des Principes Généraux aux Lignes Guides Lorganisation proposée par Scapin et al. 1. Guidance 1.1. Prompting (PROM) 1.2. Grouping / Distinction between items 1.2.1. Grouping / Distinction by location (GDLO) 1.2.2. Grouping / Distinction by format (GDFO) 1.3. Immediate feedback (FEED) 1.4. Legibility (LEGY) 2. Work load 2.1.Brevity 2.1.1.Concision (CONC ) 2.1.2.Minimal actions (MIAC) 2.2.Information density (INDE) 3. Explicit control 3.1.Explicit actions (EXUA) 3.2.User control (USCO) 4. Adaptability 4.1.Flexibility (FLEX) 4.2.User experience (USEX) 5. Error management 5.1. Protection to errors (ERPR) 5.2. Quality of error messages (QUEM) 5.3. Error correction (ERCO) 6. Homogeneousness / Consistency (CONS) 7. Significance of codes (SICO) 8. Compatibility (COMP)

60 Des Principes Généraux aux Lignes Guides La grille XEROX 1. Visibility of System Status 1.1 Does every display begin with a title or header that describes screen contents? 1.10 Is there visual feedback in menus or dialog boxes about which choices are selectable? 1.26 Does the system provide visibility: that is, by looking, can the user tell the state of the system and the alternatives for action?

61 Des Principes Généraux aux Lignes Guides La grille XEROX 2. Match Between System and the Real World 2.1 Are icons concrete and familiar? 2.11 For question and answer interfaces, are questions stated in clear, simple language? 2.14 Does the command language employ user jargon and avoid computer jargon?

62 Des Principes Généraux aux Lignes Guides La grille XEROX 3. User Control and Freedom 3.2 In systems that use overlapping windows, is it easy for users to rearrange windows on the screen? 3.8 Can users cancel out of operations in progress? 3.14 Are menus broad (many items on a menu) rather than deep (many menu levels)? 3.22 If the system allows users to reverse their actions, is there a retracing mechanism to allow for multiple undos?

63 Des Principes Généraux aux Lignes Guides La grille XEROX 4. Consistency and Standards 4.8 Does each window have a title? 4.10 Does the menu structure match the task structure? 4.19 Are field labels consistent from one data entry screen to another? 4.39 Are menu choice names consistent, both within each menu and across the system, in grammatical style and terminology? 4.50 Does the system follow industry or company standards for function key assignments?

64 Des Principes Généraux aux Lignes Guides La grille XEROX 5. Help Users Recognize, Diagnose, and Recover From Errors 5.2 Are prompts stated constructively, without overt or implied criticism of the user? 5.4 Are prompts brief and unambiguous? 5.15 If an error is detected in a data entry field, does the system place the cursor in that field or highlight the error? 5.16 Do error messages inform the user of the error's severity? 5.17 Do error messages suggest the cause of the problem?

65 Des Principes Généraux aux Lignes Guides La grille XEROX 6. Error Prevention 6.4 Are menu choices logical, distinctive, and mutually exclusive? 6.12 Does the system warn users if they are about to make a potentially serious error? 6.14 Do data entry screens and dialog boxes indicate the number of character spaces available in a field? 6.15 Do fields in data entry screens and dialog boxes contain default values when appropriate?

66 Des Principes Généraux aux Lignes Guides La grille XEROX 7. Recognition Rather Than Recall 7.1 For question and answer interfaces, are visual cues and white space used to distinguish questions, prompts, instructions, and user input? 7.4 Are all data a user needs on display at each step in a transaction sequence? 7.10 Does the system gray out or delete labels of currently inactive soft function keys? 7.21 Are size, boldface, underlining, color, shading, or typography used to show relative quantity or importance of different screen items? 7.36 Do GUI menus offer affordance: that is, make obvious where selection is possible?

67 Des Principes Généraux aux Lignes Guides La grille XEROX 8. Flexibility and Minimalist Design 8.4 Does the system allow novice users to enter the simplest, most common form of each command, and allow expert users to add parameters? 8.6 Does the system provide function keys for high- frequency commands? 8.14 On menus, do users have the option of either clicking directly on a menu item or using a keyboard shortcut?

68 Des Principes Généraux aux Lignes Guides La grille XEROX 9. Aesthetic and Minimalist Design 9.1 Is only (and all) information essential to decision making displayed on the screen? 9.4 Does each icon stand out from its background? 9.11 Are menu titles brief, yet long enough to communicate?

69 Des Principes Généraux aux Lignes Guides La grille XEROX 10. Help and Documentation 10.3 Do the instructions follow the sequence of user actions? 10.5 Are data entry screens and dialog boxes supported by navigation and completion instructions? 10.8 Is the help function visible; for example, a key labeled HELP or a special menu? 10.10 Navigation: Is information easy to find? 10.19 Is there context-sensitive help? 10.21 Can users easily switch between help and their work?

70 Des Principes Généraux aux Lignes Guides La grille XEROX 11. Skills 11.1 Can users choose between iconic and text display of information? 11.2 Are window operations easy to learn and use? 11.12 When the user enters a screen or dialog box, is the cursor already positioned in the field users are most likely to need? 11.18 Are important keys (for example, ENTER, TAB) larger than other keys? 11.19 Are there enough function keys to support functionality, but not so many that scanning and finding are difficult?

71 Des Principes Généraux aux Lignes Guides La grille XEROX 12. Pleasurable and Respectful Interaction with the User 12.1 Is each individual icon a harmonious member of a family of icons? 12.3 Has color been used with discretion? 12.7 Can users turn off automatic color coding if necessary? 12.13 If the system uses multiple input devices, has hand and eye movement between input devices been minimized?

72 Des Principes Généraux aux Lignes Guides La grille XEROX 13. Privacy 13.1 Are protected areas completely inaccessible? 13.2 Can protected or confidential areas be accessed with certain passwords? 13.3 Is this feature effective and successful?

73 Conclusion sur les Lignes-guide The application of such guidelines has already been proved to have a positive impact on usability (Com­ber, 1995; Grose, Forsythe & Ratner, 1998). For instance, Borges et al. showed that the average time to carry out 5 tasks on a web site respecting 17 guidelines has been reduced by at least by 16% (Borges, Morales & Rodríguez, 1996).

74 Conclusion sur les Lignes-guide But this does not necessarily imply that a web site that does not consider guidelines is unusable. Nor it is proved that a web site addressing all guidelines is the most usable site. In other words, guidelines are necessary, but insufficient. They should not be considered in isolation: often guidelines need to be supplemented by a suitable method and a clear process that leads them to unambiguous interpretation.

75 Evaluation Heuristique PHASE : RÉALISATION, TEST COÛTS : - EXPERIMENTATEURS : ~ 3 - SUJETS : ~ 3 (expérim.) - APPAREILLAGE : produit fonctionnant DONNÉES : qualitatives Cette technique consiste en faire évaluer le SW/site par un groupe de personnes formées qui doivent le juger sur la base des paramètres quon a défini heuristiques. + : cela permet déliminer le gros des problèmes dutilisabilité, pas chère et facile à appliquer - : il faut des sujets qui sachent reconnaître les problèmes dus à un manque de respect des heuristiques

76 Evaluation Heuristique ETAPES : - Choix et mise au point de la grille - Assignation de tâches de familiarisation - Remplissage individuel - Discussion en groupe - Rédaction du rapport

77

78

79 Problème de groupement des réponses Problème despace entre les résultats

80 Séparateurs Re- groupement des réponses

81

82