Ergonomie web & formulaires

Catégories : "Astuces", "Conception" par Marc Andrieux Marc Andrieux le 23 Novembre 2010

Ergonomie web & formulaires

Quelles bonnes pratiques d'ergonomie adopter lors de la réalisation d'un formulaire web ? Vous trouverez dans cet article des concepts forts de l'ergonomie web comme l'affordance ou la loi de proximité, utilisés dans la conception d'un formulaire web.

« L'ergonomie web » en deux mots

L'ergonomie (du grec "Ergon" signifiant "travail" et "Nomos" règles) web est un concept qui repose sur deux notions clés que sont l'utilité et l'utilisabilité.

L'utilité se base sur les besoins et envies des internautes et implique une bonne connaissance de leurs habitudes. Ce terme remet au centre des questions essentielles telles que "Le site apporte-t-il quelque chose aux internautes ? Répond-il à un besoin ?" Mais l'utilité englobe aussi le bien-fondé des caractéristiques techniques et la pertinence des fonctionnalités (appelé micro-utilités).

L'utilisabilité ("Usability" in english), rassemble trois critères :

  • L’efficacité : Le résultat recherché est t-il bien atteint?

  • L’efficience : Ce même résultat est t-il atteint rapidement et avec facilité?

  • La satisfaction : L'internaute a t-il eu plaisir à naviguer sur le site ?

Comme vous l'aurez compris "utilité" et "utilisabilité" gravite autour d'un projet web et fusionne pour constituer l'ergonomie web.

Attention à ne pas tomber dans le piège de remettre en cause la crédibilité de l'ergonomie, et de la négliger sous prétexte qu'elle représente des notions paraissant simples et évidentes.

En effet, cette discipline requiert une grande concentration, une bonne culture web, reste présente dans toutes les phases de conception d'un site internet et doit être prise en compte par tous les intervenants du projet web.

Afin d'illustrer quelques concepts de base de l'ergonomie, concentrons nous sur la réalisation d'un formulaire.

Voici quelques astuces de base pour obtenir un formulaire ergonomique et de ce fait efficace.

1. Utiliser l'affordance temporaire pour prévenir les erreurs et faciliter la saisie des champs.

Mais qu'est ce que l'affordance? C'est un concept important de l'ergonomie web qui consiste à évaluer les actions suggérées d'un élément, grâce à ses caractéristiques. Par exemple, le fait de souligner un mot et de lui donner une autre couleur au survol de la souris, indique qu'il s'agit d'un lien. Ce concept repose en grande partie sur les conventions "classique" de navigation.

Ici, il est question d'affordance temporaire, car comme son nom l'indique, ces indications ne sont pas en permanence à l'écran mais varie selon l'action de l'internaute.

Il est en effet appréciable, surtout lorsqu'on a à faire à un formulaire de saisie important, de savoir sur quel champ l'on se situe.

Afin de mettre en valeur le champ actif, vous pouvez par exemple jouer sur son contour (taille, couleur,...) (cf : exemple ci-dessous)Affordance temporaire

2. Prendre en compte la loi de la proximité pour bien guider l'internaute

La loi de proximité exprime le fait que notre cerveau regroupe inconsciemment les éléments proches tant sur le plan de l'apparence que sur le plan géographique.

En effet, dans le cas d'un formulaire, les champs sont raccordés à une légende. Le placement de ses deux éléments reste très important pour pouvoir remplir intuitivement et rapidement les informations demandées. Pour l'exemple prenons les différents types de cartes bleues liées chacune à un bouton radio. Il ne faut pas que l'internaute se pose des questions sur le lien entre la légende et l'image. Il faut pour cela bien laisser un large espace entre les différents choix. (cf : exemple ci-dessous)Loi de proximité

3. Bien séparer les différentes zones

Toujours dans l'optique d'éviter les erreurs de saisie et de rendre le remplissage du formulaire intuitif, il est bon de bien séparer visuellement les différents types d'informations. Cela permet également un meilleur aperçu global. Il suffit pour cela de bien catégoriser les types d'information et de les séparer graphiquement (par exemple: avec un fond ou un trait en pointillé) (cf : exemple ci-dessous)

Séparation

4. Indiquer les champs obligatoires

