Aviez-vous remarqué qu’en quelques années les carrousels avaient envahi quasiment l’ensemble des sites de média et des boutiques en ligne ? Les carrousels sont ces énormes blocs où des extraits de contenus défilent, comme un ruban horizontal. S’ils sont bien pratiques pour faire rentrer toute l’actualité et les promos, leur principal intérêt est de pouvoir “donner vie” à un site. Je ne savais qu’il y avait des sites vivants et d’autres morts. Je ne savais pas non plus que les internautes refusaient de visiter les sites statiques où “il n’y a pas de vie”. Bref, j’ai comme l’impression que la profession a adopté les carrousels sans trop se poser de question. Pourtant, ces éléments d’interface soulèvent de nombreuses questions :

• Le principe de défilement horizontal est-il simple à utiliser ?
• Les différents panneaux qui se succèdent fournissent-ils une information précise sur le contenu du site ?
• Les couleurs vives, titres racoleurs et animations ne font-ils pas trop ressembler les carrousels à des bannières ?

Bref, la question est de savoir si l’énorme place attribuée aux carrousels en page d’accueil, au détriment des autres éléments, est justifiée. Et visiblement la réponse est : Non ! Il y a en premier lieu le gros problème d’utilisabilité de ces panneaux qui défilent : le temps que les internautes lisent le message affiché et prennent la décision de cliquer, c’est un autre panneau qui s’affiche (The Unstoppable Carousel).

Ceci étant dit, les principaux points de vigilance de l’utilisabilité des carrousels ont déjà été identifiés : 5 Big Usability Mistakes Designers Make on Carousels. Si vous êtes à la recherche d’un bon exemple, le portail de la BBC semble avoir respecté tous ces points :

Le carrousel est parfaitement identifié en tant que tel (“Top News Story“), le point orange indique le nombre de panneaux ainsi que le panneau actif, des flèches permettent de basculer plus rapidement sur les autres panneaux. Le survol avec la souris permet de mieux comprendre son fonctionnement :

Le bouton Play/Stop afficher un plein milieu permet d’arrêter le défilement et les vignettes sur les flèchent servent à anticiper les prochains contenus. Ce carrousel est donc un modèle du genre, qui fonctionne parfaitement sur un site média, mais qui n’a pas forcément sa place sur une boutique en ligne.

Très largement utilisés sur la page d’accueil des boutiques en ligne, les carrousels se révèlent pourtant très encombrants et pas forcément efficaces : Don’t Use Automatic Image Sliders or Carousels, Ignore the Fad. Les différents tests réalisés sont sans appel : les carrousels sont soit ignorés, car confondus avec des bannières, soit ils monopolisent l’attention d’utilisateurs hypnotisés par le mouvement des panneaux sans réellement retenir les messages. Des observations confirmées par cette discussion entre professionnels : Are carousels effective?.

Les carrousels ne méritent donc pas la place qu’on leur accorde. Mais alors pourquoi les retrouve-t-on partout ? La réponse semble se trouver dans cet article : Carousels on ecommerce sites, are they worth bothering with?. La raison pour laquelle les carrousels sont si populaires est qu’ils permettent de faire rentrer autant de promotions que possible et d’éviter ainsi des conflits internes sur la priorité à donner à telle ou telle opération.Cette raison peut vous décevoir, mais en tout cas elle ne me surprend pas réellement. De nombreux choix de conception sont ainsi guidés par l’ego ou sont le fruit de compromis pour éviter des gue-guerres internes.

Ce qu’il faut retenir de ces différents écrits et discussions est que des blocs de promotion ou de mise en avant statiques sont bien plus efficaces qu’un carrousel. Il va donc falloir vous armer de courage pour convaincre vos collègues d’abandonner cette “norme”, au même titre que la règle des 3 clics. Pour se faire, le meilleur moyen est de vous appuyer sur des statistiques : placez un marqueur sur le carrousel suffira à démontrer un taux de clic très faible. Sinon vous pouvez également argumenter sur le fait que les gros sites de commerce en ligne comme Soap, Zalendo ou MisterGoodDeal n’utilisent plus les carrousels.

