Je vous l'ai dit, j'ai été frappé par la simplicité et l'usabilité des formulaires de Wishlistr.com et j'aimerais profiter de mon réveil matinal (6h, merci monsieur Sarkozy) pour revenir en détail sur quelques aspects importants de la conception de formulaires.
Nous sommes tous d'accord : en e-commerce, un formulaire essentiellement représente l'ennemi majeur du taux de transformation, c'est le formulaire d'ouverture de compte ou de saisie des informations de livraison. Essayons de voir comment transformer ce qui peut être comme un suplice pour l'utilisateur en un plaisir véritable. Nous mettrons de côté les formulaires de saisie des numéros de carte bancaire, sachant que ceux-ci ne dépendent pas de nous, mais de notre fournisseur de terminal de paiement électronique.

Expliquez pourquoi l'utilisateur devrait s'enregistrer

Ca peut vous paraître logique, mais les bénéfices d'un enregistrement à une boutique peuvent ne pas paraître évident à vos utilisateurs. C'est une règle valable quelque soit le type de site : expliquez pourquoi les utilisateurs doivent s'enregistrer et ce qu'ils auront en retour. En somme, si l'utilisateur accepte de vous donner des informations personnelles, dites-lui ce qu'il pourra en retirer comme avantages. C'est donnant-donnant.

Ex : pour un site ecommerce, l'enregistrement permet d'obtenir un compte donnant accès à son historique de commande, à des offres avantages, etc...

Créez un formulaire contenant une étape, une seule

Certains sites (FNAC et Amazon) proposent un enregistrement en deux étapes, car il sépare volontairement l'adresse postale du compte client. Ca n'est, à mon avis, pas une bonne démarche. Autant intégrer la saisie de l'adresse dans le même formulaire que celui de la création de compte. Vous réduirez ainsi votre processus d'enregistrement à une étape, limitant par là le risque de défection durant ce moment.

Limitez le nombre de champs au maximum

Ne demandez pas d'informations optionnelles durant le processus d'inscription. Vous aurez, par la suite, tout le loisir de compléter votre fiche client par petites touches, au fur et à mesure des besoins. Demandez-donc l'essentiel : nom, prénom, adresse (2 champs), code postal, ville, numéro de téléphone (fixe au minimum), adresse email (of course !) et mot de passe.

Assistez l'utilisateur dans sa saisie

Plus l'utilisateur est assisté, plus il ira vite à remplir le formulaire et moins il aura de chance de se tromper et, de la même manière, de VOUS tromper.
  1. Ajoutez un lien d'aide à côté de chaque champ
  2. Vérifiez en temps réel la conformité du mot de passe et de l'adresse email
    • Aidez à choisir un mot de passe sécurisé
  3. Retrouvez la ville directement à l'aide du code postal
  4. Vérifiez la longueur des saisies en temps réel
  5. Pour les numéros de téléphone, verrouillez leur conformité
  6. Affichez clairement les champs obligatoires : indiquez les avec une astérisque de la même couleur que le texte par défaut. En toute logique, tous les champs devraient être obligatoires (sauf pour les adresses qui peuvent requérir un ou deux champs). Evitez une astérisque de la même couleur que celle de vos messages d'erreur (ex : le rouge), ce qui pourrait prêter à confusion.

Affichez des messages d'erreur non violents

J'ai horreur des messages d'alerte qui font 'klong' en s'affichant violemment, comme celui là. C'est très désagréable et ça angoisse l'utilisateur. Grâce au dHtml, vous pouvez faire depuis bien longtemps déjà des message d'alertes beaucoup plus doux et intégrés au design de votre site.

Respectez les règles d'usabilité

Pour améliorer la fluidité de la lecture de votre formulaire, respectez encore les quelques règles d'usabilité introduites par cet article.
  • Placez le texte (label) du champ au-dessus du champ lui même afin de ne pas forcer à regarder séparément le champ de son texte (label). Espacez suffisament les champs entre eux.
  • Si vous ne souhaitez pas respectez la première règle, alignez les labels sur une ligne verticale à gauche des champs (justification à droite).Alignez les labels à gauche au dessus du coin supérieur gauche du champ. Les justifier à gauche demande une charge de travail cognitive supplémentaire à vos utilisateurs
  • Ne mettez pas les labels en gras, utilisez simplement du texte simple sans mise en forme
  • Utilisez avec parcimonie les menus déroulants, car ils attirent facilement inconsciemment l'oeil de l'utilisateur. Réservez-les uniquement pour des informations extrêmement importantes ou déplacez-les vers le bas de votre formulaire
  • N'utilisez pas de champs à sélection multiple : ils sont bien trop compliqués pour les utilisateurs communs et plutôt incommodes
  • Pour les noms et prénoms, utilisez des champs textes d'au moins 20 caractères de long

Spoonkey, openID, SlashID : les cartes d'identité du web

Le meilleur moyen ne diminuer les erreurs de saisie et sa pénibilité (un mot bien à la mode) consiste à fournir par des fournisseurs d'identité sur le web. openID ou Slashid.com(américains) et Spoonkey (français) permettent de réaliser ce petit miracle et présentent pas mal d'avantages à la saisie d'informations valides. Loin de renier ce que j'ai dit plus haut, ils complètent et "ferment" le ban de la question.

Petit tour de piste sur Spoonkey

Spoonkey est une solution innovante encore en version bêta de saisie d'informations, mais on peut s'en faire une bonne idée en se rendant sur un de mes sites favoris : saveur-bieres.com.


Spoonkey permet de remplir un formulaire en 2 clics !

Articles à lire sur le même sujet :

En anglais

Il existe beaucoup de littérature en anglais sur le même sujet. Voici une petite pelletée de liens tous plus intéressant les uns que les autres. Je vous conseille notamment, si vous lisez couramment l'anglais, l'article sur le redesign du formulaire d'inscription d'Ebay qui est extrêmement détaillé et instructif.

Tutoriaux

En anglais

API

En anglais

En français

Et si vous êtes vraiment nul en programmation, voici un site qui devrait faire votre bonheur : http://www.wufoo.com
3
votez
www.wikio.fr