e-commerce : les champs de saisie obligatoires

Indiquer à l'internaute qu'il a oublié un champ de saisie est une étape délicate lorsque l'on conçoit un site e-commerce. Il faut inciter le client à revenir en arrière tout en évitant qu'il ne quitte le site agacé par une demande qu'il ne comprend pas.

Par exemple, pour acheter des vêtements en ligne, il faut toujours sélectionner une taille avant d'ajouter l'article au panier. Mais, le choix de la taille, qui se fait en général via une liste de choix, n'est pas toujours vu par les internautes pressés de finir leur achat.

Sur bien des sites e-commerce, l'oubli du champ obligatoire est signalé à l'utilisateur, mais l'ergonomie des notifications est variable. Nous analysons ici les différentes stratégies d'interaction pour signaler à l'internaute son oubli et l'aider à compléter le champ obligatoire.

Signaler l’oubli à l’utilisateur

Rares sont les sites qui ne renvoient aucune information à l’utilisateur lorsqu’il tente d’ajouter un produit au panier sans avoir renseigné tous les champs obligatoires. Sur le site de Damart le bouton « Ajouter » est désactivé et le clic n’a aucun effet tant que les deux champs obligatoires n'ont pas été remplis. L’utilisateur doit d’abord se rendre compte que le vêtement n’a pas été mis dans le panier, en comprendre la cause puis y remédier.

Sur le site de Damart, le bouton "Ajouter" semble actif
Le bouton « J’ajoute à mon panier » est inactif, même si ses couleurs laissent penser qu'il est possible de cliquer dessus.

Un message d’avertissement, même simple, fournit un retour efficace à l’utilisateur, si le message est vu… Aubade signale la faute en-dessous du champ concerné. La couleur rouge, la flèche et l’animation attirent le regard sur la cause du problème, mais seul le premier champ obligatoire non rempli est indiqué. Si l'utilisateur ne remarque pas les autres champs obligatoires, il risque de réitérer l'opération pour les champs suivants. 

Chez Aubade, un message d'erreur rappelle les champs obligatoires
Un clic sur le bouton « Ajouter au shopping bag » (en haut) entraîne l’affichage d’un message signalant le premier champ obligatoire non renseigné

D’autres enseignes, dont Etam, ont opté pour une méthode plus intrusive et utilisent une fenêtre pop-up. Si cette solution attire l’attention et informe l’utilisateur de la cause de l’erreur, elle n’autorise qu’une suite d’actions pour le moins immuable : fermer la pop, retourner sur l’écran précédent, chercher le champ concerné et le compléter.

     Pop-up d'avertissement chez Etam
Sur le site d'Etam une pop-up avertit l’utilisateur des champs obligatoires qu'il a omis de renseigner

Une alternative consiste à prévenir l’utilisateur avant qu’il ne clique sur le bouton « Ajouter au panier » en affichant l’avertissement au survol de ce bouton, comme c’est le cas sur le site de La Redoute. Ces informations disparaissent dès que l’utilisateur déplace la souris pour remplir les champs oubliés, ce qui l’oblige à un effort de mémoire pour se souvenir du ou des critère(s) concerné(s).

site de La Redoute : mise en avant des champs obligatoires
Un message précisant les champs vides à remplir obligatoirement apparaît lorsque la souris survole le bouton « Ajouter au panier »

Le principal écueil ergonomique des messages d’avertissement reste leur visibilité : les tests utilisateurs permettent de savoir s’ils sont bien détectés et compris par l’utilisateur et si ce dernier arrive finalement à mettre son article dans le panier.

Recommandations

  • Expliquer à l'utilisateur pourquoi l'ajout au panier est impossible 
  • Indiquer quel(s) champ(s) sont concernés
  • Attirer le regard sur les champs obligatoires non remplis

Aider l’utilisateur à corriger son erreur et à poursuivre son achat

