Formulaire de création de compte : camaieu.fr

On ne le répètera jamais assez : les formulaires de création de compte, c’est la plaie pour les utilisateurs !

Songez que la plupart des gens ne sont pas des professionnels et ne passent pas, comme vous, chers lecteurs, leurs temps à s’inscrire sur des réseaux sociaux, à essayer des nouveaux services ou (comme moi) à passer commande de collants verts sur des sites de mode pour tester leur processus de commande. Bref, à devenir des vrais professionnels du formulaire d’inscription.

Camaieu venant de sortir son site de e-commerce, c’était l’occasion pour moi, de voir comment s’en sortait un distributeur spécialisé sur cette question. Et, oh !, quel ne fut pas ma surprise de voir qu’il y avait plein de bonnes choses à prendre sur ce formulaire et de les partager avec vous.

Observez, observez bien, mesdames et messieurs, le beau formulaire que voilà.

camaieu

1) Expliquez pourquoi vous demandez à l’utilisateur de créer un compte.

Quand vous allez chez Mc Do, la jeune fille en uniforme qui a pris votre commande, vous demande-t-elle de créer un compte avant de payer ? Non ! Alors, dites-vous bien que demander de créer un compte peut paraître une idée tordue à quelqu’un qui veut simplement payer un achat. C’est donc une action anti-naturelle qui peut rebuter une partie de vos utilisateurs.

Ici, c’est très bien expliqué : « Je crée mon compte dès aujourd’hui [immédiateté, donc satisfaction immédiate] Vous pourrez ainsi profiter de tous les services Camaïeu ».

Voilà. C’est dit, créez un compte vous permettra d’accéder à votre suivi de commande (le + important) et sûrement encore à un tas d’autres services vachement utiles (sauf que là, on ne vous le dit pas).

Pas grave ! L’idée à conserver, c’est de dire à quoi ça va servir de créer un compte et que de toute façon, l’utilisateur n’a pas le choix.

2)Faites court !

Un formulaire est pour tout le monde une épreuve fastidieuse. Alors ne la rendez pas encore plus pénible en demandant des dizaines d’informations qui, de toute manière, ne seront pas exploitées par le marketing (si, si ! Croyez-moi, le marketing vous demande souvent des trucs dont il n’a pas besoin).

Ici, très bien, le formulaire est mis sur 2 colonnes et tient sur une 1 page. Ouf ! Ca donne l’impression qu’on ne va pas en avoir pour longtemps.

Notez aussi les libellés des champs indexés à droite. C’est bien. C’est pour que l’oeil ait moins de distance à parcourir entre les libellés et les champs et qu’il soit moins fatigué à la fin du formulaire. Ca n’a l’air de rien, mais ce sont des détails qui comptent.

3) contrôlez en temps réel

Il n’y a rien de pire qu’un formulaire qui vous balance des erreurs à la pelle après que vous ayiez sué sang et eau pour essayez d’acheter cette damnées paire de collants. Alors, faites tout pour que l’utilisateur entre le moins d’erreurs possibles au cours de sa saisie.

  • Vérifiez en temps réel la conformité de son adresse
  • Vérifiez la forme de son adresse email
  • Vérifiez la validité de son mot de passe

Et indiquez-lui à l’aide d’une petite coche verte à côté du champ qu’il a bien travaillé. Normalement, arrivé au bouton « Valider », il ne devrait pas avoir d’erreurs.

(bon, là, je vous dis tout ça, hein ! Mais ne le cherchez pas sur Camaïeu, ça n’y est pas)

4) Evitez de demander des infos sous la ligne de flottaison

Oui, mais, bon sang, elle est où, cette ligne de flotaison ? Car, c’est vrai que cette fameuse ligne a fâcheusement tendance à bouger en fonction de la configuration du navigateur de votre utilisateur.

Quoiqu’il en soit, ne prenez pas de risques. Les informations importantes et obligatoires doivent absolument être visibles au dessus de la ligne de flotaison, sous peine de ne pas être vues.

Alors ? Hein ? Vous ne voyez pas qu’il y a un petit truc qui cloche sur le site de Camaïeu ? Ah, ben oui ! Le numéro de téléphone indispensable est presque caché sur la page et on est obligé de scroller pour remplir le champ. Eh ben, tiens ! Je suis prêt à parier que plein de gens vont l’oublier celui là !

Bon, ce n’était que quelques conseils, hein ! Ne les prenez pas au pied de la lettre, mais inspirez-vous quand même de cette page, car je trouve qu’elle est vraiment très bien faite.

