logo IAFACTORY
conseil en design UX
conseil en ergonomie
architecture IA - UX

Conception UX du tunnel d'achat

icone conception UX design

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.

Concevoir et optimiser l'UX d'un tunnel d'achat

Révisé en Janvier 2024

Tunel d'achat et optimisation UX des conversions

conception de processus de commande

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.

Comprendre le modèle de distribution

Avant de rentrer dans les détails, reprenons les bases de la séquence d'un tunnel d'achat :

  • Ajout d'un article ou d'un service au panier.
  • Récapitulatif du panier.
  • Prise de commande : identification du client. Inscription éventuelle.
  • Choix des modalités de livraisons.
  • Récapitulatif de la commande.
  • Choix du mode de paiement. Paiement.
  • Confirmation.
  • Traçabilité. Suivi de commande.
  • Interactions avec le compte client.
  • Livraison.
  • Satisfaction ou insatisfaction.
  • Revue produit ou retour SAV. Ou rien [99% des cas] :).

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.

Le design d'interaction du checkout

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 :

  • La descente catalogue de l'accueil vers le produit : ajout au panier.
  • Panier d'achat : stock, livraison, zone de chalandise.
  • Processus d'inscription : achat invité ou création de compte...
  • Le processus de commande : finalisation de l'achat.
  • L'espace client digitalisé : traçabilité de la commande.
  • Le support et le SAV en ligne : traçabilité du produit - service.
  • Les espaces de vente éphémères : ajout panier, disponibilités.
  • Les parties éditoriales et magazine.

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.

Expérience utilisateur et tunnel d'achat

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 à :

  • Finaliser l'achat.
  • Rassurer le client.
  • Rappeler le montant de la commande.
  • Distinguer les prix additionnels des services (assurance).
  • Extraire les prix relatifs à la livraison.
  • Délivrer l'information précise sur la date de livraison.
  • Clarifier la modalité du paiement.
  • Expliquer les étapes.
  • Anticiper les questions de l'utilisateur.

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.

Ergonomie du processus de commande

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 :

  • Le guidage :
    Rappeler à l'utilisateur l'intérêt de chaque étape. Expliquer clairement comment les choses vont se passer. Ce qui est attendu de la part de l'utilisateur.
  • L'incitation :
    Dans la continuité du guidage, l'incitation se matérialise par des marqueurs graphiques très forts autour des actions à réaliser pour passer aux étapes suivantes : informations à saisir, bouton à valider.
  • La charge de travail :
    Minimiser la densité informationnelle à l'écran et le nombre d'actions simultanées attendues de la part de l'utilisateur. Il faut aller à l'essentiel et donner des moyens d'obtenir des informations contextuelles complémentaires.
  • La prévention des erreurs :
    Diminuer le risque d'erreur par le guidage, l'incitation, et la charge de travail minimale :). Ensuite, les formulaires doivent faire l'objet d'instructions limpides. En cas d'erreur, l'interface doit permettre à l'utilisateur de corriger l'erreur facilement, à l'aide d'un système d'aide contextuelle.
  • La persistance :
    L'utilisateur doit pouvoir visualiser les informations stratégiques de la commande à tout moment (prix de la commande, frais de livraison, contenu de la commande, moyen de livraison choisi, adresse, date de livraison). Le processus est une commande qui implique une série d'actions. La stabilité des informations et de l'interface aident l'utilisateur à se repérer et constituent des marqueurs rassurants.

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 :

  • Un nombre d'étape clairement affiché.
  • Des instructions claires à chaque étape.
  • Une action précise à réaliser dans chaque étape.
  • Des informations transparentes qui neutralisent tous les doutes.
  • La possibilité de différer l'achat et de commander plus tard (sauvegarde, cookie..).

Scope fonctionnel du panier

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 :

  • Anticipe la séquence de checkout : étape 1 du process.
  • Présentation du prix unitaire du produit Hors-Taxe. Tva.
  • Présentation du prix total. Hors-Taxe. Tva.
  • Désignation du produit. Lien vers la fiche produit. Vignette.
  • Modification des quantités du produit. Suppression.
  • Calcul dynamique des frais de livraison (module spécifique).
  • Compteur d'économie.
  • Valorisation des avantages clients (exemple : Carte Fnac).
  • Cagnottage et points fidélités.
  • Disponibilités du produit. Stock.
  • Modalités de livraison offertes pour chaque produit.
  • Modalités de paiement.
  • Saisie d'un bon de réduction.
  • Incitation commerciale : ajouter 1 produit pour bénéficier de telle réduction.
  • Cross selling et ventes d'accessoires dans le panier.
  • Vente d'assurances au sein du panier.
  • Vente de garanties au sein du panier.
  • Vente de service spécifique dans le panier (ménage, montage...).
  • Rappel des informations du client si utilisateur loggé.
  • Information contextuelle et juridique : offre de remboursement...
  • Rassurance client : données sécurisées, paiement sécurisé.

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.

Périmètre fonctionnel du tunnel de commande

