Si un client pense que votre payment page est déroutante, lente ou encombrée, il peut la quitter sans même donner de rétroaction. C’est ce risque qui rend l’étape de maquette conceptuelle si importante : c’est à ce moment que vous détectez les failles à un stade précoce, avant qu’elles ne se transforment en problèmes réels. Bien fait, une maquette conceptuelle de page de paiement peut vous aider à concevoir avec clarté, à repérer rapidement les frictions et à maintenir l’alignement de l’équipe dès le premier jour.

Ci-dessous, nous vous expliquerons comment utiliser les maquettes conceptuelles pour créer de meilleurs flux de paiement à partir de zéro.

Sommaire

• Qu’est-ce qu’une maquette conceptuelle de page de paiement?
  
• Comment les maquettes conceptuelles de page de paiement sont-elles utilisées?
  
• Quels éléments fondamentaux doivent être inclus dans une maquette conceptuelle de page de paiement?
  
• Quels défauts de conception courants les entreprises devraient-elles éviter à l’étape de maquette conceptuelle?
  

Qu’est-ce qu’une maquette conceptuelle de page de paiement?

Un maquette conceptuelle de page de paiement est un plan de votre expérience de Checkout. C’est le squelette de conception (boîtes, étiquettes et disposition) qui trace ce qui va où avant d’ajouter du texte ou un polissage visuel. Les équipes créent des maquettes conceptuelles de paiement dès le début du processus de conception afin que les chefs de produit, les concepteurs, les ingénieurs et les équipes juridiques ou de gestion des risques puissent intervenir. Ce sont des outils de travail qui façonnent la façon dont les équipes créent, testent et affinent les expériences de paiement.

Une maquette conceptuelle de page de paiement peut vous aider à vous concentrer sur des questions telles que :

• Que demande-t-on au client?
  
• Montrons-nous les bonnes informations au bon moment?
  
• Collectons-nous les informations dont nous avons besoin pour répondre aux exigences de Know Your Customer (KYC)?
  
• La disposition est-elle logique sur mobile?
  

En abordant ce questions à l’étape de maquette conceptuelle, avant la conception visuelle ou le développement, vous réduisez le coût du changement et repérez les problèmes tant qu’ils sont encore faciles à résoudre.

Comment les maquettes conceptuelles des pages de paiement sont-elles utilisées?

Lorsqu’une entreprise travaille sur un nouveau flux de paiement, la maquette conceptuelle est souvent la première chose que l’on partage en interne. Cela permet aux équipe de production, de conception, d'ingénierie, de conformité, de gestion des risques et de marketing d’examiner le même schéma. Étant donné que la maquette conceptuelle est modifiable, elle invite à une rétroaction honnête, ce qui réduit les obstacles à la collaboration et permet aux équipes d’agir rapidement.

La maquette conceptuelle est une fonction de forçage à concevoir en pensant aux utilisateurs et en donnant la priorité à la convivialité dans le monde réel. Elle vous donne l’espace nécessaire pour vous demander :

• Quelles suppositions faisons-nous sur le comportement des utilisateurs?
  
• Faisons-nous apparaître les bonnes informations au bon moment?
  
• Qu’est-ce qui peut causer de l’hésitation, de la confusion ou des abandons?
  

Découvrir les problèmes de flux

Les maquettes conceptuelles sont le meilleur moment pour déterminer ce qui manque. Les obstacles au paiement se cachent souvent à la vue de tous : champs supplémentaires, boutons peu clairs ou flux déroutants. Les maquettes conceptuelles sont votre première vraie chance d’identifier rapidement ces problèmes, lorsqu’ils sont encore faciles à résoudre. À cette étape, vous pouvez évaluer :

• S’il est possible d’actualiser les articles du panier depuis la page de paiement.
  
• Si les utilisateurs voient le coût total à l’avance ou seulement à la fin.
  
• Si la « prochaine étape » semble évidente sur tous les écrans.
  
• Ce qui se passe en cas de payment fails.
  

Lorsque vous voyez le flux disposé plutôt que de l’imaginer, il est souvent plus facile de comprendre ce qui ne fonctionne pas tout à fait.

Réalisation du parcours utilisateur

Les maquettes conceptuelles cliquables vous permettent également d’exécuter des étapes utilisateur légères avant d’investir dans la conception. Consacrer seulement cinq minutes à regarder une personne cliquer dans un flux de base peut révéler des points faibles que vous n’auriez pas remarqués lors des réunions de vérification :

• Navigue t-elle le flux sans hésiter?
  
• Est-il évident de savoir comment changer de mode de paiement?
  
• Des indices de confiance apparaissent-ils là où les gens peuvent se sentir anxieux?
  
• Comprend-elle ce qui se passe après avoir cliqué sur « Payer maintenant »?
  

