Il se passe quoi quand on clique sur le bouton “Acheter” ?

Il y a un avant et un après.

Avant, le client se promène dans un catalogue, il regarde, il flâne.

Le client a décidé de cliquer sur le bouton “Acheter” (ou “Commander”, ou “Ajouter au panier”, ou…).

Il a fait un premier pas vers l’acte d’achat.

Quelles sont les actions qu’on peut lui proposer, à notre client ?

Certains sites ne proposent rien du tout. On a cliqué sur acheter, le produit est ajouté au panier, et le client est ainsi plutôt invité à poursuivre sa balade dans le catalogue des produits (au risque qu’il n’enclenche jamais ce processus achat).

A l’opposé, d’autres sites enclenchent directement le processus achat (présenter le panier, et proposer de s’identifier).

Entre les deux, Amazon propose, juste après le clic, cette page :

L'écran, juste après le clic sur le bouton

Un bon “80%” de l’écran est pris par des produits complémentaires, poussés par Amazon.

On comprend bien l’idée : le client vient d’acheter un produit, c’est le bon moment pour lui proposer des produits liés.

Avantage : augmenter le panier moyen.

Risque : baisser le taux de transformation, en ne mettant pas tout de suite le panier sous les yeux du client.

Intéressant de noter que sur Endless, Amazon ne cherche pas du tout à pousser des produits complémentaires, en enclenchant directement le processus achat. Pourquoi ? A l’évidence, cela dépend des produits que l’on vend. Si vous vendez des produits pas très chers, vous avez intérêt à ce que les clients restent dans la boutique et remplissent le panier. Vous n’allez pas présenter la caisse à tout bout de champ.

A contrario, si vous vendez des produits chers, votre objectif prioritaire, une fois que le client a mis un produit dans le panier, c’est qu’il passe à la caisse.

Intégrer le paiement dans le site marchand : suite

Ce billet précédent a généré pas mal de commentaires : tant mieux !

Je souhaite donc compléter un peu ce premier billet, et apporter quelques précisions.

Il faut à mon sens “séparer les variables” :

  • Intégrer le paiement dans le site marchand, cela ne veut pas dire qu’on stocke les informations en base de données ;
  • Cela ne veut pas dire non plus qu’on doit nécessairement ajouter une étape après la saisie du n° de carte.

A mon sens, c’est important d’intégrer le paiement car cela apporte un plus grand confort pour le client, avec des phases mieux maîtrisées, d’un point de vue ergonomie et design.

Après, sur la façon de composer les phases de l’achat, je pense qu’on ne peut pas se fier aux ‘intuitions personnelles’ des uns et des autres, car comme rien n’est normalisé, que chaque site fait pratiquement ’sa sauce’, on est tous plus ou moins à l’aise avec tel ou tel processus : méfions nous de ce que j’appele le “self marketing (généraliser à partir de ses propres envies).

Il faut revenir au basique : quelle solution apporte le meilleur taux de transformation ? C’est le seul paramètre qui me semble valable pour ce sujet.

Le chemin vers la qualité : intégrer le paiement dans le site marchand

Vous l’avez sans doute remarqué, au moment de passer à “la caisse”, les sites se partagent en deux catégories : ceux qui intègrent directement la fonction de paiement et ceux qui redirigent l’utilisateur vers une page, plus ou moins “customisée”, d’une banque.

Bien sûr, c’est plus facile et plus rapide d’opter pour la deuxième solution.

Mais la qualité finale n’est pas du tout la même.

C’est à mon sens très important de bien faire cette intégration.

Cela permet d’avoir une homogénéité complète, de mieux gérer l’enchaînement des étapes, autour du paiement.

Mais surtout, cela permet de dissocier la validation de la commande, de l’entrée du n° de carte bleue, en mettant une étape de confirmation après l’entrée de ce numéro.

Ainsi, sur Endless :

Etape de paiement sur Endless

Dans cet écran, on rentre son n° de carte bleue, et ce n’est pas la dernière étape.

La dernière étape de validation définitive de la commande (”Place Order”) vient ensuite.

Dans les sites utilisant le paiement “externe”, on demande en fait au client de valider sa commande sans la voir (l’écran de saisie du n° de carte bleue ne permet pas d’afficher les produits achetés).

Ici, sur Endless, on demande à l’utilisateur d’entrer toutes les données le concernant (Nom, prénom, adresse, n° de carte, …) et ensuite, il peut valider sa commande en voyant quelle est cette commande : les produits, l’adresse…

Je suis convaincu que cela impacte directement le taux de transformation.

Processus achat : l’exemple Endless

Je vous avais bien dit que je vous en reparlerai ;)

La plupart des sites sont constuits avec un “squelette” universel, valable sur l’ensemble du site, qui définit souvent la barre d’entête et les colonnes.

Ainsi, dans l’ensemble du site, on retrouve ces éléments structurants.

L’avantage, c’est qu’on n’a pas à programmer ces éléments à chaque fois. Autre point positif : quand on modifie ce squelette, la modification est valable sur l’ensemble du site.

Inconvénient ? Et bien, dans certaines parties du site, ces éléments ne sont pas forcément adaptés.

Exemple : pendant le processus achat, quand le client doit “passer à la caisse”, est-il vraiment pertinent de lui afficher les catégories, la barre de recherche, de pousser des produits en promotion, … ?

Endless a répondu par la négative et propose un processus achat hyper minimaliste.

Déjà, le site Endless est particulièrement dépouillé :

Endless : sélection des produits

Le seul élément du squelette est la barre en haut.