Voici les grandes fonctions du scope fonctionnel du processus de commande :

  • Barre d'état : étape. Localisation.
  • Zone d'instruction.
  • Zone d'information contextuelle.
  • Récapitulatif : achat, montant, détail, info client...
  • Possibilité de revenir en arrière : back, retour.
  • Module d'information contextuelle.
  • Connexion : identifiant, mot de passe, mot de passe oublié.
  • Inscription rapide : email, mot de passe, nom.
  • Inscription à méditer : l'inscription peut éventuellement exiger la saisie de plusieurs champs pour accélérer la prise de commande (adresse physique, moyen de contact).
  • Cas de la commande invitée : checkout one page (voir remarque plus bas en fin de liste).
  • Livraison : choix de l'adresse de livraison, saisie de l'adresse de livraison.
  • Livraison : choix d'un relais colis. Géolocalisation. Cartographie. Horaires. Détails du point relais.
  • Comparatif des modes de livraison par prix.
  • Détail de toutes les modalités d'expédition (prix des livraisons express vs. standards).
  • Détails des délais d'acheminement. Expédition interne. Acheminement et transport. Possibilité de suivi.
  • Conseil et informations contextuelles sur la livraison.
  • Choix d'une adresse de facturation différente. Saisie.
  • Fonction de carnet d'adresse : utilisateur avancé (livraison au bureau, à la maison...).
  • Conciergerie : laisser des informations au livreur.
  • Commande cadeau : emballage cadeau. Saisie d'un mot sympa. Prix...
  • Paiement : récapitulatif. Nombre d'article. Désignation. Visuel. Prix unitaire. Tva. Ecotaxe...
  • Paiement : choix des modes de paiement et incidences sur la commande (prix, livraison).
  • Paiement par virement : informations et modalités fonctionnelles.
  • Paiement par chèque : informations et modalités fonctionnelles.
  • Paiement par CB : informations et modalités fonctionnelles.
  • Paiement par moyens spécifiques (chèque cadeau, bon vacance) : informations et modalités fonctionnelles.
  • Paiement en plusieurs fois : coûts, informations et modalités fonctionnelles.
  • Paiement en crédit : informations sur l'organisme de banque.
  • Saisie d'un bon de réduction : incidences sur le prix, informations sur le bon. Possibilités de retirer le bon.
  • Acceptation des conditions de vente.
  • Commande validée. Chargement. Instructions.
  • Confirmation de la commande et récapitulatif.
  • Diffusion multicanale : email, sms, au choix de l'utilisateur.
  • Diffusion réseaux sociaux : j'ai acheté le produit X sur le site Y avec autorisation de l'utilisateur.
  • Redirection vers le compte utilisateur.
  • Traçabilité de la commande. Suivi 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.

Périmètre éditorial du processus de commande

Le processus de commande n'est pas un ensemble uniquement fonctionnel. Ne négligez pas la partie éditoriale :

  • Foire aux questions intégrées.
  • Foire aux questions filtrées à chaque étape : FAQ livraison, FAQ paiement.
  • Accès aux mentions légales : accès in-page (popin, layer, calque).
  • Accès aux conditions de vente : accès in-page (popin, layer, calque).
  • Rassurance : fiabilité de l'enseigne.
  • Rassurance : sav et support.
  • Rassurance : modalité de remboursement, échange, satisfait-remboursé.
  • Paiement sécurisé : modalités de paiement.
  • Informations sur le partenaire de paiement.
  • Informations sur la solution de paiement.
  • Cryptage des données.
  • Respect de la vie privé.
  • Protection et sécurisation des donnes du client.
  • Disponibilités des équipes support : adresse, horaire.
  • Modalités de contact : téléphone, email, numéro vert.
  • Informations magasins.

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.

Processus de commande adaptatif

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 ?

Processus de commande et taux de transformation

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 :

  • Création de votre dispositif e-commerce ou transactionnel.
  • Refonte, évolution et optimisation de votre support transactionnel.
  • Modification / évolution des process logistiques.
  • Ajout de nouvelles modalités de livraison, paiement.
  • Stagnation des indicateurs de performances.
  • Taux d’abandon fort dans les espaces transactionnels.
  • Incompréhension et / ou feedbacks négatifs de la part des utilisateurs.
  • Problématique multi-écrans (portabilité, responsive...).

Modèle de processus de commande

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.

Objectifs de la conception de processus de commande

Optimiser les performances du tunnel d'achat

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 :

  • Lisser les problématiques logistiques pour les traduire en parcours fluide.
  • Neutraliser les abandons liés aux freins à l’utilisation.
  • Simplifier les modalités de la prise de commande.
  • Garantir l’efficacité ergonomique à chaque étape.
  • Rédiger des instructions concises, précises et adaptées à chaque étape.
  • Concevoir des solutions flexibles agrégeant tous les flux dynamiques.

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.

Exemples de tunnel d'achat

optimisation du tunnel de conversion optimisation du tunnel de conversion
ux tunnel de conversion Cdiscount
iafactory - Julien MUCKENSTURM
conception UX du tunnel d'achat conception UX du tunnel d'achat
ux checkout Pierre et Vacances
iafactory - Julien MUCKENSTURM
conception du processus de commande conception du processus de commande
modèle type checkout
iafactory - Julien MUCKENSTURM