La détection de ces problèmes à l’étape de la maquette conceptuelle empêche toute reprise ultérieure. Si vous attendez que la conception soit finalisée ou que la page soit déjà codée, chaque correction prend plus de temps, plus de fonds et plus de coordination. Si ces problèmes apparaissent dans un produit réel, ils vous coûteront cher en par l’abandon de paniers, des demandes d’assistance plus élevées ou la reprise de la conception et de l’ingénierie.

Développement de la page finale

Une fois finalisé, la maquette conceptuelle devient le plan directeur qui guide la conception visuelle, le texte et l’ingénierie. Elle répond d’emblée aux questions centrales de disposition et de logique :

• Quels composants doivent être développés?
  
• Quelle logique conditionnelle faut-il gérer (p. ex. afficher différents champs pour les digital wallets par rapport aux cartes)?
  
• Comment prenons-nous en compte les dispositions réactives?
  

Elle fournit également du contexte pour des facteurs tels que les messages d’erreur, le langage juridique et la validation de l’adresse.

Les maquettes conceptuelles sont plus utiles comme documents qui évoluent au fur et à mesure que de nouveaux besoins ou de nouvelles contraintes apparaissent. Plus elles sont utilisées tôt et activement, moins votre entreprise risque de rencontrer des surprises en aval.

Quels éléments fondamentaux doivent être inclus dans une maquette conceptuelle de page de paiement?

Pour faire fonctionner les pages de paiement, vous devez prendre en compte chaque élément de l'expérience. Voici ce qui doit être inclus dans chaque maquette conceptuelle avant de passer à la conception ou au développement.

Récapitulatif de la commande

Commencez avec clarté. Qu’achète l’utilisateur et combien paie-t-il? Une bonne maquette conceptuelle comprend des cases pour :

• une liste itemized des produits ou des services
  
• les taxes, frais de livraison, frais et réductions
  
• le sous-total et le montant total
  

Les cases doivent être visibles et faciles à vérifier : la transparence est ici importante.

Saisie du mode de paiement

Il s’agit du cœur fonctionnel de la page. Votre maquette conceptuelle doit indiquer :

• les champs de saisie des paiements par carte (p. ex. numéro de carte, expiration, CVV)
  
• des options de sélection d’autres modes (p. ex. portefeuilles numériques, virements bancaires)
  
• ce que la page montre lorsque différents modes sont sélectionnés
  
• des libellés pour chaque champ
  

Pensez à toutes les variations que votre page doit prendre en charge, et intégrez-les à la maquette conceptuelle.

Bouton d’appel à l’action

Rendez votre bouton d'appel à l'action incontournable. Votre maquette conceptuelle doit inclure :

• un bouton intitulé « Payer maintenant »
  
• un placement intelligent, généralement épinglé sous le formulaire ou près du résumé
  
• un sens hiérarchique pour qu’il soit évident de savoir sur quoi cliquer ensuite
  

Champs et logique d’assistance

Selon votre cas d'usage, incluez :

• des champs de facturation et d’adresse de livraison, plus la logique « identique à la livraison »
  
• la saisie de code promotionnel ou de carte-cadeau avec l’interaction « Appliquer »
  
• l’option d’enregistrement des informations de paiement pour une utilisation ultérieure
  
• des cases à cocher ou d’acceptation des conditions, des politiques ou de consentement marketing
  

Si ces éléments sont dans votre flux, ils doivent être représentés dès le premier jour.

Signaux de confiance

Même à l’étape de maquette conceptuelle, vous devez tenir compte de ce qui suit :

• le texte « Paiement sécurisé »
  
• les logos des modes de paiement (p. ex. Visa, Apple Pay)
  
• tout sceau de confiance tiers ou logo de partenaire
  
• la hiérarchie visuelle pour que ces éléments soient assez présents sans être envahissants
  

États d’erreur et cas aberrants

Voici les éléments qu'il est important d'aborder dès la conception initiale. Votre maquette conceptuelle doit indiquer :

• les endroits où des erreurs de validation apparaîtront (p. ex. en ligne, modale)
  
• des espaces pour les messages de declined cards et d’avertissements de session expirée
  
• des flux alternatifs (p. ex., changement de mode de paiement en cours de processus)
  

Une conception qui prévoit des états d’échec dès le départ signifie moins de défis complexes avec la conception plus tard.

Considérations relatives à la disposition sur mobile

Si le mobile sera un canal pertinent, vous devez l’inclure explicitement dans la maquette conceptuelle. Cela inclut :

• des champs de formulaire en suite d'outils et des sections réductibles
  
• un placement peu encombrant du récapitulatif de la commande
  
• des appels à l’action conviviaux
  
• l’éventualité pour remplissage automatique ou des déclenchements de portefeuilles numériques
  

