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: Note n°11 – Ergolab, ergonomie sites web
    Descriptive info: bloc notes.. note n°11/12.. TAGS :.. Formulaires.. Interfaces riches.. n 11.. Liste des notes.. note précédente.. n°11 /.. 12.. note suivante.. n°11.. [12.. 05.. 2009].. Double saisie temporisée, à voir chez Picnik.. Source :.. www.. picnik.. com.. Chez Picnik, on mesure bien l'importance d'un.. formulaire d'inscription.. bien pensé, même lorsque celui-ci ne requiert que quelques informations.. Pour preuve, le déroulé ci-contre, qui illustre comment le formulaire en question arrive à gérer la problématique de la.. double saisie.. La plupart des sites web actuels, pour des raisons de fiabilité des données, demandent lors de la saisie d'un mot de passe et / ou d'une adresse e-mail de saisir deux fois l'information, afin de s'assurer de sa validité.. On évite ainsi toute erreur de frappe.. Certains mécanismes bloquent d'ailleurs le copier / coller afin que le système puisse remplir sa mission et force l'utilisateur à la saisie clavier.. Or, pour demander à l'internaute deux informations, on en arrive à lui imposer de remplir 4 champs.. Deux grandes problématiques se posent alors :.. a) L'utilisateur doit comprendre ce qu'on lui demande de faire.. Les mots sont alors nos meilleurs alliés.. Ainsi, les libellés de champs permettent de bien faire comprendre qu'il faut "saisir à nouveau", "une seconde fois", "répéter", etc.. Les aides textuelles quand à elles peuvent permettre d'expliquer pourquoi on demande  ...   compréhension que ce que l'on demande est un duplicata d'informations).. » Enfin, lorsque l'on a renseigné un mot de passe suffisamment long pour être acceptable,.. le champ de re-saisie apparaît en format éditable.. , laissant la place au double renseignement du mot de passe.. Un procédé strictement identique est appliqué sur le champ e-mail, faisant ainsi de ce formulaire un bel exemple de découpage de l'interaction pour faciliter la vie de l'utilisateur et l'accompagner au fur et à mesure.. Picnik utilise d'ailleurs ces techniques de temporisation pour la gestion de l'ensemble de son formulaire : mise en valeur des champs actifs, apparition des aides, gestion des erreurs, tout est mesuré à la milliseconde près !.. à voir aussi sur Ergolab.. [24.. 07.. 2004].. L ergonomie dans la conception d un formulaire.. 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.. 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)..

    Original link path: /bloc-notes/11.php
    Open archive

  • Title: Formulaires - Ergolab, ergonomie sites web
    Descriptive info: TAG : Formulaires.. Voir tous les tags.. tags.. Formulaires.. Voir ce tag dans :.. les articles.. les chroniques de livres.. les liens.. le bloc-notes.. afficher.. liste des tags.. 6 ressource(s).. portent le tag.. "Formulaires".. [article].. Lire l article.. Gestion des erreurs.. [note].. note n 11.. Lire la note.. note n 10.. Acrobat.. com et le message d’erreur du futur.. Animations.. note n 3.. Aide contextuelle onfocus chez Yahoo! Mail.. Aide.. [lien].. Documents et publications.. Utilisabilité.. Defensive Design for the Web - 37signals.. Téléchargement gratuit de "Bulletproof forms", le Chapitre 4 du livre.. defensive design for the  ...   et illustrées.. (Cliquer sur l'onglet Sample content).. Architecture de l information.. Voir tous les tags du site Ergolab.. dernier article.. Les interfaces à base de glisser - déposer sont parmi celles qui font le plus rêver les concepteurs web.. Qu'en est-il vraiment du côté utilisateur, et qu'en dit l'ergonomie? Cet article liste chaque point d'accroche des interfaces de drag drop, et émet pour chacun des recommandations, tant du point de vue de l'utilité que de l'utilisabilité de ce mode d'interaction.. dernière note.. [05.. Lorsqu une fiche produit sort de sa page.. Lire la note n°12.. dernière chronique..

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

  • Title: Interfaces riches - Ergolab, ergonomie sites web
    Descriptive info: TAG : Interfaces riches.. Interfaces riches.. 4 ressource(s).. "Interfaces riches".. Drag Drop.. note n 6.. Le filtre produit Prisjakt : précision à la suédoise.. E-commerce..

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

  • Title: Note n°10 – Ergolab, ergonomie sites web
    Descriptive info: note n°10/12.. n 10.. n°10 /.. n°10.. [04.. 12.. com et le message d erreur du futur.. http://acrobat.. Une des problématiques les plus courantes en ergonomie des erreurs consiste à savoir.. alerter l'internaute.. qui a fait une erreur dans un formulaire, et à.. lui montrer où il a fait cette erreur.. Autrement dit, il doit se rendre compte de son erreur et savoir où entamer son action de correction.. Les pratiques les plus courantes dans ce domaine consistent à afficher un message en début de formulaire, et à mettre en valeur les champs incriminés, ce qui fonctionne très bien d'un point de vue utilisateur.. Mais Acrobat.. com fait encore mieux !.. Profitant des possibilités offertes par l'animation, l'interface ci-contre accompagne parfaitement l'internaute dans  ...   pas, qui découpe le message pour le rendre plus visible et efficace.. Le genre de détails qui fait toute la puissance d'une interface !.. À noter : le cas d'une multi-erreur n'est pas encore traité sur l'interface, mais pourrait bénéficier du même traitement, attirant l'attention successivement sur les différents champs erronés.. Evidemment, cela fonctionne d'autant mieux que le formulaire est affichable en entier à l'écran.. À noter aussi : un message d'erreur du futur, ça peut aussi passer par un ton sympathique lorsque l'on s'adresse à ses internautes.. Voyez ainsi comme suite à un champ obligatoire non renseigné, Acrobat.. com vous propose un message du type « Sorry ! Please enter your email address » (vs le bon vieux « Champ obligatoire »)..

    Original link path: /bloc-notes/10.php
    Open archive

  • Title: Gestion des erreurs - Ergolab, ergonomie sites web
    Descriptive info: TAG : Gestion des erreurs.. Gestion des erreurs.. 3 ressource(s).. "Gestion des erreurs"..

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

  • Title: Note n°9 – Ergolab, ergonomie sites web
    Descriptive info: note n°9/12.. Terminologies.. n 9.. n°9 /.. n°9.. [29.. 06.. Classer ses articles sur LeMonde.. fr.. lemonde.. Un bel exemple de choix de terminologie sur le site du Monde, qui propose à ses abonnés de "Classer" les articles, afin de les.. mettre de côté.. pour une consultation ultérieure.. Chacun peut donc retrouver les articles qu'il aurait sélectionnés dans son classeur personnel en ligne, archive accessible à tout moment.. Alors que l'utilisation de la.. métaphore.. dans  ...   pratiquée dans le monde réel (découper des articles de journaux pour les ranger dans un classeur), qui trouve une bonne application dans le monde virtuel.. En outre, l'utilisation même de ce terme a sans doute un.. pouvoir suggestif.. , qui incite à l'utilisation de la fonctionnalité (et par-là même, à l'abonnement), plus que les libellés habituellement utilisés : "Sélectionner", "Mémoriser", etc.. À voir dans le même genre :.. » Les clippings du.. Guardian.. , version publique..

    Original link path: /bloc-notes/9.php
    Open archive

  • Title: Terminologies - Ergolab, ergonomie sites web
    Descriptive info: TAG : Terminologies.. Terminologies.. "Terminologies".. note n 9.. note n 4.. Follow this topic sur CNN, ou le RSS pour les nuls.. note n 1.. Buy now, mais encore ? Cloggs rénove le call to action.. Call to action..

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

  • Title: Note n°8 – Ergolab, ergonomie sites web
    Descriptive info: note n°8/12.. Utilité.. n 8.. n°8 /.. n°8.. 03.. Allociné calcule pour vous.. allocine.. Chez Allociné, on se préoccupe vraiment de savoir ce qui intéresse les visiteurs du site.. Récemment, on a ainsi vu apparaître sur le site la.. mention de l'heure de fin de séance.. Ce procédé ingénieux illustre parfaitement le critère d'utilité pour les internautes, mais est aussi mis en place de manière très utilisable (lire sur Ergolab l'article.. C'est quoi l'ergonomie informatique.. , qui définit les concepts d'utilité et d'utilisabilité).. En effet, les heures de début et de fin de séance ne  ...   et on offre l'information utile à l'internaute précisément au moment où il en a besoin.. Notez que cette micro-fonctionnalité est particulièrement intéressante dans les actions de.. comparaison intra-cinema.. (par exemple : je compare les heures de fin de plusieurs films dans le même cinéma).. ou inter-cinemas.. (par exemple : je compare les heures de fin du même film dans plusieurs cinémas).. 2003].. C est quoi l ergonomie informatique ?.. Cet article présente brièvement ce qu'est l'ergonomie informatique : son objectif, son intérêt, les critères qui la définissent, les domaines où elle est utilisée… L'objectif est de..

    Original link path: /bloc-notes/8.php
    Open archive

  • Title: Note n°7 – Ergolab, ergonomie sites web
    Descriptive info: note n°7/12.. n 7.. n°7 /.. n°7.. [14.. View a man.. par American Apparel.. http://store.. americanapparel.. net.. Voici une micro-fonctionnalité particulièrement appréciable chez American Apparel, qui prend la peine, pour les produits unisexe, de proposer de voir la photo d'une femme portant le vêtement ou d'un homme portant le même vêtement (la photo par défaut étant celle correspondant à la rubrique dans laquelle l'on se trouve, à savoir femmes ou hommes).. Accessible via un lien ".. View a man in this syle.. " (ou "View a woman".. ), cette fonctionnalité permet d'observer ce que donne le vêtement en fonction de qui le porte.. Où l'on découvre que les filles portent les sweat-shirts comme des robes.. et que les garçons font tout autrement.. Ce qui permet d'offrir une telle fonctionnalité aux internautes ? Une base de photos on ne peut plus complète, avec tous les articles dans  ...   cabine d'essayage avant d'acheter un article) qu'il est intéressant de disposer du maximum d'informations possible sur les vêtements.. Proposer différents modèles portant le même vêtement est une de ces informations.. Mais chez American Apparel, on ne s'arrête pas là dans le conseil utilisateur.. On vous a gardé deux cerises pour la fin!.. Tout d'abord, et toujours pour répondre au besoin d'en voir le plus possible sur le produit, on vous propose de voir une publicité relative au style vestimentaire en question (en VO, ".. See an Ad that features this style.. ").. Et on retrouve alors le même modèle, dans un joli pdf destiné à la presse et autres porteurs de bonne parole, portant différentes déclinaisons du produit.. Enfin, notez cette petite phrase qui, mine de rien, a son importance: ".. Unisex size - women may prefer to order one size smaller.. " Qui dit mieux ?..

    Original link path: /bloc-notes/7.php
    Open archive

  • Title: E-commerce - Ergolab, ergonomie sites web
    Descriptive info: TAG : E-commerce.. E-commerce.. "E-commerce".. note n 7.. note n 2.. Le browse by size de Threadless.. Navigation..

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

  • Title: Note n°6 – Ergolab, ergonomie sites web
    Descriptive info: note n°6/12.. n 6.. n°6 /.. n°6.. [07.. prisjakt.. nu/kategori.. php?k=v665.. Prisjakt propose sur son site des filtres produits d'une rare précision.. Si l'on observe plus particulièrement les curseurs qui permettent de limiter un critère entre un minimum et un maximum (par exemple : la taille d'un disque dur en Gb), on découvre un.. outil à double fonction.. 1.. Assez classiquement,.. les curseurs ont un rôle déclaratif.. : ils permettent de restreindre la recherche à une étendue donnée.. Par exemple, ils permettant à l'internaute de déclarer "Je veux un appareil photo avec une résolution supérieure à 7 mégapixels".. Il suffit alors à ce dernier de positionner le curseur de gauche (indicateur du minimum) au seuil des 7 mégapixels.. 2.. Plus original, on peut voir à chaque gradation une.. indication visuelle du nombre d'appareils photos disponibles.. au niveau en question (sous forme d'histogrammes simplifiés).. Bien  ...   offre donc une information qui lui permet d'anticiper sur les résultats à venir, et d'y adapter ses critères de recherche.. Bien que la mise en oeuvre de ce type d'outil puisse être discutable (on pourrait en effet imaginer une interface différente), son utilité semble très intéressante.. Reste à ce que ce type de fonctionnalités soit effectivement utile pour les internautes du site en question.. On doit notamment se demander ce que viennent y faire les visiteurs, et ce dont ils ont besoin au regard de ces objectifs.. Ce type d'interface très puissante ne doit être utilisée que si elle sert les objectifs des internautes.. À défaut, elle ne viendra que surcharger l'interface, et compliquer sa prise en main.. La pertinence de ce type d'interfaces semble plus assurée dans des outils applicatifs, utilisés par une population experte en informatique et / ou experte dans son domaine..

    Original link path: /bloc-notes/6.php
    Open archive



  •  


    Archived pages: 258