L’année dernière je constatais un regain d’intérêt des éditeurs de site pour proposer de nouvelles expériences d’achat et de consultation. Pourquoi chercher à réinventer la roue alors que le commerce en ligne tourne à plein régime ? Justement parce qu’il tourne à plein d-régime et que la compétition n’a jamais été aussi forte (marges ridiculement basse, livraison gratuite, satisfait ou remboursé pendant un an…). Pour se démarquer, il ne reste plus beaucoup de leviers à activer : les prix sont déjà au plus bas, les performances au plus haut et les interfaces simplifiées à l’extrême. La seule solution pour sortir du lot consiste alors à proposer une expérience différenciante.

Prenez par exemple le secteur du tourisme :

• Google préempte le bas du marché avec deux interfaces de recherche verticales ultra-optimisées (Flights et Hotel Finder) ;

  

• Hipmunk s’est imposé comme La référence en matière d’interface de recherche sur le web et sur terminaux mobiles (Hipmunk, la nouvelle référence de la recherche de vol et Hipmunk Launches Hotel Search For iOS And Android) ;

  

• Kayak a même récemment lancé une application marchandesur le Mac App Store.

  

Face à une telle débauche de créativité, plusieurs chaines hôtelières (Hilton, Hyatt, InterContinental, Marriott et Wyndham) se sont fédérées pour proposer leur propre moteur de recherche : Big Chains Launch “Hulu For Hotels”. Pourquoi cette comparaison avec Hulu ? Car Hulu est LA référence en matière d’expérience utilisateur, surtout face à des concurrents très puissants (Vidéo en ligne, Hulu vainqueur par K.O.).

Bref, ces chaines hôtelières ne pouvant pas se battre sur l’argument du prix ou de la simplicité d’usage ont tout misé sur la qualité de l’expérience utilisateur avec Roomkey. Le moins que l’on puisse dire, c’est que le résultat est à la hauteur de la concurrence avec une interface de recherche tout simplement splendide.

La magie commence dès la page d’accueil avec des couleurs et visuels très chaleureux :

Une fois les critères saisis, le bandeau de recherche remonte en douceur et la liste de résultat s’affiche dans une parfaite transition :

Tout a été soigné dans le moindre détail sur cette liste : le choix des typos, l’arrondi des cartouches, les pictos et éléments d’interface… Le résultat est un mélange de simplicité, de sobriété et de raffinement, un modèle du genre !

Le basculement d’un mode d’affichage à un autre se fait avec une très belle transition. Cerise sur le gâteau : lorsque vous descendez vers le base de la page,  la carte reste verrouillée en haut de l’écran pour que vous puissiez localiser les hôtels du bas de la liste.

De mémoire, j’ai rarement vu une aussi belle interface. Autant vous dire que je suis plus qu’enthousiaste à l’idée d’une lutte entre les concurrents sur le terrain de l’expérience utilisateur. J’ai vraiment hâte que ce type de compétition se déporte sur d’autres secteurs comme la distribution ou la banque. Quoi que… ça a déjà commencé avec des nouveaux entrants comme SimpleBank et Yoyo.

L’acte d’achat en ligne n’est pas une démarche naturelle, il requiert une contextualisation particulière de l’offre et une mise en scène très soignée chez les e-commerçants. Au cours du processus d’achat, le panier est une des étapes/pages les plus importantes, car il est la charnière entre le parcours client et le tunnel de commande. Je vous propose ainsi d’étudier un certain nombre de trucs et astuces publiées chez mes confrères.

Commençons avec cette très belle infographie de Monetate qui résume un certain nombre de bonnes pratiques : Shopping Cart Abandonment and Tips To Avoid It.

Nous avons ensuite cette check-list de GetElastic sur les leviers de création de confiance (9 Ways to Build Trust in Checkout) :

• Acquérir un certificat SSL ;
• Affichier des badges de sécurité (comme celui de FIA-Net ou le tout récent Google Trusted Stores) ;
• Utiliser la bonne terminologie dans vos boutons (“Paiement sécurisé“) ;
• Afficher un lien vers la politique de confidentialité ;
• Fournir des explications sur le code de sécurité (de préférence avec une illustration du dos d’une carte bancaire) ;
• Proposer un tchat ou un rappel immédiat du service client ;
• Fournir des explications complètes, ou un lien vers les conditions d’expédition à l’étranger ;
• Proposer des systèmes de paiement alternatifs ;
• Afficher une adresse physique.

Chez ClickZ ils proposent également une série de bonnes pratiques (3 Shopping Cart Promotional Tactics for the Holiday Season) :

