7 astuces pour concevoir une meilleure page de paiement

Avec la saison des vacances qui approche, beaucoup d’entre nous allons faire des achats en ligne. (OK? Peut-être beaucoup de shopping!) La page de paiement d'un site Web peut faire de cette expérience une expérience inoubliable, ou une expérience que vous souhaitez oublier.

Si vous concevez une page de paiement, de nombreuses considérations doivent être prises en compte: fonctionnalité, convivialité, sécurité et conception. Le dernier élément est un élément sur lequel chaque concepteur peut avoir un impact. Une page de paiement ne doit pas être conçue après coup; c'est sans doute la page la plus importante de l'expérience d'achat en ligne.

Le rendre visuel

Cela peut sembler une idée évidente, mais la page de paiement d'une page de commerce électronique doit être visuelle. Trop de sites Web en font une forme basique.

Ceci est important pour plusieurs raisons. Une connexion visuelle entre les pages de paiement et le reste du site établit la crédibilité de la marque. Si la page de paiement ressemble au reste du site, elle se sent en sécurité et appartient au site. Les éléments visuels, des logos aux articles du panier, aident les utilisateurs à se rappeler pourquoi et où ils se trouvent sur le Web. (N'oubliez pas qu'une grande partie du monde est un groupe d'utilisateurs d'Internet assez distraits.)

Alors, quel type de visuel devriez-vous utiliser?

  • Images. Au minimum, chaque élément doit être accompagné d'une icône indiquant ce que l'utilisateur achète.
  • Logos Le logo de la société doit toujours être clairement visible (et cliquable pour revenir au reste du site).
  • Gros boutons. Faites des appels à l'action comme? Ajouter au panier ,? ? Mettre à jour l'élément? et? Acheter maintenant? grand, coloré et attrayant. Les boutons doivent être faciles à trouver et vous donner envie de cliquer dessus.
  • Couleur. Trop de pages de paiement sont toutes blanches avec des cases en contour. C'est bien d'utiliser la couleur. Conservez les couleurs du reste du site Web sur la page de paiement.
  • Typographie. Le texte doit être simple et facile à lire. (Les gens ont tendance à «faire confiance» aux polices simple serif ou sans serif plus qu’à un script ou à une police de caractère.) Vous pouvez aussi vous amuser avec des éléments de texte plus volumineux.

Inclure les logos de paiement et les sceaux de sécurité

Incluez des éléments visuels qui font que les utilisateurs se sentent bien de magasiner avec vous. Bien que la plupart des gens comprennent qu'ils peuvent payer avec une carte de crédit en ligne, la présence de petits logos à côté des boutons de paiement renforce cette idée.

C'est un petit repère visuel rassurant pour les utilisateurs. Cela peut aider à éliminer la confusion sur les types de paiement acceptés.

N'oubliez pas d'inclure des logos pour tous les types de paiement. (Trop de sites se souviennent des logos de cartes de crédit, mais oublient PayPal ou Apple Pay.) Conservez les petites images et regroupez-les de manière organisée. (Heureusement pour les concepteurs, la plupart de ces éléments sont bien rendus dans de petits formats et ont des proportions similaires.)

Envisagez de concevoir ou de télécharger un kit de logos d'interface utilisateur spécialisé à cette fin. Vous n'êtes pas limité aux logos de la société. Juste ne soyez pas trop sauvage avec la conception; l'objectif est que les utilisateurs reconnaissent les logos à une très petite taille à l'écran.

Envisager d'agrandir les images

Les pages de paiement qui permettent aux utilisateurs de jeter un dernier coup d'œil aux éléments du panier constituent un atout supplémentaire. Les effets de survol qui agrandissent chaque élément du panier ou une fenêtre contextuelle peuvent permettre aux utilisateurs de voir les achats potentiels une dernière fois et d’éliminer les frustrations de devoir revenir en arrière pour vérifier une couleur ou une taille.

Une autre option consiste à créer des images miniatures surdimensionnées pour les éléments de la page de paiement. Cette image supplémentaire peut aider un utilisateur à confirmer son choix d'achat et à se sentir encore mieux par rapport à l'achat.

Trop de concepteurs omettent d'inclure des images, ce qui facilite l'abandon d'un panier. Pensez-y de cette façon, avoir une image à la caisse équivaut à faire la queue dans un magasin physique avec un article en main. Peu de gens changent d'avis à ce stade.

Utiliser des tableaux

