L’utilisabilité des boutiques en ligne est un sujet très vaste qui nourrit des discussions sans fin depuis plus de 10 ans (j’y ai moi-même contribué récemment : De l’intérêt de soigner votre page de paiement). Une boutique en ligne est en effet un endroit où l’on doit à la fois séduire, rassurer, convaincre, fidéliser… ça fait beaucoup de choses en même temps et il en résulte toujours des dispositifs assez complexes (et qui se complexifient avec le temps).

Les efforts en matière d’utilisabilité et d’ergonomie incitative portent sur l’ensemble des pages d’une boutique (accueil, catégorie, produit, panier…) et plus particulièrement sur le tunnel de commande, une étape critique dans le processus d’achat. Dernièrement nous avons pu voir des marchands qui innovaient avec notamment Apple et American Eagle qui proposent un processus d’achat vertical (et non horizontal comme 99,9% des boutiques en ligne).

Dernièrement je suis tombé sur deux exemples de tunnel de commande simplifiés, notamment chez UI Stencils (qui commercialise de très pratiques kits pour faire du maquettes au crayon). La simplification commence dès le panier où l’on vous propose de commencer le processus en choisissant votre mode de paiement :

Le tunnel de commande n’est composé que de deux étapes avec un formulaire d’adresse de livraison minimaliste :

Le processus se termine dès la deuxième étape avec le choix du mode de livraison, la saisie du N° de carte et la validation :

Voilà c’est tout ! Non seulement ce tunnel d’achat réduit au minimum le nombre d’étapes, mais il est ne plus un modèle de lisibilité. L’expérience d’achat de cette boutique me fait relativiser les innombrables étapes et informations que l’on doit renseigner chez nos marchands français. Certes, ils proposent des scénarios de vente un peu plus sophistiqués, mais cet exemple devrait vous pousser à remettre en question la longueur du processus d’achat de votre boutique.

Cette boutique exploite la plateforme Shopify qui équipe également la boutique de Red Sweater, l’éditeur de la solution de blog MarsEdit. Cet éditeur a également fait le choix d’un tunnel de commande simplifié, mais également d’une boutique minimaliste puisqu’elle ne comporte qu’une seule page :

Cette page unique combine ainsi le catalogue, le panier ainsi que le choix du mode de paiement. C’est extrême, mais ça fonctionne bien puisque les infos sur les produits sont disponibles à un autre endroit du site (avec le support et toutes les infos sur les mises à jour).

Encore un fois, ces deux exemples ne sont pas compatibles avec la gamme ou les scénarios de vente de l’ensemble des marchands, mais devraient nous stimuler pour simplifier des processus d’achat qui n’ont pas beaucoup évolué sur ces 10 dernières années. J’ai ainsi beaucoup de mal à comprendre que très peu de marchands proposent l’achat en mode « invité » (est-ce que l’on vous force à créer un compte quand vous passez à la caisse d’une boutique ?).

Bref, deux expériences d’achat minimalistes qui devraient vous inspirer. Je profite de ce billet pour vous signaler la formation E-commerce que je vais donner le 23 juin prochain à Paris (Retours d’expérience et meilleures pratiques pour améliorer vote efficacité marchande) et qui abordera notamment l’optimisation du tunnel d’achat.

Avec la généralisation des écrans plats, la résolution moyenne des moniteurs qui équipent les internautes est en constante hausse (cf. StatCounter Global Stats). En conséquence de quoi, les pages des sites web s’allongent de plus en plus. Mais qui dit « pages qui s’allongent » dit « menus de navigation qui s’éloignent« . Le (petit) monde de l’ergonomie web est donc en train de débattre sur les menus de navigation qui restent collés en haut de l’écran (Docking Navigation Bars) et même les pieds de pages statiques (Static Footer Bars).

On retrouve ainsi un très bel exemple de menu de navigation qui se positionne au-dessus du contenu lorsque vous parcourez la page chez GamePro :

De même, on trouve un exemple de pied de page statique chez Cnet :

Dans ces deux précédents exemples, la gène est minime, car ces bars affichés en permanence ne prennent pas trop de place. Par contre, on ne les remarque pas forcément (surtout le pied de page de Cnet).

On trouve également des exemples de pied de page statique sur des sites marchands comme Comet :

Une astuce très pratique, car cette barre permet de caser le comparateur et la liste des derniers produits visités, le tout sans prendre trop de place.

L’intérêt de telles techniques est discutable :

• Dans le cas d’un site de contenu, elle facilite surtout le zapping d’une page à l’autre (augmentant mécaniquement le nombre de bannières affichées) ;
• Dans le cas d’un site marchand, elle déplace dans une zone moins exposée au regard des fonctions à valeur ajoutée (comparateur et liste des derniers produits).

Je suis tout à fait d’accord avec les premières conclusions exposées dans l’article : les hauts et pieds de page statiques ne compensent en rien un système de navigation / repérage défaillant. Ceci étant dit, il est tout à fiat possible de proposer des améliorations aux exemples cités plus haut :

• Ne pas imposer ces barres affichées en permanence et donner la possibilité de les replier ;
• Utiliser un fond transparent pour ne pas trop réduire la surface d’affichage ;
• Ne pas utiliser toute la largeur de la page, mais seulement une partie (comme peut le faire Chrome avec sa status bar) ;
• Ne pas se reposer uniquement sur ces barres et doubler les fonctionnalités dans la page elle-même.

Plus que pour les sites de contenu, c’est avant pour les sites marchands que je vois un intérêt à cette technique. Il serait ainsi tout à fait envisageable de combiner les deux : le panier, compte-client et pourquoi pas la recherche dans la barre de haut de page, le comparateur, les derniers produits visités et même le rubricage dans le pied de page.

Je n’ai pas encore trouvé de site utilisant les deux, mais si vous avez des exemples, je suis preneur.