• Ajuster les frais de livraison en fonction du montant du panier (notamment pour les “petits” paniers dont le montant est inférieur aux frais de livraison) ;
• Offrir la livraison au-delà du seuil psychologique des 100$ (ou 100€) ;

  

• Aligner les promotions individuelles sur le taux d’abandon des produits.

Les rédacteurs de GetElastic ont également publié un article fort intéressant sur le moyen de créer un sentiment d’urgence : Creating Urgency on the Shopping Cart Page.

Dernier conseil chez Monetate qui insistent sur l’affichage d’éléments de réassurance au plus près du bouton de passage à l’acte : Cart Messaging Matters, We Guarantee It.

Avec ça, vous pouvez donc faire le plein de bons conseils et astuces pour améliorer l’efficacité de votre panier. Sachez qu’il existe d’autres astuces, comme par exemple les techniques de récupération de paniers abandonnés (8 Tips for Recovering Abandoned Shopping Carts).

Même si je suis convaincu de l’importance “stratégique” du panier dans l’acte d’achat, il y a également de nombreux points à surveiller / améliorer au niveau du tunnel de commande, mais ça fera l’objet d’un autre article. Pour patienter, je vous propose cette vidéo satyrique publiée par les équipes de Google Analytics :

La suite en seconde partie de mois…

Le web est constitué d’une infinité de sites, plus ou moins jeunes. Certains sites changent régulièrement, d’autres sont tellement connus qu’ils se contentent d’une refonte tous les 10 ans (W3C, IMDB, MSDN… quand les dinosaures se font une jeunesse), d’autres doivent se faire forcer la main (Propositions de refonte pour Wikipedia et Craigslist). Même s’il n’existe pas réellement de règle sur la fréquence idéale de mise à jour ni sur l’obligation de coller aux “tendances” graphiques, il y a toujours des irréductibles pour traîner des pieds. De façon surprenante, les dernières refontes majeures d’Amazon et Ebay datent d’il y a 4 ans, à moins d’un mois d’intervalle (Une nouvelle version pour eBay et Une nouvelle version pour Amazon). Ils se sont visiblement donnés le mot, car les deux ancêtres de l’internet se en train de déployer quasi simultanément une nouvelle version.

Commençons par Ebay qui semble avoir lancé son chantier légèrement en avance avec une mise en page à étages :

Cette nouvelle page d’accueil privilégie visiblement la sobriété, car elle suprime la couleur jaune historiquement utilisée dans le menu de navigation. Pour cette nouvelle version, nous avons donc droit à une hiérarchisation très formelle des unités d’information : la recherche, la navigation, la réassurance (Welcome, Shop safely) et la communauté (Popular). Une large place est encore réservée à la publicité et à l’auto-promotion (le gigantesque carrousel au centre de la page).

Concernant la page intérieure, un gros effort a été fait pour simplifier la compréhension des différentes versions d’un même produit (New, Refurbished, Used, Bundles…) et une présentation beaucoup plus proche de ce que l’on trouve sur des sites marchands traditionnels :

Avec cette refonte, Ebay souhaite donc développer la performance marchande de sa plateforme, au détriment peut-être de ses contenus ou de la communauté.

Pour Amazon la refonte est plus radicale avec un objectif d’interopérabilité : Amazon is testing a slick new site design, built with tablets in mind. Le haut de page est donc réduit au minimum avec un menu de navigation replié par défaut et un gigantesque moteur de recherche :

Visiblement cette refonte n’est que partielle, car elle ne concerne que le header. Vous constatez de plus que sur la version ci-dessus ce dernier est utilisé à des fins d’auto-promo, mais que dans sa version standard, le traitement graphique du header est d’une sobriété à toute épreuve :

Nous avons donc confirmation que le coeur de page ne change pas et que la refonte se concentre sur une réorchestration du header et principalement du menu de navigation. La raison de cette refonte est très simple : Le menu de navigation actuel fonctionne très bien sur un ordinateur, mais est très problématique sur une tablette où il n’est pas possible de survoler un item avec la souris.

Outre une plus grande sobriété pour donner plus d’importance aux produits, la motivation première d’Amazon semble donc être d’anticiper la montée en puissance des tablettes avec une conception orientée multi-écran. Pour le moment cette nouvelle version n’est pas encore déployée en Europe, et j’attends avec impatiente de pouvoir la tester sur différents terminaux mobiles.