Les informations dans le panier doivent être organisées à la perfection. Le moyen le plus simple d'y parvenir est de concevoir le chariot sous la forme d'un tableau ou d'un format similaire basé sur une grille.

Utilisez des colonnes et des lignes pour afficher chaque article, une image, une description, la quantité, le prix et toute autre information pertinente. Les éléments doivent trier verticalement dans les colonnes avec d'autres informations dans la ligne correspondante. Ce style de tri est essentiel pour les chariots contenant plusieurs éléments afin que les utilisateurs ne soient pas obligés de se déplacer sur les écrans plutôt que de haut en bas (ce qui est plus confortable).

Dans chaque tableau ou grille, utilisez un alignement cohérent. La gauche est la plus commune. Considérez la façon dont les prix s’alignent également pour qu’ils soient faciles à voir à l’écran. Idéalement, les prix devraient être alignés de manière à ce que les chiffres avant et après une période soient dans les mêmes positions pour chaque article.

Pensez à la fonctionnalité

Bien qu'une grande partie de la fonctionnalité globale de la conception d'une page de paiement puisse ne pas être la directive d'un concepteur, c'est quelque chose qui doit être pris en compte. (Que les concepteurs ou les développeurs créent ces concepts peut varier d'une équipe à l'autre.)

Les principaux problèmes de fonctionnalité nécessitant des éléments de conception incluent:

  • Possibilité et facilité d'impression à partir de plusieurs écrans, y compris avant et après la validation.
  • Incluez une fonctionnalité de liste de souhaits ou une autre méthode pour enregistrer des éléments en vue d'un achat ultérieur. Rendre cette information partageable.
  • Trop de pages de paiement deviennent des trous sombres sans liens renvoyant vers d'autres parties de l'expérience d'achat. Ne verrouillez pas les utilisateurs dans des pages dont ils ne peuvent pas sortir.
  • Autoriser l'édition d'articles dans le panier.
  • Envisagez une option ou une page de facturation imprimable. (Ceci est particulièrement important si vos clients incluent des clients professionnels.)
  • Assurez-vous que les utilisateurs comprennent facilement comment modifier, modifier ou mettre à jour des commandes. De nombreuses pages de paiement incluent un compteur de quantité à côté de chaque article. Rendez ce numéro facile à modifier (et il devrait se mettre à jour automatiquement).
  • Facilitez la création d'un compte après le paiement. Ce ne sont pas tous les clients qui ont déjà magasiné avec vous. Il devrait être rapide et facile de faire un achat puis de créer un compte. Couvrez la vente en premier.

Les icônes clés doivent apparaître sur chaque page

En ce qui concerne la conception de la page de paiement, le concept de site Web commence à inclure une option de commerce électronique. Certains éléments de conception doivent être présents sur l’ensemble du site Web.

Les icônes Ajouter au panier et à la caisse doivent figurer dans toute la conception. Les boutons ou les éléments de navigation doivent avoir la même conception (ou très similaire) que les boutons d’action correspondants de la page de paiement.

Rappelez-vous les utilisateurs mobiles

Un pourcentage croissant des ventes se fait sur des appareils mobiles plutôt que sur des ordinateurs de bureau. Pensez également à la conception de votre page de paiement et à la facilité d'utilisation pour ces clients. (Rien n'est plus frustrant - et trop commun - qu'un site Web fonctionnant sur un téléphone jusqu'à la page de paiement.)

Éléments de conception avec robinet et glisser à l'esprit. Les boutons doivent être plus gros et plus faciles à voir. Le formulaire doit inclure des zones plus profondes afin qu’elles soient faciles à exploiter sans devoir zoomer.

Pour les utilisateurs mobiles, il est tout aussi important de tout garder sur une seule page. Créez une page de paiement qui défile plutôt que de parcourir plusieurs écrans.

Conclusion

Concevoir une page de paiement peut être une tâche ardue pour tout concepteur. La clé est quelque chose dont nous parlons souvent dans la communauté des concepteurs: restez simple. Concevez un plan simple avec des effets minimaux et mettez l’accent sur la convivialité, et vous aurez plus de chances de réussir.

Rappelez-vous l'utilisateur lorsque vous pensez aux pages de paiement. S'efforcer de concevoir une page attrayante, des logos pour guider et informer les utilisateurs, de nombreuses images, une présentation organisée, des fonctions, des icônes pour guider et promouvoir les ventes et une interface conviviale pour les appareils mobiles.

Banque d'images avec l'aimable autorisation de Creative Market.