La conception UX du tunnel d'achat relève des techniques de conception UX design de montétisation.
Découvrez des exemples illustrés et des ressources pour concevoir et optimiser votre tunnel de conversion.
La conception UX du tunnel d'achat est une étape importante de tout processus de design d'un site ecommerce ou d'une plateforme transactionnelle. L'expérience utilisateur au sein du tunnel de conversion doit faire l'objet d'un soin particulier en matière d'ergonomie et de design conversationnel. L'optimisation du tunnel d'achat fait par ailleurs partie d'un cycle d'amélioration continue dans la lignée des méthodes de design d'expérience utilisateur. En effet, pour améliorer l'efficacité du tunnel de commande, l'UX designer doit pouvoir disposer de données quantitatives et d'indicateurs de performances, qu'il s'agira également de compléter par des entretiens avec les clients.
Alors, Comment concevoir un tunnel d'achat efficace ?
Quelles méthodes pour le design et l'optimisation du tunnel de conversion ?
Comment améliorer les performances d'un process de commande ?
Nous allons esquisser les méthodes de conception et d'amélioration d'un processus de commande. Plusieurs exemples de tunnel d'achat sont présentés. Ces travaux sont rattachés à l'ergonomie des interfaces, au design de l'interaction et au design de l'information.
Un mot sur le vocabulaire, on parle de processus de commande comme de tunnel d'achat voire de tunnel de conversion et pour les anglophones le mot-clé incontournable se factorise en checkout. Nous verrons que la notion de tunnel sonne vraiment très faux en matière de design UX de processus de commande...
Le processus de commande représente la séquence qui permet de finaliser une prise de commande, de l'ajout au panier jusqu'à la confirmation de paiement.
Il est commun de considérer que l'ergonomie du tunnel d'achat a un impact direct sur le taux de transformation. En effet, un processus de commande mal conçu et ne respectant pas les standards ergonomiques basiques peut constituer un frein dans la finalisation de la commande.
Les conventions d'utilisabilité sont aujourd'hui bien présentes au sein des tunnels d'achat, si bien que les axes d'amélioration uniquement centrés sur l'ergonomie ne donnent pas de résultats spectaculaires. En effet, les processus de commande se sont normalisés, et plutôt dans le bon sens.
Avant de rentrer dans les détails, reprenons les bases de la séquence d'un tunnel d'achat :
Cette séquence est un squelette classique de processus de commande, sur lequel peuvent se greffer de multiples scénarios fonctionnels plus sophistiqués.
Il n'y pas de séquence unique en matière de processus de commande. Chaque entreprise dispose de son propre modèle pour délivrer ses produits et ses services. La modélisation du processus de commande est toujours une réponse sur-mesure au business d'une compagnie.
Pour les équipes de conception, le premier travail consiste à appréhender les spécificités métiers du commanditaire : les typologies de produits et de services mis en vente, les modalités de délivrance du produit et du service.
Comprendre les caractéristiques détaillées de l'offre et le modèle de distribution d'une entreprise est une étape clé dans tout processus de conception de tunnel d'achat.
Avant de concevoir la séquence détaillée du processus de commande et de modéliser le parcours d'utilisation du checkout, l'équipe de conception doit d'abord esquisser la conception du processus interne au sein de l'entreprise. Autrement dit, il s'agit de déterminer les implications internes à l'entreprise d'une prise de commande effectuée par un utilisateur final. Fabrication, stock, logistique, livraison sont autant d'étapes qui nécessitent une clarification, dans la mesure où tous ces flux devront figurer, d'une façon ou d'une autre, au sein du scénario de prise de commande.
Sur le plan du design de l'interaction, le processus de commande constitue un INPUT auquel l'entreprise doit apporter un OUTPUT. Comme nous venons de l'évoquer, la compréhension de l'output et des flux logistiques côté entreprise constituent la partie back-office (métier) du design de l'interaction.
Le versant front-office est celui qui s'intéresse au fonctionnement du processus d'achat côté client final.
En matière de parcours d'utilisation, le processus de commande doit être considéré comme un chantier fonctionnel à part entière. Néanmoins, le tunnel d'achat a des implications sur la conception des autres espaces du site... Dans un site ecommerce classique, au-delà du checkout, on a ainsi plusieurs chantiers fonctionnels à adresser :
Au moment de concevoir le processus de commande, on envisage les chantiers fonctionnels qui seront impactés par le checkout. Bien que le processus de commande suive une logique et un parcours bien particulier, il reste rattaché aux autres lots fonctionnels du projet ecommerce. Le design de l'interaction du processus de commande a des impacts sur la descente catalogue et sur l'espace client.
En effet, tout le parcours d'exploration du catalogue met généralement en scène les modalités d'ajout au panier, voire la consultation dynamique des stocks. Ces éléments ne sont pas réservés à la page du panier ou à la séquence du processus de commande. Certaines fonctions avancées du panier d'achat peuvent être injectées au sein des parcours utilisateurs généraux (calcul des frais de livraison, géolocalisation, zone de chalandise).
Ces digressions pour insister sur le fait que le design du processus de commande est très lié à l'exploration du catalogue, au processus d'inscription et à l'espace client. Il n'est pas recommandé de concevoir le checkout sans considérer le fonctionnement global du dispositif digital.
Les performances d'un dispositif marchand ou d'un site transactionnel sont intrinsèquement liées à la qualité de l'expérience utilisateur délivrée au sein du processus de commande. Celle-ci doit être neutre et factuelle. Directe et sans détours.
Le processus de commande a vocation à :
Le nombre d'étapes du processus de commande n'est pas un élément primordial dans l'expérience utilisateur. Ce qui prime dans la conception du checkout, c'est de rassurer l'utilisateur et de rappeler constamment les modalités de l'achat en cours. Plus la séquence est didactique, moins le client se pose de questions, et moins il y a de risques d'abandon.
Autrement dit, les enjeux de l'expérience utilisateur dans le design du processus de commande sont de maintenir l'état de stress du client au niveau le plus bas pour éviter tout risque de déperdition. S'il faut rajouter une étape pour expliciter le processus, qu'il en soit ainsi.
Un maître mot : la transparence.
Un processus de commande fluide et bien conçu facilite la prise de commande, guide l'utilisateur et délivre les informations nécessaires aux décisions dans chaque étape.
Parmi les nombreuses conventions ergonomiques existantes, 5 règles ergonomiques doivent être travaillées minutieusement :
Contrairement aux idées reçues, le fait de concevoir le processus de commande comme un entonnoir sans possibilité de sortie est une grave erreur de conception. Le client doit rester libre de ses déplacements au sein du site (critère ergonomique d'adaptabilité).
La notion de tunnel induit un sens, et pas de possibilité de sortie autre que de se diriger vers la lumière :), n'est-ce pas ? Voir le bout du tunnel... Mais dans quel sens ? Faut-il faire machine arrière ou en avant toute ?
Pourquoi ces questions ?
Tout simplement pour insister sur le fait que l'analogie au tunnel d'achat a créé des incompréhensions sur le plan de l'ergonomie.
Le concepteur cherche à réduire les risques de sortie qui pourraient survenir d'une erreur de la part de l'utilisateur. Cette factorisation des fonctions du site s'est transformée en tunnel dénuée de toutes les fonctions du site (fonction navigationnelle, footer,...). Ce type de conception tunnel est souvent vécu comme une impasse pour un utilisateur.
En cas de feu, ou d'hésitation dans un tunnel, ne préfèrerions nous pas pouvoir prendre l'issue de secours ou l'escalier de service plutôt que de marcher 5km en arrière ?
L'ergonomie du processus de commande gagne à capitaliser sur les repères fixes de l'interface. Vous n'avez pas besoin d'éjecter la navigation ou le pied de page. Au contraire. Proposez des modalités de sauvegarde du panier d'achat. Laissez l'utilisateur libre de son parcours. Accordez-lui la possibilité de sortir de la file en caisse pour retourner dans le magasin et payer plus tard :). Offrez au client la possibilité de finaliser l'achat au moment qu'il aura choisi et de la façon qui lui convient le mieux.
Halte toute aux processus en tunnel. Un client qui veut acheter, achètera. Concentrez-vous sur le fait de délivrer les bonnes informations contextuellement dans le processus de commande, en veillant à rassurer l'utilisateur à chaque étape.
Une bonne ergonomie du processus de commande c'est :
Le panier est sans doute le gabarit le plus complexe à concevoir sur le plan du design de l'information et du design de l'interaction. En effet, son aspect dynamique dépend à 100% des actions effectuées par l'utilisateur et de son profil (un client aura accès à des informations complémentaires).
La spécificité du panier peut en faire un chantier fonctionnel à part entière. Néanmoins, dans le lotissement fonctionnel d'un dispositif digital marchand, on l'inclut généralement dans les travaux de modélisation du checkout.
Les fonctions clés du panier :
Le périmètre fonctionnel d'un panier peut-être très sophistiqué. Un travail de spécifications fonctionnelles est toujours associé à la conception fonctionnelle du panier.
Voici les grandes fonctions du scope fonctionnel du processus de commande :
La tendance au tunnel one page doit être réservée aux produits simples. Le concept de la prise de commande au sein d'une seule page apparaît séduisant, mais dans la pratique, il génère plus d'erreur côté utilisateur : en effet, la charge de travail est beaucoup plus forte côté utilisateur.
Le processus de commande n'est pas un ensemble uniquement fonctionnel. Ne négligez pas la partie éditoriale :
En offrant des accès contextuels à toutes ces informations, vous mettez toutes les chances de votre côté pour neutraliser les freins à l'achat et rassurer l'utilisateur dans la finalisation de la commande.
Le design adaptatif met au même niveau l'ergonomie directe (ergonomie tactile) et l'ergonomie indirecte (souris, ordinateur). Les ressorts ergonomiques sont différents. Un processus de commande adaptatif doit tenir compte du fait que les saisies tactiles seront potentiellement plus fastidieuses. Que le matériel peut avoir des limites physiques importantes (smartphone, tablette). Dans l'ergonomie responsive, il faut essayer de proposer une séquence autour de check et de confirmation en privilégiant le travail côté machine plutôt que côté utilisateur : automatiser tout ce qui est possible, identifier l'utilisateur le plus en amont possible...
Notre recommandation est d'opter pour un processus de commande spécifique pour chaque version de terminal : un processus de commande dédié au bureau - desktop, un tunnel d'achat dédié au smartphone, et un tunnel d'achat dédié aux autres médiums (tablette, objet connecté, tableau de bord, borne).
Cette recommandation vaut pour tous les acteurs dont l'activité en ligne atteint des plafonds considérables. Un petit site ecommerce n'est pas concerné (un checkout responsive fera très bien l'affaire pour 1 commande par jour). 100 commandes par jour ? Le checkout a déjà des enjeux importants sur le business. Des versions spécifiques doivent être envisagées.
Un checkout responsive donne de moins bons résultats qu'une version spécifique bureau associée à une version dédiée au smartphone. Terminaux différents, usages différents. Le responsive est une bonne bouée de sauvetage, mais un hors-bord n'est pas un paquebot... Pourquoi l'oublions-nous systématiquement ?
Ce n'est pas le processus de commande qui transforme. Au contraire. Le checkout a la capacité de détransformer - court-circuiter l'achat.
En effet, la transformation ne dépend pas directement du processus de commande : ce n'est pas la bonne ergonomie du processus de commande qui va générer des ventes. La transformation, ça se passe avant (design émotionnel du site, qualité de rédaction, fiche produit, qualité des produits). En revanche un processus de commande mal conçu peut vous faire perdre des ventes. Les enjeux de la conception du processus de commande sont simples : que la prise de commande et l'achat soient simples et rapides.
Les enjeux de la transformation reposent sur le site marchand au sens général, sa capacité à convaincre et à rassurer, et particulièrement dans la sophistication des fiches produits et des landing pages.
Nous vous invitons à consacrer un chantier fonctionnel et ergonomique à l'optimisation de votre processus de commande dans les cas suivants :
IAFACTORY a modélisé un squelette fonctionnel de processus de commande extrêmement puissant pouvant être adapté à la majorité des cas de figure d'une entreprise. Un bon support d'échange en conception agile.
Les modèles de tunnel d'achat mettent en scène un checkout adaptatif - responsive design et un processus de commande dédié aux spécificités tactiles sur smartphone. Ces modèles sont disponibles en téléchargement immédiat.
Concevoir un tunnel d'achat revient à modéliser une séquence fluide et rapide pour finaliser une prise de commande. Les équipes de conception cherchent à diminuer les abandons et à neutraliser tous les freins à l'achat.
L'optimisation et la conception du processus de commande devrait traiter les objectifs suivants :
Concevoir un processus de commande doit poursuivre un objectif d'amélioration de l'expérience de l'utilisateur dans tout le parcours du tunnel d'achat.
optimisation du tunnel de conversion
ux tunnel de conversion Cdiscount
iafactory - Julien MUCKENSTURM
conception UX du tunnel d'achat
ux checkout Pierre et Vacances
iafactory - Julien MUCKENSTURM
conception du processus de commande
modèle type checkout
iafactory - Julien MUCKENSTURM
La conception du processus de commande est une brique essentielle à la réussite de tout projet e-commerce et transactionnel.
Optimiser le tunnel de commande revient à travailler sur plusieurs chantiers fonctionnels transversaux front-office :
l'inscription, l'espace client, la descente catalogue, le support. Une conception de tunnel d'achat réalisée dans une approche holistique (vision d'ensemble) donne de meilleurs résultats qu'une conception du checkout seul.
Une phase de conception de processus de commande prend également en compte la clarification des besoins côté business en back-office : la logistique, les modalités de livraison, les moyens de paiement, la facturation et bien entendu les implications en matière de gestion de la relation client.
Il y a donc un travail de recueil des besoins côté commanditaire (offre) et une compréhension des usages en situation d'utilisation (demande). C'est le propre de la démarche UX design d'arriver à faire converger ces 2 flux au travers de l'interface utilisateur, notamment.
Il n'y a pas de méthode miracle pour optimiser les performances du tunnel d'achat ou améliorer la conception du processus de commande. On reste dans la démarche du design d'expérience utilisateur, avec un travail d'analyse, une phase de conception et la mise en place des modalités d'évaluation.
Pour un tunnel d'achat existant, la recherche utilisateur va éclaircir les usages des clients. Il ne s'agit pas de tests mais d'entretiens avec des utilisateurs. Les tests utilisateurs sur des commandes fictives restent également instructifs, mais pas idéals car ils ne reflètent pas les vraies tensions impliquées par une prise de commande.
Les équipes de design UX gagnent à créer des profils d'utilisateurs sur la base des entretiens réalisés. Des personas sont de bons outils pour aider les équipes de conception dans le travail de maquettage fonctionnel.
La séquence du tunnel d'achat doit être considérée au travers des profils types d'utilisateurs et de leur scénario d'usage : en quoi le processus de commande adresse la crainte du persona X ?...
L'optimisation d'un processus de commande passe naturellement par une meilleure compréhension du métier et du business. Plus les processus back-office sont explicites, plus le travail de conception sera facilité.
Le recueil des besoins passe par des réunions avec les équipes logistiques, les spécialistes techniques, les responsables de la livraison, les services comptables... Ce travail d'expression de besoin doit permettre de modéliser les flux métiers impliqués par la prise de commande.
Si les flux logistiques et les cas de livraisons sont mis à plat les équipes d'UX designer produiront des solutions de conception plus claires.
L'analyse fonctionnelle doit notamment permettre d’identifier précisément toutes les contraintes logistiques. Il ne s'agit pas de les découvrir au moment de la conception des wireframes (ce qui arrive hélas trop souvent dans la plupart des cas de conception de tunnel d'achat) :
Deux éléments majeurs impactent les performances du processus de commande : la logistique et les services de livraison :
Le zoning macro d'un processus de commande doit considérer des fonctions bien délimitées et stables dans l'interface :
L'interface utilisateur gagne à s'appuyer sur des blocs délimitant chaque grande zone fonctionnelle. Le design de l'information met en scène des call to action très visibles et larges. Privilégier des formats de couleurs aux teintes non criardes, autour de tons neutres.
Dans l'optimisation d'un processus de commande, pas de distraction, il faut aller à l'essentiel, expliquer, clarifier...
La conception d’un processus de commande, au-delà de l’agrégation et de la résolution des problématique métiers, exige une bonne connaissance des enjeux et difficultés impliqués par une prise de commande côté utilisateur. Voici les axes d’optimisation du processus de commande permettant de gagner en performance :
Pour concevoir un bon processus de commande, suivez les étapes suivantes :
Bref, on est sur un travail transdisciplinaire visant à améliorer les performances du processus de commande...
Vous trouverez ci-dessous plusieurs exemples de conception et d'optimisation de tunnel de commande ; certains de ces checkouts impliquent plusieurs milliers de prises de commande par jour, et les millions d'euros qui vont avec :
Si ces processus peuvent partager des similitudes de présentation en matière d’architecture de l’information et d’implémentations ergonomiques, ils ont tous exigé d'importants travaux d'analyse pour aboutir à des conceptions simplifiées et des expériences utilisateurs optimales.
Enfin, pour certains acteurs comme Auchan et Carrefour, le processus de commande peut s'inscrire dans le cadre de la mise en place d’un panier unique, centralisant les problématiques logistiques et CRM de tous les services proposés par ces leaders de la distribution : il s’s'agit alors de faire converger toutes les composantes fonctionnelles des différents processus de commande au sein d’un seul et même processus. Pas si simple.
Ces travaux posent de réelles questions en matière d’expérience utilisateur et d’évolutions des services dématérialisés, puisqu’il s’agit d’agréger au sein d’une seule et même interface, des modalités transactionnelles répondant à des logiques très différentes : faire ses courses alimentaires, acheter un produit technologique, télécharger un contenu culturel, réserver un voyage, commander une place pour un spectacle…
Comme évoqué plus haut, la première étape consiste à analyser les données : on pourra opter pour un audit de site web afin de faire le point sur l'existant.
Un recueil des besoins métier apparaît incontournable :
Un recueil des besoins côté usager est toujours une source d'amélioration :
Le travail de conception commence par un inventaire fonctionnel mettant à plat tout le périmètre fonctionnel et éditorial que doit couvrir la conception du processus de commande.
Après, dans le travail de conception, on fera appel à deux techniques complémentaires :
Enfin, la conception d'un prototype fonctionnel va permettre d'évaluer les solutions de conception via test utilisateur. En amont comme en aval du travail d'analyse et de conception du processus de commande, on prendra du temps pour faire le point sur les indicateurs de performances du processus de commande via l'analyse des performances web, meilleur outil pour comprendre et optimiser le checkout.
APPROFONDIR
le tunnel d'achat
Études de cas à lire :
Travaux à visualiser :
Supports de cours (débutant) à étudier :
Compétences métier pour le processus de commande :
Fiche métier :
Livres UX à bouquiner :
Autres ressources sur le web :