François Ziserman : entrepreneur, IA et ébénisterie
Je suis tombé sur ce site :
Incroyable à plusieurs niveaux :
Quelle maîtrise !
(via Eric)
Peu de concepteurs d’applications arrivent à vraiment bien utiliser les animations (effets de zoom, de « disparition », de fondu, 3d, …).
En général, ces effets sont utilisés pour « faire joli ».
Sur Léopard, le dernier OS d’Apple, les effets visuels sont là pour aider l’utilisateur, pour enrichir la métaphore.
Ils sont beaux, ok, mais surtout, ils ont du sens !
Le plus bel exemple est, à mon sens, Time Machine :
Je l’ai installé ce Week-End, et c’est réellement impressionnant. Comme souvent pour Apple, on se dit : « mais pourquoi personne n’avait fait ça avant » ? Il y a pourtant des sociétés spécialisées dans les systèmes de sauvegarde, et certaines font des produits « soit disant » grand public (avec des centaines de paramètres à régler…).
L’idée de Time Machine, c’est qu’un système de backup, c’est en fait un système qui permet de voyager dans le temps : on peut reculer, reculer, et voir les fichiers dans l’état où ils étaient à un moment donné, dans le passé.
Ensuite, tout est fait pour que l’utilisateur soit en plein dans cette métaphore. Le produit a ainsi une mise en scène incroyable.
Tout cela permet d’illustrer plusieurs points :
Premier élément intéressant, la page d’accueil.
Techniquement, l’image n’est pas une image, c’est du flash. Intérêt ? la scallabilité : l’imager s’adapte à la taille de l’écran.
A mon humble avis, la barre de navigation dans les catégories, tout en haut, n’est pas tellement incitative.
Les catégories ensuite :
La zone du milieu est encore du Flash, et encore ici, se retaille en fonction de la largeur de l’écran, avec un minimum de 900 pixels.
On navigue dans les produits avec le « scroller » horizontal, pltôt bien fait.
En cliquant sur un produit, on arrive à une sous-catégorie :
Très proche de la catégorie : l’utilisateur n’est pas déconcentré par de nouveaux modes de navigation. Autre point tout à fait clé : la taille des visuels et la qualité des photos : excellent !
En cliquant sur les petits « échantillons » sous les vêtements, on peut directement voir le vêtement dans les différentes couleurs.
On arrive sur la fiche produit en cliquant sur un produit :
Vous voyez quoi ?Une grande photo bien sûr. Elle est simplement énorme, et de très grande qualité.
On peut la voir encore plus grande, en cliquant dessus (on ouvre alors une popup, c’est pas la solution que j’aurais recommandé mais bon…).
Un bel exemple d’une mise en page très sobre, axée sur la mise en avant des produits par des photos bien faites et bien mises en avant.
Kinset est une nouvelle startup, qui propose une technologie permettant de créer des boutiques 3D.
Le système fait un peu penser à Second Life : il faut télécharger un logiciel spécifique (uniquement sur PC…) qui permet ensuite de naviguer dans des espaces marchands 3D.
Comme le montre ces images, un des problèmes majeur de ces espaces virtuels, c’est de rendre ces espaces vivants. Pour l’instant, les allées sont bien vides, on se sent vite très seul !
L’autre point délicat, c’est évidement la 3D elle même : comment naviguer simplement, comment manipuler les objets que l’on veut acheter…
Aujourd’hui, je dois dire que je suis plus convaincu de l’intérêt de ces technos pour présenter les produits, voire de les manipuler, dans un site web classique… Je vous présenterais dans un tout prochain billet une boite française qui propose une solution qui va dans ce sens…
Quand on demande aux internautes :
« pourquoi avez vous abandonné votre achat en cours de route ? »
Plus de 40% répondent :
« C’est à cause des formulaires :
trop long, trop compliqués. »
C’est l’un des fondamentaux du e-commerce.
« Le travail sur l’ergonomie d’un site peut-être la plus rentable source de gains en terme de taux de transformation »
(via Capitaine Commerce)
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 :
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.
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 » :
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.
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 :
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.
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é :
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 » :
Dans cette étape intermédiaire, la barre d’entête est toujours présente.
Tout change dans la phase suivante :
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 :
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 :
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.