www.archive-net-2013.com » NET » E » ERGOLAB

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".

    Archived pages: 258 . Archive date: 2013-09.

  • Title: Ce mot souligné semble mener quelque part... - Ergolab
    Descriptive info: 20 Novembre 2003.. Ce mot souligné semble mener quelque part.. TAGS :.. Liens.. Navigation.. éléments d interface.. Liste des articles.. Version imprimable.. Introduction.. 1.. Respecter la standardisation des liens.. 2.. A propos des contenus qui ne mènent nulle part.. 3.. L'usage d'indicateurs pour préciser le "quelque part"….. Conclusion.. Pour en savoir plus.. Introduction.. Cet article évoque l'utilisabilité des éléments cliquables sur le web.. Chaque partie s'intéresse à un aspect particulier de cette utilisabilité.. Nous décrivons pour chaque recommandation l'intérêt de sa prise en compte et apportons quelques solutions pour la conception.. L'accent est porté sur les liens hypertextes, même si quelques réflexions sont posées concernant d'autres éléments possiblement cliquables (tels que images, boutons, etc.. ).. Le lien textuel est en effet le premier élément remarqué par l'utilisateur (voir dans les lectures complémentaires.. les études eye-tracking du projet Stanford-Poynter et la position de Nielsen à cet égard).. C'est aussi dans ce domaine qu'ont été réalisées le plus grand nombre d'études scientifiques.. Respecter la standardisation des liens.. » Les liens textuels.. Une des problématiques majeures sur le web consiste à savoir quels éléments sont cliquables.. Les recommandations portent souvent sur le format à attribuer aux liens.. On a ainsi longtemps préconisé que les liens hypertextes non visités soient bleus et soulignés.. En 1999, Nielsen considérait le non respect de ce standard comme une des 10 plus graves erreurs pour un site web.. Cette question est d'ailleurs toujours d'actualité (voir.. Van Schaik Ling.. , 2003).. On peut tout de même affirmer que les standards tendent aujourd'hui à être plus souples.. Plus précisément, un lien est en général un mot (ou plusieurs) en couleur, un mot souligné ou un mot en couleur et souligné.. Ces standards web qui se sont progressivement installés sont des règles qui améliorent la facilité d'utilisation des sites.. En effet, les utilisateurs transfèrent ce qu'ils ont appris sur les nouveaux sites qu'ils visitent.. Aujourd'hui, ils s'attendent à ce qu'un mot en couleur ou souligné mène à une nouvelle page puisque leur expérience leur a appris qu'un mot en couleur ou souligné est souvent un lien.. On doit donc respecter ce que l'on pourrait appeler la cohérence entre les sites.. Cette règle permet de capitaliser sur les connaissances des utilisateurs concernant le comportement des pages web.. On évite ainsi que chaque nouveau site soit une totale découverte.. L'utilisateur ayant repéré que les choses soulignées sont en général des liens sera plus rapide dans sa recherche d'informations.. Ce raisonnement peut être élargi pour tous les éléments cliquables et non seulement les liens textuels.. » Les images.. En ce qui concerne les images et boutons, l'utilisateur pense qu'ils sont cliquables ou pas en fonction de ce qu'il a déjà rencontré dans les autres sites.. Ce sont donc bien les standards qui définissent le comportement de l'utilisateur.. On doit s'intéresser à la question suivante : Qu'est-ce qui fait que l'on pense que l'élément est cliquable ?.. Notre expérience d'utilisateurs du web nous a appris à tenir compte des éléments suivants :.. -.. texte associé à l'image.. , et plus largement tout ce qui contribue à l'incitation (voir.. l'article sur les critères ergonomiques.. ).. En ce qui concerne les images, l'attribut "cliquable ou non" est plus ambigu que dans le cas d'un lien textuel.. L'élément qui contribue le plus à renseigner l'utilisateur est l'incitation.. Dans ce cadre, l'incitation se fait souvent de manière textuelle : il s'agit d'amener l'utilisateur à cliquer sur l'image en question.. Cette description textuelle peut être intégrée directement dans l'image (c'est souvent le cas des boutons):.. Source :.. www.. asmodee.. com.. La description textuelle peut aussi se présenter comme une légende de l'image (exemple : cliquez sur l'image pour l'agrandir).. De plus en plus, on est amené à présenter cette légende elle-même sous forme de lien, menant à la même page qu'un clic sur l'image :.. http://www.. com/jeux-de-societe.. Logique par rapport à la tâche et à l'utilité du site.. :.. - exemple : je viens de remplir un formulaire, je m'attends naturellement à devoir.. cliquer sur un bouton pour envoyer les informations.. Cette attente est liée au fait.. que c'est toujours de cette façon que se déroule la validation d'un formulaire en.. ligne.. - exemple : si le site est un site de e-commerce, je m'attends à pouvoir cliquer.. sur les images des articles pour les agrandir.. Cette attente est liée au fait que.. la plupart des sites de commerce en ligne adoptent ce standard.. Localisation, nature, forme et taille de l'image.. : on distingue plus facilement une image cliquable du fait de sa localisation et de sa nature (bouton sous un champ de formulaire, logo en haut à gauche de la page, bouton à côté de la photo d'un produit, bouton dans une procédure de commande, image dans une barre de navigation.. ), de sa forme et de sa taille.. A propos des contenus qui ne mènent nulle part.. 1.. Ne pas suggérer qu'un élément est cliquable si ce n'est pas le cas.. Cette réflexion sur la présentation des liens amène nécessairement à s'intéresser à la présentation des éléments non cliquables.. On est là dans une démarche inverse.. Il ne faut en effet pas suggérer qu'un élément est cliquable s'il ne l'est pas.. Ce "défaut" d'une interface part souvent d'une bonne intention.. L'exemple classique est la mise en valeur d'une information dans un texte.. Mettons que l'on décide de présenter un mot en.. bleu.. pour qu'il ressorte bien du bloc de texte noir … Légitime.. Sauf que pour bon nombre d'utilisateurs, ce mot en bleu signifie plus qu'un simple mot: c'est comme s'il disait "clique moi, clique moi !".. On ne peut pas compter uniquement sur le changement de la forme du pointeur de la souris pour indiquer qu'un élément est cliquable.. Cet attribut doit être perceptible visuellement sans l'aide du pointeur.. Le changement de format du pointeur n'est qu'un support pour confirmer l'hypothèse que l'élément est cliquable.. Un mot en couleur ou souligné sur le web n'est plus un simple mot mais un lien.. Il est censé mener à quelque chose.. Si l'action de cliquer sur ce mot n'a aucun effet, l'interface semblera se comporter de façon contre-intuitive.. Quelqu'un de très persévérant pourra  ...   l'utilisabilité des adresses URL est fondamentale (Vous pouvez lire à ce propos l'article.. Utilisabilité des adresses web.. sur Ergolab).. Prenant acte qu'elle fait partie des stratégies de navigation des utilisateurs, on doit tout faire pour la rendre la plus explicite possible.. On peut même pour certains sites deviner l'adresse URL à partir de ce que l'on veut consulter (par exemple, l'adresse www.. microsoft.. com/downloads est on ne peut plus explicite).. Jesse James Garrett.. dit à propos de ces sites : ".. not only are their URLs human-readable, they're also human-guessable.. " (cf lectures complémentaires).. Cette question devient plus compliquée lorsqu'entrent en jeu les protocoles de sécurisation, faisant de l'URL une chose incompréhensible.. Cependant, les pages sécurisées ne sont souvent pas celles pour lesquelles on a besoin d'une adresse explicite.. 3.. Les titres de liens.. Il est possible de préciser le contenu vers lequel mène le lien par l'insertion de la balise "title" dans le lien.. Cet attribut permet de faire apparaître une description du lien lorsque le pointeur de la souris reste positionné sur ce lien :.. Source : ancien site Ergolab.. Ceci n'est pas supporté par les navigateurs les plus anciens mais permet aux autres de présenter une information supplémentaire sur le lien, lorsque c'est nécessaire ou souhaitable.. On veillera à ne pas surcharger l'interface en ajoutant des titres de liens à tous les liens.. 4.. Le contexte.. On doit prêter attention au texte autour du lien et au bloc de contenu dans lequel il s'insère.. Ce contexte peut en effet donner des indices à l'utilisateur concernant le contenu accessible par le lien.. Il importe d'être concis tout en fournissant les éléments nécessaires au choix de l'utilisateur.. 5.. L'utilisation de la couleur.. Certaines approches ont essayé de standardiser les indications sur la nature des liens par des codes couleurs.. On a cependant vite compris les limites de cette démarche :.. - l'utilisation de codes couleur limite la cohérence entre les sites puisqu'il est nécessaire que tous les sites utilisent exactement le même code couleur.. - on augmente de façon importante de la charge informationnelle (nécessité de nombreuses couleurs différentes pour indiquer tous les types de liens).. - la charge mnémonique est donc forcément élevée (on doit se rappeler que le bleu, c'est un lien vers une page classique, le vert, un lien vers le téléchargement d'un fichier Word, le rouge, un lien utilisant le client mail.. ).. - ces codes couleurs entrent en concurrence avec la différenciation entre lien visité / lien non visité (qui se base aussi sur l'utilisation de la couleur) et en font perdre une grande partie du bénéfice.. - baser la communication d'une information uniquement sur la couleur met en défaut tous les utilisateurs qui présentent une déficience de perception des couleurs.. 6.. L'utilisation de métadonnées.. Une approche plus appropriée consiste à intégrer des métadonnées, c'est à dire des données sur les données (une donnée existe par elle-même, mais elle a forcément un type, un auteur, une date de création, un poids.. On peut ainsi informer du contenu d'une page mais aussi de son type (document Word, PowerPoint, pdf…).. Ces informations permettent à l'utilisateur de faire des choix éclairés.. Les métadonnées doivent être représentées le plus simplement possible et ne pas charger inutilement la page : il faut que le bénéfice obtenu soit plus élevé que les inconvénients entraînés (notamment l'augmentation du nombre d'informations).. L'exemple le plus connu correspond à l'indication de fichiers pdf à télécharger.. Cette indication peut être fournie sous forme de texte ou d'icône représentant le logo d'Acrobat Reader.. Là encore, c'est le recours de plus en plus fréquent à cette pratique dans de nombreux sites web qui nous permet de la recommander.. Si les utilisateurs sont habitués à ce que ce type de lien mène au téléchargement d'un fichier pdf, il faut exploiter cette connaissance.. L'utilité de cette pratique peut être encore augmentée en prenant le soin d'indiquer le poids du document à télécharger.. Cela donne une idée à l'utilisateur averti du temps de téléchargement potentiel du document.. Toutes ces informations supplémentaires concernant la nature des liens sont des indices qui ont pour but d'orienter l'utilisateur de façon plus claire.. L'objectif est de limiter les actions sur des liens qui n'intéressent pas l'utilisateur.. Il s'agit donc d'améliorer la substance même des liens.. Certaines voies de recherche développent même des outils prototypes afin d'intégrer ce type d'informations au navigateur.. Beaucoup de questions se posent encore, notamment sur les formes de présentation à attribuer aux métadonnées.. Conclusion.. Pour conclure, les questionnements sur la présentation des liens hypertextes vont principalement dans deux directions.. D'une part, on essaie de mettre en valeur de façon appropriée les liens, leur état (visité ou non) et leur type.. De l'autre, on doit éviter de faire croire à l'utilisateur qu'un item mène à quelque chose si ce n'est pas le cas.. Enfin, cette réflexion soulève de nombreuses autres questions, concernant les formats visuels des liens et options de menus et leur terminologie.. Pour en savoir plus.. » Ressources en ligne :.. Garrett, J.. J (2002).. User-Centered URL Design.. , archives des articles d'Adaptative Path.. Les études eye-tracking du.. Standford Poynter Project.. et la.. position de J.. à ce propos.. Lynch, P.. Horton, S.. (1999).. Web Style Guide: Basic Design Principles for Creating Web Sites.. , Yale University Press.. Chapitre 6, section "Links".. Nielsen, J.. Jakob Nielsen's Alertbox, May 2, 1999:.. "Top Ten Mistakes" Revisited Three Years Later.. » Ressources externes :.. (2000).. Designing Web Usability : The Practice of Simplicity.. New Riders Publishing, Indianapolis.. Stanyer, D.. Procter, R.. Improving Web usability with the link lens.. Computer Networks.. , 31, pp.. 1533-1544.. Van Schaik, P.. Ling, J.. (2003).. The effect of link colour on information retrieval in educational intranet use.. Computers in Human Behavior.. , 19, 5, pp.. 553-564.. Weinreich, H.. Lamersdorf, W.. Concepts for improved visualization of Web link attributes.. , 33, pp.. 403-416.. Wroblewski, L.. (2002).. Site-Seeing: A Visual Approach to Web Usability.. John Wiley Sons.. Part 2, Chapter 3, pp.. 104-119 : Following Links.. Spool, J.. M.. , Scanlon, T.. , Schroeder, W.. Snyder, C.. (1998).. Web Site Usability : A Designer's Guide.. Chapter 3 : Links on the World Wide Web..

    Original link path: /articles/ergonomie-liens.php
    Open archive

  • Title: Liens - Ergolab, ergonomie sites web
    Descriptive info: TAG : Liens.. Voir tous les tags.. tags.. Liens.. Voir ce tag dans :.. les articles.. les chroniques de livres.. les liens.. le bloc-notes.. afficher.. liste des tags.. 1 ressource(s).. portent le tag.. "Liens".. [article].. Nous décrivons pour chaque recommandation l'intérêt.. Lire l article.. Voir tous les tags du site Ergolab.. dernier article.. Les interfaces à base de glisser  ...   web.. Qu'en est-il vraiment du côté utilisateur, et qu'en dit l'ergonomie? Cet article liste chaque point d'accroche des interfaces de drag drop, et émet pour chacun des recommandations, tant du point de vue de l'utilité que de l'utilisabilité de ce mode d'interaction.. dernière note.. [05.. Lorsqu une fiche produit sort de sa page.. Lire la note n°12.. dernière chronique..

    Original link path: /tags/tag.php?id=10
    Open archive

  • Title: Comment concevoir un menu ? Partie 1 - Ergolab
    Descriptive info: 20 Octobre 2003.. Comment concevoir un menu ?.. Partie 1.. Chapitres de livres gratuits.. Menus.. Comment concevoir un menu ? Partie 1.. Le menu rend l'informatique accessible.. Le menu comme reflet des fonctionnalités offertes par le système.. Faciliter l'identification et la sélection des options.. Les menus sont un style d'interaction très fréquent dans le domaine de l'informatique grand public.. Ils sont utilisés à la fois dans le domaine du web et du logiciel, mais leur forme diffère en fonction de ces supports.. Cet article décrit les caractéristiques principales de ce que l'on appelle un menu (c'est à dire la présentation d'une liste d'options à partir de laquelle l'utilisateur doit faire un choix).. A cette définition sont associées des recommandations pour la conception des menus.. Le menu rend l'informatique accessible.. Les menus font partie de la plupart des interfaces graphiques et permettent une plus grande accessibilité de l'outil informatique pour des utilisateurs non experts.. En effet, ce mode de dialogue est particulièrement approprié pour aider l'utilisateur.. Ce dernier n'a a priori pas besoin de mémoriser les menus puisqu'ils sont toujours disponibles (la mémorisation des emplacements des options permettra uniquement d'augmenter la rapidité d'exécution des actions).. De plus, les menus laissent peu de place aux erreurs puisque la seule action requise de l'utilisateur est de sélectionner une option prédéfinie.. On évite ainsi tous les problèmes liés aux erreurs de saisie.. Un menu est donc un style d'interaction qui convient bien aux utilisateurs novices, qui peuvent découvrir par eux-mêmes ce que permet le système.. Le menu comme reflet des fonctionnalités offertes par le système.. Puisque l'enjeu est de permettre à l'utilisateur de trouver la fonction qui lui permettra d'atteindre son objectif (par exemple copier une phrase dans un traitement de texte), il faut que le menu rende visible cette fonction.. On est à l'opposé d'une démarche partant du principe que l'utilisateur détient la connaissance permettant d'atteindre son objectif (comme en langage de commandes par exemple, voir Mayhew dans les lectures complémentaires.. Un menu signifie implicitement que c'est le système qui est en mesure de proposer à l'utilisateur les choix possibles.. Si le choix désiré n'est pas disponible, c'est souvent qu'il n'existe pas (ou que les concepteurs ont supposé qu'un novice n'utiliserait pas ou ne devrait pas utiliser la fonction).. On doit voir le menu comme engageant une démarche de recherche de la part de l'utilisateur.. La problématique consiste donc à supporter cette fonction de recherche, à faciliter le travail de l'utilisateur et à permettre une rapidité d'exécution de la recherche.. Plusieurs axes doivent être pris en compte pour atteindre ces objectifs.. Tout d'abord, l'identification et la sélection des options doivent être facilitées.. On doit en outre faire attention à la compatibilité du système avec les caractéristiques de la tâche et de l'utilisateur.. Faciliter l'identification et la sélection des options.. Choisir parmi une liste d'options suppose deux types de processus cognitifs.. Tout d'abord, les options doivent être identifiées par l'utilisateur.. Ensuite, il doit sélectionner celle qui lui semble appropriée pour atteindre son objectif.. L'identification des options.. Pour identifier correctement une option, l'utilisateur doit pouvoir la distinguer visuellement des autres options, lire le mot qui la décrit et être à même de consulter la liste des options facilement.. Ordre des options et distinction de formes.. » Choix de l'ordre de présentation des options du menu.. L'ordre dans lequel on décide de placer les options peut être déterminé par plusieurs paramètres.. On peut notamment choisir comme critère d'ordonnancement la fréquence supposée d'utilisation, l'ordre alphabétique ou l'ordre logique d'utilisation.. On doit aussi croiser ces critères avec la possibilité de distinguer deux options d'un point de vue visuel.. Il est important que la forme globale du mot soit différente de celles des mots qui l'entourent.. En effet, il faut que l'utilisateur puisse la repérer facilement et rapidement.. On essaie donc de ne pas placer côte à côte deux options qui se ressembleraient trop visuellement sans être liées fonctionnellement.. Par exemple, on évitera de placer côte à côte les options "edit" et "exit".. On est là dans la perception d'une gestalt et pas encore dans la lecture à proprement parler du mot.. On doit raisonner en termes de compromis : si fonctionnellement les options doivent être liées (exemple "enregistrer" et "enregistrer sous"), il n'est pas question de les séparer.. En termes d'importance des critères, il est fréquent que les groupes soient fonctionnels, puis que l'ordonnancement de ces groupes eux-mêmes soit lié à la fréquence d'utilisation des options.. A l'intérieur d'un groupe, l'ordre est le plus souvent adapté à la fréquence d'utilisation des options ou à l'ordre alphabétique.. » Conformité aux standards.. La notion de standard est ici fondamentale : le choix d'une configuration d'options de menu doit nécessairement se faire au regard de ce qui existe dans le domaine de référence, et quels sont les choix des interfaces dominant le marché (donc celles sur lesquelles le plus grand nombre d'utilisateurs auront fait leur apprentissage).. De même dans le domaine du web, certains emplacements commencent à devenir standardisés.. On a ainsi l'habitude de trouver l'option "accueil" dans le coin supérieur gauche d'un site web.. » Adaptabilité des menus logiciels.. Tous ces éléments ne tiennent pas compte des possibilités de configuration personnalisée des menus dans les applications logicielles.. On prend le parti de penser que la flexibilité offerte sera exploitée par des utilisateurs confirmés ou experts, qui sont à même de juger ce dont ils ont besoin et comment ils veulent le voir affiché.. Lecture.. L'identification d'une option repose aussi sur la lecture du mot qui le décrit.. Pour faciliter la lecture d'un mot, on veillera à optimiser la lisibilité des polices, les tailles des caractères, les contrastes de couleurs fond / caractère (voir l'article.. En ce qui concerne les menus dynamiques,  ...   et proposent des moyens visuels standards pour ce faire.. Il est beaucoup plus rare dans le domaine du web d'avoir besoin de ce type d'attributs.. En effet, les menus web comprennent généralement un nombre d'options plus limité.. » Terminologie.. Afin de permettre une sélection efficace et rapide, la signification des options doit être la plus claire possible.. Le choix des mots doit être étudié et validé par des tests utilisateurs si le projet le permet.. Le tri de cartes est un des moyens de travailler sur les appellations des options.. Il est aussi important de tenir compte des standards qui existent à la fois dans le domaine du web et du logiciel.. Les noms des rubriques sur le web sont souvent communs.. Même si l'on découvre un nouveau mot qui a priori conviendrait bien pour décrire le contenu sous-jacent, il faut tenir compte de ces standards avant de l'adopter.. On doit se demander si le bénéfice apporté compense la perte due à la non utilisation du standard.. Il est souvent difficile de trancher sur ce type de questions, puisque chiffrer les bénéfices et pertes nécessite des études poussées et de grande ampleur.. Si on recense les standards dans le domaine du web, les sites français utilisent souvent les mots accueil, produits, société, contact ou contactez-nous … Dans le domaine logiciel, les termes sont aussi souvent les mêmes (fichier, édition, affichage …).. Cela permet le transfert des apprentissages d'une interface à une autre.. Sélection physique.. Après avoir choisi l'option qu'il veut sélectionner, l'utilisateur doit mettre en œuvre cette sélection d'un point de vue moteur.. On doit avoir réfléchi au mécanisme de sélection pendant la phase de conception du menu.. Ce mécanisme doit reposer sur une action non ordinaire de la part de l'utilisateur.. Pour indiquer son choix au système, plusieurs modalités sont possibles.. L'utilisateur peut se déplacer dans les options à l'aide du pointeur de la souris ou du clavier ou indiquer son choix par la saisie d'un code au clavier (un nombre, une lettre ou une combinaison de touches).. Le mécanisme que l'on rencontre le plus fréquemment est la sélection par pointeur souris ou flèches du clavier.. Après avoir sélectionné son choix, l'utilisateur doit valider cette sélection.. Le plus souvent ce sera par un clic de souris ou la touche entrée.. Dans le cas d'une saisie du choix, la sélection et la validation sont confondues.. On doit prendre en compte ces aspects lors de la conception d'un menu même si ils deviennent de plus en plus standardisés.. On retrouve souvent les mêmes types de sélection / validation à travers les interfaces.. Le critère qui semble le plus important pour en décider est l'expertise de la population cible avec l'outil informatique.. Les experts pourront accomplir plus rapidement leurs actions avec un mécanisme de raccourcis clavier où toutes les étapes cognitives se concrétisent en une seule action physique.. Le menu devient alors uniquement une représentation mentale.. » Mécanismes web.. Alors que dans le domaine logiciel les mécanismes sont presque toujours les mêmes, le web permet d'observer des mécanismes beaucoup plus originaux.. Lorsqu'elle s'insère dans un univers particulier, l'originalité du processus de sélection peut être intéressante.. Cependant, on doit veiller à ne pas inverser le rapport système / utilisateur.. On doit donc toujours baser la sélection sur une action venant de l'utilisateur, quelque soit la présentation du menu.. Par exemple, on a l'habitude que le simple passage du pointeur n'entraîne pas d'action de la part du système.. On doit donc éviter un système de navigation basé uniquement sur le déplacement du pointeur (sans clic).. En ce qui concerne les menus dynamiques, la sélection / validation est plus ardue et demande une certaine expertise dans le maniement de la souris.. Il s'agit de ne pas faire disparaître le menu en déplaçant la souris pour effectuer la sélection.. » Localisation des menus.. La localisation des menus permet aussi d'optimiser la sélection physique des options.. On doit veiller à respecter les standards de présentation.. Ainsi, dans le domaine logiciel la barre de menus principale est située en haut de l'écran.. Dans le domaine du web, les règles sont moins figées mais la localisation des menus tend à se standardiser.. Le menu principal est souvent situé en haut ou à gauche de l'écran, même si certaines recherches tendent à montrer qu'il n'y a pas de différence notable d'utilisabilité entre un menu situé à gauche et un situé à droite de l'écran.. Ce résultat doit cependant être questionné et validé sur le terrain avec des sites réels.. La problématique de la localisation du menu conditionne aussi la distinction des zones de menu par rapport aux zones de contenu.. La seconde partie de cet article détaillera dans quelle mesure un menu doit être adapté aux caractéristiques de l'utilisateur, et comment cette adaptation peut être mise en place.. Lire la seconde partie.. » Ressources en ligne.. Norman, K.. The Psychology of Menu Selection: Designing Cognitive Control at the Human/Computer Interface.. Published by Ablex Publishing.. Miller, G.. A.. (1956).. The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information.. The Psychological Review.. , 63, 81-97.. Disponible en ligne à l'adresse suivante :.. well.. com/user/smalin/miller.. html.. » Ressources externes.. Helander, M.. (eds) (2000).. Handbook of HCI.. 2nd edition North-Holland: Amsterdam.. Mayhew, D.. J.. (1992).. Principles and Guidelines in Software User Interface Design.. Chapitre 4, Designing Menu Systems.. Prentice Hall.. à voir aussi sur Ergolab.. [29.. 2004].. Architecture de l information.. L'architecture de l'information est la structure d'organisation sous-jacente à un système de contenu.. Ce système de contenu peut être le web, et c'est souvent dans ce cadre que l'on parle d'architecture de l'information.. En effet, là où il y a de l'information.. Information Architecture.. Louis Rosenfeld Peter Morville..

    Original link path: /articles/ergonomie-menu-1.php
    Open archive
  •  

  • Title: Accessibilité visuelle des interfaces web - Ergolab
    Descriptive info: 24 Janvier 2004.. Accessibilité visuelle.. des interfaces web.. Lisibilité.. principes.. Accessibilité visuelle des interfaces web.. Les enjeux.. Conventions et niveau minimal d'accessibilité.. Les moyens d'optimiser l'accessibilité visuelle.. Un objet accessible est par définition un objet que l'on peut atteindre.. Si on applique cette définition au domaine de l'ergonomie informatique, optimiser l'accessibilité c'est concevoir ou modifier l'interface de telle sorte que le plus grand nombre d'utilisateurs puisse accéder aux informations.. Cet article a pour objectif d'introduire la problématique de l'accessibilité visuelle sur le web.. On proposera aussi des moyens simples pour prendre en compte cet élément dans la conception de sites.. La discussion est centrée sur la modalité visuelle, mais l'accessibilité est un concept plus global, qui réfère à toutes les façons de recevoir de l'information.. Les enjeux.. Le web est un média essentiellement visuel.. Puisqu'il représente une source d'informations indispensable, n'importe qui (quelles que soient ses capacités visuelles, son navigateur ou le système qu'il utilise) devrait pouvoir accéder aux informations contenues sur un site web.. Si on revient à la définition de l'ergonomie, il s'agit que ce soit l'outil qui s'adapte aux caractéristiques de l'utilisateur (et non l'utilisateur qui s'adapte aux défauts de conception de l'outil).. On doit donc essayer de concevoir les interfaces pour qu'elles soient accessibles a priori, et non compter sur des moyens techniques pour donner aux déficients visuels la possibilité de contourner un mauvais niveau d'accessibilité.. Quelle population d'internautes vise-t-on quand on parle d'accessibilité visuelle?.. Malvoyants.. (qui disposent d'outils techniques pour mieux voir l'interface, souvent des systèmes de grossissement de l'écran).. Non-voyants.. (qui disposent d'outils techniques pour transformer le message visuel à l'écran en message auditif - c'est le cas des synthèses vocales - ou tactile pour les plages brailles).. Utilisateurs disposant de navigateurs textes.. Utilisateurs disposant de navigateurs avec les images désactivées.. Plus largement, tous les utilisateurs du web.. En effet, on a besoin que l'information nous soit présentée de façon adaptée à la façon dont nous voyons.. On doit donc prendre en compte tous les utilisateurs humains… qui pour voir correctement ont besoin d'un niveau optimal de contrastes de luminances entre les caractères et le fond.. On doit aussi prendre en compte les utilisateurs atteints de défauts de perception des couleurs (ou dyschromatopsies).. (Note.. les déficiences visuelles incluent la malvoyance, les dyschromatopsies et la cécité).. Tous les utilisateurs doivent pouvoir accéder aux informations présentées dans le site web, même si pour cela ils ne recourrent pas aux mêmes outils.. Travailler sur l'accessibilité c'est donc suivre deux axes :.. - Optimiser l'affichage à l'écran.. - Concevoir l'interface de sorte que cet affichage puisse être traduit de façon efficace dans une autre modalité (auditive pour les synthétiseurs vocaux ou tactile pour les plages braille).. Conventions et niveau minimal d'accessibilité.. Le seul cadre législatif qui existe aujourd'hui en France est la.. Circulaire du 7 octobre 1999.. , relative aux sites internet des services et des établissements publics de l'Etat (pour plus d'informations, consulter le lien dans les.. lectures complémentaires.. Elle mentionne que ".. Les responsables des sites veilleront tout particulièrement à favoriser l'accessibilité de l'information à tous les internautes, notamment les personnes handicapées, non voyantes, malvoyantes ou malentendantes.. Il n'existe en France aucune obligation d'atteindre un niveau minimal d'accessibilité visuelle.. Cependant, on peut faire le choix de respecter certains standards et conventions pour optimiser l'accessibilité visuelle d'un site web.. Les recommandations les plus connues sont éditées par le W3C sous le nom de.. Web Content Accessibility Guidelines.. (WCAG, cf.. Elles font référence au niveau mondial.. La conformité à ces recommandations permet de garantir une qualité d'accessibilité selon plusieurs niveaux (priorités 1, 2 et 3).. Lorsqu'on dit d'un site qu'il est accessible, on ne réfère en général pas au concept d'accessibilité, mais on sous-entend que le site satisfait à ces conventions d'accessibilité.. C'est d'ailleurs la définition de l'accessibilité dans ce qu'on appelle la ".. Section 508.. " (cf.. Ce texte relatif aux standards d'accessibilité pour les technologies de l'information doit être appliqué pour toutes les interfaces à destination des entités fédérales des Etats-Unis.. La section 508 définit l'accessibilité comme suit: ".. The term accessible was defined in the proposed rule in terms of compliance with the standards in this part, as is common with other accessibility standards.. As proposed, if a product complies with the standards in this part, it is "accessible"; if it does not comply, it is not accessible.. Que ce soit au niveau international ou français, les initiatives sont de plus en plus nombreuses pour permettre aux concepteurs de créer des sites web qui soient visuellement accessibles.. Les moyens d'optimiser l'accessibilité visuelle.. Tester l'implémentation des recommandations.. Toutes les méthodes qui suivent ne sont que des recommandations pour optimiser l'accessibilité.. Il semble essentiel lorsqu'on travaille sur l'accessibilité visuelle d'une page web de connaître les contraintes de chaque cible d'utilisateurs.. Il est donc nécessaire de tester l'implémentation des recommandations en fonction du matériel d'accès au site :.. Tester avec un.. navigateur classique.. (Internet Explorer ou Netscape).. navigateur texte.. (exemple Lynx ou BrailleSurf).. navigateur alternatif.. (par exemple Opéra) et désactiver l'affichage des images.. Tester avec une.. synthèse vocale.. (exemple Jaws).. Tester différents réglages qui modifient le comportement de la synthèse, les éléments qu'elle lit ou auxquels elle donne priorité.. Utilisation des couleurs.. Contrastes.. Le premier élément permettant d'optimiser l'accessibilité visuelle d'un site est de travailler sur les contrastes de luminances à l'écran.. On peut d'abord s'assurer que les contrastes entre les caractères et le fond sont suffisants et correspondent aux recommandations.. Pour plus de détails, lire l'article.. Faciliter la lecture d'informations sur le web.. On utilise souvent les couleurs pour différencier les informations.. Il faut donc s'assurer que l'information de différence est toujours présente lorsque la perception des couleurs est impossible.. » Tester en niveaux de gris.. Sources :.. ergolab.. net.. chromino.. com/contact.. - La navigation de premier niveau du site Ergolab en couleurs RVB et en niveaux de gris.. - La navigation du  ...   On recommande d'attribuer un [alt] vide.. Conception des liens.. » Eviter les liens généraux ou définir des titres pour ces liens non explicites.. On recommande de ne pas concevoir de liens qui en dehors du contexte n'ont pas de signification précise (de type : "cliquez ici", "plus", "lire la suite", "voir plus"…).. Lorsque ce type de lien est adopté, on devra définir une balise [title] permettant au même titre qu'un [alt] d'ajouter une information à l'élément.. Cette balise de titre sera lue par les synthèse vocales (on peut même régler la synthèse pour qu'elle donne la priorité à ces balises), affichée par les navigateurs textes et présentée par une info-bulle par les navigateurs classiques.. net/livres.. lecture par une synthèse vocale.. 02) - format mp3, 241 Ko.. Pour le lien "lire la suite", le code html prend la forme suivante:.. a href="dont-make-me-think.. html" class="lk1" title="Lire la chronique de quot;Don't make me think quot;" » lire la suite /a.. Utiliser des moyens techniques permettant de séparer contenu et forme.. A l'heure actuelle, le langage standardisé le plus utilisé pour séparer contenu et forme est le.. CSS 2.. (Cascading Style Sheets, niveau 2, cf.. lectures complémentaires).. Il consiste à travailler avec des feuilles de styles, à la fois pour la mise en page (organisation spatiale des éléments dans la page) et pour l'apparence, le format de chacun des éléments dans cette page.. On contourne ainsi tous les problèmes du langage html dus aux contraintes de présentation.. Les systèmes alternatifs sont en mesure de comprendre les CSS et d'extraire le contenu qui leur est utile.. Fournir des moyens aux utilisateurs de sauter les éléments répétés sur toutes les pages.. Cette problématique concerne en général le parcours des éléments de navigation.. Il s'agit de fournir aux utilisateurs la possibilité d'aller directement consulter le contenu de la page, comme on le fait lorsqu'on consulte une page visuellement.. Ce type de lien (souvent appelé.. skip link.. ) a une utilité plus ou moins grande selon le type de pages.. En effet, il servira surtout sur les pages de contenu pur, lorsque l'utilisateur a déjà navigué pour trouver ce contenu.. Cependant, il est important de garder une cohérence dans les choix : soit on utilise ce type de liens sur tout le site, soit on ne l'utilise pas.. » Lecture d'un skip link par une synthèse vocale.. lecture du menu d'Ergolab par une synthèse vocale.. 02) - fichier mp3, 161 Ko.. Les éléments de navigation sont précédés par ce qu'on appelle un "skip link", et qui correspond à un lien ancre permettant d'accéder directement au contenu.. » Traitement d'un skip link par Braille Surf.. BrailleSurf est un navigateur web qui permet une lecture simplifiée des pages web en les affichant sous forme textuelle.. Le système permet de traiter ce texte en le transférant à une plage braille ou à une synthèse vocale.. Un skiplink dans BrailleSurf apparaît comme un lien classique, intitulé par le nom que lui a donné le concepteur de la page web.. Un exemple :.. L'accessibilité visuelle du web est un enjeu considérable.. Les solutions qui existent aujourd'hui pour l'optimiser sont pour la plupart des solutions simples, qui peuvent être appliquées par tout concepteur de sites web.. La problématique est cependant récente, et il reste beaucoup de travail à effectuer, à la fois au niveau normatif (quels standards doivent être respectés, qui doit les respecter ?) et au niveau des moyens techniques pour améliorer cette accessibilité (évolution des langages).. Pilgrim, M.. Dive Into Accessibility - 30 days to a more accessible web site.. Un document original, complet et concret.. Possibilité de consulter les recommandations selon les personnages virtuels du livre (qui présentent chacun des caractéristiques particulières), le type de handicaps, le principe de conception, le type de navigateur ou l'outil de publication (réfère aux outils de gestion de contenu).. Dive Into Accessibility en anglais.. (Mark Pilgrim).. Dive Into Accessibility en français.. (traduction de Karl Dubost) :.. Rubrique accessibilité du site Microsoft.. France.. Accessible web authoring resources and education center.. Notamment une section "resources" incontournable.. Section Cascading Style Sheets du site du W3C.. Accessiweb.. , Centre de ressources et de recherche sur l'accessibilité du Web.. Safe Web Colours for colour-deficient vision.. , section du site BTexact.. Textes légiférant sur l'accessibilité des sites web.. (Recensement par pays, W3C).. relative aux sites internet des services et des établissements publics de l'Etat.. BrailleNet.. , "une porte sur le Web pour les personnes handicapées visuelles".. VisuaFriendly.. , société française spécialisée dans l'accessibilité visuelle du web, propose un service de personnalisation et simplification d'utilisation des sites,.. LabelVue.. L'accessibilité du web aux personnes mal-voyantes.. Ernu, J.. Garcia, D.. Veblog.. L'ergonomie des interfaces à l'usage des publics déficients visuels.. Rapport Descargues.. : L'accessibilité des nouvelles technologies de l'information et de la communication aux personnes aveugles et malvoyantes.. Ministère de l'Emploi et de la Solidarité.. R.. Descargues (2000).. AnyBrowser.. , une initiative pour que le maximum de sites web soient accessibles avec n'importe quel navigateur.. OUTILS :.. Version d'essai de la synthèse vocale Jaws.. (commercialisé par Freedomscientific).. Utilisation possible pendant 40 min consécutives.. Version d'essai de la synthèse vocale Jaws en français.. (commercialisé par VisuAide).. Page de téléchargement de BrailleSurf 4.. Le ColorBlindnessCheck.. , proposé par Q42.. Ncolor.. , un outil pour étudier les contrastes de couleurs à l'écran et les visualiser en fonction de plusieurs types d'atteintes de la perception des couleurs.. Cynthia Says.. , outil de validation de l'accessibilité des contenus web (références : section 508 et WCAG).. Créer des sites web accessibles à tous.. Alexandre Afchain Julien Lanceraux.. Web Content Accessibility Guidelines Working Group (WCAG WG).. Les guidelines de la WAI, la "section" accessibilité du W3C.. Building Accessible Websites - Joe Clark.. Version pdf du chapitre 9 (Type and Colour) sur le site de New Riders.. Pourquoi et comment traiter les textes et les couleurs dans l'optique de l'accessibilité visuelle d'un site.. (Cliquer sur l'onglet Sample content)..

    Original link path: /articles/accessibilite-visuelle-web.php
    Open archive

  • Title: Lisibilité - Ergolab, ergonomie sites web
    Descriptive info: TAG : Lisibilité.. Lisibilité.. 5 ressource(s).. "Lisibilité".. Faciliter la lecture d informations sur le web.. Ecrire pour le web c'est d'abord écrire pour être lu à l'écran.. Cet article exposera donc brièvement les enjeux de la prise en compte des caractéristiques perceptives de l'être humain.. Au-delà de ces considérations.. Ecriture web.. Accessibilité visuelle des interfaces web.. Si on applique cette définition au domaine de l'ergonomie informatique, optimiser l'accessibilité c'est concevoir ou modifier  ...   outil proposé par Jonathan Snook, qui permet de calculer les rapports de contrastes de couleurs et de luminances entre des caractères et un fond.. Et si vous l'utilisez avec l'extension Colorzilla pour Firefox, vous disposez du combo magique !.. Outils.. ColorZilla.. Alex Sirota nous offre avec son ColorZilla une des extensions indispensables pour tous ceux qui s'intéressent à l'optimisation des couleurs sur le web : eyedropper, pipette à couleur, loupe, et plus encore!..

    Original link path: /tags/tag.php?id=18
    Open archive

  • Title: Faciliter la lecture d’informations sur le web - Ergolab
    Descriptive info: 15 Novembre 2003.. Faciliter la lecture d’informations.. sur le web.. Lisibilité visuelle vs lisibilité cognitive.. Lisibilité visuelle : optimiser la perception du texte à l'écran.. Lisibilité cognitive : optimiser la lecture à l'écran.. Au-delà de ces considérations concernant le confort perceptif, le contenu doit être adapté au média.. En effet, on n'écrit pas du texte pour un site web comme du texte destiné à un support papier.. Nous présenterons donc plusieurs techniques permettant d'adapter un texte à la façon dont les utilisateurs lisent à l'écran.. Lisibilité visuelle vs lisibilité cognitive.. Deux dimensions composent le critère de lisibilité.. On doit distinguer la lisibilité matérielle de la lisibilité cognitive d'un texte.. En anglais, deux adjectifs différents sont employés pour désigner ces dimensions :.. - on parle de ".. legibility.. " pour désigner la.. lisibilité matérielle, visuelle.. d'un texte.. On réfère donc au niveau perceptif.. readability.. lisibilité cognitive.. , la façon dont un texte peut être intégré au niveau cognitif et compris par l'utilisateur.. On doit optimiser ces deux aspects pour faciliter la lecture d'informations sur le web.. On se situe donc dans l'étude de deux pôles complètement différents :.. - un pôle physique.. - un pôle conceptuel.. Lisibilité visuelle : optimiser la perception du texte à l'écran.. L'interface par laquelle l'utilisateur perçoit les informations est l'écran.. Lire des informations sur le web, c'est donc lire via ce support physique.. Malheureusement, ce n'est pas le support le plus indiqué pour l'activité de lecture.. Ces difficultés ne sont d'ailleurs pas spécifiques au web mais à toute activité de lecture à l'écran.. Tout d'abord, nous sommes habitués à lire sur papier.. On a ainsi acquis des réflexes de lecture qui sont difficilement transposables lors de la lecture sur écran.. Ensuite, nos caractéristiques physiologiques ne nous permettent pas de lire sur écran comme sur papier.. Déchiffrer les caractères et les assembler est en général plus lent et plus fatiguant sur écran.. La lecture sur écran serait plus lente de 25% comparativement à la lecture papier.. De plus, une lecture prolongée ou répétée sur écran est susceptible d'entraîner des problèmes de fatigue visuelle, dus en grande partie à une sollicitation importante de l'œil.. La sensation de confort visuel et les conditions de vision optimale dépendent étroitement de la répartition des contrastes des luminances.. On doit donc optimiser les caractéristiques perceptives des informations afin d'en faciliter la lecture.. Couleurs et contrastes.. Pour améliorer la vitesse de perception et le confort visuel, on doit optimiser les couleurs employées.. La.. vitesse de perception.. se caractérise par le temps qui s'écoule entre la présentation d'un objet au sujet et la perception visuelle de cet objet.. La perception est d'autant plus rapide que les différences de luminances entre l'objet et l'ambiance sont plus marquées.. On peut globalement dire d'un point de vue ergonomique que le contraste positif (fond clair / caractères sombres) est plus adéquat que le contraste négatif (fond sombre / caractères clairs).. A éclairement égal, le diamètre pupillaire est plus petit en contraste positif qu'en contraste négatif.. En conséquence, la focalisation sur l'écran est plus facile pour l'œil en contraste positif car la profondeur du champ augmente.. Le contraste positif s'avère donc moins fatigant pour la vision que le contraste négatif.. Les performances dans un certain nombre de tâches (vérification de chiffres, recherche d'informations) sont meilleures sur des écrans à fond clair que sur des écrans à fond sombre.. Enfin, la sensation de.. confort visuel.. est en grande partie déterminée par le contraste des mots avec le fond.. L'acuité visuelle est meilleure lorsque le caractère à observer est sombre sur fond clair.. On recommande donc de.. favoriser les contrastes positifs.. , c'est à dire d'utiliser un fond clair avec des caractères foncés :.. Contrastes positif et négatifs.. Il est toutefois à noter qu'un contraste de luminances trop élevé peut provoquer un éblouissement gênant pour l'opérateur.. En ce qui concerne les combinaisons de couleurs caractère / fond, on évitera les couleurs complémentaires.. Pour plus de précisions sur les combinaisons recommandées, le lecteur pourra consulter le guide édité par l'INRS (voir les lectures complémentaires).. Caractères.. La lisibilité dépend non seulement du contraste caractère / fond mais aussi de paramètres propres aux caractères :.. - taille des caractères affichés (même si cette taille doit être pondérée par la distance entre l'œil de l'utilisateur et l'écran, la taille du caractère peut d'ailleurs compenser un mauvais contraste).. - espacement des lettres.. - espacement des mots et des lignes.. - typographie.. Pour plus de précisions sur les recommandations sur les caractères, le lecteur pourra encore une fois se reporter au guide de l'INRS (voir les lectures complémentaires.. Lisibilité cognitive : optimiser la lecture à l'écran.. On peut parler de lisibilité cognitive pour représenter l'effort cognitif exigé par la lecture du contenu d'une page web.. Par optimiser la lecture, on entend faciliter la distinction des groupes d'informations et de leur rôle, mais aussi faciliter la compréhension du contenu.. Toutes ces dimensions correspondent à ce que Jonassen a appelé la "technologie textuelle", c'est à dire tous les moyens permettant de structurer les textes pour faciliter leur appréhension et leur compréhension.. Un format rédactionnel adapté à la lecture sur le web.. La majorité des utilisateurs (80% selon une étude de Nielsen Morkes, cf.. référence dans les lectures complémentaires.. ) ne lisent pas les contenus des sites Internet.. Selon les experts, ils "scannent", "survolent", "explorent"… Quoiqu'il en soit, les caractéristiques du web font qu'on ne lit pas mot à mot.. La recherche d'information sur Internet peut être considérée comme la.. recherche d'un signal parmi du bruit..  ...   être surpris la première fois mais comprendra vite le fonctionnement de ce type de liens.. On peut l'aider dans cet apprentissage en représentant les ancres dans un format différent de tous les autres liens du site.. On facilite ainsi la première étape de l'apprentissage, à savoir la reconnaissance de ce qui fait la différence de ces liens.. Découper le texte en plusieurs pages : discutable.. C.. Bastien indique que "Les internautes ne semblent pas aimer le défilement des pages longues" (voir l'article de lergonome.. org dans les lectures complémentaires.. J.. Nielsen a d'ailleurs exposé la même idée, ainsi que de nombreux experts en ergonomie web.. Ce principe répandu est une des raisons pour lesquelles les longs contenus sont souvent scindés en plusieurs pages.. Découper les textes en écrans successifs semble pourtant présenter plus d'inconvénients que d'avantages.. Certes, a priori, il est plus facile de lire des pages courtes, sans avoir besoin de scroller pour lire la suite d'un texte.. Cependant, la nature même du web fait que le découpage d'un texte en plusieurs pages nécessite le chargement successif de ces pages.. Cette façon de présenter l'information.. nuit à une lecture continue du texte.. , puisque normalement, l'oeil passe inconsciemment d'une ligne à l'autre de manière non séquentielle.. De plus,.. la lecture est une activité cognitive très contextuelle.. On a souvent besoin de "remonter" de quelques paragraphes pour comprendre ce que nous sommes en train de lire.. En effet, on ne lit pas des mots isolés, mais on met en relation les mots et phrases les uns avec les autres.. Un autre problème de découper un texte en plusieurs écrans est qu'il est.. impossible de déterminer facilement la taille d'un "écran".. de texte chez l'utilisateur.. Cet aspect est lié à la nature même du web.. Chaque internaute voit un site selon sa propre configuration ; cette configuration est un croisement entre la taille de son écran, sa résolution, le système d'exploitation de son ordinateur, le fait qu'il navigue avec une barre latérale (favoris, historique.. ) ou non, etc.. Les utilisateurs, aidés par les technologies matérielles (et notamment l'apparition de la "roulette" sur les souris), ont.. appris à scroller.. Les longues pages ne sont donc pas forcément un défaut d'une interface.. Leur existence doit cependant être justifiée, et les éléments essentiels présentés en haut de page.. Fournir des repères de positionnement vertical.. Un des inconvénients d'un long texte est que lors de la lecture d'une longue page verticale (haute de plusieurs écrans), on a tendance à perdre sa position verticale dans la page.. On peut donc recommander de fournir des repères de positionnement vertical, qui seront des repères visuels forts dans le texte.. Ces repères peuvent être des images, mais aussi les liens hypertextes à l'intérieur du texte, les enrichissements typographiques, les titres ou un découpage en paragraphes.. On doit alors s'intéresser aux moyens de mise en valeur des informations importantes, évoqués précédemment.. Toutes ces méthodes augmentent la lisibilité cognitive et sont un support au repérage dans la page.. Qualité du contenu.. La dernière idée que nous proposerons pour faciliter la lecture des informations sur le web est de se préoccuper de la qualité de ces informations.. Cette recommandation peut paraître triviale mais elle est essentielle.. On remarque que les utilisateurs visitent les sites qui leur apportent une information de qualité, qui correspond à leurs attentes et qui est souvent mise à jour.. L'utilisabilité des sites web est donc un pilier de leur qualité utilisateur mais n'est pas suffisante.. Pour les utilisateurs, le contenu est premier.. L'objectif du web doit rester de servir la recherche d'informations.. On rejoint ici l'idée qu'optimiser l'utilisabilité ne peut pas se faire indépendamment d'une préoccupation concernant l'utilité des contenus présentés.. Faciliter la lecture d'informations sur le web, c'est donc à la fois travailler sur la facilité de perception et sur la facilité de compréhension du contenu.. S'ajoutent à ces considérations tout ce qui tourne autour de l'accessibilité des sites web, notamment à l'adresse des déficients visuels.. Si le site doit pouvoir être vu et lu correctement, il doit aussi pouvoir être traité par une synthèse vocale avec efficacité et efficience, et son apparence devrait pouvoir s'adapter en fonction des choix de l'utilisateur.. University of St Thomas.. Writing for effective web pages.. Arno (2002).. Présenter des textes longs sur le web.. La lecture facile à l'écran.. Uzine.. net.. Henning, K.. (2001).. Writing for Readers Who Scan.. Clickz.. com.. Petersen, C.. Writing for a Web audience.. , Ten Web writing tips to gain your Web visitors' trust and keep them coming back for more.. IBM.. Bastien, C.. Quelques recommandations pour la rédaction de contenus Web.. Lergonome.. org.. Morkes, J.. Applying Writing Guidelines to Web Pages.. Useit.. (1997).. Concise, SCANNABLE, and Objective: How to Write for the Web.. Be succinct! (Writing for the Web).. , Schemenaur, P.. Fox,J.. Sun.. INRS (1997).. Les écrans de visualisation.. Guide méthodologique pour le médecin du travail.. Version actualisée.. Document à télécharger.. sur le site de l'INRS (fichier pdf, 615Ko).. [ note.. 17/08/2005: ce document n'est plus disponible en ligne sur le site de l'INRS ].. Gélinas Chebat, C.. , Préfontaine, C.. , Lecavallier, J.. Chebat, J.. C.. (1993).. Lisibilité, Intelligibilité de documents d'information.. Kilian, C.. Geeks' Edition.. Self Counsel Press.. Krug, S.. Don't make me think.. Chapter 5.. Omit needless words, The art of not writing for the Web.. New Riders.. lire.. la chronique ergolab.. Cail, F.. Présentation de l'information sur écran de visualisation.. Revue Bibliographique.. Cahiers de notes documentaires n°151.. INRS.. (1995).. Le travail sur écran en 50 questions.. [24..

    Original link path: /articles/faciliter-lecture-informations-web.php
    Open archive

  • Title: Ecriture web - Ergolab, ergonomie sites web
    Descriptive info: TAG : Ecriture web.. Ecriture web.. "Ecriture web"..

    Original link path: /tags/tag.php?id=45
    Open archive

  • Title: Feedback et rapport homme-ordinateur - Ergolab
    Descriptive info: 01 Novembre 2003.. Feedback.. et rapport homme-ordinateur.. Feedback et rapport homme-ordinateur.. Fournir un correspondant visuel aux traitements invisibles.. Adaptation du feedback à la nature des traitements informatiques.. Comment transmettre les informations ?.. 4.. Principe de feedback vs critère de feedback immédiat.. L'utilisateur doit toujours être informé des conséquences de ses actions.. C'est un principe fondamental en ergonomie des interfaces.. L'ordinateur est un être étrange.. On a besoin de savoir s'il comprend ce qu'on lui dit.. On a donc besoin qu'il nous dise qu'il a vu qu'on a cliqué sur un bouton et qu'il va travailler en conséquence.. Fournir un correspondant visuel aux traitements invisibles.. Du point de vue utilisateur, le domaine de l'informatique est par définition opaque.. On ne sait pas comment le système fonctionne et réagit à nos demandes.. Les seules informations qui peuvent nous renseigner sur les actions du système sont celles qu'il veut bien nous donner.. » Choisir les traitements à concrétiser.. Le rôle de l'ergonome est donc d'associer aux traitements informatiques un correspondant du côté utilisateur.. Ça ne veut pas dire bombarder l'utilisateur d'informations.. On sélectionne parmi les traitements ceux dont l'effet intéresse l'utilisateur.. Ce sont en général les états finaux, résultant d'une suite de traitements précédents.. Ces traitements intermédiaires et leurs résultats ne sont pas importants pour l'utilisateur et il n'est pas nécessaire qu'il en soit informé.. C'est même déconseillé si on veut conserver une charge informationnelle correcte.. On doit seulement l'informer que le processus suit son cours.. L'utilisateur qui a cliqué sur le bouton "état b" n'a pas nécessairement besoin d'être informé des résultats des traitements intermédiaires.. On doit seulement lui indiquer le résultat de l'ensemble des traitements : est-ce que l'état b a été atteint ou non.. On doit communiquer les informations pertinentes à l'utilisateur car la connaissance du résultat d'un traitement informatique peut l'aider à atteindre ses objectifs, à les atteindre plus rapidement ou avec plus d'assurance.. Adaptation du feedback à la nature des traitements informatiques.. L'importance du feedback dépend de l'action de l'utilisateur et des traitements qu'elle exige.. L'action peut avoir une conséquence visible ou non.. De plus, le temps nécessaire à l'exécution de l'action peut être presque instantané ou plus long.. Visibilité de l'effet du traitement.. » Conséquence visible = feedback inutile.. Certaines actions ont une conséquence visible directement par l'utilisateur (par exemple la mise en forme dans Word).. Le feedback est alors confondu avec l'action effectuée par le système (lorsque le texte est transformé en italique, on sait que le système a compris notre demande).. La conséquence de l'action est alors suffisante pour informer l'utilisateur.. Lui dire en plus "c'est bon, le système a bien mis en italique le texte que vous aviez sélectionné" serait redondant avec l'indice visuel.. L'utilité du feedback doit être jugée en fonction de cette visibilité du résultat de l'action.. » Conséquence invisible = feedback utile.. Certaines actions ont une conséquence invisible, par exemple l'enregistrement d'un document.. Cliquer sur une icône d'enregistrement ne nous informe en rien sur l'efficacité de l'action.. Pour illustration, par peur de perdre leur travail, il est très fréquent que les utilisateurs lancent plusieurs fois d'affilée la commande d'enregistrement.. La conséquence de l'action d'enregistrement est intrinsèque au système.. Elle ne suffit donc pas pour informer l'utilisateur sur l'efficacité de son action.. Il faut lui adjoindre un message spécifique, attestant du bon déroulement de l'enregistrement.. On devra cependant veiller à ce que le message soit le moins intrusif possible.. Criticité du traitement.. En parallèle de cette distinction entre résultats visibles et invisibles à l'écran, il faut tenir compte de la nature de l'action demandée par l'utilisateur.. Cette action peut être plus ou moins critique.. Cet attribut tient souvent au temps de travail perdu si l'action échoue.. Un autre domaine qui peut être critique est la transmission d'informations par le web (la "criticité" de l'action dépend alors de l'importance des informations et des incidences de leur non transmission).. On dira ainsi qu'un enregistrement ou l'envoi de données via un formulaire est une action critique.. A l'inverse, un changement de mise en forme non pris en compte est facilement rattrapable.. L'importance du feedback devra être adapté en fonction de ces considérations : moins le traitement est critique, moins le feedback est utile (ou en tout cas, moins il devra être intrusif).. Traitements programmés.. Lorsque l'utilisateur a automatisé certaines actions (exemple la mise à jour d'un anti-virus), on doit lui fournir un moyen de choisir d'être informé de l'accomplissement de l'action (ou de ne pas l'être…).. On peut décider d'un type de feedback a priori et /ou laisser le choix à l'utilisateur d'en décider (on peut laisser un choix par défaut modifiable par l'utilisateur).. Comment transmettre les informations ?.. Feedback sur le déroulement  ...   types de feedback les moins intrusifs.. Quoiqu'il en soit, on doit laisser une certaine liberté à l'utilisateur dans le choix de l'affichage du feedback.. Feedback dans le domaine du web.. Le principe général de feedback prend une signification particulière dans le domaine du web.. Les informations à transmettre sont différentes de celles d'une application client.. Les façons de transmettre ces informations sont aussi différentes.. Le feedback sur le web est beaucoup plus lié à la notion de temps, par analogie avec la métaphore du voyage que représente la navigation sur internet, et du fait que les "moyens de transport" ne sont jamais assez rapides à notre goût.. Le feedback doit être disponible sur les actions passées, sur le présent et le futur.. On peut avoir besoin de fournir du feedback sur divers éléments :.. - Feedback sur l'envoi d'informations.. : si l'envoi est long, on doit informer l'utilisateur de son avancée.. Lorsqu'il est terminé et s'il est court, on informera l'utilisateur du résultat de l'envoi (information envoyée ou non, si non pourquoi et comment résoudre le problème).. - Feedback sur le chargement de la page.. : l'utilisateur doit savoir si ce chargement est terminé, et s'il ne l'est pas, l'état d'avancement du processus.. Cette information est en général fournie par le navigateur, à un endroit déterminé.. - Feedback sur la progression d'un téléchargement.. : les téléchargements de données peuvent être de tailles variables.. L'utilisateur doit pouvoir connaître la taille totale des données, une indication sur le temps présumé de téléchargement, le temps écoulé et le temps restant.. Ces informations sont souvent représentées sous la forme de visuels (classiquement, barre horizontale se remplissant au fur et à mesure de l'avancement du téléchargement).. - Indications sur la navigation.. (ce qu'on a déjà visité, où l'on se trouve …).. Ces indications sont souvent fournies par des modifications de format des éléments de navigation (couleur, taille…) ou par des indicateurs textuels :.. bokson.. net/electro.. 2 types de feedback sont fournis dans cet extrait :.. - Le titre de page "electro" nous renseigne sur la rubrique que l'on visite.. - La différence de couleurs des boutons de la barre de navigation nous donne le même renseignement.. Il s'agit ici de fournir des indicateurs de statut.. Principe de feedback vs critère de feedback immédiat.. On doit distinguer le principe général de feedback et le critère ergonomique de feedback immédiat proposé par Scapin Bastien (1993, voir l'article sur.. les critères ergonomiques.. Donner du feedback en général correspond à tout ce qu'on a évoqué dans cet article.. Il s'agit globalement de donner des informations à l'utilisateur et de ne pas le laisser dans l'expectative.. Le critère de feedback immédiat est beaucoup plus restrictif puisqu'il ne concerne que les réponses de l'ordinateur à une action spécifique de l'utilisateur, à un moment donné.. Dans ce cas, le problème se pose surtout lorsque le feedback immédiat est absent.. Lorsque les concepteurs ont pensé à l'introduire, il est généralement pertinent et assez rapide.. L'indication de la rubrique active dans un site web n'est donc pas considérée comme du feedback immédiat.. C'est pourtant du feedback puisque cela permet de donner de l'information à l'utilisateur concernant le système.. Le principe de feedback que nous avons détaillé doit donc être vu comme un principe général qui doit sous-tendre chacune des procédures et la conception des éléments de l'interface.. Il permet de guider l'utilisateur à travers l'interface.. Le feedback fourni devra être contextuel, c'est à dire adapté à la situation de l'utilisateur et à son activité dans l'interface.. Il s'agit de lui fournir l'information dont il a besoin au bon moment.. L'utilisateur doit pouvoir sentir qu'il contrôle le système.. Il doit donc pouvoir en obtenir des renseignements.. Quand il demande quelque chose, on doit l'informer du résultat du traitement.. De la même façon, il doit pouvoir être informé du résultat de ses actions.. Le système doit garder trace des actions de l'utilisateur et pouvoir l'en informer lorsque c'est pertinent.. Fournir du feedback, c'est donc à la fois informer l'utilisateur de l'efficacité de ses actions et le guider à travers l'interface.. C'est lui donner des indices concernant le fonctionnement du système.. C'est développer un type de communication pour rendre plus transparents les traitements effectués par le système.. Bastien, J.. , Leulier, C.. , Scapin, D.. L.. L'ergonomie des sites web.. In J.. -C.. Le Moal B.. Hidoine (Eds.. ),.. Créer et maintenir un service Web.. (pp.. 111-173).. Paris : ADBS.. Scapin, D.. Critères Ergonomiques pour l'Évaluation d'Interfaces Utilisateurs (version 2.. 1).. Technical report Ndeg.. 156, May 1993.. INRIA.. Programme 3 Artificial intelligence, cognitive systems, and man-machine interaction.. Ergonomic criteria for evaluating the ergonomic quality of interactive systems.. Behaviour and Information Technology.. , 6 (4-5), 220-231..

    Original link path: /articles/feedback-ergonomie.php
    Open archive

  • Title: Feedback - Ergolab, ergonomie sites web
    Descriptive info: TAG : Feedback.. Feedback.. "Feedback".. Feedback et rapport homme-ordinateur.. On a donc..

    Original link path: /tags/tag.php?id=46
    Open archive

  • Title: Analyse concurrentielle - Ergolab, ergonomie sites web
    Descriptive info: TAG : Analyse concurrentielle.. Analyse concurrentielle.. 2 ressource(s).. "Analyse concurrentielle".. Ergonomie informatique : les principales méthodes.. Cet article présente les principales méthodes utilisées en ergonomie informatique.. Cette sélection permet d'avoir une vue d'ensemble du travail de l'ergonome et des outils auxquels il recourt.. Analyse concurrentielle.. Méthodes.. Test utilisateur..  ...   est une démarche utilisée très fréquemment dans le cycle de conception d'un produit informatique.. Elle consiste à étudier les sites et applications que l'on juge concurrents ou comparables, afin d'en extraire les points positifs et / ou négatifs ainsi que les conventions d'interface du domaine.. Ce type d'analyse.. Benchmark..

    Original link path: /tags/tag.php?id=39
    Open archive

  • Title: Benchmark - Ergolab, ergonomie sites web
    Descriptive info: TAG : Benchmark.. Benchmark.. "Benchmark"..

    Original link path: /tags/tag.php?id=40
    Open archive



  •  


    Archived pages: 258