Ne partez pas du principe que la disposition sur ordinateur de bureau fonctionnera sur un écran plus petit : concevez intentionnellement pour le mobile.

Quels défauts de conception courants les entreprises doivent-elles éviter à l’étape de maquette conceptuelle?

La phase de maquette conceptuelle est le moment de détecter les oublis qui pourraient se transformer en coûts importants en aval et nuire à la conversion. Voici quelques défauts de conception courants à éviter avant d’aller au delà de la maquette de conception.

Trop de champs

Chaque champ ou étape supplémentaire est une raison potentielle pour un client de partir. À l’étape de maquette conceptuelle, testez sous pression ce que vous collectez en vous demandant :

• Avons-nous vraiment besoin de numéros de téléphone, de titres ou d’adresses de facturation complètes?
  
• La création de compte pourrait-elle avoir lieu après paiement et pas avant?
  
• Ce paiement pourrait-il fonctionner sans nécessiter d'shipping address (p. ex. pour les produits numériques ou les abonnements)?
  

Disposition ou étiquetage de champs peu claire

Des étiquettes ambiguës ou une structure brouillonne peuvent semer la confusion chez les clients. Évitez :

• de placer des champs dans un ordre non conventionnel (p. ex. CVV avant numéro de carte)
  
• de vous appuyer fortement sur le texte fictif dans les champs, qui disparaît au fur et à mesure que le client tape, créant un scénario où le client oublie ce qu’il doit saisir
  
• d’inclure les sections d’adresse sans distinction entre la facturation et la livraison
  

Si un membre de votre équipe hésite à expliquer ce que signifie quelque chose ou son emplacement, supposez qu’un utilisateur fera de même.

Des appels à l’action faibles ou mal placés

Un appel à l’action mal aligné casse le flux. À l'étape de maquette conceptuelle, confirmez que l’appel à l’action est :

• libellé clairement et lié à une valeur spécifique (p. ex. « Payer 64,95 $ », plutôt que « Envoyer »)
  
• positionné là où les clients l’attendent, généralement près du bas du formulaire
  
• non obstrué par des fenêtres contextuelles, des notes de bas de page ou des liens secondaires
  

Cas aberrants et états d’erreur ignorés

Si votre maquette conceptuelle indique uniquement le chemin idéal, il est incomplet. Anticipez ce qui pourrait mal tourner en vous demandant :

• Que se passe-t-il en cas de card is declined?
  
• Comment indiquer un champ obligatoire manquant?
  
• L’utilisateur peut-il changer de mode de paiement en plein milieu du processus?
  

Faites de l’espace pour la gestion des erreurs et annotez comment s’y prendre.

Pas de plan pour le mobile

Si votre maquette conceptuelle est uniquement destinée aux ordinateurs de bureau, vous ratez la moitié du tableau. Assurez-vous que :

• les champs forment une suite propre avec suffisamment d’espace pour appuyer
  
• les éléments importants (p. ex., appel à l’action, récapitulatif de commande) ne sont pas dissimulés
  
• des sections extensibles ou une divulgation progressive (révéler progressivement de nouvelles sections au fur et à mesure que les informations sont remplies) sont envisagées lorsque l’espace d’écran est restreint
  

Si la navigation sur mobile semble étroite ou déroutante dans les maquettes conceptuelles, elle ne s’améliorera pas soudainement comme par magie au moment de la production.

Signaux de confiance manquants

Même sans visuels finaux, vous devez laisser place à des indicateurs de confiance dans votre maquette conceptuelle, tels que :

• la langue « Paiement sécurisé »
  
• les badges SSL (Secure Sockets Layer) et TLS (Transport Layer Security)
  
• les logos des modes de paiement acceptés
  
• les références aux politiques de refund ou de retour
  

Si vous les ignorez pendant la phase de maquette conceptuelle, vous pourriez également les oublier au moment de la conception finale.

Attentes des utilisateurs brisées

Une conception centrée sur la nouveauté plutôt que sur la convivialité peut être préjudiciable. Demandez-vous :

• Ce flux ressemble-t-il à d'autres modèles de paiement courants?
  
• Cachons-nous des étapes ou compliquons-nous trop ce qui pourrait être simple?
  
• Est-ce que quelque chose risque de prendre au dépourvu un premier utilisateur?
  

La familiarité rassure les clients : vous devez en tirer pleinement parti dans vos maquettes conceptuelles, et non vous y opposer.

L’identification précoce de ces problèmes peut constituer une base solide pour votre équipe. Si vous voulez gagner du temps et ignorer complètement l'étape de maquette conceptuelle, Stripe Checkout propose un formulaire de paiement préconfiguré qui hiérarchise uniquement les champs nécessaires, valide les saisies en temps réel et réduit le nombre de clics nécessaires pour payer.