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: Ergonomie et beauté des choses
    Descriptive info: 01 Décembre 2003.. Ergonomie et beauté des choses.. Introduction.. 1.. Problématique : concilier esthétique et utilisabilité.. 2.. L'utilisabilité n'importe que si le produit est effectivement utilisé.. 3.. L'esthétique au service de l'utilisabilité.. 4.. L'esthétique pour l'esthétique.. 5.. Les arguments de la psychologie cognitive.. 6.. Une tendance naturelle à préférer le beau.. 7.. Individualité des jugements / consensus culturel.. 8.. L'utilisabilité n'est pas que la facilité d'utilisation.. 9.. Beauté et utilisabilité perçue : "what is beautiful is good".. Conclusion : pour des interfaces utilisables et belles….. Pour en savoir plus.. Introduction.. Cet article s'intéresse à l'esthétique des interfaces informatiques et à la vision que doit en avoir l'ergonome.. Il constitue une sorte de plaidoyer pour la beauté des choses, pour elle-même mais aussi en ce qu'elle sert l'utilisabilité des interfaces.. Chaque partie expose ainsi un argument allant dans le sens d'une plus grande considération de l'attrait visuel des interfaces.. Problématique : concilier esthétique et utilisabilité.. On a largement démontré l'importance de la démarche ergonomique et les bénéfices que sa mise en œuvre est susceptible d'engendrer.. Cependant, elle ne peut pas être menée indépendamment de considérations autour de la beauté des choses.. Le seul travail sur l'utilisabilité n'assure en effet pas une qualité d'utilisation optimale.. La perception que les utilisateurs ont de l'application tient certes à sa facilité d'utilisation réelle, mais est aussi très influencée par des considérations esthétiques.. Nous développons des arguments afin d'arriver à ce que la collaboration entre ergonomes et designers se fasse dans le sens d'une discipline commune.. Les deux domaines ne doivent pas être travaillés séparément mais inscrits dans la recherche d'un même objectif, la qualité d'utilisation globale.. L'ergonomie peut prendre comme support le design pour optimiser l'utilisabilité d'une application.. C'est d'ailleurs en dernier lieu le designer qui concrétisera les recommandations ergonomiques et mettra en place le visuel final.. L'utilisabilité n'importe que si le produit est effectivement utilisé (et les belles choses donnent envie d'être utilisées).. On a l'habitude de dire en ergonomie des interfaces que le produit se doit d'être utile et utilisable.. De nombreux critères ont été dégagés afin d'évaluer ces deux versants de la qualité ergonomique d'une interface.. L'attractivité visuelle du logiciel ou du site Web n'est souvent considérée qu'en tant qu'élément annexe, sans réel rapport avec la qualité d'utilisation de l'interface.. Il semble qu'à partir du moment où l'on considère que le produit est facile à utiliser, rien d'autre ne peut atteindre sa qualité d'utilisation.. La beauté visuelle d'une interface et les impressions subjectives qu'elle suscite doivent pourtant être considérées comme partie prenante de la qualité d'utilisation et peuvent même compenser certains défauts d'utilisabilité.. A l'inverse, il sera difficile de compenser une interface affreuse par une utilisabilité bien pensée.. On risque en effet que le produit ne soit pas du tout utilisé.. Auquel cas l'utilisabilité n'a plus aucune importance.. Ceci est encore plus vrai dans le domaine du web grand public que dans le domaine professionnel.. En effet, une application professionnelle est nécessaire à la réalisation même de l'activité des personnes.. Il n'existe souvent pas d'autre application qui puisse permettre à l'utilisateur de réaliser son objectif d'une autre manière.. A l'inverse, dans le domaine du web grand public, lorsque l'utilité du site est réelle et a un sens pour l'internaute, ce dernier a souvent la possibilité d'atteindre son but grâce à d'autres sites web qui supportent la même utilité.. Il est donc difficile de parier sur l'utilité pour supposer que les utilisateurs reviendront sur ce site.. D'autres éléments doivent les attirer et leur plaire pour qu'ils continuent à utiliser ce site.. Dans l'idéal, ce dernier devrait associer utilité, utilisabilité et beauté.. L'esthétique au service de l'utilisabilité.. Beaucoup d'auteurs en ergonomie considèrent que l'esthétique n'est importante que lorsqu'elle se met au service de l'utilisabilité.. Cette considération ne laisse aucune place pour la beauté des choses pour elle-même.. On considère dans ce cadre que la valeur esthétique d'une interface doit être travaillée parce qu'elle permet d'augmenter la facilité d'utilisation.. En effet, le design aide l'organisation de l'information et peut donc être un support à l'optimisation de l'utilisabilité.. On peut distinguer deux types d'éléments de design dans les interfaces informatiques :.. - les.. éléments fonctionnels.. , qui supportent l'interaction (boutons, icônes, distinction des espaces d'information.. ).. éléments gratuits.. , qui n'ont d'autre utilité que d'être beaux et agréables à regarder.. Les auteurs qui ont travaillé sur les rapports entre utilisabilité et design se prononcent souvent en faveur de la beauté au service de l'utilisable mais ne laissent pas de place aux éléments de design "gratuits".. Donald Norman dans ses derniers écrits (voir les références dans les.. lectures complémentaires.. ) commence cependant à proposer que l'on pourra augmenter l'utilisabilité des produits par l'esthétique, du fait même que les belles choses permettraient une expérience d'interaction agréable.. Selon lui, ".. Aesthetics matter: attractive things work better.. ".. L'esthétique pour l'esthétique.. On peut donc aussi voter pour la beauté pour elle-même, c'est à dire existant en complément de l'utilisabilité.. Un visuel peut n'avoir aucune utilité produit, augmenter la densité informationnelle et le temps de téléchargement des pages pour le Web et même avoir un effet distractif.. Mais les bénéfices qui peuvent être amenés par la présence même de ce visuel en valent parfois la peine.. Norman évoquant l'apparition des écrans couleurs propose cette idée : ".. Although my reasoning told me that color was unimportant, my emotional reaction told me otherwise.. ", soulignant bien l'importance de l'émotion sur la perception.. La simple apparence des choses peut nous donner satisfaction.. On doit considérer cette façon d'être de l'humain et y faire correspondre le processus de conception des interfaces.. Il s'agit d'un compromis à réaliser entre la satisfaction aux critères d'utilité et d'utilisabilité et l'attractivité visuelle que peut apporter un design recherché.. Les arguments de la psychologie cognitive.. Les résultats des recherches scientifiques dans le champ cognition et émotion vont aussi dans le sens de concevoir des interfaces utilisables et belles.. Ces recherches en psychologie cognitive permettent de supposer que la beauté d'une interface a d'autre intérêt que subjectif.. Elle serait susceptible d'engendrer des processus cognitifs plus économiques et adaptés aux tâches informatisées.. On ne peut pas écarter une composante aussi importante du fonctionnement humain qu'est l'émotion.. Les aspects motivationnels ou émotionnels ont une incidence sur le comportement, la performance.. Si on s'intéresse à l'effet de l'émotion sur la cognition, et partant du principe que la beauté visuelle des interfaces aura tendance à induire un affect positif, on peut recommander de concevoir des interfaces agréables à regarder.. Les relations esthétique / utilisabilité sont en rapport étroit avec les relations émotion /cognition.. » Les effets de l'humeur positive sur le fonctionnement cognitif.. En effet, il est largement confirmé que l'humeur positive conduit à favoriser les comportements basés sur des habitudes.. C'est notre état humoral qui influence la  ...   de l'utilisateur est un critère primordial d'utilisabilité, l'importance à accorder à l'esthétique de l'interface peut difficilement être remise en cause.. La satisfaction fait partie de la définition de l'utilisabilité, et c'est pourtant un paramètre qui est souvent mis de côté.. On considère souvent qu'il est moins important que les paramètres plus objectifs, du fait de la difficulté à recueillir des données fiables concernant ce qu'on appelle la "satisfaction utilisateur".. Pour Tractinsky ".. the role of aesthetics should not be to help the user have a more pleasing experience with the interface, but only as a tool to augment the processing of information.. Cette position ne tient pas compte de nos réactions d'humain face aux choses.. Elle oublie toute l'importance du plaisir d'utilisation, de la richesse de l'interaction, de la qualité de l'expérience globale.. En tant qu'utilisateur, on ne se rend pas compte de certains défauts d'utilisabilité.. il est difficile de réaliser que l'on pourrait être plus efficace ou plus rapide si l'interface était conçue différemment.. A l'inverse, le jugement esthétique est immédiat.. On sait d'emblée si le design de l'interface nous plaît ou non.. C'est la première chose que l'on perçoit, qui définira notre "première impression" de l'interface.. Un utilisateur sera plus indulgent avec l'utilisabilité d'une interface si cette dernière est belle.. Il est faux que l'utilisateur cherche le facile.. On doit bien sûr l'aider à ce que l'interaction soit optimisée, car on connaît les enjeux de ce travail, mais il faut se rendre compte qu'en tant qu'individu, ce n'est pas ce que l'on recherche en premier dans l'interaction.. Overbeeke et ses collègues prennent pour exemple le fait qu'on n'apprend pas à jouer du violon parce que c'est facile.. On recherche autre chose.. On doit se préoccuper de savoir ce qui guide nos actions, nos envies, nos choix.. C'est d'ailleurs toute la problématique des courants qui prônent la "good experience", le plaisir d'utilisation, la richesse de l'interaction du point de vue émotionnel.. Il faut voir l'interaction homme-machine pour ce qu'elle est : un mélange de plusieurs critères qui doivent concourir à une qualité globale d'utilisation.. Parmi ces critères se trouve l'utilisabilité.. Parmi ces critères se trouve aussi la beauté.. Beauté et utilisabilité perçue : "what is beautiful is good".. Une autre voie de recherche permet de se prononcer pour la beauté des interfaces à part entière et non seulement au bénéfice de l'utilisabilité.. Tractinsky, Katz et Ikar ont ainsi réalisé une étude selon laquelle l'esthétique de l'interface influencerait la perception de l'utilisabilité du système.. Les utilisateurs confrontés à une belle interface auraient tendance à lui attribuer un meilleur niveau d'utilisabilité.. Les auteurs reconnaissent que les mécanismes sous-tendant les évaluations affectives et cognitives ne sont pas clairs.. Ils supposent que le rapport entre esthétique de l'interface et utilisabilité perçue est comparable à celui existant entre attractivité physique et attribution de traits socialement désirables.. Cette dernière idée correspond au fait qu'en général, sans en avoir conscience, nous avons tendance à associer plus de caractéristiques positives aux gens que l'on trouve attractifs physiquement.. Dès 1972, Karen Dion et ses collègues avaient perçu l'importance de ce stéréotype "What is beautiful is good" dans les relations sociales.. On suppose que cette façon d'aborder les choses a été acquise par transmission sociale, et notamment par le biais des médias.. Ces connaissances en psychologie sociale concernant la formation d'impression sur la base d'information physique peuvent fournir un cadre de réflexion pour le domaine des interfaces informatiques.. On peut supposer que l'apparence des interfaces nous fait penser qu'elles ont telle ou telle caractéristique, qu'elles sont faciles à utiliser ou pas, etc.. Pour reprendre Donald Norman sur ce rapport entre beauté et qualité perçue : ".. Wash and polish your car : doesn't it drive better ?.. Un des attributs de l'utilisabilité renvoie d'ailleurs à la satisfaction des utilisateurs, donc à leur perception subjective de la qualité de l'interface.. On peut donc penser que la beauté d'une interface a son rôle à jouer dans l'utilisabilité d'un système.. Les ergonomes doivent collaborer avec les designers afin de réussir à concevoir des interfaces où le critère "utilisable" est conjugué à la perception subjective de l'esthétique.. Conclusion : pour des interfaces utilisables et belles….. Curt Cloninger (cf.. ) image les rapports entre ergonomes et designers en disant que les premiers viennent de Mars et les seconds de Venus.. Décrivant ces métiers comme univers de pensée opposés, il semble ne connaître que des usability experts bornés et appliquant des principes rigides, et des designers ne montrant aucun intérêt pour l'utilisabilité.. Sans doute aurait-on avantage à construire un pont entre Mars et Venus afin de pouvoir bénéficier des compétences respectives de chacun.. Ce n'est qu'en prenant en compte la qualité esthétique des interfaces que l'on pourra réellement intégrer la satisfaction des utilisateurs et leur perception subjective de l'interface dans les critères ergonomiques.. Encore une fois on s'oriente vers la recherche d'un compromis.. Pour en savoir plus.. » Ressources en ligne :.. Brady, L.. Phillips, C.. (2003).. Aesthetics and Usability: A Look at Color and Balance.. Usability News, Vol.. 5 Issue 1, February 2003.. Norman, D.. A.. (2002).. Emotion and Design : Attractive things work better.. Interactions Magazine, IX (4), 36-42.. (lien sur la version modifiée en ligne).. Cloninger, C.. (2000).. Usability experts are from Mars, Graphic Designers are from Venus.. A list Apart.. Tractinsky, N.. (1997).. Aesthetics and Apparent Usability: Empirically Assessing Cultural and Methodological Issues.. ACM CHI conference proceedings on Human factors in computing systems, 1997.. Matthews, K.. K.. (1995).. Aesthetics and usability.. Advanced Topics in User Interface Design, University of Colorado at Boulder.. Overbeeke, K.. , Djajadiningrat, T.. , Hummels, C.. Wensveen, S.. Beauty in usability: forget about ease of use!.. (fichier pdf, 2.. 1 Mo).. » Ressources externes :.. , Katz, A.. S.. Ikar, D.. What is beautiful is usable.. Interacting with Computers.. , 13, 127-145.. Khaslavsky, J.. Shedroff, N.. (1999).. Understanding the seductive experience,.. Communications of the ACM.. , 42 (5), 45-49.. Ashby, F.. G.. , Isen, A.. M.. Turken, A.. U.. (1998).. A neuropsychological theory of positive affect and its influence on cognition.. Psychological Review.. , 106, 529-550.. Fiedler, K.. Feeling and thinking: The role of affect in social cognition and behavior.. (Ed.. J.. P.. Forgas).. Chapter 10 : A Connectionist Approach to Understanding the Impact of Mood on Cognitive Functions of Assimilation and Accommodation.. 1st Sydney Symposium, 1998.. Cambridge University Press, New York.. Kurosu, M.. Kashimura, K.. Apparent Usability vs.. Inherent Usability: Experimental analysis on the determinants of the apparent usability.. Proceedings ACM CHI95 Conference.. , 292-293, New York: ACM Press.. Isen, A.. , Daubman, K.. A.. Nowicki, G.. P.. (1987).. Positive affect facilitates creative problem solving.. Journal of Personality and Social Psychology.. , 52, 1122-1131.. Dion, K.. , Berscheid, E.. Walster, E.. (1972).. What is beautiful is good.. , 24, 3, 285-290..

    Original link path: /articles/ergonomie-beaute-choses.print.php
    Open archive

  • Title: Architecture de l'information, quelles relations à l'ergonomie?
    Descriptive info: 12 Novembre 2003.. Architecture de l'information, quelles relations à l'ergonomie?.. Objectifs et préoccupations de l'architecture de l'information.. Architecture de l'information et utilisabilité.. Un pôle de méthodes communes.. Deux disciplines entrelacées.. Conclusion.. Architecture de l'information et ergonomie sont des domaines par définition très proches et qui se confondent souvent.. Ils entretiennent en effet des dépendances étroites et leur pratique vise un même objectif global, à savoir prendre en compte l'utilisateur dans la conception d'une interface.. Les deux approches se différencient cependant par certains points.. L'idée développée dans cet article consiste à poser que chacune de ces approches peut bénéficier de l'autre pour devenir plus complète.. Nous situons le débat aussi bien dans le domaine du web que dans les applications logicielles.. Vous pouvez vous reporter aux articles.. C'est quoi l'ergonomie informatique.. Architecture de l'information.. pour une définition plus précise de chacun de ces domaines.. Objectifs et préoccupations de l'architecture de l'information.. Selon Louis Rosenfeld (voir les lectures complémentaires.. ), l'objectif de l'architecte de l'information est l'amélioration de la navigation et de la recherche.. Pour réaliser cet objectif, on essaie d'organiser et de nommer les contenus de façon cohérente et adaptée à la cible utilisateur.. S'intéresser à l'architecture de l'information, c'est essayer que l'utilisateur trouve rapidement ce qu'il cherche sur le site ou dans l'application, sache à tout moment où il se trouve et où il lui est possible d'aller (autrement dit ce qu'il lui est possible de faire).. Si on prend pour exemple un site web, les préoccupations de l'architecte de l'information concourent à améliorer l'utilisabilité du site.. Il travaillera notamment sur :.. - La facilité de la navigation,.. - L'architecture des contenus,.. - Tout ce qui concerne la recherche (localisation de la recherche dans le site, présentation et accès aux résultats de la recherche, fonctionnement du moteur de recherche, possibilités de recherches avancées / croisées.. - La façon de nommer les choses (options de menus, liens, boutons, titres de pages.. Ces éléments permettront à l'utilisateur de savoir à tout moment de quoi parle le site, où il se trouve et où il peut aller.. Architecture de l'information et utilisabilité.. L'ergonome travaillant sur un site web prendra aussi en compte ces éléments.. Cependant, l'utilisabilité d'un site est liée à d'autres points-clés :.. - Lisibilité des contenus (taille des caractères, rapports de luminances fond / caractère, longueur et organisation des paragraphes, hiérarchisation des informations par le format.. ),.. - Ecriture des messages d'erreur,.. - Conception des formulaires,.. - Temps de téléchargement,.. - Accessibilité en fonction des caractéristiques des utilisateurs et des plates-formes.. Cette liste n'est évidemment pas exhaustive.. Elle nous permet simplement de montrer que l'architecture de l'information participe de l'ergonomie sans lui être suffisante.. Si on part du domaine de l'ergonomie, on peut donc concevoir les préoccupations autour de l'architecture de l'information comme un moyen de satisfaire aux critères ergonomiques.. Parallèlement, l'architecture de l'information trouve dans l'ergonomie des moyens d'atteindre les objectifs qu'elle vise.. Peter Morville (voir les lectures complémentaires) considère ainsi l'architecture de l'information comme un sous-domaine de l'ergonomie, et l'ergonomie comme un sous domaine de l'architecture de l'information.. Les deux champs sont réunis par un but commun : faire des produits utilisables conçus pour les besoins de l'utilisateur.. On ne peut que bénéficier des apports de disciplines proches, que cette discipline soit l'architecture de l'information ou une autre dans le champ de l'interaction homme-machine.. Un pôle de méthodes communes.. Les méthodes utilisées dans ces deux domaines sont très proches.. Il est d'ailleurs difficile de différencier les méthodes utilisées en ergonomie de celles utilisées en architecture de l'information puisque la plupart des spécialistes en interfaces centrées utilisateur appartiennent à ces deux domaines.. Les deux disciplines recourent donc à des méthodes communes, mais se spécialisent dans certaines de ces méthodes.. Ainsi, l'architecture de l'information insiste particulièrement sur la conception de plans de site..  ...   l'interface en question.. Finalement, peu importent les appellations puisque ce qui compte est que l'utilisabilité de l'interface soit améliorée.. Que cet objectif soit atteint par l'utilisation de connaissances et de méthodes appartenant au champ X ou Y semble peu important.. Il devient difficile de distinguer les deux approches puisque les spécialistes de ces domaines sont souvent les mêmes.. Les rôles de l'ergonome et de l'architecte de l'information dans le développement d'un produit sont combinés et peuvent être remplis par deux personnes distinctes ou par une seule.. En effet, la même personne peut prendre en charge tout ce qui touche à l'optimisation de la qualité utilisateur du projet.. On peut donc difficilement affirmer que "l'architecture de l'information, c'est ça.. ".. Un expert en architecture de l'information qui écrit un ouvrage y inclut forcément des questionnements concernant la qualité ergonomique de l'interface.. Il peut très bien déborder du champ strict de l'architecture de l'information, si toutefois il existe un tel champ bien délimité.. On est de toutes façons à la frontière de disciplines très proches.. On pourrait même dire que chacun dans son exercice professionnel construit sa propre discipline, constituée du fruit de ses connaissances, méthodes et rencontres.. L'objectif global reste le même, à savoir prendre en compte l'utilisateur final dans un projet informatique.. Conclusion.. Pour conclure, lorsque les projets ont une ampleur suffisante pour distinguer architecte de l'information et ergonome, ces deux spécialistes doivent forcément travailler en collaboration sur les aspects concernant les deux disciplines.. Lorsque les projets sont plus petits, une seule personne peut prendre en charge les questions d'architecture de l'information et d'ergonomie.. Quelque soit la façon dont on nomme les choses, ce qui reste est ce que font réellement les personnes.. Ce dernier aspect n'est jamais le même selon l'entreprise, les caractéristiques du projet, les collaborateurs, les clients, les connaissances de l'expert.. Quelqu'un avec une formation initiale en ergonomie informatique peut être amené à travailler plus spécifiquement en architecture de l'information, design d'interaction, design d'information, plus largement conception centrée utilisateur.. Les appellations données à son activité peuvent être variées mais sous-entendent toutes une préoccupation autour de l'utilisabilité de l'interface.. Pour une fois, est-ce que les mots ont réellement une importance ?.. Kimen, S.. 10 questions about Information Architecture.. (Question 8.. How Does Usability Relate to IA?), builder.. com.. Lash, J.. Information Architecture is not Usability.. , IAnything Goes, Digital Web.. Olsen, G.. Building the Beast : Talking with Peter Morville.. , Boxes and Arrows Interviews.. Wodtke, C.. Information Architecture Defined.. , SitePoint.. Kahn, P.. Lenk, K.. (2001).. Mapping web sites.. Extrait (chapitre 4.. Diagrammes de planification de sites web) disponible sur le site de.. Kahn + Associates.. Rosenfeld, L.. Morville, P.. Information Architecture for the World Wide Web.. , 2nd Edition - Designing Large-Scale Web Sites, Part I.. Introducing Information Architecture (1.. Defining Information Architecture et 2.. Practicing Information Architecture).. Information Architecture : Blueprints for the Web.. , New Riders Publishing.. (.. lire la chronique ergolab.. ).. » En savoir plus sur les personas :.. Robinson, D.. Pratical Persona Creation.. , Evolt.. org.. Freydenson, E.. Bringing Your Personas to Life in Real Life.. , Boxes and Arrows.. Hourihan, M.. Taking the "You" Out of User: My Experience Using Personas.. Goodwin, K.. Perfecting your personas.. Cooper, A.. :.. The Origin of Personas.. Perfetti, C.. Personas: Matching a Design to the Users' Goals.. , User Interface Engineering.. » A 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.. http://www.. ergolab.. net/articles/architecture-information.. php.. Information Architecture.. Louis Rosenfeld Peter Morville.. net/livres/information-architecture2.. Architectures de sites web.. Paul Kahn et Krzysztof Lenk.. net/livres/architectures-de-sites-web..

    Original link path: /articles/architecture-information-ergonomie.print.php
    Open archive

  • Title: Publicité sur le web : que fait l'ergonomie ?
    Descriptive info: 29 Mai 2007.. Publicité sur le web : que fait l'ergonomie ?.. De la publicité pour des internautes.. Au niveau d'un site : le rôle du type de page.. Au niveau d'une page : désignation, emplacements et formats.. A l'intérieur de la pub : optimisation ergonomique du contenu.. En résumé - Publicité : les ennemis de l'ergonomie.. La publicité sur le web est omniprésente.. Comme tout élément de contenu constitutif d'un site Internet, elle entraîne des questionnements ergonomiques.. Notre objectif consiste à laisser la publicité jouer son rôle, tout en limitant ses défauts potentiels du point de vue de la qualité d'utilisation d'un site.. Cet article traitera à la fois du fond et de la forme des contenus publicitaires, en évoquant l'ergonomie des publicités d'abord du point de vue du web en général, puis à l'intérieur d'un site, et enfin dans une page donnée.. Véritable fondement de l'économie numérique, la publicité sur le web existe et ne peut pas être exclue sous prétexte qu'elle est susceptible de gêner l'internaute.. Les bannières, animations et autres pop-up faisaient déjà partie des.. Top Ten Mistakes in Web Design.. de Nielsen en 1999.. C'est toujours le cas en 2007.. Or, la publicité peut co-exister avec le contenu d'un site Internet, si l'on s'impose quelques interdits dans l'objectif de respecter les internautes.. La réflexion ergonomique consiste donc à.. "faire avec" la pub.. , en appliquant quelques règles de base afin qu'elle perturbe le moins possible la visite du site et la réalisation des objectifs utilisateur.. Pour.. Alex Kirtland.. , intégrer les publicités dans le travail de conception d'un site peut même devenir un défi pour le concepteur web.. Il s'agit donc de les considérer pour ce qu'elles sont : un contenu comme un autre, ou presque.. Les contenus publicitaires ont en effet des caractéristiques qui font qu'ils sont particulièrement difficiles à traiter, à commencer par le fait qu'ils sont finalement toujours des intrus.. Ce sont.. des éléments rapportés venant se greffer.. sur des contenus qu'il est souvent déjà complexe d'organiser et de présenter.. La publicité est la cerise sur le gâteau de la complexité de la conception d'un site web.. L'objectif consiste alors à apporter nos connaissances ergonomique pour concevoir au mieux un site intégrant des publicités, afin que ces dernières.. gênent le moins possible ce qui fait le véritable coeur du site.. Le travail est encore complexifié lorsque la publicité vient se surajouter à une conception déjà établie.. Si votre site doit contenir de la publicité, vous devez le savoir au plus tôt, afin de pouvoir anticiper les débordements d'un point de vue ergonomique, mais aussi afin de concevoir votre site de manière optimale en tenant compte des contraintes publicitaires :.. Lorsqu'une publicité d'un format donné vient se greffer à une organisation déjà existante, tout la conception est à repenser en intégrant cet élément.. Il convient donc de savoir le plus tôt possible si des publicités doivent figurer dans le site, ainsi que leurs formats s'ils sont imposés.. Si vous obtenez ces informations suffisamment tôt, vous éviterez de devoir recommencer le travail de conception et casser une organisation que vous estimiez idéale.. Nous partons ici du principe que la nécessité de présenter des contenus publicitaires sur le site a été questionnée en amont, et que l'on se trouve ainsi confronté au constat suivant :.. "J'ai des contenus, services et fonctionnalités à présenter sur un site Internet.. Ce contenu qui forme le coeur de mon site doit cohabiter avec des contenus promotionnels renvoyant sur d'autres sites Internet".. Cet article traite essentiellement de ces.. publicités.. dites.. externes.. , en mettant de côté les publicités internes (ou "auto-promotions"), qui entraînent des problématiques ergonomiques bien spécifiques.. De la publicité pour les internautes.. La première question à se poser lorsque l'on travaille sur l'ergonomie d'une campagne publicitaire sur le web, c'est de l'envisager au regard des envies et besoins de l'internaute qui va y être confronté.. On revient donc aux basiques de l'ergonomie, c'est à dire à.. penser les utilisateurs.. et leurs objectifs.. comme déterminants de la conception.. de tout élément d'interface.. Bien que la publicité soit un facteur de désagrément pour la plupart des internautes, elle peut correspondre à un besoin utilisateur, pas au sens où on l'entend a priori, mais comme une source de contentement.. Autrement dit, sur Internet, je peux découvrir des choses qui m'intéressent par le biais de publicités, et en être satisfait.. Il faudrait partir de cet objectif et veiller à ce que les contenus publicitaires d'un site soient susceptibles de venir satisfaire ses lecteurs.. Notre objectif n'est pas que les internautes soient heureux de voir de la publicité, mais qu'ils.. acceptent sa présence.. Il existe deux manières de faire accepter un tel contenu : qu'il puisse correspondre à une envie de l'utilisateur à un moment donné, et qu'il n'entrave pas son exploration du site web.. Il convient donc dans un premier temps de se demander comment être au plus proche des envies de l'internaute en matière publicitaire.. Trois grands critères peuvent vous y aider : le contenu du site ou de la page (et notamment, les sujets dont ils traitent), le moment de la journée, et les actions explicites de l'utilisateur.. 1.. Quelle publicité sur quel site?.. Un des principaux critères pour faire de la publicité en ligne "de qualité" consiste à choisir des.. annonceurs en rapport avec le contenu.. et les services de votre site.. Avoir une vraie réflexion sur les publicités que vous acceptez sur votre site permettra de limiter les réactions négatives de vos internautes à propos de ces publicités.. En effet, les publicités ont une incidence de.. 13.. 8%.. sur le jugement du niveau de.. crédibilité d'un site.. de la part des internautes (Etude de.. Fogg al (2003).. sur 2600 participants).. La plupart du temps, ce jugement va dans le sens d'une appréciation négative.. Notons toutefois que si les contenus publicitaires sont bien choisis et respectent le sentiment de contrôle de l'internaute, ils peuvent ne pas influencer le jugement de crédibilité sur un site, voire participer d'une vision positive de ce même site.. Les mêmes auteurs ont montré que le contenu des bannières publicitaires influence la manière dont les internautes perçoivent l'information du site.. Ils constatent ainsi qu'un article est jugé plus crédible lorsqu'il est accompagné d'une publicité pour les voitures Lexus que pour un site de jeux de paris.. Le caractère "respectable" de la publicité a donc un effet significatif sur le crédit apporté par les internautes à votre propre contenu.. Adapter le type de publicité à votre type de sites est donc une des premières recommandations pour faire accepter la présence de la publicité.. En outre, les bannières publicitaires fonctionnent d'autant mieux qu'elles correspondent aux besoins ou aux envies des internautes du site concerné.. Par "mieux", on entend qu'elles seront potentiellement mieux acceptées, et donc qu'elles participeront d'une qualité ergonomique générale du site support.. La publicité, qui est par essence anti-ergonomique (elle ne répond à aucun besoin explicitement formulé), peut ainsi gagner de la valeur en étant intéressante pour l'internaute (et sous réserve qu'elle soit implantée en respectant l'utilisateur).. Deux techniques permettent d'obtenir une publicité qui intéresse vos visiteurs : l'adaptation à la cible lectrice du site support, ou l'adaptation au thème abordé sur la page support.. Analysons ces deux critères de sélection d'un contenu publicitaire à travers les exemples suivants :.. La publicité vise la même population cible que le site support.. Un type de site correspond normalement à un type d'utilisateur (ce type pouvant être défini par leur sexe, leur tranche d'âge, leur catégorie socio-professionnelle, leur localisation géographique, etc.. ).. Plus cette cible est précise, plus il sera facile de lui proposer des publicités en rapport avec ses caractéristiques socio-démographiques.. Sur le site de L'Equipe, on trouve de la publicité pour un parfum homme de Chanel.. Le produit proposé n'a donc rien à voir avec le sujet du site, mais correspond à une préoccupation du visiteur-type du site de l'Equipe.. Source:.. www.. lequipe.. fr.. La publicité évoque un sujet en rapport avec le site support.. On peut encore augmenter le niveau d'acceptabilité d'une publicité en établissant une règle de correspondance thématique entre le site éditeur et l'annonceur.. Plus la publicité est contextuelle, plus elle a de chances de fonctionner.. Sur le site SeLoger.. com, la publicité est essentiellement "thématique": à l'inverse du site de l'Equipe, peu importe la cible d'un point de vue général, ce qui importe est ce qu'elle vient faire sur ce site.. SeLoger propose donc des annonces de crédit bancaire, d'assurances, de cartes de visite, de meubles, etc.. seloger.. com.. On observe le même type de principe sur le site des Inrockuptibles, où l'on trouve des publicités pour des téléphones mp3, des enceintes audio, d'autres magazines, etc.. lesinrocks.. Plus le site support sera précis en termes de sujet ou d'audience, plus vous aurez de chances de toucher vos internautes.. Il est ainsi beaucoup plus difficile d'atteindre un haut niveau d'acceptabilité sur des sites généralistes tels que des journaux en ligne, des portails grand public ou des webmail (hotmail, yahoo mail, caramail, etc).. Le passage du.. pay per view.. au.. pay per click.. et au.. pay per action.. souligne l'importance de l'adaptation des publicités au public qui y est confronté (pour avoir une vue rapide des modalités de rémunération des publicités web, vous pouvez consulter l'article de.. Wikipedia sur la publicité.. en ligne [en anglais]).. Autrement dit, on se dirige de plus en plus vers de la publicité qui veuille dire quelque chose.. 2.. Quelle publicité à quel moment ?.. Une publicité n'est pas adaptée dans l'absolu, mais peut le devenir en fonction de nombreux critères, dont le moment de présentation.. On sera plus sûr d'intéresser l'internaute par un contenu publicitaire (et partant, de moins le gêner) en choisissant le moment le plus adapté pour lui soumettre ce contenu.. Le moment de présentation a des implications sur les points suivants :.. Intérêts ponctuels de l'internaute.. (du type: ".. J'ai faim, donc je vais être plus sensible à une publicité pour un produit alimentaire.. ").. Disponibilité de l'internaute.. Je suis chez moi et pas au travail, je vais donc être plus sensible à des contenus publicitaires du domaine du loisir.. ").. Ce moment de présentation peut être choisi sur différents niveaux :.. Un moment de l'année.. (on ne propose pas les mêmes accroches publicitaires l'hiver que l'été, pendant les vacances scolaires que pendant l'année courante, etc.. Un moment de la semaine.. (l'approche du week-end, le dimanche, le lundi, le mercredi, sont notamment des moments bien précis pour proposer des contenus publicitaires spécifiques).. Un moment de la journée.. (à chaque moment de la journée correspond une tendance à visiter un type de contenu bien spécifique, et correspond aussi une "disponibilité d'esprit", notamment pour les internautes qui travaillent sur des plages horaires conventionnelles).. Des recherches très poussées sont menées à cet égard dans le domaine de l'informatique appliquée (voir Nakamura, 2002, dans les.. Un événement.. médiatique ou commercial, lié à un jour ou à une période calendaire.. 3.. Une publicité influencée par le comportement réel de l'internaute.. Enfin, la manière la plus fine d'adapter un contenu publicitaire à un internaute est de faire coller ce contenu non pas aux besoins de tous vos internautes, mais d'.. UN.. internaute en particulier.. Il s'agit donc de.. personnaliser les publicités.. que vous allez lui proposer.. en fonction des actions.. qu'il aura accompli.. Deux grands types d'actions régissent l'utilisation du web : le clic et la saisie.. C'est principalement grâce à l'interaction par saisie clavier que l'on va pouvoir adopter des stratégies d'adaptation des contenus publicitaires aux actions utilisateur.. Classiquement, l'internaute effectue une.. recherche sur un mot-clé.. , et on lui fournit une liste des liens sponsorisés en rapport direct avec le mot-clé saisi.. Le mot-clé fait donc office d'indice pour restreindre le spectre des publicités à un thème en particulier.. Dans ce type de stratégie publicitaire, c'est donc presque l'internaute qui "fabrique" ses propres publicités.. C'est ainsi que l'on peut se situer au plus près de ses préoccupations à un instant t.. Ce type de contextualisation est surtout utilisée dans le cadre de publicités sous forme de texte.. Elles nécessitent souvent le recours à un intermédiaire capable de vous fournir une base de liens sponsorisés (Google et Yahoo par exemple).. Des partenariats spécifiques peuvent aussi être mis en place lorsque le spectre des recherches sur votre site est assez limité (cf.. par exemple Dell sur Presence PC).. Sur le site de Presence PC, les résultats de recherche sur les contenus du site sont précédés de 2 résultats sponsorisés en rapport direct avec le mot-clé recherché par l'internaute : si je recherche des mots tels que "écran 22 pouces", "adsl" ou "ordinateur portable", on me propose des liens vers des marchands proposant ce type de produit.. Attention cependant avec l'application visuelle de ce genre de pratiques : vos propres résultats ne doivent pas être placés trop bas dans la page sous prétexte de devoir présenter des résultats sponsorisés, comme c'est le cas ici.. presencepc.. Le site de Monster applique le même type de principe dans le domaine de la recherche d'emploi : on considère que si je cherche un emploi dans un secteur donné, je peux être intéressé par des produits ou services relevant du même domaine.. Ainsi, si je cherche un emploi dans l'immobilier, on me propose des liens sponsorisés vers des recruteurs, mais aussi pour acheter des biens immobiliers.. On est ici dans une application à l'extrême du principe d'adaptation à un mot-clé, qui donne des résultats éloignés des intérêts de l'internaute (ce n'est pas parce que je cherche un emploi dans l'immobilier que je veux acheter un bien immobilier).. Ici, à l'inverse de Présence PC, les liens sponsorisés sont présentés sur la droite de l'écran.. Ils ont donc une apparence plus "conventionnelle" pour des liens sponsorisés, mais sont moins visibles que ceux de l'exemple précédent.. monster.. Ce type de contextualisation des liens publicitaires aux saisies de l'utilisateur est aussi le fondement des propositions faites par Gmail en fonction du contenu des e-mails que vous échangez avec vos correspondants.. Notez enfin que l'adaptation des contenus publicitaires peut aussi prendre en compte les actions utilisateur de type "clics".. C'est ainsi le cas si vous adaptez vos accroches publicitaires dans le panier aux produits ajoutés dans ce panier.. Au niveau d'un site : le rôle du type de page.. Les publicités peuvent être placés à divers endroits d'un site.. Selon cet endroit, la publicité sera plus ou moins gênante en termes ergonomiques.. Plus les objectifs utilisateur sont gourmands en termes de ressources mentales (exemple: lecture d'un article versus scan d'une page d'accueil), plus l'effet distractif d'une publicité pourra gêner la réalisation de la tâche.. Source :.. allocine.. Sur le site d'Allociné, plus on avance dans l'architecture du site, moins les publicités sont présentes, et plus l'on peut se concentrer sur la lecture du contenu.. Certaines pages-clés finales (notamment les résultats de recherche) font exception à cette règle, et sont adaptées pour proposer de la publicité, d'autant plus que cette dernière est contextuelle.. Même si ce genre de pratique est la conséquence du budget consenti par les annonceurs en fonction du nombre de visites par page, elle est tout à fait en accord avec les recommandations ergonomiques (on accepte de charger l'interface lorsque l'activité de l'utilisateur est la moins difficile en termes de charge mentale, c'est à dire dans les premières étapes de navigation).. Paradoxalement, c'est souvent dans les premières pages que l'espace écran disponible est le plus critique.. En insérant de la publicité sur ces pages, on se rajoute donc encore une contrainte au niveau de la conception.. Pour choisir au mieux le type de page sur lequel placer une publicité, il faut en outre prendre en considération que le clic sur une bannière publicitaire peut devenir un.. objectif secondaire de navigation.. (".. Je viens sur un site dans un objectif précis, je l'accomplis, et suis ensuite disponible pour continuer ma visite si l'on sait me donner suffisamment envie.. Il est donc intéressant de placer une accroche publicitaire à des "endroits" virtuels susceptibles de constituer une.. fin de navigation.. (par exemple, la fin d'un article ou le récapitulatif d'un processus d'achat).. On doit aussi coupler l'emplacement en terme de type de page et le contenu de la publicité.. Grossièrement, plus on descend en profondeur dans un site, plus les publicités devraient être ciblées et adaptées à la section consultée.. Si le nombre d'emplacements publicitaires doit être le plus réduit possible, vous devez aussi veiller à.. limiter le nombre de publicités différentes dans un même site.. En effet, même si une publicité le dérange, une fois qu'il l'a analysée, l'utilisateur peut essayer d'en faire abstraction.. Si la zone publicitaire change trop souvent de contenu, on risque d'augmenter sérieusement le caractère distractif de cette zone.. Au niveau d'une page : désignation, emplacements et formats.. A ce stade, vous avez choisi le thème des publicités ou les sites sur lesquels vous allez apparaître, ainsi que l'emplacement des publicités en termes de page dans le site.. Reste à décider sous quelle forme vont se présenter les publicités.. Un mauvais choix à cette étape peut tout à fait ruiner vos efforts sur les étapes précédentes.. La recommandation qui va guider vos choix de formats doit être la suivante : pour optimiser l'ergonomie de votre publicité, vous devez laisser la possibilité aux internautes de s'abstraire de cette publicité.. Contenu ou publicité ?.. Tous les médias (TV, radio, papier, web, mobile) ont des caractéristiques physiques qui permettent d'entreprendre des actions de contournement des contenus publicitaires.. Selon le média, ces actions sont plus ou moins facilitées.. Le caractère linéaire des programmes télé et radio fait ainsi que l'on peut décider de ne pas se soumettre au message publicitaire (".. Je m'extrais de mon canapé durant la pub.. ", ".. Je baisse le son de la radio au minimum.. ", etc.. De même, les caractéristiques physiques du papier font  ...   présentés de diverses manières: sous forme de blocs, de liens transversaux à l'intérieur du contenu du site, simples ou agrémentés de descriptifs courts, etc.. Les formats textes auront d'autant plus de chances d'être cliqués si leur contenu est adapté aux intérêts de l'utilisateur.. Vous pouvez donc les préférer si vous avez une idée précise de votre cible et de ses préoccupations, ou un système fonctionnel vous permettant de proposer des liens de manière contextuelle.. Différentes manières de présenter des publicités sous forme textuelle (que ce soit des liens sponsorisés, de l'affiliation ou de la publicité classique), sur les sites de Maison Facile, d'Eurosport et de JeuxVideo.. Attention aux publicités textes présentées uniquement.. au survol de la souris.. sur certains liens.. Ce type de procédé paraît à première vue très intéressant puisqu'il permet de ne pas charger l'interface initiale.. Il devient cependant rapidement anti-ergonomique, à mesure que l'on multiplie les liens sources.. En effet, pour une grande partie des internautes, l'exploration visuelle d'une page web va de pair avec son survol à la souris.. Vous risquez donc de réduire la visite d'une page à l'affichage successif de multiples publicités, apparaissant au survol de chaque lien.. Pour une actualité console, le survol du mot "Friends" génère l'affichage de plusieurs liens publicitaires très forts en termes visuels, qui viennent masquer le mot en question.. cinemablend.. Si vous utilisez ce type d'affichage, vous devez donc respecter 4 recommandations :.. » Fixez-vous une limite maximale en termes de nombre de liens publicitaires par page (dans l'idéal, mesurez-la par "écran", c'est à dire pour une surface de pixels carrés donnée).. » Restreignez ce type d'affichage aux thèmes les plus pertinents pour l'internaute (dans l'exemple ci-dessus, il n'y aucun intérêt à proposer des liens publicitaires au survol du mot "Friends").. » Affectez un format spécifique aux liens publicitaires (ces derniers ne doivent pas ressembler aux liens hypertextes classiques).. » Ne masquez pas l'élément au survol duquel la publicité s'est affichée.. Jeux et bannières interactives.. On rencontre de plus en plus de bannières interactives, ou proposant des sortes de mini-jeux en ligne afin d'attirer les internautes.. Ce type de publicité fonctionne en général très bien, puisqu'elles permettent d'impliquer l'utilisateur, en lui donnant ainsi un rôle beaucoup plus "actif" que tous les autres formats publicitaires.. Si ces formats sont bien gérés en termes d'interaction, ils vous permettront donc d'intéresser vos utilisateurs plus que dans le cas d'une bannière classique.. La principale règle consiste à laisser l'internaute maître de ses actes.. Autrement dit, c'est lui qui doit décider de s'impliquer dans l'interaction que vous lui proposez, via un clic sur un libellé explicite.. Cette publicité pour l'Ipod est parfaitement représentative de ces "jeux" publicitaires.. Elle permet aux internautes de "dessiner" sur un tableau noir: chaque Ipod Nano devient un feutre d'une couleur différente.. Outils fonctionnels.. Une dernière manière de proposer des publicités consiste à fournir des extraits d'interfaces fonctionnelles.. C'est un très bon moyen de s'adapter aux intérêts de votre internaute.. En effet, si ce dernier utilise l'outil, c'est que cela correspond à un besoin chez lui.. Vous aurez donc beaucoup moins de risques, voire aucun, de le gêner.. Ce procédé permet surtout de s'assurer de transformer le clic en une réelle navigation sur le site cible.. Le site de Télérama fournit un formulaire de recherche directe sur le site de la Fnac, clairement identifié comme tel.. A l'intérieur de la pub : optimisation ergonomique du contenu.. La plupart des formats que l'on a évoqué peuvent contenir le même type de contenu (image, animation, texte, son, etc.. Sur le sujet de la publicité, on n'aborde que rarement le contenu des annonces.. En effet, puisque les campagnes publicitaires changent, tout ce que l'on détermine lors de la conception d'un site est un "emplacement" publicitaire, réservé à l'affichage des publicités.. Ensuite, tout dépend des publicités proposées par l'annonceur.. Si vous êtes en charge d'un site intégrant des espaces publicitaires dynamiques, vous devez décider au moins du type de publicité (animée ou pas, sonore ou non, etc.. ), et avoir un regard sur chacune des campagnes menées afin de prévenir de trop grosses erreurs d'un point de vue ergonomique.. Il paraît par exemple tout à fait impossible d'intégrer dans un site institutionnel une publicité sonore se lançant automatiquement.. Bien sûr, ce genre d'écueil est limité par l'adaptation du type de publicité au type de site.. Différents types de contenus peuvent composer une bannière publicitaire.. En fonction de la nature de ces contenus se posent différentes problématiques ergonomiques.. Nous abordons essentiellement les défauts les plus souvent rencontrés aujourd'hui sur le web du point de vue des interactions (parallèlement, on devra s'occuper des problématiques de lisibilité, d'incitation et de pertinence du message, très dépendantes de l'annonceur et de ce qu'il souhaite faire passer chez les gens).. Bannières images ou animées.. Chargement.. Lorsque vous présentez des publicités sous forme de bannières classiques, il est recommandé de.. ne pas attendre que la publicité soit chargée.. pour afficher le contenu du site.. Les bannières étant souvent les éléments les plus lourds d'une page web, ce sont aussi ceux qui demandent le plus de temps de chargement.. Donner la priorité d'affichage au contenu permet aux internautes de commencer à s'approprier la page et à pouvoir interagir avec le site sans nécessairement "attendre" les publicités afin de pouvoir effectuer des actions.. Cette recommandation est cependant rarement appliquée, puisqu'elle signifie que l'on ne peut pas s'assurer que l'internaute aura été confronté au message publicitaire.. » Détournement de conventions d'interface.. Une seconde recommandation consiste à éviter d'utiliser une convention d'interface connue des internautes dans un contexte de page web pour les inciter à cliquer.. Plus précisément, si vous utilisez un objet d'interface signifiant la fermeture (cf.. exemple ci-dessous), le clic sur cet objet doit réellement avoir pour effet de cacher la publicité, et non mener sur le site de l'annonceur.. La publicité de Trombi.. com sur le site de France 5 se présente sous la forme d'une fenêtre système classique, avec notamment une croix rouge dans son extrémité supérieure droite.. On incite donc l'internaute à croire que s'il clique sur cette croix, la publicité se fermera.. Si ce n'est pas le cas et qu'il se trouve redirigé sur le site de Trombi.. com, l'internaute risque d'être très agacé.. Même chose dans la publicité pour le site du magazine Elle: le formulaire représenté dans la bannière publicitaire est un "faux" formulaire: où que l'internaute clique, il sera renvoyé sur la même page du site de Elle.. On demande donc à l'internaute de s'impliquer dans la sélection d'une des options, puis de cliquer sur "Je vote", sans que cela ait aucune utilité.. Ces exemples illustrent parfaitement l'importance de surveiller ce que proposent les annonceurs, et d'être en mesure de refuser une publicité si elle vous semble irrespectueuse de l'internaute au sens large, ou risquée pour votre image de marque.. C'est en effet sa crédibilité, mais aussi la votre en tant qu'éditeur, et donc cautionnant ce genre de pratique, qui est en jeu.. Gestion des zones multi-publicitaires.. Il est très courant que plusieurs bannières aparaissent successivement dans une même zone publicitaire, l'une venant remplacer la précédente (de manière aléatoire ou prévue).. Lorsque vous utilisez un tel système d'affichage, vous devez veiller à fournir un contrôle utilisateur permettant à vos internautes de visualiser chacune des publicités grâce à un clic.. En effet, le clic sur une bannière publicitaire peut devenir un objectif secondaire de navigation d'un internaute qui vient sur un site web pour accomplir une tâche donnée.. S'il ne retrouve pas une publicité qu'il a vu quelques minutes auparavant, il sera déçu.. Il faut donc savoir profiter de ce que l'on amorce chez l'internaute, et lui donner une possibilité explicite de retrouver le message publicitaire l'ayant attiré.. » Bannières animées.. Une grande partie des bannières sur le web sont animées, c'est à dire qu'elles présentent leur contenu sous forme dynamique pendant un laps de temps donné.. Les études sur l'efficacité de l'animation des bannières publicitaires sont contradictoires.. Une étude a montré qu'il semble qu'une version animée d'une bannière en facilite le rappel et la reconnaissance (en comparaison d'une version statique de la même bannière).. Cependant, ces résultats paraissent fragiles, et très contextuels: le contenu de la publicité, son apparence graphique et la marque annoncée sont autant de variables qui peuvent les affecter.. Vous devez d'abord penser à prévoir une version statique si les internautes ne disposent pas de la configuration nécessaire.. Ensuite, quelques recommandations vous permettront de vous assurer d'une qualité ergonomique minimale de vos bannières animées :.. » Durée.. La durée d'une bannière animée affecte à la fois l'ergonomie et l'impact marketing de cette bannière.. Par durée, on entend longueur du message avant d'arriver à la "chute".. L'IAB recommande une durée de 15 secondes, correspondant au seuil au-dessus duquel vous risquez que l'internaute détourne son attention.. En termes purement ergonomiques, plus une animation est longue, plus le message sera complexe à intégrer d'un point de vue mental.. De plus, plus l'animation est longue, plus elle gêne l'exploration du reste de la page par son caractère distractif.. » Mouvement.. Les bannières animées les plus gênantes sont celles qui se jouent en boucle, de manière permanente.. Vous devez éviter à tout prix ce type de bannières, qui ne laissent pas beaucoup d'espace de concentration à l'internaute qui voudrait faire autre chose que regarder la publicité.. Une solution de compromis consiste à.. jouer une fois l'animation.. , puis à laisser la possibilité à l'internaute de revoir l'animation (on trouve souvent à cet effet un lien libellé "revoir" ou "rejouer", le second étant quelque peu ambigu quand à l'action attendue par l'internaute, qui peut croire avoir affaire à un réel jeu en ligne).. Vous devez donc laisser au maximum à l'utilisateur le contrôle du mouvement, et qu'il ne se sente pas assailli par un mouvement continu à l'écran.. Cette recommandation consistant à ne pas jouer une animation en permanence est encore plus critique dans les pages de contenu, nécessitant une disponibilité mentale plus importante pour se concentrer sur la lecture et la compréhension du contenu.. Difficile de lire tranquillement un article sur le web lorsqu'une publicité bouge continuellement à l'écran en plein coeur de l'article en question.. Le non-respect de cette recommandation se transforme en grave erreur dans le cas d'.. animations simultanées.. Il est en premier lieu déconseillé d'avoir plusieurs publicités animées sur la même page.. Lorsqu'en outre celles-ci se jouent en permanence, on obtient une page très désagréable à regarder, qui donne juste envie de fuir.. Prenez donc en compte le nombre de publicités simultanées et leur nature.. Lorsqu'un site contient une seule publicité animée, l'internaute peut engager des stratégies conscientes ou inconscientes de banner blindess.. A partir de deux animations, il devient difficile de s'abstraire de leur mouvement (d'autant qu'ils sont souvent à deux endroits différents de l'écran), et cela demande un effort conscient.. Résultat: l'internaute quitte le site.. Une tendance actuelle consiste pour un même annonceur à présenter la même publicité dans différents formats sur une même page.. On obtient ainsi un effet d'immersion intéressant.. Il faut alors veiller à ce qu'une seule de ces bannières soit animée à la fois, quitte à faire jouer chacune des bannières successivement.. » Message textuel.. Lorsque l'animation contient du texte, vous devez laisser la possibilité de lire correctement le message.. L'animation simultanée est ici encore peu recommandée, puisqu'elle complexifie beaucoup l'activité de lecture (nos ressources attentionnelles sont alors partagées entre les différents espaces animés à l'écran).. De plus, le fait que la lecture soit une activité automatique (on ne peut s'empêcher de lire, et encore moins un message qui nous est présenté dynamiquement) rend l'intégration mentale de tous ces espaces d'autant plus difficile.. Enfin, veillez au temps d'exposition de vos messages: vous devez laisser aux internautes le temps de lire chacune des bribes qui composent votre message final.. Faites donc des ajustements très précis en fonction du contenu de votre message.. Notez que les défauts ergonomiques liés au format animé sont moins critiques sur des pages de navigation (page d'accueil, page de rubrique, etc.. ) que sur des pages réservées à un contenu en profondeur, nécessitant de la concentration.. Le son dans les publicités web.. La première erreur ergonomique des publicités sonores est le déclenchement automatique du son au chargement de la page.. En effet, si notre système visuel peut discriminer un contenu d'une bannière publicitaire, c'est plus compliqué concernant le son, puisqu'on ne sait pas d'où il vient.. Il est donc primordial de fournir à l'écran un indicateur visuel qui traduise l'état d'activation du son.. Selon le type de sites, le déclenchement automatique du son peut être plus ou moins condamnable.. Dans l'absolu, il est moins gênant sur un site de divertissement qui utilise déjà le son ou la vidéo pour présenter certains de ses contenus, que sur un site bancaire ou institutionnel.. Quoiqu'il en soit, tous les contrôles utilisateur permettant à l'internaute d'agir sur votre bannière multimédia doivent être visibles, explicites et utilisables.. Publicités vidéo.. Les vidéos publicitaires intégrées à un site posent des problématiques croisées à celles du son et de l'animation.. Vous pouvez donc appliquer aux vidéos les recommandations précédemment citées.. Si votre site intègre une publicité vidéo, il peut être intéressant de faire jouer cette vidéo sans le son, afin d'attirer l'attention de l'internaute sur la zone publicitaire, et qu'il puisse activer le son lui-même de manière explicite.. En résumé - Publicité : les ennemis de l'ergonomie.. L'ensemble des constats précédents nous amène à distinguer quelques pratiques qui mettent particulièrement en danger l'ergonomie d'une publicité web.. En voici la liste :.. Tromper l'internaute pour l'inciter à cliquer.. Immobilisation des actions utilisateur.. Utilisation de pop-up co.. Déclenchement automatique du son.. Animations permanentes et / ou simultanées.. Temps de chargement trop long.. Non adaptation à l'historique de visite.. Déclenchement d'actions au survol de la souris (plutôt qu'au clic).. Notez que la plupart de ces points recoupent deux grands critères en ergonomie web, le contrôle utilisateur et la charge mentale (pour en savoir plus, vous pouvez lire l'article que nous avons consacré aux.. critères ergonomiques.. de Bastien Scapin).. Parmi toutes les remarques que l'on a évoquées, une grande partie relève de la notion d'.. intrusion.. Vous devez éviter à tout prix que l'internaute se sente empêché ou brusqué par la publicité.. A la différence d'un media plus "passif", les utilisateurs ont besoin d'avoir le.. contrôle de leur navigation.. sur Internet, et acceptent mal de se faire imposer quoique ce soit par un site Internet (temps d'attente, animations à subir, etc.. A chaque fois que l'on emploie un procédé un tant soit peu intrusif, il est donc indispensable de fournir le contrôle correspondant afin que l'internaute puisse contourner la publicité.. Comme à la télévision, on risque que les internautes zappent pendant la pub.. Sur le web cependant, vous avez peu de chances qu'ils reviennent.. Et ça continue après la pub.. Une campagne publicitaire sur le web a souvent de multiples objectifs: générer des clics directs, entraîner des actions différées (de type: ".. J'ai vu que X lançait tel type de produit, je vais donc me renseigner sur le site de l'annonceur en question, ou en magasin.. ") ou venir nourrir une image de marque.. Or, il n'existe souvent pas de gestion à moyen terme des campagnes publicitaires, c'est à dire pas de relais d'une visibilité à un instant t, sur un site donné, pouvant générer du clic mais aussi rester en mémoire pour une utilisation ultérieure.. Lorsque vous faites de la publicité sur le web, veillez donc à ce que votre offre soit accessible à travers votre propre site web, notamment par l'utilisation de mots-clés qui vont venir faire écho chez les internautes.. Enfin, la conception d'une campagne publicitaire sur le web est trop souvent centrée sur la conception de la bannière à poser dans un site support.. Trop peu d'annonceurs se préoccuppent de ce qui arrive lorsque l'internaute clique, et renvoient automatiquement sur leur page d'accueil.. Pensez donc à soigner vos ".. landing pages.. ", c'est à dire la page cible de votre publicité, pour être réellement efficace.. Online Ads Tested.. , Adam Lapp, Marketing Experiments Journal (2007).. , Alertbox Useit.. com (2007).. Ads Are Here To Stay: Planning For Ad Placement.. , Alex Kirtland, Boxes and Arrows (2005).. The Most Hated Advertising Techniques.. com (2004).. Pop-up Guidelines.. , IAB Standards and Guidelines (2004).. Rich Media Guidelines.. (PDF 45 Ko), IAB Standards and Guidelines (2004).. Eyetracker Study gives Guidance on how to Place Ads, Etc.. , Ann Light, UsabilityNews.. com (2003).. Eyetracking Research Report - The Times, The Guardian, The Financial Times.. (PDF 943 Ko), The Usability Company Eyetracker (2003).. Making Web Advertisements Work.. Will Plain-Text Ads Continue to Rule?.. Stanford-Makovsky Web Credibility Study 2002: Investigating what makes Web sites credible today.. (PDF, 461 Ko), Fogg al, Stanford Persuasive Technology Lab Makovsky Company (2002).. Improvements in practical aspects of optimally scheduling web advertising.. , Nakamura, In Proceedings of the 11th international Conference on World Wide Web, ACM Press, New York (2002).. Why Are Users Banner-Blind? The Impact of Navigation Style on the Perception of Web Banners.. , Pagendarm Schaumburg, Journal of Digital Information, Volume 2 Issue 1 (2001).. Advertising: A Cry for Usability.. , Kim Brooks, Clickz.. com (2001).. Designing Web Ads Using Click-Through Data.. Just How 'Blind' Are We to Advertising Banners on the Web?.. , Michelle Bayles, Usability News (2000).. Click Here, You Idiot.. , Jeffrey Veen, Webmonkey.. com (2000).. Banner Blindness, Human Cognition and Web Design.. , Norman, jnd.. org (1999).. Banner Blindness: Web Searchers Often Miss "Obvious" Links.. , Benway Lane, ITG Newsletter (1998).. Accès réservé aux abonnés.. How do users evaluate the credibility of Web sites?: a study with over 2,500 participants.. , Fogg al, Proceedings of the 2003 Conference on Designing For User Experiences (2003).. Web credibility research: a method for online experiments and early study results.. Fogg al, CHI '01 Extended Abstracts on Human Factors in Computing Systems (2001)..

    Original link path: /articles/publicite-sur-le-web-que-fait-l-ergonomie-.print.php
    Open archive
  •  

  • Title: Utilisabilité des adresses web
    Descriptive info: 30 Mars 2005.. Utilisabilité des adresses web.. Les URL, outils de communication et de navigation.. Simplifier les URL.. Qualité du contenu d'une URL.. Prévoir les comportements utilisateur hors norme.. Validité des URL.. Les adresses web font partie de notre environnement.. Crachées par nos ordinateurs, nos radios, nos téléphones, elles envahissent aussi nos publicités, nos boutiques, nos cinémas, nos magazines, nos blocs-notes et nos paquets de céréales.. Leur "vie ergonomique" commence dès l'instant où elles sont communiquées: il faut qu'elles soient perçues, analysées, lues ou entendues, cliquées, mémorisées, notées, dictées, tapées sur un clavier, etc.. Nous évoquons dans cet article l'utilisabilité de ces adresses web, ou URL (Uniform Resource Locator, par exemple: [ http://www.. net/articles/index.. html ]).. Cette URL, qui n'est au départ qu'un objet "technique", moyen permettant d'accéder à un site, est devenue élément d'interface à part entière, et donc susceptible d'être plus ou moins bien adaptée aux activités des internautes.. L'adresse web est aussi devenue objet de communication, on la retrouve donc dans des contextes non informatiques (publicité papier, magazine, livre, etc.. Une adresse web touche l'ergonomie de tous les formats sur lesquels elle apparaît.. En fonction de ses caractéristiques, elle peut diminuer la facilité d'utilisation d'un site internet ou en limiter l'accès.. Elle peut aussi optimiser l'interaction site / internaute, en anticipant les comportements de ce dernier et en lui permettant d'avoir un rôle "actif".. Nous présentons dans cet article les différents thèmes liés à l'ergonomie des URL, en recommandant pour chacun des pistes d'amélioration.. Il s'agit que les adresses web facilitent les activités des utilisateurs plutôt que l'inverse.. Les recommandations concernent aussi bien des utilisateurs novices que des experts du web.. Ces derniers développent en effet des stratégies de navigation qui peuvent être supportées par une conception réfléchie des URL.. Les URL, outils de communication et de navigation.. Pour bien saisir l'importance de l'ergonomie d'une adresse web, on doit la replacer dans ses contextes d'utilisation.. Elle intervient sur de nombreuses interfaces, et a une vie au-delà de l'écran.. On doit donc traiter le versant "informatique" et le versant "non informatique" des adresses web.. L'optimisation des URL est en général bénéfique pour tous les formats sur lesquelles elles interviennent.. » L'URL dans un contexte de communication informatique.. Une URL est l'adresse par laquelle un utilisateur accède à un site.. Dans le domaine informatique, elle susceptible d'être vue par l'utilisateur à de nombreux endroits:.. - Barre d'adresse du navigateur.. - Barre de chargement du navigateur.. - E-mail.. - Sites web: résultats d'un moteur de recherche, lien sur un site.. - Document électronique (fichiers pdf, Word, Powerpoint, etc.. - Etc.. Voici quelques exemples de ces occurrences des URL dans le monde informatique:.. Les URL dans les éléments du navigateur: barre d'adresse et barre de chargement.. Les URL sur le web: dans les résultats des moteurs de recherche, dans des liens sur d'autres sites.. Les URL dans les documents électroniques: fichiers pdf, Word, Powerpoint, etc.. Dans ce contexte informatique, on peut distinguer plusieurs types d'interaction avec les URL selon leur présentation et l'objectif de l'utilisateur:.. L'URL est souvent un lien, un objet sur lequel on peut cliquer.. Elle est alors élément de navigation.. Dans ce contexte informatique, on observe la prédominance de deux comportements: le clic et le copier/coller.. Moins fréquemment, l'URL est glissée/déposée.. Enfin, lorsque le format de présentation de l'URL ne permet pas de cliquer ni de copier (par exemple lorsqu'elle n'est pas sélectionnable: présentée dans une image, dans une animation flash non optimisée), les utilisateurs sont amenés à la recopier au clavier.. L'URL peut aussi, au-delà de ces fonctions de navigation, devenir vecteur de communication.. Elle peut en effet être vue à l'écran et retranscrite dans un autre format:.. - Retranscription sous forme orale (je dicte à mon collègue Bertrand une adresse web pour que l'on puisse discuter d'un site / un client m'appelle, je lui demande de me lire l'adresse dans la barre d'adresses, etc.. - Retranscription sous forme écrite (je note sur un bloc-notes, un post-it, mon palm, l'adresse d'un site afin de pouvoir la transporter et l'utiliser dans un autre environnement).. » L'URL dans un contexte de communication plus traditionnel.. Une adresse web est aussi communiquée par des canaux plus traditionnels: vue sur une publicité et mémorisée, lue sur un carnet, écoutée au téléphone, à la radio, etc.. Elle est donc susceptible d'être entendue, écrite, dictée.. La communication d'une URL s'effectue par divers moyens:.. - Document papier de travail.. - Publicité sur divers supports de communication (magazines, prospectus, sacs, bâtiments, etc.. - Livre.. - Téléphone.. - Radio.. - Synthèse vocale.. Un exemple dans le monde physique: l'URL sur un livre.. L'adresse web dans ces contextes est alors objet de communication, et ne devient outil de navigation que lorsqu'elle est retranscrite par l'utilisateur sous forme de lien (dans un document, un e-mail, une page internet, etc.. Toute la problématique de l'utilisabilité des URL en tant qu'objet de communication se situe dans ce transfert vers l'informatique.. Ce transfert suppose en effet des activités cognitives qui peuvent être complexes si l'URL est mal conçue.. On observera alors des difficultés de répétition (la retranscription sous forme écrite ou orale sera plus difficile), de mémorisation, une augmentation du risque d'erreurs.. » Objectifs de l'optimisation des URL.. 3 domaines sont concernés par l'optimisation de l'ergonomie d'une adresse web:.. Optimisation du site Internet.. : l'URL fait partie du contenu d'un site, elle est un élément d'interface, elle participe de l'ergonomie de ce site Internet.. Optimisation du transfert entre les différents formats informatiques.. Optimisation du transfert entre informatique et monde physique.. Les croisements entre l'URL dans un contexte informatique et dans un contexte physique sont permanents, on doit donc essayer d'optimiser ces transferts dans les deux sens.. » L'optimisation ergonomique bénéficiera à ces 3 contextes d'utilisation des URL.. Simplifier les URL.. L'idée la plus courante pour améliorer l'ergonomie d'une adresse web consiste à la simplifier.. Différentes astuces permettent de simplifier les URL:.. » Toujours écrire en minuscules.. Une adresse web écrite uniquement en minuscules, sans mélange de casses, est plus facile à taper, à écrire, à dire à voix haute, à mémoriser.. Elle permet aussi d'éviter les erreurs de direction en fonction du comportement du serveur (la plupart des systèmes font en effet la distinction entre majuscules et minuscules).. » Ecrire avec des termes compréhensibles.. Pour qu'une URL soit simple, elle doit exclure tout vocabulaire technique et "codes" obscurs, qui n'ont aucune signification pour les utilisateurs.. Les adresses web intègrent souvent de tels éléments lorsque les pages sont dynamiques et que l'URL contient des paramètres déterminant le contenu de la page.. C'est aussi le cas lorsque des pages sont générées à partir d'une application de gestion de contenu, et que les règles de génération de l'URL contiennent des éléments techniques et non orientés utilisateurs:.. » Réduire le nombre de caractères de l'adresse.. Il semble évident qu'une URL courte est plus simple qu'une URL longue.. Une adresse web courte est plus facile à lire, à analyser.. Elle est aussi plus facile à sélectionner à la souris, donc à copier / coller:.. En 1, l'URL est moins utilisable qu'en 2: sa longueur fait qu'elle est plus difficile à lire (selon la largeur de la fenêtre, elle peut ne pas apparaître en totalité), à analyser, à mémoriser, à sélectionner (pour copier / coller, supprimer une partie de l'adresse, se déplacer dans la barre d'adresses, etc.. Le fait de concevoir des URL plus courtes facilite aussi des aspects moins évidents.. Cela permet par exemple d'éviter aux liens d'être "coupés" dans les applications de messagerie.. Certains clients mails coupent les adresses web au format texte à environ 80 caractères, ce qui rend plus difficile l'interaction.. Dans ce cas, l'utilisateur est obligé de copier-coller l'URL sur deux lignes au lieu de cliquer sur un lien.. De plus, si le début de l'adresse reste cliquable, il est très fréquent que l'utilisateur clique dessus et ne comprenne pas (ou pas immédiatement) pourquoi il obtient une page introuvable.. On observe souvent dans ce cas que l'erreur est attribuée à l'expéditeur du message ("il a mal orthographié le lien", "la page n'existe même pas.. ", etc.. Peu d'utilisateurs ont les compétences nécessaires pour essayer de comprendre l'erreur et d'où elle provient.. Enfin, une URL courte s'adaptera mieux dans les sites sur lesquels elle apparaît.. Pour l'éditeur du site, elle sera plus facile à présenter, car plus susceptible de s'intégrer dans le cadre technique  ...   contenu d'une URL.. Cependant, il faut prévoir tous les comportements utilisateur qui pourraient les amener à interagir avec les URL.. Ce n'est qu'en connaissant et en anticipant ces comportements que l'on pourra optimiser l'utilisabilité des adresses web.. Les utilisateurs voient, lisent et parfois modifient les URL afin d'arriver à leur objectif.. Le but de la démarche ergonomique dans la conception des URL est d'optimiser ces adresses en les rendant plus utilisables, quelque soit le comportement de l'utilisateur et son niveau d'expertise.. » Lecture d'une URL dans la barre de chargement.. Lorsque les utilisateurs ont atteint un certain niveau d'expertise, ils se rendent compte que l'adresse exacte d'un lien apparaît dans la barre de chargement du navigateur lorsque l'on survole ce lien.. Cet état de fait leur permet d'adopter des stratégies anti-erreurs, afin de limiter la visite de pages inintéressantes ou qui ne correspondent pas à leur objectif.. Lire une URL dans la barre de chargement donne notamment une information sur le format du document, en fonction du type d'extension: [.. doc ], [.. ppt ], [.. pdf ], etc.. Cela permet aussi de distinguer des liens internes (on reste à l'intérieur du site) et les liens externes (la page visée appartient à un autre site).. Concevoir des URL de qualité permet d'optimiser ces stratégies: plus l'URL est explicite et donne des informations précises sur la page, plus il est facile de prendre une décision de navigation:.. Ergonomie et Flash.. , Ergolab.. Le survol du lien permet l'analyse de l'URL de la page visée dans la barre de chargement.. Dans cet exemple, l'utilisateur obtient les informations suivantes:.. - Le lien est un lien externe.. - Ce lien externe pointe vers un site référence, celui de Macromedia (il peut donc s'aventurer à le visiter, il trouvera sans doute des contenus de qualité).. - Le document visé est un document pdf.. - Il appartient à des rubriques concernant le flash et l'utilisabilité (d'après la hiérarchie de répertoires), et c'est un livre blanc.. Pour supporter ce comportement, on doit donc concevoir les fichiers et sous-fichiers de manière thématique, avec des mots qui veulent dire quelque chose et ne consistent pas en des codes incompréhensibles.. Les informations contenues dans l'URL peuvent aussi uniquement servir de vérification.. La durée nécessaire au choix de navigation ("je clique ou je clique pas?") sera alors réduite.. En effet, si le site source indique directement dans la page le nom du site externe, le type de document et les thèmes qu'il aborde, l'analyse de l'URL consistera en une simple et rapide vérification de ces informations.. » Remontée dans les niveaux de fichiers.. Lorsque "ça ne marche pas" et que l'utilisateur tente d'atteindre une page à tout prix, il en arrive souvent à analyser le contenu de cette adresse web, afin de trouver une stratégie pour trouver la page qu'il cherche ou un contenu approchant.. Une des stratégies consiste à corriger manuellement l'URL, en modifiant certains paramètres (par exemple un numéro d'identifiant d'un produit, un chiffre, un caractère spécial) ou en remontant la hiérarchie de fichiers.. Dans ce dernier cas, l'utilisateur supprime un à un les niveaux de l'architecture de l'information, jusqu'à trouver une page pertinente.. Cette stratégie est ce que Nielsen appelle le.. URL-butchering.. Cette stratégie est plus fréquemment mise en oeuvre lorsque l'utilisateur arrive sur une page introuvable à partir d'un lien dans un autre site ou dans les résultats d'un moteur de recherche.. Remonter les niveaux de fichiers est alors un moyen d'atteindre les autres contenus du site.. A un niveau encore supérieur, le URL-butchering devient aussi un moyen de navigation rapide lorsque la navigation du site est mal conçue et difficilement accessible (Exemple: on préfère supprimer toute la hiérarchie de fichiers plutôt que de peiner à trouver le lien "accueil").. Ces stratégies de contournement d'une mauvaise conception de site sont une nouvelle illustration de l'importance que la hiérarchie de fichiers soit bien dessinée et explicite, afin de guider l'utilisateur et de lui permettre d'arriver au plus près de la page qu'il recherchait.. Intervient ici aussi l'importance de la longueur de l'URL: il est plus facile de sélectionner et de supprimer un "morceau" d'URL lorsque ce dernier est petit et ne dépasse pas la longueur de la barre d'adresses.. » Deviner une URL.. Une URL que l'on peut deviner commence d'abord par un nom de domaine "intuitif".. De plus en plus d'utilisateurs du web tapent directement une URL dans la barre d'adresses lorsque le site qu'ils veulent visiter est une institution, une enseigne commerciale très connue, une société renommée, etc.. Pour deviner ces URL, ils se basent sur leurs expériences antérieures et les "conventions" dans le choix d'un nom de domaine.. De plus, lorsque l'on conçoit l'architecture d'un site et les URL associées, on doit veiller à adopter des règles strictes, valables pour tout le site, et simples à mémoriser pour les utilisateurs.. Concevoir des URL prédictibles, c'est donc en partie adopter des règles précises dans la conception des URL, l'achat des noms de domaines, les hiérarchies de fichiers des sites, etc.. Ces règles permettront d'atteindre une cohérence dans les actions de communication.. Cette cohérence aidera les utilisateurs à pouvoir deviner les adresses web sur la base des adresses qu'ils connaissent déjà.. Par exemple, si le site d'une école permet à chaque élève d'avoir sa propre page, et que l'utilisateur sait que la sienne s'appelle [ http://ecole.. com/david ], il peut en déduire que la page de sa copine Léa se trouve sur [ http://ecole.. com/lea ].. Il est donc important que le responsable informatique ne l'ait pas placée sur.. [ http://lea.. ecole.. com ].. Lorsque l'architecture du site est plus complexe à deviner ou à écrire, on doit aussi prévoir que les utilisateurs puissent entrer des URL simples et intuitives pour accéder à des pages-clés.. On parle souvent d'URL "human-guessable" en citant les exemples classiques des sites de Microsoft ou d'Adobe, qui opèrent des redirections de haut-niveau sur la base des adresses potentiellement entrables par les utilisateurs:.. Par exemple, [ microsoft.. com/visio ] mène à la page de détail du logiciel Visio, même si l'adresse "réelle" de la page est.. microsoft.. com/office/visio/default.. asp ].. Validité des URL.. Une fois qu'une adresse web a été diffusée, il est nécessaire qu'elle soit toujours accessible.. Si pour des raisons de refonte ou de changement de stratégie technique l'adresse d'une page change, on devra configurer le serveur de façon à ce que cette page redirige vers la nouvelle version.. Lors de la refonte du site Asmodée, la règle de conception des URL a changé pour des raisons techniques et éditoriales.. Cependant, une procédure de redirection a été mise en place pour que les anciennes adresses pointent bien vers les nouvelles pages (ici, l'exemple de la page produit Jungle Speed).. Sites web, moteurs de recherche et utilisateurs (à travers leurs favoris, leurs notes, documents, e-mails, leur mémoire.. ) gardent la trace de vos anciennes URL.. Lors de la reconception d'un site, on doit donc penser à ces aspects et mettre en place des procédures techniques pour permettre aux utilisateurs d'accéder aux contenus via les anciennes adresses.. Les adresses web sont à la fois un moyen d'accès, de navigation et de communication pour le web.. En tant que telles, elles induisent des problématiques d'ergonomie.. En réfléchissant à l'utilisabilité de ces URL, on peut optimiser l'interaction des utilisateurs avec un site web, du premier accès à une visite "experte".. Server side usability.. , guuui.. com, 2004.. Serving citizens' needs: minimising online hurdles to accessing government information.. (Fichier pdf, 1.. 05 Mo), Eszter Hargittai, IT Society, Volume 1, Issue 3, pp.. 27-41, 2003.. User-Centered URL Design.. , Jesse James Garrett, Adaptive Path, 2002.. Towards Next Generation URLs.. , Thomas Powell Joe Lima, port80software.. URL Design.. , rubrique du Chapitre 4 de Designing Web Usability, New Riders Publishing, 2001.. Source: WDVL (Web Developer's Virtual Library).. How to make URLs user-friendly.. , Adam Baker, 2001.. The Cranky User: Making URLs accessible.. , IBM, Peter Seebach, 2001.. Making URLs predictable.. , Kristoffer Bohmann, 2000.. Usable file and directory names make usable URLs.. , Dey Alexander, 2000.. URL as UI.. , Jakob Nielsen's Alertbox, March 21, 1999.. Understanding URIs.. , in Common HTTP Implementation Problems.. W3C Note 28 January 2003.. Jakob Nielsen,.. Designing Web Usability.. , New Riders Publishing, 2001.. in Chapitre 4 (Site Design): URL Design, pp 246-256.. Disponible en ligne à partir de.. Web Developer's Virtual Library..

    Original link path: /articles/utilisabilite-des-adresses-web.print.php
    Open archive

  • Title: L'ergonomie dans la conception d'un formulaire
    Descriptive info: 24 Juillet 2004.. L'ergonomie dans la conception d'un formulaire.. Le choix et la spécification des éléments de formulaire.. Organisation visuelle du formulaire.. Rapidité d'exécution.. Sûreté d'exécution : la gestion des erreurs.. Le formulaire est l'un des moyens pour l'utilisateur d'envoyer des données, alors que son comportement classique sur le web consiste plutôt à recevoir des informations.. Cette notion entraîne des problématiques d'ergonomie autres que celles liées à la simple consultation de contenus.. Cet article présente les standards d'ergonomie web pour la conception de formulaires et quelques recommandations à adapter à la spécificité de chaque situation.. Les thématiques concernant les formulaires couvrent un large champ d'application, dans les domaines du logiciel et du web, pour le grand public ou les applications métiers, pour les novices ou les utilisateurs expérimentés.. Qu'ils servent à envoyer un message, acheter un produit, remplir un questionnaire ou accomplir une tâche professionnelle plus précise, les formulaires doivent respecter certaines règles.. On peut distinguer des recommandations génériques et des recommandations spécifiques, qui seront déduites du contexte d'utilisation du formulaire et de ses caractéristiques.. Il existe une grande différence entre un formulaire destiné à un site grand public ou à une application professionnelle.. Cette différence est d'ailleurs à étudier quelque soit la thématique (mode d'interaction avec le formulaire, organisation des champs, gestion des erreurs, etc.. Les formulaires sont quelque chose d'assez bien défini au niveau des règles à appliquer pour les formulaires web classiques (formulaire de contact, de commande d'un document, de gestion d'un processus d'e-commerce.. C'est beaucoup plus complexe pour les formulaires spécifiques, destinés à être utilisés dans un cadre professionnel, et pour lesquels on ne dispose pas de référent existant.. Pour ce type de formulaires, l'analyse de l'activité doit prendre une place beaucoup plus importante, c'est elle qui doit guider les choix d'interfaçage plutôt que l'application de règles standards.. Le choix et la spécification des éléments de formulaire.. La première étape dans la conception d'un formulaire consiste à déterminer son utilité, ce à quoi il doit servir, et les informations qu'il doit permettre de recueillir.. Les méthodes d'analyse de l'activité et des supports existants ainsi que les méthodes d'interview permettent de compléter cette première étape.. Après avoir décidé des informations à recueillir via le formulaire, il faut trouver la manière optimale de les demander à l'utilisateur.. Un formulaire se décompose en différents éléments de formulaire.. Les caractéristiques de chaque élément permettent de récupérer des types d'informations particuliers.. » La ligne.. L'élément "Ligne" permet d'obtenir un champ de formulaire d'une seule ligne.. Les paramètres qui peuvent être spécifiés sont la longueur de la ligne et les données qui peuvent y être entrées.. Les valeurs de ces paramètres doivent être adaptées au type de données afin de faciliter le renseignement du formulaire par les utilisateurs :.. Exemple : les deux champs lignes "E-mail" et "ISBN" n'ont pas la même taille du fait de la différence des informations attendues.. » Le champ texte.. L'élément "Champ texte" permet d'obtenir un champ de formulaire d'une ou plusieurs lignes.. Les paramètres qui peuvent être spécifiés sont le nombre de lignes, la longueur de la ligne et les données qui peuvent y être entrées.. Les valeurs de ces paramètres doivent être adaptées au type de données.. » Le bouton radio.. L'élément "Bouton radio" correspond à un élément de formulaire permettant une sélection unique.. Les boutons radio sont donc une série de boutons exclusifs, fonctionnant sur le mode "On - Off".. Ils permettent de présenter des réponses alternatives à une question:.. Exemple d'utilisation de boutons radio : choix entre l'option "Oui" et l'option "Non".. L'utilisation des libellés "Oui" et "Non" permet d'insister sur le caractère binaire de cet élément de formulaire.. Il est plus indiqué pour une utilisation de formulaire par les novices, mais nécessite plus d'espace à l'écran qu'une simple case à cocher.. Les avantages des boutons radio (ainsi que des cases à cocher) tiennent essentiellement au fait que toutes les options sont visibles sans nécessiter d'action de la part de l'utilisateur (contrairement à une liste déroulante par exemple).. Le pendant de cet avantage est que ce type d'élément de formulaire prend beaucoup de place à l'écran et peut compliquer la lecture du formulaire.. Les boutons radio sont des éléments qui ne peuvent fonctionner qu'en groupe (c'est à dire au moins deux boutons radio).. Il ne peut donc pas exister d'interface avec un seul bouton radio.. Le bouton radio doit être placé par défaut sur l'option la plus fréquemment choisie, ou que l'on suppose la plus appropriée en fonction d'une analyse de la tâche.. S'il n'existe aucune option préférentielle, les boutons radio peuvent être laissés décochés.. Cependant, cela oblige l'utilisateur à accomplir une action de sélection quelque soit la situation.. La présélection par défaut a un inconvénient lorsque la sélection d'un bouton radio est optionnelle.. En effet, une fois que l'utilisateur a sélectionné une option, il ne peut pas revenir en arrière sauf si le concepteur a prévu un bouton "pas de sélection".. » La case à cocher.. L'élément "Case à cocher" permet d'obtenir une liste d'options au sein de laquelle la multisélection est possible.. La case à cocher est aussi employée pour des choix binaires (le cochage / décochage de la case active ou désactive une fonction).. Les cases à cocher peuvent être présentées seules ou en groupe.. Lorsqu'elles fonctionnent en groupe, les choix qu'elles proposent sont non-exclusifs.. Les cases à cocher comme les boutons radio fonctionnent sur le mode "On - Off" (on coche ou on décoche la case).. Les avantages de la case à cocher sont identiques à ceux des boutons radio.. Exemple d'utilisation de cases à cocher.. La présence des 3 cases à cocher (Vendredi, Samedi et Dimanche) permet à l'utilisateur d'effectuer :.. - Une sélection unique (une option parmi les 3 proposées).. - Une multisélection (2 ou 3 options parmi les 3 proposées).. » Le menu déroulant.. L'élément "Menu déroulant" permet d'obtenir une liste d'options avec un libellé visible (soit l'intitulé du champ, soit la première option de la liste, soit une option sélectionnée par défaut).. Ce type d'élément d'interface permet de proposer un grand nombre d'options sans prendre beaucoup de place à l'écran.. L'utilisateur ne peut faire que des choix uniques.. Exemple d'utilisation d'un menu déroulant : le menu déroulant intitulé "Rubrique" permet de choisir à quelle rubrique appartient un article d'Ergolab.. Ce type d'interfaçage permet de proposer 4 options sur une seule ligne à l'écran (à l'inverse de cases à cocher où toute les options sont visibles à l'écran).. » La liste.. L'élément "Liste" permet d'obtenir une liste d'options avec la liste des premières options visible à l'écran (en fonction de la longueur visible de la liste à l'écran).. L'utilisateur peut en général effectuer des choix multiples, sauf si le concepteur a spécifié l'inverse.. » La double liste.. L'élément "Double liste" permet d'obtenir deux listes d'options avec possibilité de passage d'éléments d'une liste à une autre.. Organisation visuelle du formulaire.. Présentation générale du formulaire.. La conception d'un formulaire doit avoir pour objectif de permettre aux utilisateurs de le renseigner rapidement et efficacement (avec le moins d'erreurs possibles).. Le type de présentation que l'on choisit doit être adapté aux caractéristiques de l'utilisateur et de la tâche : est-ce que les utilisateurs connaissent bien l'outil informatique, est-ce qu'ils utilisent fréquemment le formulaire (et à quelle fréquence), est-ce que la rapidité d'exécution est capitale, etc.. Un formulaire peut être présenté sur une seule page, ou découpé en plusieurs pages.. Cette dernière configuration est appelée "wizard" en raison du caractère "assisté" du remplissage du formulaire : on guide l'utilisateur à travers plusieurs étapes successives, jusqu'à ce qu'il ait renseigné toutes les informations dont on a besoin.. Chacune des configurations a des avantages et des défauts, qui sont plus ou moins importants en fonction du type d'application, du niveau d'expertise de la cible utilisateur et de sa fréquence d'utilisation du formulaire.. Certains inconvénients peuvent être contournés en adoptant des solutions simples.. Wizard.. » Avantages.. - Simplicité de chacune des pages : puisque le formulaire est découpé en plusieurs parties, on ne présente à l'utilisateur qu'une partie des informations sur chaque page.. Ce procédé permet qu'il se concentre sur les renseignements qu'on lui demande de fournir, sans être distrait par d'autres groupes de champs du formulaire.. Le renseignement d'un formulaire par étapes successives permet de réduire la complexité perçue de la procédure.. - Gestion des erreurs simplifiée : lorsque l'utilisateur renseigne mal une des pages (oubli d'informations obligatoires ou mauvais format de réponse), on lui affiche un message et on l'aide à corriger ses erreurs.. Ce type d'informations est beaucoup plus "digestible" lorsque la page est de taille réduite que lorsque l'on a affaire à un long formulaire.. En effet, la détection du ou des champs mal renseigné(s) est beaucoup plus aisée.. Découper le formulaire en plusieurs pages permet donc d'optimiser le rapport signal / bruit en faveur d'une  ...   peut détecter que le premier est renseigné.. Ce procédé ne doit être utilisé que pour les données de longueur fixe.. En outre, il ne peut être appliqué que sur des interfaces utilisées très fréquemment et de façon répétée.. Les utilisateurs doivent être experts et connaître parfaitement toutes les entrées du formulaire, leur ordre et leurs caractéristiques.. Ce procédé peut poser problème sur les sites gand public: on ne connaît pas le niveau d'expertise des utilisateurs et ces utilisateurs ne viennent pas assez fréquemment pour "apprendre" le comportement de l'interface.. De plus, il pose le problème de l'hétérogénéité du comportement en fonction des champs.. » Faciliter la vérification des données entrées.. Exemple : La longueur d'un champ (ligne ou texte) est un moyen de faciliter l'interaction des utilisateurs avec le formulaire, en limitant les actions à accomplir avec le clavier et la souris pour vérifier la validité des données entrées.. En effet, lorsqu'un champ ligne est trop petit, les utilisateurs ne peuvent voir simultanément l'ensemble des données qu'ils ont renseignées.. Ils sont donc obligés de se déplacer à l'intérieur du champ afin de vérifier qu'ils n'ont pas fait de fautes de frappe:.. Exemple : la longueur de ce champ E-mail est trop réduite pour que les utilisateurs puissent vérifier d'un seul coup d'oeil qu'ils ont bien renseigné leur adresse.. Sûreté d'exécution : la gestion des erreurs.. Protection contre les erreurs.. La gestion des erreurs dans un formulaire commence d'abord par ce que l'on appelle la protection contre les erreurs.. Il s'agit de tout mettre en oeuvre pour ne pas induire l'utilisateur en erreur, et pour limiter les erreurs qu'il pourrait commettre.. La conception du formulaire est donc déjà un moyen de limiter en amont les erreurs potentielles.. Mieux le formulaire est conçu, moins les utilisateurs risquent de commettre des erreurs.. Plus on fournit d'éléments de sélection (liste, menu déroulant, case à cocher, bouton radio), plus on diminue le risque d'erreur.. En effet, les éléments de formulaire qui présentent le plus de risque sont ceux qui acceptent la saisie de la part de l'utilisateur (champs ligne ou texte).. On doit donc.. prévoir les erreurs classiques.. On peut par exemple, prévoir le fait que les utilisateurs attendant patiemment l'envoi du formulaire cliquent plusieurs fois sur le bouton de validation afin d'être certain que le formulaire soit envoyé.. Si l'envoi du formulaire est long, on doit afficher une barre de progression.. De plus, le système doit fournir un moyen informatique de corriger le double envoi.. On doit aussi limiter le risque de confusion entre un bouton "Annuler" et un bouton "Envoyer" en ne fournissant qu'un bouton à la fin du formulaire, celui de validation.. La.. légende des champs.. (par exemple indiquer que le mot de passe doit comprendre 6 caractères au minimum) permet d'indiquer à l'utilisateur les pièges potentiels du formulaire.. Dans l'exemple précédent, la légende évite à l'utilisateur d'être contraint à passer par une étape supplémentaire s'il avait en tête un mot de passe inférieur à 6 caractères.. Protéger l'utilisateur contre les erreurs, c'est aussi lui donner la.. possibilité de confirmer les actions importantes.. (par exemple la validation finale d'une commande en ligne).. Cela peut consister à récapituler les détails de ce que l'utilisateur va confirmer, et indiquer que le bouton de validation correspond à la validation finale, qu'il n'y a pas de possibilité de retour en arrière.. spécification des paramètres des éléments de formulaires.. peut aussi permettre d'optimiser la protection contre les erreurs.. Les valeurs des paramètres (exemple : taille visible du champ, nombre de caractères maximum) doivent être adaptées au type de données afin de faciliter le renseignement du formulaire par les utilisateurs.. La taille affichée d'un champ donne un indice aux utilisateurs sur quel type de donnée est attendu.. Elle peut donc leur permettre d'aller plus rapidement dans la détection que l'information qu'ils pensaient renseigner n'est pas celle attendue, ou n'a pas le format attendu.. Par exemple, une saisie de dates présentée sous forme de trois champs différents (adaptés au format de données attendu) peut faire comprendre rapidement à l'utilisateur que le format de l'année attendu est sous forme de 4 chiffres, et non de 2.. On évite ainsi qu'il commette une erreur et soit obligé de la corriger.. Enfin, la.. validation du type de données.. renseigné (caractère texte, chiffre, caractère spécial, etc.. ) peut permettre de détecter une erreur non remarquée par l'utilisateur, et évite que les données envoyées soient erronées.. Détection des erreurs.. Il faut aussi concevoir le formulaire de façon "intelligente" au niveau du développement, afin de faciliter la détection des erreurs : par exemple, on doit checker si un code postal ne contient bien que des chiffres (si le formulaire est uniquement destiné à la France).. Si l'utilisateur entre une donnée sous forme de caractères, on affiche un message d'erreur.. Il est important de ne pas "sur-valider" un formulaire, afin de rester flexible.. Par exemple, pour un formulaire à visée internationale, la validation d'un champ de téléphone devrait accepter les caractèrs autres que les chiffres, tels que (, ), +, etc.. La détection des champs doit se faire en une seule validation : on valide tous les champs en même temps et on affiche toutes les erreurs, au lieu de procéder de façon séquentielle (une erreur à la fois).. Cela permet à l'utilisateur d'aller plus rapidement dans la correction de ses erreurs.. Affichage des messages d'erreur et aide à la correction.. Deux problématiques différentes doivent être traitées dans l'affichage des messages d'erreurs :.. - Le fond : qu'affiche-t-on dans les messages d'erreur?.. - La forme : Comment affiche-t-on ces messages?.. » Contenu des messages d'erreur.. On ne doit jamais retourner un formulaire sans en expliquer la raison.. Un message général doit être fourni (qui explique "Vous avez fait une erreur"), mais aussi un / des messages spécifiques sous ou à côté des champs mal renseignés.. Ces messages doivent réellement expliquer l'erreur : il ne s'agit pas uniquement de dire "c'est faux", mais plutôt "un code postal doit être composé uniquement de chiffres", et fournir un exemple de renseignement correct si besoin.. Suite à la validation, on devra veiller à ne pas effacer les entrées valides.. De plus, pour faciliter la correction des erreurs, on n'effacera pas les entrées erronées.. » Apparence des messages d'erreur.. Afficher un message d'erreur dans la page et non dans une pop-up permet à l'utilisateur de ne pas avoir besoin de mémoriser la ou les erreurs : il peut revenir au message pour le relire plus attentivement si besoin.. Si le système technique vous contraint à afficher ce message dans une pop-up, vous pouvez fournir à l'utilisateur le moyen de corriger son ou ses erreurs directement dans cette pop-up.. Les messages d'erreur doivent être affichés de façon très distincte, dans une couleur de type "alerte" (rouge, orange).. L'utilisateur ne doit pas se demander pourquoi la page s'est rechargée après validation (sans voir qu'un message d'erreur s'est affiché).. Cette problématique semble peu importante, on pense que les utilisateurs verront forcément qu'un message d'erreur est apparu à l'écran.. Cependant, des tests rapides peuvent montrer de façon criante l'importance du format des messages d'erreur.. Vous pouvez à ce sujet consulter l'expérience de Viewit dans les.. Exemple d'affichage d'un message d'erreur : on affiche l'explication en rouge et en gras, sous le champ concerné.. On accompagne ce message d'une mise en valeur du contour du champ mal renseigné.. On accompagne ce message d'une mise en valeur du fond du champ mal renseigné pour attirer l'attention de l'utilisateur sur ce champ en particulier.. Les problématiques de lisibilité, d'organisation visuelle et de gestion des erreurs sont les points centraux dans la spécification ergonomique d'un formulaire.. La conception des formulaires est un domaine vaste et très contextuel.. On peut dégager certains standards mais les choix d'interface sont souvent dictés par la spécificité des tâches.. » Ressources en ligne.. Usability and HTML Forms.. Andrew Starling, 2001 (Web Developer's Virtual Library).. Enhancing form usability with instructions and validation.. Michael Meadhra, 2004 (Builder.. com).. Usable Form Design.. Your Usability Resource, 2004.. Forms, usability, and the W3C DOM.. Peter-Paul Koch, 2003 (Digital Web).. Why Users Don't Complain About Unusable Forms.. Caroline Jarrett, 2001 (STC Usability SIG Newsletter).. Forms - 508 Tutorial.. Usability.. gov.. Simple Tricks for More Usable Forms.. Simon Willison, 2004 (Sitepoint).. » Ressources externes.. Mayhew (1992).. Principles and Guidelines in Software User Interface Design.. , Prentice Hall.. Chapitre 5 : Dialog Styles : Fill-in Forms.. [28.. Aide contextuelle onfocus chez Yahoo! Mail.. Lire la note n°3.. net/bloc-notes/32.. Best practices for form design.. Un formidable document préparé par Luke Wroblewski (auteur de.. Site-Seeing: A Visual.. Approach to Web Usability.. ), et pas moins de 112 pages entièrement consacrées à l'ergonomie des formulaires, et réparties en 4 grands chapitres : Why Does Form Design Matter, Information, Interaction, et Feedback.. Un must.. (Lien direct vers pdf).. nethttp://www.. lukew.. com/resources/articles/WebForms_LukeW.. pdf..

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

  • Title: Comment concevoir un menu ? Partie 2
    Descriptive info: 14 Décembre 2003.. Comment concevoir un menu ? Partie 2.. Adaptation du menu à l'utilisateur et à son activité.. Compatibilité avec la tâche.. Compatibilité avec les actions habituelles de l'utilisateur.. Compatibilité avec les caractéristiques de l'utilisateur : le menu doit pouvoir.. être contourné.. première partie de cet article.. a détaillé les principales caractéristiques d'un menu et les problématiques d'identification et de sélection des options.. Nous verrons ici dans quelle mesure un menu doit être adapté aux caractéristiques de l'utilisateur, et comment cette adaptation peut être mise en place.. Adaptation du menu à l'utilisateur et à son activité.. Compatibilité avec la tâche.. Les menus permettent de présenter les options disponibles à un moment donné de l'activité de l'utilisateur.. Les options non disponibles peuvent ainsi être présentées dans un format différent.. On peut aller encore plus loin dans l'adaptation des menus à l'activité de l'utilisateur.. En effet, on peut proposer des menus contextuels, différents en fonction de l'élément à partir duquel on sollicite le menu.. Il s'agit de partir de l'environnement dans lequel l'utilisateur se trouve pour lui proposer les options les plus pertinentes.. Ces options tiendront compte des actions de l'utilisateur (par exemple la sélection d'un mot entraîne l'apparition de l'option « copier » dans le menu contextuel).. Ce procédé est employé presque exclusivement dans le domaine logiciel.. Dans le domaine du web, la compatibilité avec la tâche s'exprime dans l'aide à la navigation.. Le menu est alors à la fois un outil de navigation et une aide à la navigation.. En effet, il doit montrer clairement à l'utilisateur la rubrique du site dans laquelle il se trouve.. Les jeux de couleur sont à cet effet très utiles pour signifier à l'utilisateur la rubrique active du site :.. Source :.. com/jeux-de-societe/contact/.. La page que consulte l'utilisateur se trouve dans la rubrique "contact".. On doit cependant veiller à ce que ces différences de couleurs soient aussi visibles en niveaux de gris.. Parallèlement, et ce aussi bien dans le domaine web que logiciel, le passage du pointeur sur une option de menu peut entraîner un changement de l'interface :.. La page que consulte l'utilisateur se trouve dans la rubrique "contact" et le pointeur de la souris est positionné sur le titre de rubrique "liens".. Bien que ce procédé ne soit pas utilisé dans toutes les interfaces, il permet de fournir un retour à l'utilisateur sur l'efficacité de ses actions.. De plus, il souligne les options disponibles.. Là encore, les possibilités offertes sur le web sont beaucoup plus diversifiées qu'en logiciel.. Compatibilité avec les actions habituelles de l'utilisateur.. Certains logiciels tentent d'adapter la présentation des options de menu en fonction de l'activité de l'utilisateur.. Par exemple, si j'utilise plusieurs fois l'option "options de correction automatique" dans Word, elle me sera  ...   plus adapté.. Si on part du principe que l'application doit satisfaire à la fois une cible novice et une plus à l'aise avec l'outil informatique, on devra faire attention à fournir des moyens pour contourner la rigidité d'un menu.. En effet, l'utilisateur expert a surtout besoin d'être efficient (et pas seulement efficace) : il doit réussir à accomplir l'action mais aussi le faire rapidement.. On essaiera ainsi de permettre la réalisation d'actions par des raccourcis claviers ou des macros personnalisées pour certaines applications.. Il est aussi recommandé dans les logiciels de doubler le menu de raccourcis iconiques.. Ce procédé peut servir deux types d'intérêts différents.. Il peut permettre à l'utilisateur d'aller plus rapidement et d'effectuer en un clic ce qu'il pourrait faire en plusieurs.. Il est important de fournir à l'utilisateur des moyens de personnaliser ces raccourcis.. Les icônes permettent aussi à certains utilisateurs novices de raisonner de façon plus imagée et directe.. Il est donc important de fournir par défaut les raccourcis des options les plus utilisées.. Enfin, les menus contextuels sont un moyen d'appuyer les menus principaux puisqu'ils peuvent fournir les mêmes options.. Cependant, les options accessibles par le menu contextuel sont adaptées à la séquence d'utilisation.. Ils sont souvent accessibles par un clic droit (ou ctrl + clic) dans la zone de travail de l'application.. La rapidité d'exécution est encore ce qui sous-tend l'utilité de ces menus contextuels et leur importance pour les utilisateurs confirmés.. De nombreuses problématiques sont liées à la conception des menus.. Il paraît primordial d'étudier ce qui se fait dans le domaine où l'on travaille.. En effet, le transfert des connaissances des utilisateurs est un paramètre qui permet d'optimiser la facilité d'apprentissage de l'interface.. Ceci est valable autant dans le domaine du web qu'en logiciel.. Ensuite, la conception d'un menu doit être adaptée à son utilisation et à la population cible.. Les points les plus importants sont liés à la structuration du menu (groupement et présentation des options), aux termes employés et aux mécanismes d'identification et de sélection.. Norman, K.. The Psychology of Menu Selection: Designing Cognitive Control at the Human/Computer Interface.. Published by Ablex Publishing.. Miller, G.. (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.. Helander, M.. (eds) (2000).. Handbook of HCI.. 2nd edition North-Holland: Amsterdam.. Mayhew, D.. J.. (1992).. Chapitre 4, Designing Menu Systems.. Prentice Hall.. [20.. 10.. 2003].. Comment concevoir un menu ? Partie 1.. 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 est différente.. Cet article.. net/articles/ergonomie-menu-1..

    Original link path: /articles/ergonomie-menu-2.print.php
    Open archive

  • Title: Ce mot souligné semble mener quelque part...
    Descriptive info: 20 Novembre 2003.. Ce mot souligné semble mener quelque part.. Respecter la standardisation des liens.. A propos des contenus qui ne mènent nulle part.. L'usage d'indicateurs pour préciser le "quelque part"….. 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):.. 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 :.. 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.. 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 même cliquer deux fois pour être bien sûr que ce n'est  ...   lien interne ou lien externe).. La question de l'utilisabilité des adresses URL est fondamentale (Vous pouvez lire à ce propos l'article.. 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.. 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.. 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.. 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.. 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.. Garrett, J.. J (2002).. , 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.. 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.. 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.. 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.. 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.. Web Site Usability : A Designer's Guide.. Chapter 3 : Links on the World Wide Web..

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

  • Title: Comment concevoir un menu ? Partie 1
    Descriptive info: 20 Octobre 2003.. 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.. 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  ...   Bien qu'il n'existe pas toujours de groupements au sein des options d'un menu (par exemple lorsque le nombre des options est très réduit), ils peuvent aider à la sélection.. En effet, les options appartenant au même groupe agissent alors comme contexte pour confirmer ou infirmer l'interprétation que l'utilisateur peut faire du mot.. Les groupes doivent être représentés visuellement : on peut choisir de les scinder par des séparateurs sous forme de lignes ou d'espaces.. Les recommandations des guides de style logiciels vont dans ce sens 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..

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

  • Title: Accessibilité visuelle des interfaces web
    Descriptive info: 24 Janvier 2004.. 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.. 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 :.. net.. chromino.. com/contact.. - La navigation de premier niveau du site Ergolab en couleurs RVB et en niveaux de gris.. - La navigation du site Chromino en couleurs RVB et en niveaux  ...   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.. net/livres/creer-des-sites-web-accessibles-a-tous.. Web Content Accessibility Guidelines Working Group (WCAG WG).. Les guidelines de la WAI, la "section" accessibilité du W3C.. w3.. org/WAI/GL/.. 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).. peachpit.. com/title/073571150X#..

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

  • Title: Faciliter la lecture d’informations sur le web
    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.. 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 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.. 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  ...   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.. 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.. Writing for Readers Who Scan.. Clickz.. 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.. Morkes, J.. Applying Writing Guidelines to Web Pages.. Useit.. 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.. Le travail sur écran en 50 questions.. [24.. 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.. net/articles/accessibilite-visuelle-web..

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

  • Title: Feedback et rapport homme-ordinateur
    Descriptive info: 01 Novembre 2003.. Feedback et rapport homme-ordinateur.. Fournir un correspondant visuel aux traitements invisibles.. Adaptation du feedback à la nature des traitements informatiques.. Comment transmettre les informations ?.. 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 d'un traitement.. Pendant  ...   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.print.php
    Open archive



  •  


    Archived pages: 258