rechercher sur ergolab

s'abonner au fil rss
newsletter

Entrez votre adresse e-mail pour être informé de l'ajout de nouveau contenu :

 

» En savoir plus

bloc notes
note n°11/12

TAGS : Formulaires, Interfaces riches

accueil > bloc-notes > n°11

« Liste des notes


Illustration de la note n°11

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 cette re-saisie, participant ainsi à une meilleure compréhension mais aussi à une plus forte acceptation.

b) L'utilisateur ne doit pas être effrayé par le grand nombre de champs qu'il voit s'afficher (alors que paradoxalement on ne lui demande pas autant d'informations différentes).

Picnik réussit à satisfaire ces deux points en temporisant l'apparition des champs de re-saisie. Ainsi, ces derniers n'apparaissent que de manière différée, et selon les étapes suivantes :

» Dans l'état nominal du formulaire, les champs sont cachés.

» Lorsque l'on place le curseur dans le champ "mot de passe", le second champ correspondant apparaît en grisé sur sa droite (l'emplacement participant ainsi à la 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 !



« Liste des notes

à 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 ...

» Lire l'article


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)

» Visiter le site


ergolab