Archives par mot-clé : Ergonomie

Page d’identification – Suite

Après avoir vu plusieurs écrans d’identifications, proposant finalement une vision plutôt symétrique : « J’ai déjà un compte » ou « je suis un nouveau client », je vous propose de regarder maintenant une autre solution, qui vise à dé-symétriser les choses.

L’idée, c’est de faire « comme si » tous les internautes devaient créer un compte.

Donc, la page affiche directement le formulaire de création de compte.

Pour les internautes ayant déjà un compte, on propose un lien ou un bouton, en haut de la page.

Exemples :

Salomon :

Vous voyez : on a un lien pour se connecter en haut à droite (assez discret) et sinon, on arrive directement sur le formulaire de création de compte.

Autre exemple sur Ela Stone :

Très bien fait cette page :

C’est le même principe que pour salomon sauf que l’identification passe par un bouton plus visible.

(je pense qu’on pourrait mettre un bouton plus « incitatif » pour valider)

Au final, je pense que cette présentation, si elle est bien réalisée, doit être plutôt efficace.

Pour un nouveau client, on gagne une étape, et une question inutile.

Pour un client existant, le plus souvent, il a déjà un cookie sur son ordinateur, on peut donc le reconnaitre et s’en servir pour orienter l’identification.

Sinon, le client existant connait la boutique, et il devrait trouver le bouton pour s’identifier.

Page d’identification – petit tour d’horizon

Vous pensez que tous les sites se ressemblent : catalogue, fiche produit, gestion du compte et du processus achat… Du standard je vous dis !

Erreur !

Petit exemple avec la page d’identification.

On se dit, c’est pas compliqué : après avoir validé son panier, l’internaute est dans trois situations possibles :

  1. Il est déjà identifié, on peut passer à la suite
  2. Il n’est pas identifié, et n’a pas de compte (premier achat)
  3. Il n’est pas identifié et a déjà un compte
Le cas 1 est géré automatiquement. L’internaute arrive sur l’étape qui suit l’authentification.
Pour les autres cas, il « suffit » de proposer les deux options : créer un compte ou s’identifier.
Sauf que… Sauf qu’il y a pleins de façons de faire ça, et c’est assez important de s’appliquer, parce que cette étape est bien souvent sujette aux « fuites » (abandon à cette étape).
Pour poursuivre cette réflexion, je vous propose un parcours sur un panel de sites.
Go !
Commençons par CDiscount :
CDiscount propose de garder le format général du site. On retrouve donc en ce début de processus achat les menus pour naviguer dans les catégories produit.
Autre élément « marquant » : CDiscount propose de la publicité, très voyante, sur cette étape. Cela veut dire que CDiscount préfère que les clients « achètent plus » quite à baisser un peu le taux de transformation.
Pour l’identification, CDiscount propose deux colonnes : Déjà client ou Nouveau client.
Si on est déjà client, on a tout ce qu’il faut pour s’identifier.
Si on n’a pas de compte client, on doit, dès cette première étape, renseigner son email et choisir un mot de passe. CDiscount demande confirmation pour les deux champs.
Enfin, on peut noter que les boutons de validation des formulaires sont particulièrement discrets.
Pixmania propose a peu près la même présentation :
Sauf que si je suis un nouveau client, on ne me demande d’entrer que mon email.
Autre exemple, La redoute :
L’étape d’identification n’est pas proposée dans une nouvelle page, mais dans un « popup calc », affiché par dessus le panier.
Pourquoi pas, mais dans ce cas, il serait sans doute plus efficace de griser le fond de la fenêtre, de manière à mieux faire ressortir la popup d’identification.
Dans cette popup, l’organisation est très différente de celle proposée par CDiscount :
Ici, on me demande en premier mon email, et ensuite, je dois choisir entre créer un compte ou m’identifier.
Au fond, cela revient au même que ce que propose Amazon (on y reviendra). Ce qui me semble délicat, c’est l’organisation de la page :
  • Organisation verticale entre l’email et la suite (le point 1 puis 2)
  • Organisation horizontale entre déjà client ou nouveau client