Les messages d’avertissement préviennent l’utilisateur de son oubli, cependant ils interrompent le processus d’achat. Signaler l’erreur n’est donc pas suffisant, il faut également aider l’acheteur à la corriger et à reprendre le cours normal de sa tâche.

Cette manière de faire a été adoptée par le site de vêtements Esprit qui signale l’oubli et guide l’utilisateur dans les étapes à réaliser pour compléter la commande.

site d'Esprit : notification de remplissage des champs obligatoires
Le site Esprit présente clairement les champs qu’il est nécessaire de remplir pour procéder à un achat avec l’apparition d’infobulles présentées sur un fond rouge très visible

Le site Thinkgeek tente une touche d’humour en expliquant à l’acheteur qu’il doit effectuer un choix « avant de pouvoir mettre l’article dans le panier, comme par magie ». La fenêtre pop-in contient la liste de sélection du critère requis, focalisant ainsi la tâche sur la sélection. Le bouton « Buy Now » qui permet d’ajouter l’article au panier conserve le même libellé et le même graphisme que le bouton « Buy Now » sur lequel l’utilisateur avait cliqué pour ajouter son article au panier. L’utilisateur garde ainsi son but à l’esprit et a peu l’impression d'avoir été interrompu dans sa tâche.

Champs obligatoires : une pop-in rappel les champs à remplir sur le site ThinkGeek
La pop-in rappelle aux acheteurs qu’ils doivent remplir certains champs obligatoires avant de pouvoir acheter l'article

Recommandations

  • Conserver l’information à l’écran tant que l'utilisateur n'a pas complété les informations obligatoires
  • Aider l'utilisateur à compléter les champs au plus vite et à reprendre le processus d’achat

Conclusion

L'expérience d’achat reste l’objet de toutes les attentions de la part des sites e-commerce qui font face à un exercice difficile : rendre à la fois ludique (voir notre post sur les bonnes pratiques et idées originales pour ajouter au panier) et simple, une étape qui peut décourager les internautes si elle est mal conçue. 

S'appuyant sur les différentes ergonomies d'interaction présentées ici, les sites marchands doivent faire preuve de pédagogie, opter pour la simplicité et garder à l’esprit leur premier objectif : multiplier leurs ventes en guidant correctement les internautes.

Les méthodes ergonomiques permettent de vérifier concretement la manière dont l'ergonomie du site est perçue auprès d'un panel d'utilisateurs du coeur de cible et donc de valider les différents choix de conception avant de mettre en ligne la boutique e-commerce.

Partager :

    6 commentaires pour “e-commerce : les champs de saisie obligatoires”

    1. [...] la suite : e-commerce : les champs de saisie obligatoires Cet article est sur : [...]

    2. [...] Utilisabilité des champs de saisie obligatoires : via analyse_web [...]

    3. Excellent article ! c’est fou de voir des sociétés qui ont les moyens, ne pas offrir la meilleure expérience utilisateur.

      Super le pop-in de thinkgeek, mais ne pensez-vous pas qu’il soit un peu trop bas ? Est-ce fait exprès pour ne pas être trop intrusif ? Article ajouté dans mes marques pages…

      Bonne continuation
      Walid

    4. @Walid : Merci pour ce commentaire. Qu’entendez-vous par « ne pensez-vous pas qu’il soit un peu trop bas » ? Je précise que le visuel thinkgeek présente 2 états : avant et après avoir cliqué sur « BUY NOW ». La pop-in s’affiche donc au-dessus du bouton cliqué, et dans ce cas c’est une bonne pratique.

    5. [...] http://www.ergonomie-interface.com/internet-web-site/e-commerce-champs-saisie-obligatoires/ Filed under: Web Conception Leave a comment Comments (0) Trackbacks (0) ( subscribe to comments on this post ) [...]

    Publier un commentaire





    Notifiez-moi les commentaires à venir via e-mail. Vous pouvez aussi vous abonner sans commenter.

    Highslide for Wordpress Plugin