Comme bien souvent pour les sites proposant des produits chers, dès que le client clique sur “Acheter”, le site propose de visualiser le panier, et de “passer à la caisse” :

Phase 1 du processus achat pour Endless

Dans cette étape intermédiaire, la barre d’entête est toujours présente.

Tout change dans la phase suivante :

Phase 2 du processus achat pour Endless

Le seul repère, permettant de savoir qu’on est bien chez Endless : le logo, en haut à gauche.

Pour le reste, on a juste un “chemin de fer” en haut à droite (liste des étapes pour le processus achat) et sur 90% de l’écran, le formulaire.

Avec un tel choix, Endless a la place de mettre une grande police et de bien aérer ses écrans.

Etape suivante :

Phase 3 du processus achat pour Endless

Là encore, le formulaire est particulièrement dépouillé.

Et comme pour Amazon (bon, d’accord, c’est facile, c’est la même boite), Endless ne demande que des champs obligatoires, et n’encombre pas ses formulaires avec des champs superflus.

Enfin, l’étape paiement :

Phase 4 du processus achat pour Endless

Minimaliste et maîtrisé : le paiement est intégré dans le site (on ne bascule donc pas sur une page gérée par une banque).

C’est important car cela permet de ne pas terminer le processus achat par l’entrée du numéro de carte, et d’ajouter d’autres étapes après.

Capter l’attention des clients - l’exemple Lancôme

Le client doit savoir où cliquer pour acheter.

Il doit le savoir, sans avoir à chercher dans la page.

Page produit du site Lancome, avec un bouton

Les pages produits du site Lancôme sont dans les noirs.

Le bouton rouge “Acheter” ne passe pas inaperçu (même dans l’image ci-dessus, pourtant réduite de 50%) !

C’est le seul élément de cette couleur de la page : l’oeil ne peut pas le manquer.

Les nuls de l’ergonomie : suite

Et celle là, elle vous plait comme interface ?

Messge d'erreur particulièrement gratiné

Ah, on est loin de l’ergonomie incitative là !

Message d’erreur obtenu lors de l’achat, ou plutôt de la tentative d’achat d’un logiciel en ligne.

L’ergonomie incitative par l’exemple

Copie d'écran de la page d'accueil de Blogger

Si l’utilisateur ne clique pas sur le bouton en bas à droite, on ne peut plus rien pour lui ;) !

Si ce sujet vous intéresse, ne manquez pas la journée de l’utilisabilité de l’ami Fred.

Guider le regard de l’utilisateur

Voici comment, sur Mac, on présente un choix à l’utilisateur :

Boutons Oui et Non sur Mac

Le choix par défaut ressort tout de suite, et il est à droite.

(suite de ce billet)

Nouveau service à venir Flex pour “browser” des images

Vous connaissez ces nouvelles interfaces, pour nous aider à ranger, trier, chercher des documents, des photos :

Et bien une nouvelle boite, TileUI, devrait bientôt nous proposer un service, par dessus FlickR, pour qu’on puisse faire tout ça directement dans son navigateur, avec la techno Flex derrière.

Le bord de la fenêtre…

Cela fait assez longtemps que j’ai ce billet en tête…

Le sujet, c’est une réflexion sur l’avenir des navigateurs Internet et de nos bureaux électroniques.

Donc, au début, on avait d’un côté un navigateur Internet, permettant d’afficher du texte, des liens et des images, et de l’autre des applications “lourdes”, qu’on pouvait installer directement sur le bureau de l’ordinateur.

Aujourd’hui, les choses sont beaucoup moins simples :

Dans le navigateur…

Dans le navigateur, on fait aujourd’hui tourner de véritables applications, avec leurs propres fenêtres. La fenêtre du navigateur est devenu un bureau dans le bureau.

Premier exemple significatif : Meebo, avec les fenêtres qu’on peut déplacer, retailler :

Fenêtre de Meebo, dans le navigateur

Deuxième exemple, évidement, Netvibes. Ici, on a un espace plus structuré (colonnes prédéfinies), mais avec une vrai liberté pour composer l’espace (déplacer les fenêtres, changer l’apparence, …) :

Fenêtre de Netvibes, dans le navigateur

Dans ces deux exemples, la richesse applicative, dans le navigateur, est impressionnante.

Cette évolution, vers des applications de plus en plus riches, rend certaines fonctions du navigateur obsoletes, comme le bouton “Back”, qui bien souvent, n’a plus aucun sens.

Sur le bureau de l’ordinateur…

Le bureau de l’ordinateur est l’espace pour faire tourner les applications locales…

Mais c’est bien évidement un espace fort convoité, par tous les grands acteurs.

Sun, avec Java, a tenté de banaliser ce bureau, en proposant des applications “universelles”, capable de tourner sur tous les ordinateurs.

Aujourd’hui, l’espace du bureau est convoité par Google, qui, au delà de Google Desktop, prépare un Google OS.

Enfin, Adobe avec Air, propose un modèle finalement assez proche de Java, en cherchant à ajouter une couche, permettant de rendre les applications complètement indépendantes de l’ordinateur.

Ces tendances convergent vers un point : faire tourner sur le bureau des applications :

  • Riches visuellement ;
  • Qui peuvent utiliser des données et des ressources locales (disque, périphériques audio, video, …) ;
  • Qui peuvent utiliser des données distantes (mode connecté ou déconnecté).

Le bord de la fenêtre…

Le bord de la fenêtre du navigateur, c’est la limite très fine qui sépare ces deux tendances.