Il faut savoir, quand on analyse ce type de page, que l’internaute ne lit pas ce qui est écrit, et en tout cas, ne lit pas de manière linéaire.
sur cette page, je ne suis pas sûr que les choses soient très claires pour un internaute.
Dans cet esprit, on peut faire beaucoup plus simple :
On a bien deux options, proposées en colonnes. Mais tout est simplifié, pour plus de clarté. D’abord, la page est complètement nettoyée, pour éviter que l’internaute soit perdu. ensuite, en cas de création de compte, on a juste a cliquer, on ne demande rien à ce stade.
LDLC, qui vient re faire une refonte de son site, propose une solution différente :
La solution proposée par LDLC consiste à demander, à tous, l’eMail du client.
La différence, c’est qu’ensuite, l’internaute doit choisir par un bouton radio s’il est nouveau client ou déjà enregistré.
L’avantage, c’est que cela permet de n’avoir qu’un seul bouton d’action et donc de mettre en place une ergonomie incitative.
Sauf que LDLC ne l’a pas fait, puisque le bouton d’action a la même couleur que le gros bandeau du haut.
Bon, bien sûr, cela rappelle un peu cela :
Sauf que pour Amazon, on est sur une page complètement dépouillée. Plus de menu, plus de boutons (comme pour Apple).
Et bien sûr, Amazon propose une ergonomie incitative très forte. Le bouton d’action a un code couleur, une identité visuelle unique.
Sears, très gros acteur américain propose quelque chose d’assez proche :
Toujours une page très propre, et toujours un seul champ pour tous : entrer son email.
La différence par rapport à Amazon est à plusieurs niveaux :
  • La question posée à l’internaute est très différente. Ici, on demande à l’internaute s’il a déjà un mot de passe. Cela n’a l’air de rien, mais c’est clairement une question plus simple que « avez vous déjà un compte client ». Ca, c’est quoi un compte client ?
  • Le formulaire change dynamiquement, en fonction de la réponse :
Bon, je pourrais continuer, il y a encore bien d’autres façons de faire.
Vous pensez que je chipote, que ce sont des détails ?
Sans doute, mais ce sont bien ces détails qui font la différence entre un site qui marche et un site qui bricole.

Formulaire : le cas du mot de passe

Bon, j’ai la pression maintenant sur ce blog : j’ai intérêt à être aussi intéressant que les autres auteurs 😉

Les formulaires, cela reste un sujet, un vrai sujet.

Entre ce qu’on peut faire, ce qu’on doit faire, et ce qui existe, il y a un monde…

Chaque détail compte, tout doit être bien fait.

Exemple avec la saisie du mot de passe.

Rien de plus simple me direz vous ?

Erreur !

Beaucoup de formulaires sont mal fait sur ce point là (entre autre 😉 ).

Une des erreurs, les plus agaçante, est la réinitialisation de ce champ, après traitement des erreurs : l’internaute renseigne une fois ce champ et d’autres champs du formulaire, et valide celui-ci. Il y a des erreurs, on lui ré-affiche le formulaire, mais pas avec tous les champs saisis !

J’ai trouvé cet exemple particulièrement réussi :

Ce formulaire se met à jour en temps réel (ajax).

Pour le premier champ, il indique la qualité du mot de passe, au fil de la saisie des caractères. C’est encourageant, et pédagogique. C’est bien plus malin que de mettre un message du genre « votre mot de passe doit contenir au moins 7 caractères patati patata ».

Et pour le deuxième champ, il informe, toujours en temps réel, si les deux champs correspondent.

Ce sont des petits détails, qui rendent un tel formulaire bien plus sympathique, non ?

Soignez l’ergonomie et le design de vos formulaires de paiement !

Cet article est écrit par Julien Chaumond, co-fondateur et CEO de Productism, un réseau social centré sur les produits, et auteur du livre Social commerce. Vous pouvez aussi suivre Julien sur Twitter.

Le formulaire de paiement de Tumblr

En développement Web et e-commerce, un formulaire de paiement par carte bleue est souvent vu comme quelque chose de nécessairement austère voire ennuyeux. Comme si le dépouillement graphique et ergonomique était un gage de sécurité sur cette étape critique du parcours client !

Pourtant, il y a vraiment un intérêt à développer une expérience utilisateur de qualité : lorsqu’ils sont bien designés et bien conçus, les formulaires de paiement peuvent être intuitifs, beaux, guider le client (notamment par une bonne gestion des erreurs), et même dans certains cas s’approcher du « Graal » du formulaire de paiement : donner envie de payer 😉

Exemple : entre ces deux formulaires de paiement par carte bleue, lequel avez-vous le plus envie de remplir ? 😉

