Articles taggés Erreur

Ligne de visualisation non claire du formulaire

Design d’un formulaire web – Luke Wroblewski

1

Résumé de la vidéo Web form design par Luke Wroblewski

Cette présentation est passionnante, bien riche et remplie d’exemples concrets. Je conseille fortement de la voir pour tout ceux qui veulent améliorer l’expérience utilisateur et l’ergonomie de leur formulaire web (et clairement je pense que je vais essayer d’acheter le livre
Première constatation : les formulaires sont souvent mal faits.
Pourtant ils sont une part très importante du net aussi bien pour le client que l’entreprise. Énormément d’actions passent par un formulaire. Ils représentent même le dialogue du client avec l’entreprise.

Ils ont leur role dans :

  • le commerce car ils permettent à l’utilisateur d’acheter en ligne et à l’entreprise de maximiser ces ventes
  • l’engagement car ils permettent à l’utilisateur d’entrer et de manipuler des informations et à l’entreprise d’accumuler des données et du contenu
  • l’adhésion car ils permettent la participation de l’utilisateur et pour l’entreprise d’augmenter le nombre de client et de faire grandir des communautés

Par exemple, le formulaire d’upload des videos de Youtube a été redessiné de nombreuses fois vu sa fonction centrale.

Comment faire de meilleurs formulaires web ? Les dix meilleures pratiques

1 – chemin vers la complétion
Le but premier d’un formulaire est sa complétion en offrant une ligne de visualisation claire.

Ligne de visualisation non claire du formulaire

Ligne de visualisation non claire du formulaire

Ligne de visualisation claire du formulaire

Ligne de visualisation claire du formulaire

L’exemple ci dessus montre clairement l’importance de l’alignement et de la cohérence pour que l’utilisateur ne se « perdent » pas.
Il faut créer un flux visuel clair.

Il faut montrer à l’utilisateur son avancement par la portée, le progrès ou le statut.

Indicateur de progression pour l'utilisateur

Indicateur de progression pour l'utilisateur

En conclusion, il faut :

  • mettre en avant un chemin clair vers la complétion du formulaire
  • utiliser des barres de progression pour communiquer la portée, l’état et la position dans le formulaire
  • Si besoin de plus de temps ou d’une recherche d’information, fournir une page de départ
  • utiliser des indicateurs de progression plus généraux pour les formulaires avec des séquences variables suivant les besoins

2 – l’alignement
Il explique l’alignement des labels : au-dessus, a droite ou encore a gauche.
Le titre au-dessus se révèle le plus rapide pour les données familières mais demande plus d’espace vertical. Il permet aussi plus de flexibilité pour la localisation et les entrées complexes.
L’alignement à droite permet une bonne association entre le label et la zone de saisie, requiert moins d’espace vertical et a une complétion rapide mais il se révèle plus difficile à lire.
L’alignement a gauche est plus pratique pour les données non familières et permet de parcourir rapidement les labels par contre changer la longueur des labels peut invalider l’alignement du formulaire et la complétion est plus lente.
Mixer plusieurs alignement n’est pas bon.

Les labels dans la zone de saisie sont pratiques mais il faut être sur que l’utilisateur se rappellera de la question.
Il faut aussi les utiliser avec modération (formulaire avec uniquement des réponses mais pas de questions ?)

En conclusion, il faut :

  • utiliser l’alignement au dessus pour réduire les temps de complétion d’un formulaire avec des données familières
  • utiliser l’alignement à droite quand l’espace vertical est limité
  • utiliser l’alignement à gauche quand les données ne sont pas familières ou complexes

3 – Les aides et astuces
Elles sont utiles quand :

  • le formulaire demandent des données non familière
  • l’utilisateur peut se demander pour quel raison cette donnée est demandée
  • une manière recommandée de fournir la donnée
  • certaines données sont optionnelles

Cependant, les aides et astuces ne doivent pas envahir le formulaire.
Si c’est obligatoire, il faut peut être passer à une solution dynamique.
Par exemple quand l’utilisateur arrive dans le champs, une aide apparait. On peut aussi utiliser un bouton d’aide ou encore faire apparaitre une section d’aide.

Section d'aide à droite dans un formulaire

Section d'aide à droite dans un formulaire

En conclusion, il faut :

  • minimiser le besoin d’aide et astuces pour remplir un formulaire
  • favoriser une aide visible et proche qui est plus utile
  • utiliser un système activé par l’utilisateur pour formulaire complexe et souvent réutilisé
  • utiliser une aide directement inclue dans le champs de saisie à moins que vous ayez beaucoup de contenu (texte, graphique, tableau)
  • utiliser un système cohérente si vous avez beaucoup d’aide

4 – validation en ligne
Il faut fournir une validation directement à l’insertion des données, suggérer des données valides ou encore aider l’utilisateur à rester dans les limites.
Il faut aussi bien faire en sorte que les validations soient cohérentes (exemple du « confirm » qui vérifie juste l’égalité des deux champs ou encore ne refait pas la vérification quand la valeur initiale change).
Il compare énormément la qualité d’enregistrement entre Yahoo et Twitter.

Validation du formulaire sur Twitter

Validation du formulaire sur Twitter

Validation du formulaire sur Yahoo

Validation du formulaire sur Yahoo

En conclusion, il faut :

  • utiliser une validation directement dans le champs de saisie pour les champs de saisie où il y a potentiellement beaucoup d’erreurs
  • utiliser des suggestions d’entrées pour lever des ambiguïtés
  • communiquer les limites

5 – Actions
Toutes les actions sur un formulaire (bouton) ne sont pas équivalentes.
Par exemple « Effacer tout », « Annuler » et « Retour en arrière » sont des actions secondaires rarement utilisées. « Sauver », « Continuer » et « Soumettre » sont des actions primaires directement responsables de la complétion du formulaire.

Différentier les actions primaires et secondaires dans un formulaire

Différentier les actions primaires et secondaires dans un formulaire

Il faut les différentier (Gras, taille, couleur, etc..).

En conclusion, il faut :

  • éviter les actions secondaires si possible
  • faire une distinction visuelle claire entre les actions primaires et secondaires
  • aligner les actions primaires avec les champs de saisie pour un chemin de complétion clair

6 – Actions en attente
Certaines actions nécessitent du temps de traitement (soumission de formulaires, calculs, uploads).
Il faut fournir un retour d’informations par exemple désactiver le bouton de soumission le temps du traitement.
On peut profiter du temps d’attente pour afficher des informations.

7 – Erreurs
Quand une erreur se produit, c’est l’information la plus importante du formulaire car elle vous empêche d’aller plus loin.

Indiquer clairement les erreurs et les associer avec le champs responsable.

Indiquer clairement les erreurs et les associer avec le champs responsable.

En conclusion, il faut :

  • indiquer clairement qu’une erreur à eu lieu : placement au dessus et contraste visuel
  • fournir des actions de correction
  • associer le champ erroné avec le message d’erreur
  • ne pas hésiter à « doubler » les informations où l’erreur a eu lieue

8 – Les entrées non nécessaires
Chaque question demande aux utilisateurs de la comprendre, de formuler une réponse et d’entrer cette réponse.
Soyez vigilant sur chaque question en se posant ces trois questions :

  • Peut elle être enlevée ?
  • Peut elle être remise à plus tard ?
  • Peut elle être devinée ?

Enlever des informations peut avoir un grand impact sur la complétion d’un formulaire par exemple le type de carte de paiement n’est pas nécessaire.
Utiliser le code postal pour renseigner directement la ville et l’état.
Il ne faut pas non plus compliquer le traitement dans le seul but d’enlever question.

9 – l’organisation du formulaire
Cela dépend. Il faut essayer d’avoir une conversation, de parler d’une seul voix ou encore d’utiliser les coupures naturelles.
Luke montre un superbe exemple d’un « simple » formulaire de contact qui au fil des besoins (ingénieurs, marketing, légal…) devient très complexe et inutilisable.

Exemple d'un formulaire sous forme d'une conversation.

Exemple d'un formulaire sous forme d'une conversation.

En conclusion, il faut :

  • prendre le temps d’évaluer chaque question que l’on pose
  • assurer la cohérence
  • se forcer à être succinct
  • utiliser une seule page web si le formulaire peut se diviser en plusieurs sujets courts
  • utiliser une seule longue page quand il y a de nombreuses questions mais sur un seul sujet
  • au contraire utiliser plusieurs pages quand un formulaire contient de nombreuses questions avec peu de sujets

10 – L’engagement graduel
Un bouton de soumission avec un label en rapport avec le titre de la page.
D’après Luke, les formulaires d’inscription doivent disparaître.
Les services web devraient provoquer l’engagement :

  • expliquer ce que fait le service
  • permettre aux personnes de l’utiliser
  • avoir l’inscription comme résultat

En conclusion, il faut :

  • essayer d’éviter les formulaires
  • mettre en avant le cœur de votre service avec le moins d’interaction possible
  • faire en sorte que l’utilisateur réussisse du premier coups
  • , si vous générer des comptes automatiquement, faire en sorte que l’utilisateur puisse y accéder des façon claire
  • utiliser une seule longue page quand il y a de nombreuses questions mais sur un seul sujet
  • ne pas distribuer divers champs de saisie dans des formulaires sans prendre en compte l’engagement

Les erreurs

1

La plupart des accidents sont considérés comme des erreurs humaines alors qu’en fait la plupart sont réellement dus plus à des erreurs de design. Une compréhension des causes de ces erreurs suggère des stratégies de design spécifique afin de grandement réduire leur fréquence et sévérité.
Il y a deux types d’erreurs : les erreurs d’inattention (« slips ») et les erreurs de but (« mistakes »)

Les « slips » sont considérées comme les erreurs d’action ou erreurs d’exécution et arrivent qu’on réalise une action qui n’est pas celle voulue. Par exemple quand une personne appelle un numéro fréquemment appelé plutôt que celui souhaité à l’origine. Les erreurs d’inattention sont le résultat de processus automatiques et inconscients. Elles apparaissent fréquemment suite à un changement de routine ou lors de l’interruption d’une action. Autre exemple, une personne oublie son avancée dans une procédure après avoir du répondre au téléphone.

Il faut donc faire en sorte de :

  • minimiser les erreurs d’inattention en fournissant un retour d’information claire sur une action
  • faire en sorte que les messages d’erreur soient clairs, incluent les conséquences d’une erreur ainsi que les possibilités de correction si possible
  • quand cela n’est pas pas possible, utiliser des confirmations pour interrompre le flot d’exécution et vérifier l’action
  • considérer l’utilisation des affordances et des contraintes pour influer sur l’action.

Les « mistakes » sont considérées comme les erreurs d’intention ou de planning et se produisent quand une intention n’est pas correcte. Par exemple une erreur de but arrive si une infirmière interprète une alarme de façon erronée et administre le mauvais traitement. Les erreurs de but sont causées par un processus mental conscient et sont fréquemment le résultat du stress ou de mauvais jugements dans la prise de décision.

Il faut donc faire en sorte de :

  • minimiser les erreurs de but en augmentant la connaissance de la situation et en réduisant les bruits de fond
  • rendre visible les indicateurs clés et les contrôles en un seul coup d’œil dés que c’est possible
  • réduire le stress et la charge cognitive en minimisant le bruit sonore et visuel
  • fournir juste ce qu’il faut de retour d’information pour mettre en avant les alertes et d’autres fonctions importantes mais pas plus
  • utiliser des confirmations qui nécessitent plusieurs étapes pour confirmer l’intention sur des tâches critiques
  • s’entrainer sur la récupération d’erreurs en mettant l’accent sur la communication entre les différents membres d’une équipe.

En conclusion, il faut toujours mettre en place le principe de pardon ou retour sur erreur dans un design. Ce principe de pardon fait référence à l’utilisation d’éléments permettant de réduire la fréquence et la sévérité des erreurs, permettant ainsi d’améliorer la sécurité et l’utilisabilité du design.

Les différentes types d'erreur en ergonomie

Les différentes types d'erreur en ergonomie

Texte et image traduit provenant de Universal Principles of Design

Haut de page