Méthode pour concevoir le processus de commande

Tunnel d'achat et méthode UX

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.

Recherche utilisateur et tunnel d'achat

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 ?...

Recueil besoins métier et checkout

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) :

  • L’utilisateur doit-il être affilié à un magasin / code postal pour être livré ?
  • Quelles types de produits peuvent être regroupés pour une livraison ?
  • Certaines catégories de produit imposent-elles des spécificités logistiques ?

Deux éléments majeurs impactent les performances du processus de commande : la logistique et les services de livraison :

  • 1. Chaque problématique logistique doit trouver une solution et ne pas être négligée afin que la transposition sous forme d’interface génère le moins d’incompréhension possible… Tous les éléments liés au coût de livraison doivent être étudiés de façon minutieuse : les coûts liés aux problèmes logistiques peuvent constituer un frein lors des achats multi-produits (frais élevés pour la livraison de produits de catégories différentes, de façon différée)… Toutes les solutions permettant d’optimiser les coûts doivent être envisagées de sorte à débloquer le frein majeur à la transformation.
  • 2. Les services liés à la livraison constituent un accélérateur des performances du dispositif : mise en place d’un support téléphonique, d’un suivi de livraison en ligne, d’informations ponctuelles délivrées sur support mobile… L’utilisateur peut-il choisir l’horaire de la livraison, être livré en soirée, bénéficier de services spécifiques. S’il s’agit d’un cadeau, l’utilisateur peut-il bénéficier d’un emballage cadeau, d’une carte personnalisée… Aucun de ces services ne doit être évacué de facto, tant les potentialités de business peuvent être rognées (négliger le service d’emballage cadeau pour les fêtes de fin d’année par exemple…).

Tunnel d'achat et interface utilisateur

Le zoning macro d'un processus de commande doit considérer des fonctions bien délimitées et stables dans l'interface :

  • Fonction de localisation : étape.
  • Fonction de récapitulatif : synthèse de la commande.
  • Fonction de déplacement : validation, retour.
  • Fonction d'instruction : guidage.
  • Fonction d'information contextuelle.
  • Fonction de prévention des erreurs.
  • Fonction de correction des erreurs.
  • Format des call to action et emplacements.

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.

Comment optimiser le processus de commande ?

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 :

  • Limiter tous les éléments distracteurs (publicité, bannière, etc.).
  • Limiter les incitations à quitter la page inutilement (proposer des aides contextuelles sous forme de calque ou de popin pour que l’utilisateur ne quitte pas la page lorsqu’il sollicite une information liée au service par exemple).
  • Permettre aux utilisateurs de sauvegarder leur panier et différer l’achat.
  • Eviter d’exposer l’utilisateur à la complexité des flux logistiques (trop de choix tue le choix).
  • Proposer des solutions claires à l’utilisateur et le guider dans ses choix.
  • Traduire les instructions dans un langage concis et précis.
  • Fournir les informations contextuelles indispensables à la prise de décision.

Démarche pour concevoir et optimiser le processus de commande

Pour concevoir un bon processus de commande, suivez les étapes suivantes :

  • Analyse du contexte : enjeux, objectifs, contraintes.
  • Audit ergonomique de l'existant.
  • Recherche utilisateur : entretiens, situation d'usage.
  • Personas. Scénarios d'usage.
  • Recherche côté commanditaire. Mise à plat des règles fonctionnelles et des exigences business et logistiques.
  • Modélisation des parcours utilisateurs en fonction des cas d'utilisation (design d'interaction).
  • Mise à plat de la séquence du tunnel d'achat (diagramme du fonctionnement, arborescence fonctionnelle).
  • Architecture de l'information des étapes, du parcours, regroupement des composantes fonctionnelles et éditoriales.
  • Zoning fonctionnel macro. Définition des zones.
  • Wireframing détaillé. Modélisation de l'interface, conception de chacun des écrans du processus de commande.
  • Spécifications fonctionnelles si nécessaires.
  • Prototypage. Test. Améliorations.
  • Vérification et suivi des indicateurs de performance.

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…

Travaux complémentaires à la conception du processus de commande

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.

auteur Julien Muckensturm iafactory
linked in julien muckensturm

Ressources de conception ux de processus de commande

APPROFONDIR
le tunnel d'achat

Design et interface, ergonomie web illustrée
Design et interface, ergonomie web illustrée

Aller plus loin pour concevoir un processus de commande

É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 :

  • Un outil gratuit pour créer des diagrammes en ligne : diagramic
Plus de techniques de conception
ENVERGURE FONCTIONNELLE
Visualisation détaillée des interactions impliquées dans un processus : inscription, commande, transaction...
conception processus.php
CONCEPTION D'INTERFACE
Esquisse d'interface utilisateur, projection des contenus et fonctionnalités à l'écran.
wireframing
ENVERGURE FONCTIONNELLE
Clarification des interactions et de leurs implications front-back pour tous les écrans de l'interface.
specification fonctionnelle
Checkout UX
  • avec iafactory
  • prestation sur-mesure
  • livraison sous 15J