ou :

Le deuxième est celui de Capitaine Train, le concurrent de Voyages-SNCF.

Bien sûr, il n’y a pas que le design graphique : la non-surcharge d’informations, le comportement naturel de la navigation au clavier (quand j’appuie sur Entrée, cela devrait toujours soumettre le formulaire… sinon il y a un problème), l’utilisation de balises HTML sémantiques pour optimiser l’autocomplétion par le navigateur, sont autant de facteurs qui participent de la qualité de l’expérience utilisateur.

Pour ne pas faire de jaloux 😉 , l’application iPhone de Voyages-SNCF est aussi un bon exemple d’expérience utilisateur pour le paiement : sur mobile, l’interface tactile donne une relation physique, presque intime avec le formulaire… et on est presque content de rentrer ses informations de paiement !


Et vous, quels sont les formulaires de paiement que vous appréciez sur le Web ?

Etude pour améliorer un site et méthode agile

Ce billet fait suite à la conférence organisée par Adobe.

J’ai trouvé le débat intéressant, et j’espère ne pas avoir été le seul de cet avis ;).

Un des sujets dont on a parlé : comment faire cohabiter intelligemment l’analyse ergonomique, les tests utilisateurs, avec la vie du site, la road map ?

Une option, qui me semble particulièrement intéressante, est de mettre en oeuvre une approche agile.

On pilote le projet en le faisant évoluer par petites itérations, au lieu du « big bang » de 18 mois.

Et bien, on peut doit tout à fait travailler en parallèle une approche orienté utilisateur, qui sera synchronisée avec les itérations mise en oeuvres avec la méthode agile.

C’est une très bonne pratique.

Par contre, on ne peut mettre en oeuvre une telle méthode que si l’entreprise qui héberge le projet est convaincu de l’intérêt d’une telle méthode, au niveau des décideurs.

Autre retour d’expérience qui m’a semblé fondamental : quand on accompagne une refonte, ou un projet e-commerce, il est très important d’accompagner le client sur l’ensemble de la durée de vie du projet.

Il arrive malheureusement souvent que les résultats des études utilisateurs ne soient pas bien mises en oeuvre : elles restent dans un tiroir…

Barcamp Prestashop – Présentation avec Catherine Barba

Juste un petite mise à jour pour le Barcamp Prestashop :

On va co-animer, avec Catherine Barba, la présentation suivante :

Ergonomie, tunnel de commande et relation client : 3 points clés pour la croissance de votre chiffre d’affaires

Beau programme ;).

Tout le programme des conférences, c’est ici.

Je dois vous avouer que j’aime bien ces présentations « en duo ».

Ce mode fonctionne très bien avec Olivier. Pas de raison que ça ne marche pas avec Catherine !

Bon, j’y retourne, faut bien préparer un minimum ;).

 

Une boutique en une page

Je suis tombé sur cette boutique :

Tout y est :

  • La navigation dans le catalogue, en haut à gauche
  • L’ajout des produits, avec le choix de la quantité
  • Le formulaire pour entrer ses coordonnées
  • Le paiement intégré
  • Et même une zone « coupon » pour bénéficier d’une réduction.

On est quand même bien bête de s’embêter avec tout un tas de pages, non ?

Allez, un ptit dernier conseil avant le WE – soignez les messages et les traitements d’erreurs !

Bon, je suis pas loin de passer en mode WE…

Donc, un bon ptit dernier conseil pour le WE :

Dans un site, il est important de bien travailler le traitement des erreurs en général, et les messages d’erreurs en particulier.

J’ai eu ce message sur un site :

Le message apparait sur un site quand il détecte une double validation du formulaire.

Sauf que le message est … n’importe quoi !

Un bon contre exemple donc.

Sur ce, bon WE à tous !

Ergonomie et processus achat pour… une station essence

Ne vous êtes vous jamais demandé pourquoi les automates des stations essence ont une ergonomie mal fichue ?

Moi, oui 🙂

Et bien, ce We, j’ai été agréablement surpris, par une station bien faite.

Exemple : on ne me demande pas le carburant (suivi de deux écrans de confirmations), celui si est sélectionné automatiquement quand je décroche le pistolet.

Détail ? Peut être, mais l’ergonomie, c’est bien un ensemble de détails, qui, mis ensemble, permettent de créer une cohérence globale, et un usage agréable.