Il est important en effet d'indiquer les informations à remplir impérativement pour valider un formulaire. Pour cela, il est recommandé d'utiliser une astérisque après chaque intitulé qui permettra en un coup d'œil, à l'internaute de se rendre compte de la quantité d'information nécessaire.

Il vous suffira de placer la légende (ex:* Les champs marqués d’une étoile sont obligatoires) en début de formulaire.  (cf : exemple ci-dessous)

Champs obligatoires

5. Casser la monotonie en insérant pour les champs de date, un "Datepicker"

Le fait d'insérer un plug-in de calendrier maintient l'attention de l'internaute et permet de s'assurer du bon format de date. (cf exemple ci-dessous)

Datepicker

6. Ajouter une phrase d'aide à certain champ, si nécessaire...

Dans certain cas, il peut être intéressant d'attribuer une phrase d'aide à certain champ pour bien guider l'internaute, surtout lorsque plusieurs informations sont à renseigner dans un seul et même champ. Attention tout de même à ne pas surcharger l'espace. (cf exemple ci-dessous)Aide

 

7. Adapter la taille des champs

Pour une meilleure compréhension du formulaire, il peut être bien vu d'adapter la largeur du champ en fonction du nombre de caractères qu'il requiert. Cela permet également de renseigner l'internaute sur le type de champ devant lequel il se trouve.

Par exemple ne laisser que l'espace de cinq caractères pour la saisie d'un code postal.(cf exemple ci-dessous)Taille adaptée

8. Bien utiliser les deux types de case à cocher

En effet, utiliser un bouton radio si il n'est possible de cocher qu'une seule case et une checkbox lorsqu'il s'agit d'une réponse à choix multiples (cf : exemple ci-dessous).Checkbox

9. Ne pas mettre en avant un bouton "effacer"

S'il doit figurer, le bouton "effacer", il faut le faire apparaitre le plus discrètement possible pour ne pas risquer de faire perdre les informations saisies par l'internaute. Préférer également une pop-in de confirmation de suppression.

Comme rappelé ci dessus, donner une affordance plus forte au bouton de validation. (cf exemple ci-dessous)

Effacer

10. Forcer le format de remplissage

Forcer un nombre et un type de caractères pour éviter une mauvaise saisie.

11. Favoriser la liste déroulante au champ libre

Dans certain cas, pour ne pas prendre de risque, utiliser une liste déroulante plutôt qu'un champ libre lorsque la situation est adaptée.

12. Attention aux indications d'erreur en cours de saisie

Le fait de prévenir qu'un champ est mal rempli peut être mal perçu surtout lorsqu'il s'agit de champ devant comporter certains caractères comme une adresse e-mail ou un site internet. En effet, l'internaute peut se sentir déconcentré lors de sa saisie.

13. Obliger la répétition de certains champs

Pour certains champs relativement importants comme la saisie d'adresse e-mail ou mot de passe, n'hésitez pas à obliger l'internaute à répéter cette information, pour être sûr qu'elle ne contient pas d'erreur. Attention toutefois de désactiver la fonction copier/coller pour optimiser l'efficacité.(cf exemple ci-dessous)

Répétition champ

14. Garder en mémoire les informations saisies dans une étape précédente

Si vous disposez déjà de certaines informations, il est bon de pré-remplir les champs concernés.

15. Récapituler les informations saisies pour mettre en évidence les éventuelles erreurs et changer de page

En fin de formulaire, il est appréciable d'avoir un récapitulatif de toutes les informations saisies pour minimiser le nombre d'erreurs possibles. Il faut également impérativement changer de page une fois que l'utilisateur a validé l'ensemble du formulaire. En effet, si la page ne change pas visuellement, il se peut que ce soit interprété comme un bug.

Cet article n'est pas exhaustif et n'a qu'une valeur indicative : pour approfondir vos connaissances en ergonomie, nous vous conseillons l'ouvrage d'Amélie Boucher aux éditions Eyrolles , « Ergonomie web pour des sites web efficaces ».

Ergonomie web & formulaires

A propos

Bienvenue sur le Workshop de l'agence interactive Maecia : notre espace d'actualités, de veille et de publications sur les nouvelles tendances d'Internet. Vous y trouverez aussi le fruit de certains de nos développements techniques que nous mettons à disposition de la communauté. Découvrez notre vision du web et surtout n'hésitez pas à prendre la parole !