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.
- Ajoutez un lien d’aide à côté de chaque champ
- 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é
- Retrouvez la ville directement à l’aide du code postal
- Vérifiez la longueur des saisies en temps réel
- Pour les numéros de téléphone, verrouillez leur conformité
- 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.
- Sensible Forms: A Form Usability Checklist
- Form expectations
- Forms, usability, and the W3C DOM
- Enhancing form usability with instructions and validation
- Getting A Form’s Structure Right
- Web app forms design [vidéo]
- Web Application Form Design
- How will openId change your site ?
- Better Web Forms: Redesigning eBay’s Registration
Tutoriaux
En anglais
API
En anglais
- wForms - A Javascript Extension to Web Forms
- Api pour Drupal
- Live validation : vérification à la volée de contenus de champs
En français
Et si vous êtes vraiment nul en programmation, voici un site qui devrait faire votre bonheur : http://www.wufoo.com
Un bon exemple d’ajax sur http://www.king-jouet.com.
Sur Manteela, on a opté pour l’option en 2 étapes : Infos de login / Infos de livraison (noms et adresse).
En fait, pour s’inscrire, il faut juste donner son email, son login et son pass.
Le reste n’est necessaire (et demander) qu’à la commande.
Ca me semble logique puisque je me moque de connaitre les noms réels et adresses d’un client tant qu’il n’a pas passé commande…
Il en pense quoi le capitaine ?
même principe pour un site qu’on est en train de faire, avec quand même possibilité de donner les infos tout de suite (via un lien : vous pouvez compléter tout de suite…)
Ha crotte, moi je n’ai aps cette erreur quand je me crée un compte…
A la limite, tu sais me contacter par mail pour me décrire un peu plus le problème ?
Merci,
Pour de beaux sites e-commerce, voir les références de la société Synchrone http://www.synchrone.be.
Cette société réalise des site internet et e-commerce.
coucou, article tès intéressant :) je me demandais ce que tu voumlais indiquer dans cette précision : ’sauf pour les adresses qui peuvent requerir un ou deux champs’ … A+
@Bebe : il est parfois nécessaire d’insérer 2 lignes pour les champs d’adresse, la deuxième n’est pas obligatoire, mais on ne peut pas ne pas la mettre non plus. C’est donc l’exception qui confirme la règle.
[...] Réinventer les interface du commerce électronique : réflexion sur les formulaires [...]