Archives par mot-clé : Ergonomie incitative

La bonne gestion du désabonnement par Fab

Pour un site comme Fab.com, la gestion des abonnés est juste un élément fondamental.

Quand on clique sur le lien pour se désabonner, on arrive sur la page suivante :

Je n’avais jamais vu ce type de page aussi bien faite :

On est en même temps dans le plus grand respect de ce que souhaite l’internaute, et en même temps, on cherche des solutions, on pousse des options.

Ainsi dans cette page, le premier bouton, bien clair, permet de faire ce pourquoi on est venu : se désabonner.

Mais juste en dessous, la page propose plutôt de mieux régler les options d’abonnements, bien riches d’ailleurs.

Si on insiste, et qu’on clique sur le bouton pour se désabonner de tout, on arrive sur la page suivante :

Là encore, le message est assez juste. Le désabonnement est bien pris en compte, et la page le confirme.

Mais le bouton incitatif propose de se réabonner.

Encore une fois, tout cela doit être fait de manière subtile :

En premier lieu, on respecte les demandes et les choix de l’internaute. Rien de pire que de chercher à lui forcer la main.

En deuxième lieu, on cherche des solutions pour garder le lien, et proposer un service adapté.

Well done 🙂

L’ergonomie incitative : il reste du travail !

Prenons les plus gros sites e-commerce (d’après le classement de la Fevad, et en enlevant les sites étrangers) :

  • CDiscount
  • Priceminister
  • Fnac
  • Voyages Sncf
  • La Redoute
  • VentePrivée
  • Pixmania

Je m’arrête là.

Ces sites mettent ils en place les principes de l’ergonomie incitative ?

Pour rappel, les principes de l’ergonomie incitative sont assez simples.On peut résumer de la façon suivante :

L’idée est de proposer à l’internaute un « chemin unique », balisé par un code graphique sans ambiguïté.

Concrètement, sur les sites marchands, il s’agit bien sûr de baliser le chemin, depuis l’ajout au panier jusqu’à la confirmation de commande.

Donc, le bouton auquel on veut associer l’ergonomie incitative doit avoir la même forme, la même couleur, les mêmes codes graphiques, sur toutes les pages.

De plus, la couleur doit trancher, par rapport à l’ensemble des autres couleurs du site.

Petit plus appréciable : le bouton est encore plus incitatif s’il change au survol et au clic.

La référence dans le domaine, je ne vais pas vous étonner, c’est Amazon bien sûr, avec son code graphique bien connu :

(on verra, sur un autre billet, la différence entre ergonomie et ergonomie incitative)

Allons voir sur les sites en tête du classement ce que ça donne.

Premier candidat : CDiscount

Le bouton d’ajout au panier est bien sur un code couleur qu’on ne retrouve nul part ailleurs.

Sur la page panier, les choses se gâtent :

Le bouton qui devrait être incitatif, c’est le bouton « passer commande », tout en bas de la page.

La bande verte au dessus « mon panier » reprend les codes couleurs incitatifs. On n’est donc plus avec de l’ergonomie incitative, le bouton est noyé dans la page (et tout en bas en plus).

Deuxième candidat : Priceminister

On n’a pas d’ergonomie incitative : la couleur du bouton est bien trop proche de la couleur du logo, et de la couleur du bouton Rechercher.

Sur les pages suivantes, le bouton principal devient rouge, puis bleu sur la page d’après…

Donc, on est bien loin d’une ergonomie incitative.

Troisième candidat : Fnac.com

La couleur du bouton est celle du logo, et cette couleur est reprise un peu partout sur le site.

Dommage, car sinon, d’après ce que j’ai vu, ce site a fait un véritable travail de fond pour avoir une vrai cohérence sur les boutons, dans les différentes pages.

 Quatrième candidat : Voyage-Sncf

La aussi, il y a eu un vrai travail d’armonisation des boutons, mais la couleur ne ressort pas du tout : bleu sur bleu…

 

Bon, vous aurez compris l’idée : même les plus grands sites ne mettent pas en place certains principes de base de l’ergonomie incitative.

Vous pourrez me dire : et alors ? Ils ne s’en sortent pas plus mal.

Et bien ça se discute 😉

Bien sûr ces sites font de beaux chiffres. Mais ils pourraient faire mieux… Améliorer le taux de transformation, sur de tels sites, c’est super important, comme sur n’importe quel site en fait.