MàJ (21/09/2011) : Visiblement l’approche d’Amazon fiat des émules car la BBC s’y met également : The BBC debuts new touchscreen-inspired homepage design.

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.

En cette période de Noël, le commerce en ligne n’a jamais aussi bien marché en France. Et pourtant… la plupart des boutiques en ligne proposent une expérience d’achat massacrée par la page de paiement, ou plus précisément par la page de saisie de la carte bancaire.

Illustration avec Archiduchesse, une boutique particulièrement soignée jusqu’à son tunnel de transformation et la page de sélection du moyen de paiement :

Vous choisissez un type de carte bancaire… et là c’est la catastrophe :

Une page en complète rupture avec la charte graphique / ergonomique du site :

• un fond de page beige sale (pourquoi ne pas utiliser des logos avec un fond transparent ?) ;
• une typographie anachronique (qu’est-ce que ça leur coûte d’utiliser de l’Arial ?) ;
• une organisation chaotique (le champ de saisie des trois chiffres positionné dans le coin du double cadre est invisible) ;
• une hiérarchie visuelle incohérente (pourquoi le bouton d’annulation est-il trois fois plus gros que celui de confirmation ? Pourquoi ce même bouton est positionné sous un page break ?)

J’imagine qu’il y a d’innombrables contraintes de sécurité (un argument bien pratique pour celui qui n’a pas envie de se casser la tête), mais nous parlons bien ici d’une ignominie. Ce qui me met en rogne (en tant que professionnel mais également en tant qu’acheteur) c’est qu’il n’y aurait absolument aucun impact à revoir l’organisation et la mise en forme de cette page.

J’imagine que les informaticiens en charge de la maintenance de cette page doivent se conformer à la célèbre maxime “Si ce n’est pas cassé, pourquoi le changer ?“. Pour augmenter le taux de transformation bien sûr ! En provoquant une rupture complète dans l’expérience d’achat, vous mettez le doute dans la tête des acheteurs (“Suis-je toujours sur le bon site ?“, “Où est passé ma commande ?“…). Ceci est d’autant plus dommageable que la saisie de ses numéros de carte bancaire est une étape anxiogène.

Autre exemple encore pire chez Rue du Commerce où la page de confirmation n’est déjà pas terrible (il faut cocher les deux cases d’acceptation des CGV dans le cadre invisible en bas de page) :

Une fois cliqué sur le type de carte bancaire que vous souhaitez, on retrouve une page légèrement différente du premier exemple, mais tout aussi déroutante :

Un effort a visiblement été fait pour améliorer la mise en page et la lisibilité (quoique le contraste est trop fort) sur cette page. Par contre vous remarquerez qu’ils ont inséré l’ancien bandeau de navigation dans le haut de page. Non seulement ce bandeau n’a rien à faire sur cet écran (où l’attention doit être focalisée sur la saisie des numéros) mais en plus les onglets ne sont pas cliquables ! J’imagine que les informaticiens qui ont conçu la page étaient très fiers de pouvoir afficher en haut de page la mention “Cryptage SSL” en rouge, mais peut-être devrait-on leur expliquer que le jargon technique ne rassure personne s’il n’est pas expliqué quelque part…

Pourtant il est tout à fait possible de proposer une expérience d’achat cohérente comme sur le site de la Fnac où la saisie des numéros de carte est directement intégrée à la page de récapitulatif :

Je ne suis pas le mieux placé pour vous expliquer en détail les impacts techniques et financiers de la mise en oeuvre d’une telle solution, mais du point de vue des clients (le seul qui compte réellement), l’expérience est nettement plus agréable.

Je milite donc pour convaincre les opérateurs de paiement en ligne de faire un effort de présentation. Et je vous engage à faire de même !

C’est le 12 novembre dernier que c’est tenu la cinquième édition de la Journée Mondiale de l’Utilisabilité à Paris. Une soixantaine de personnes avaient ainsi fait le déplacement pour découvrir les techniques et tendances de l’utilisabilité appliquées au commerce en ligne.

Je vous propose donc de découvrir l’intégralité des supports et des vidéos de cette matinée sur cette page : Journée Mondiale de l’Utilisabilité 2009.

Encore un grand merci aux intervenants (Olivier, Raphaël, Jérémie, Vincent et Romain) et aux partenaires de cet évènement (Bertrand et Lucas).

Je vous donne rendez-vous l’année prochaine. La date sera la même, reste à choisir le thème (vos suggestions sont les bienvenues).