20 commentaires

  1. Je trouve que la couleur de police des libellés est un peu trop pâle.
    Autre chose, on nous dit dès le début du formulaire « Pour finaliser la création de votre compte camaïeu.com… » alors que nous venons de commencer la création.
    Enfin, je trouve que les infos de bas de pages, comme « La Newsletter », ne sont pas assez séparés du corps de page.

  2. Un petit bémol de mon côté aussi, je trouve ça perturbant de trouver la partie qui concerne la création de mon « identifiant » en bas à droite de la zone, en dessous d’autres options qui n’ont rien à voir. C’est une chose que j’aurais placé au tout début du formulaire.

    Même chose pour l’utilisation du mot « finalisation » 😉

    Mais, c’est tout de même un grand effort d’ergonomie proposé par Camaieu, on ne rencontre pas si souvent un formulaire sympathique !

  3. Capitaine Commerce,
    Par avance, mes excuses si ma question s’avère non pertinente, mais….
    Je n’ai pas compris si tu étais ironique ou pas sur l’avis que tu donnes, concernant ce formulaire.
    Les recommandations que tu indiques (explication, concision, gestion des erreurs, lisibilité), tu trouves que ce formulaire les respecte, ou ne les respectes pas?

  4. moi j’ai acheté un petit haut qui irait très bien avec des collants verts.
    Mais je ne partage pas tout tes goûts…

    Le positif, c’est qu’on sent une vrai réflexion et une véritable volonté de réussir cette page. C’est vrai

    Mille fois bravo pour le découpage des zones où se justifie l’information demandée… mais alors il faut dire pourquoi on demande la date d’anniversaire. On va recevoir un cadeau ?

    Graphiquement je trouve les boites à cocher(rondes) jamais calée et disposée un peu au petit bonheur.

    Enfin, il manque bien évidement reversoform qui remplit tout tout seul (ou presque) comme par exemple chez Quatre pieds.
    http://www.4-pieds.com/authentication.php?back=my-account.php

  5. Ping : pligg.com
  6. Je trouve ce formulaire bien fait. Deux remarques :
    1. J’ai été un peu déstabiliser de trouver la création d’identifiant en bas à droite.
    2. Je dois avouer que cette « déstabilisation » m’a obligé à lire la partie « Pour profier en avant première ».

    Bref, je dois avouer que je n’aurais jamais lu la colonne de droite si je n’avais pas eu à chercher où je devais saisir mon mot de passe. « Encapsuler » ainsi l’inscription à la newsletter me semble être une bonne idée.

  7. Je trouve ahurissant le nombre de formulaires d’inscription pour faire un simple commentaire sur un blog/article… et qui boguent sur un mot de passe non « valable » ou un code captcha illisible. Ou puis ceux qui vous font passer à « la suite » du formulaire quand on croit que c’est envoyé.

    Pour les e-mails, j’en crée pour chaque souscription pour tracer lesquels de mes fournisseurs vendent mon adresse. Avec pour résultat que certains grands distributeurs ne me verront plus !

    A propos, si je ne demande pas à suivre les commentaires, pourquoi mon adresse e-mail est-elle « requise » ici ?

  8. @VoxAppeal : ‘A propos, si je ne demande pas à suivre les commentaires, pourquoi mon adresse e-mail est-elle “requise” ici ?’ -> Comme partout ou presque, c’est un filtre anti-spam. Plus ou moins efficace.

  9. Bof bof le formulaire… Il y a certes de bonnes idées mais pas mal de choses peu claires.

    Dans ce que j’aime, le style du formulaire est claire et propre, on voit bien le bouton « Enregistrer » (très important). On retrouve bien entendu les champs obligatoires au 1er coup d’oeil. Petit détail également, on retrouve en bas la phrase qui stipule la loi du 6 janvier 78 sur l’accès / modifs à ses données, ce qui met en confiance le visiteur (à mon sens)

    Dans ce que je trouve bof bof, il y a la structure de la page en elle même, un peu brouillon, on ne distingue pas vraiment les différentes parties du formulaire (au début j’ai cru qu’il y en avait plusieurs). Il y a des infos pour savoir à quoi servent les champs, c’est bien, par contre le texte est peu structuré visuellement, ce qui donne l’impression qu’il y en a de partout. Pour palier à ça, je trouverais bien d’avoir au moins des numéros dans les grands titres (1. Création du compte 2 Pour profiter en avant-premiere et 3. Créer vos identifiants de compte).

    Petite question, pourquoi d’après vous, quand on clique sur « Prénom » ou « Nom », le label se met en rouge / gras, et pas les autres labels?…

    Voilà pour mon analyse 😉

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Merci de taper les caractères de l'image Captcha dans le champ

Merci de saisir ces caractères dans le champ
ci-dessous afin de valider votre commentaire.

Capitaine

Article de : Capitaine

Olivier Sauvage est le fondateur de Capitaine-commerce.com et de Wexperience, agence spécialisée en expérience utilisateur digitale.