Mais les sites sont gros, les chemins de décisions pas toujours linéaires… Et les sites s’en ressentent.

Le côté positif, c’est que ça montre qu’on a du chemin à faire, des marges de progression 😉

 

[WANTED] D’où vient ce Dashboard e-commerce ?

Cet article est écrit par Julien Chaumond, auteur du livre Social commerce et CEO de Productism. Vous pouvez aussi suivre Julien sur Twitter.

Depuis quelques mois j’utilise ce screenshot d’un dashboard e-commerce dans des présentations et je le cite en exemple d’une interface claire avec un design réussi et une présentation des données qui les rend exploitables (« actionnables« ) facilement.

Problème, je ne me rappelle plus quel service a implémenté ce dashboard : est-ce que ça dit quelque chose à l’un d’entre vous ? Boutique open source, ou service en SAAS ?

Vendre en quelques clics avec TinyPay.me

Il existe plusieurs solutions, permettant de créer un site e-commerce en quelques clics, de manière complètement gratuite.

TinyPay.me est l’une de ces solutions.

Voici un exemple de boutique, avec moins de 10 produits en vente :

Un clic sur un produit :

La présentation est simple et de bon gout, avec un bouton « Acheter » qu’on ne peut pas ne pas voir ;).

Un clic sur ce bouton permet d’entrer dans le processus achat :

Le format du formulaire est particulièrement bien fait :

Quand un champ a le focus, une bulle d’aide s’affiche au dessus.

C’est une très bonne idée, bien complémentaire par rapport au format choisi : les champs ne sont pas présentés par un texte extérieur. Ce texte est collé à l’intérieur du champ. Avantage : gros gain de place. Inconvénient : quand l’internaute a commencé à taper quelque chose, il ne voit plus ce texte. Ici, la bulle bleue règle ce problème.

Le processus est en deux étapes : une fois ce formulaire rempli, on est envoyé sur la page de paiement Paypal.

Simple et efficace.

Bon, après, il faut bien avoir en tête qu’une telle boutique ne permettra de vendre que si on fait venir du trafic !

 

Ergonomie et ergonomie incitative selon Google

ça ne vous aura pas échappé, Google est en train de déployer de nouvelles interfaces.

Ce qui m’a intéressé et marqué, c’est le travail sur l’ergonomie des services, et l’usage de ce qu’on appelle l’ergonomie incitative.

L’ergonomie incitative, c’est, sur les pages du site, mettre en avant une seule action.

Pour un site e-commerce, c’est particulièrement important de mettre ce type de pratique pour le processus achat.

GMail  :

L’ergonomie incitative, c’est le gros bouton rouge « COMPOSE MAIL ». On ne peut pas le louper.

Dans cette page, Google définit plusieurs types de boutons :

  • Rouge : c’est LE bouton a ne pas louper
  • Bleu : c’est la couleur qu’à choisi Google pour tous les boutons de recherche. C’est une couleur qui ressort plutôt bien, mais moins que le rouge 😉
  • Les boutons gris, pour les actions courantes.
Tous les boutons sont « actifs » au survol de la souris et au clic : ils changent de couleur, de « profondeur ». Voici les trois états du bouton « COMPOSE MAIL » :
Subtil ? Oui, mais ça fait parti des petites choses, qui améliorent l’expérience de l’utilisateur.
Autre détail : ces boutons sont construit en HTML / CSS. Avantage : bien plus léger qu’une image, et de plus, ça se comporte mieux quand on change la taille de l’affichage.
Cette ergonomie est reprise, sur le calendrier :
La cohérence entre les deux service est particulièrement soignée.
Google déploie progressivement cette nouvelle interface sur l’ensemble de ses services.

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.

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 ?

Parlons paiement au Café Croissance

Je suis invité, le Café-Croissance, à parler paiement et performance.

Un beau sujet…

Vaut il mieux avoir le paiement sur le site e-commerce ou pas ?

Comment optimiser cette page clé ?

Je suis parti de pas mal d’exemples, pour discuter de tout ça de manière concrète.

Au fait, c’est le 17 Novembre, au Fouquets (et alors, c’est pas bien le Fouquets ? 😉 )

Pour s’inscrire, c’est par ici.