1 / 82

Le Design Centré Utilisateur

Le Design Centré Utilisateur. User centred desing. 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)

keaira
Télécharger la présentation

Le Design Centré Utilisateur

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 L’ergonome 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 d’utilisabilité: "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. USAGER Caractéristiques Objectifs PRODUIT SÉQUENCE ASPECTS GRAPHIQUES ASP. SÉMANTIQUES Forme Contenu COMMANDES, MODALITE D’EXPLORATION DIALOGUE H/M CONTEXTE Contexte environnemental Contexte cognitif

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

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

  7. FORME : aspects graphiques l’organisation 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é fermeture continuation symétrie

  8. Les LOIS de la GESTALT peuvent être utiles pour l’organisation spatiale des éléments affichés à l’écran • Chapitre • 1.1 Paragraphe • 1.2 Paragraphe • 2. Chapitre • 2.1 Paragraphe • 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. BOUTONS OU TITRES ? ? LA PERCEPTION structure la compréhension

  12. FORME : aspects graphiques le concept de MAPPING 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

  13. FORME : aspects graphiquesla lisibilité La lecture sur écran est 25% plus LENTE que sur papier ? Taille et police des caractères Distance Taille caract.  50 cm 0,25 cm 50-90 cm 0,5 cm 90-180 cm 0,9 cm 180-360 cm 1,8 cm 360-600 cm 3 cm Attention au contraste Texte/Fond

  14. FORME : aspects graphiquesLes Couleurs Avantages: aider à grouper les infos montrer les relations entre éléments captiver l’attention Inconvénients : perturber l’exploration visuelle créer confusion perte d’info pour certains usagers • Couleurs PERTINENTES à situation, usager, contexte… • Limiter le nombre de couleurs, maintenir cohérence, éviter la “Chromostéreopsie” • 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 d’“associations” dues à la culture: vert = ok (comme pour les feux). Est-on SURS que dans ce cas “yes” soit la réponse “ok”? Problème d’“arrogance culturelle”: on impose des standards occidentaux! Problème “physique” : les personnes daltoniennes auront du mal à lire les boutons

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

  17. FORME : aspects graphiquesImages et icônes Avantages: elles sont perçues plus vite que le texte elles sont plus facilement mémorisés elles disent “plus” avec “moins” 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 ne sont pas toujours claires

  18. FORME : aspects graphiquesImages et icônes Problèmes Culturels (flag problem) L’importance des expériences personnelles

  19. Les trois types d’icônes Ressemblance Référence Arbitraire Au moment du choix des icônes, il faut en évaluer (Barrier, 2000): l’iconicité la saillance l’économie visuelle l’univocité la familiarité l’esthé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

  21. L’accessibilité au contenu • De plus en plus de Pays l’imposent par Lois (Section 508 USA, lois Stanca en Italie) • Outils simples pour valider le code (ex. HTML Validator du W3C) • Souvent il s’agit de modifications minimes du code (ex.: tag <ALT> pour les images)

  22. Les quatre buts d’une 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 l’image de marque Véhiculent des valeurs Rappellent des souvenirs Mettent l’utilisateur en confiance Esthétique et design

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

  29. FORME : COMMANDES, MODALITE D’EXPLORATION • Windows : • On ne peut pas en gérer au même temps plus que 7 • Conventions d’ouverture/fermeture (apple/win) • Les ouvrir près de l’aire cliquée • Stratégies : • “overlapping strategy” pour les novices • “tiled strategy” pour les experts

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

  31. FORME : COMMANDES, MODALITE D’EXPLORATION 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 d’entrée des données Utiliser l’autotabbing Eviter le scrolling dans les listes déroulantes Attention à conventions culturelles…

  32. FORME : COMMANDES, MODALITE D’EXPLORATION Widgets Usability :

  33. FORME : COMMANDES, MODALITE D’EXPLORATION Widgets Usability :

  34. A propos de boutons...

  35. USER CENTRED DESIGN USAGER Caractéristiques Objectifs PRODUIT SÉQUENCE ASPECTS GRAPHIQUES ASP. SÉMANTIQUES Forme Contenu DIALOGUE H/M COMMANDES, MODALITE D’EXPLORATION CONTEXTE 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 Qu’est ce que l’ordinateur 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 : l’utilisateur doit toujours savoir où il se trouve, d’où il vient et où il peut aller Utiliser le Scrolling si les informations sont interdépendantes, le Paging si moins connexes LES HYPERTEXTES et l’ergonomie des liens

  38. LES HYPERTEXTES Changement de la relation auteur/lecteur Incroyables avantages théoriques Mais concrètement… - perte d’orientation (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 d’Eléments GRAPHIQUES • Augmentation du MARQUAGE visuel du texte • 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é 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 pour la fin du collège unique 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.

  42. Présence de texte “simple” et de texte constituant un lien hypertextuel Les enseignants pour la fin du collège unique 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.

  43. Perte de linéarité intra-page Les enseignants pour la fin du collège unique A la UNE 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. Rubriques : - politique - économie - faits divers - météo

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

  45. Un cas particulier : la page d’accueil • Créer une 1ère impression positive • Faire en sorte qu’elle ressemble à un page d’accueil (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 conventionnelle • The “Scent of information” : les liens doivent : • - bien prédire la page d’arrivée • - ne pas être ambigus entre eux • Choisir un texte “parlant” Pour plus de détails sur nos produits, cliquez ici Vous pouvez obtenir plus d’infos sur nos produits • Si possible ne pas imbriquer le lien dans le texte • Faire attention aux retours à la ligne Toto Electroménager Division Informatique • Attention à l’aire 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 d’erreurs, 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 :

  49. Le Contenu: les aspects sémantiques • 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 Utiliser la “pyramide inversée” Faire attention aux problèmes de Langue et Langage  globalisation and localisation

  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

More Related