Entreprises après avoir passé une commande c. Laquelle des trois options devriez-vous choisir ? Nombre raisonnable de champs dans le formulaire

Avez-vous déjà vu un enregistrement dans Webvisor d'un client ajoutant un article au panier, commençant à remplir les détails de la commande et... quittant le site ? Cette scène peut être comparée en termes de drame aux plans finaux de Titanic. Aujourd'hui, nous allons parler de ce qui pousse un utilisateur à quitter un site sans effectuer d'achat et comment y remédier.

Selon l'étude « Cart Abandonment Rate Statistics » du Baymard Institute, plus de 68 % des commandes qui finissent dans le panier ne finissent pas par être achetées et payées.

Pourquoi l'utilisateur refuse-t-il l'achat envisagé ?

Liste de contrôle : comment faciliter l'achat dans une boutique en ligne

1. Ajouter au panier

1.1. Après avoir cliqué sur le bouton « Acheter » ou « Ajouter au panier », montrez à l'utilisateur que le produit a été ajouté

Après avoir cliqué sur le bouton « Ajouter au panier » jusqu'à ce qu'un retour apparaisse avec un message concernant l'ajout d'un produit, le bouton doit être inactif pour éviter de l'ajouter à nouveau au panier. Dans une fenêtre pop-up, vous invitez à effectuer un achat ou à poursuivre vos achats.

1.2. Lorsque vous survolez et cliquez sur le bouton « Ajouter au panier », il doit être mis en surbrillance ou changer de couleur

Si le bouton ne change pas d'apparence, l'utilisateur peut ajouter par erreur plusieurs produits identiques au panier.

Lorsque vous survolez le bouton « Acheter » dans l'« Osette », le bouton devient plus lumineux :

Modification de l'apparence du bouton dans « Bonjour » après avoir cliqué :

1.3. Indiquer la procédure de retour et d'échange des marchandises

Cela est particulièrement vrai pour les magasins de vêtements et de chaussures, où la probabilité de se tromper de taille est élevée. L’utilisateur veut être sûr qu’il pourra finalement obtenir la taille dont il a besoin.

Informations de livraison sur les pages Hello :

Sur le site Photomag, des informations détaillées sont disponibles en cliquant sur le lien « Plus de détails » :

2. À l'intérieur du panier

2.1. Dans le panier, fournissez des informations détaillées sur les marchandises commandées

Afin que l'utilisateur puisse vérifier l'exactitude de sa commande et refuser les marchandises qu'il a placées dans le panier à des fins de comparaison, nous fournissons des informations complètes sur la commande :

• image du produit (lorsque vous survolez la photo, elle doit s'agrandir),
• lorsque vous cliquez sur l'image, des informations détaillées sur le produit doivent être affichées,
• indiquer le nombre d'unités disponibles,
• si le produit est disponible dans les magasins hors ligne, indiquez où vous pouvez le récupérer vous-même.

2.2. Le bouton permettant de passer à l'étape de conception suivante doit être mis en évidence visuellement

Le bouton « Continuer la commande » du site Leboutique est dupliqué et mis en évidence en couleur entre autres éléments :

Le bouton « Passer une commande » sur le site « Moins cher » est également difficile à manquer :

2.3. Le panier doit « se souvenir » de la commande

Peut-être que pour des raisons techniques ou autres, l'utilisateur ne peut pas effectuer un achat en une seule session. Lorsqu'il reviendra sur le site, il ne sera pas pratique de rechercher et d'ajouter à nouveau des produits. Il y a une forte probabilité qu'un acheteur potentiel abandonne les manipulations répétées, le site doit donc mémoriser le contenu du panier.

2.4. Ajouter un bouton pour supprimer des articles du panier

Par exemple, la possibilité de retirer un article du panier sur le site de la boutique Mobillac se présente sous la forme d'un petit lien :

2.5. Codes promotionnels et réductions

Placez les champs pour saisir les coupons de réduction et les codes promotionnels sur la page du panier.

Ils ne doivent pas être actifs ou visibles par défaut. Cela distrait l'utilisateur, déjà prêt à acheter, du processus de paiement et le motive à quitter le site à la recherche d'informations sur la possibilité de bénéficier d'une réduction.

Le champ du code promotionnel dans « Bonjour » est masqué par défaut :

Et il ne s'ouvre que lorsque vous cliquez dessus :

Mais sur le site Foxtrot, le champ du code promotionnel est visible par défaut. De plus, la page du panier vous propose de vérifier le solde de votre compte bonus en vous rendant sur un autre site :

Laissez le nom du champ de saisie être intuitif. Il est préférable de remplacer le flou « Voucher » par « Avez-vous un code promotionnel ? »

3. Inscription

3.1. Donner à l'utilisateur la possibilité d'acheter sans inscription

Les utilisateurs n'aiment pas s'inscrire lors de leur premier achat. Premièrement, ils ne sont pas sûrs de devenir des clients réguliers. Deuxièmement, personne ne veut recevoir du spam ennuyeux dans son courrier électronique. Et, troisièmement, l'inscription consiste à remplir des dizaines de champs, à récupérer un mot de passe et à transmettre un captcha.

Fonction « Acheter en un clic » dans « Photomag ». L'utilisateur ne laisse qu'un numéro de téléphone, le reste des informations est précisé par le responsable. Le bouton permettant de passer une « commande rapide » est visuellement mis en valeur parmi d'autres éléments, et le bouton permettant de passer une commande seul est invisible et semble même inactif :

Leboutique propose une alternative à l'inscription : la connexion via un compte de réseau social :

Supprimer la confirmation des coordonnées du processus d'inscription (en suivant un lien depuis un e-mail ou en saisissant un code depuis un SMS). Si la confirmation prend trop de temps, l'utilisateur partira simplement sans finaliser l'achat.

Si vous offrez la possibilité de commander sans inscription, rendez cette fonction visible sur la page.

Lors d'une commande sans inscription, la fonctionnalité ne doit pas être réduite. Si un mode de paiement n'est pas possible sans inscription, veuillez nous en informer à l'avance. Décrivez les avantages de l'enregistrement et les différences de fonctionnalités pour les utilisateurs ayant des statuts différents.

3.2. Enregistrement en arrière-plan

Souvent, les informations nécessaires pour passer une commande suffisent pour l’enregistrement. Informer l'utilisateur de l'inscription automatique par e-mail. Bien entendu, cette méthode a ses inconvénients, par exemple un mot de passe généré automatiquement, mais l'utilisateur gagne du temps et le magasin reçoit un nouvel abonné.

Voici comment cela est implémenté dans Rozetka :

Ou invitez l'utilisateur à s'inscrire après l'achat en fonction des informations qu'il a saisies.

3.3. Après l'enregistrement, une autorisation automatique et la poursuite de la commande devraient avoir lieu.

3.4. Suggérer d'utiliser un e-mail ou un numéro de téléphone comme identifiant

Si vous imaginez combien de ressources sur lesquelles un utilisateur ordinaire est enregistré et combien de paires d'identifiants et de mots de passe il doit se souvenir, alors la réticence à s'inscrire à nouveau devient compréhensible. Le numéro de téléphone et l’adresse e-mail sont des données dont le client se souvient toujours.

Fournissez une option de récupération de mot de passe sur la page de connexion.

« Rozetka » reconnaît l'utilisateur par email et aide à mémoriser le mot de passe « sans quitter la caisse » :

3.5. Enregistrez les informations complétées dans le champ de connexion

Lors d'une nouvelle visite, le client passe généralement par plusieurs connexions « standards » dans sa tête ou ne se souvient pas du tout qu'il s'est déjà inscrit sur le site. Invitez le client en laissant les données dans le champ de connexion.

3.6. N'abonnez pas automatiquement les inscrits à la newsletter.

La plupart des clients des boutiques en ligne en ont déjà assez de recevoir par courrier des montagnes de lettres inutiles. Décrivez les avantages évidents de l'abonnement et demandez si l'utilisateur souhaite recevoir des e-mails de votre part.

3.7. Réduire le nombre de champs de saisie

Si la ville et le quartier de l'utilisateur peuvent être déterminés automatiquement, laissez le système les remplir automatiquement. Dans ce cas, l'utilisateur doit pouvoir vérifier et modifier tous les champs.

Sur le site Leboutique, une liste déroulante vous permet de sélectionner un code opérateur mobile dans la liste.

3.8. La vérification de l'exactitude des données saisies doit être effectuée lors du remplissage du formulaire, et non après l'avoir soumis.

Après avoir soumis un formulaire avec des données incorrectes, les informations complétées doivent rester complètes.

La vérification sur la page du site « Moins cher » s'effectue après la soumission d'un formulaire dans lequel, après mise à jour, les données saisies ne sont pas enregistrées :

3.9. Les messages d'erreur doivent être clairs et expliquer comment le problème peut être résolu.

Le message d'erreur de saisie sur le site Web Hello décrit en détail comment corriger la confusion :

Leboutik demande à l'utilisateur comment saisir la bonne adresse email :

4. Livraison

4.1. Afficher les entrepôts de retrait en libre-service sur une carte et dans une liste

« Rozetka » offre la possibilité de sélectionner des points de retrait par adresse dans la liste ou de trouver l'agence la plus proche sur la carte :

4.2. Inviter l'utilisateur à sélectionner une adresse dans une liste ou à la saisir manuellement

Saisir ou sélectionner une adresse sur le site Photomag :

4.3. Précisez les frais de port lors du choix d'un mode de livraison

L'acheteur pourra être surpris par une augmentation du montant total de la commande à réception, ce qui entraînera un refus. Informez que les frais d'expédition sont payés par l'acheteur et fournissez un coût approximatif.

Affichage pratique du coût en fonction du mode de livraison sur le site Moins cher :

Le coût de livraison est visible lorsque vous le sélectionnez dans la liste du site Allo :

Sur le site Photomag, nous ne voyons pas le montant final, mais nous saurons quand nous pourrons clarifier le coût final :

5. Paiement et détails

5.1. Indiquez les moyens de paiement par ordre décroissant de popularité

"Bonjour" vous propose de choisir un mode de paiement :

Affichez les icônes du système de paiement à côté du nom.

5.2. Divisez les moyens de paiement en groupes selon leur signification :

• prépaiement par carte bancaire,
• paiement en espèces à réception,
• paiements électroniques,
• paiement par terminal.

Sélection d'un mode de paiement à Rozetka :

5.3. Précisez la commission de chaque moyen de paiement

Lorsque vous sélectionnez un mode de paiement, le montant total sur la page « Moins cher » du site change :

Mobillac motive ses clients à payer par carte :

5.4. Si votre produit est acheté régulièrement, enregistrez les informations de paiement afin que l'utilisateur n'ait qu'à ajouter l'article au panier et à cliquer sur "Payer".

5.5. Ne demandez pas à l'utilisateur le type de système de paiement si le montant de la commission ne dépend pas du choix

Les premiers chiffres du numéro de carte identifient de manière unique le système de paiement : Visa, MasterCard, etc. Si le prix ne change pas lors du paiement avec une carte, déterminez automatiquement le système de la carte saisie par l'utilisateur.

5.6. Lors de la saisie d'un numéro de carte, le champ de saisie doit répéter visuellement les chiffres du numéro sur la carte elle-même

Les nombres à six chiffres sont divisés en 4 blocs de 4 chiffres. Après avoir rempli chaque bloc, le passage au suivant doit s'effectuer automatiquement

Veuillez noter qu'il existe des cartes avec des numéros autres que seize. Les cartes Maestro peuvent avoir 13, 16 ou 19 chiffres. Si votre traitement accepte des cartes avec un nombre de chiffres différent dans le numéro, assurez-vous que le champ de saisie s'adapte aux données saisies. Par les six premiers chiffres, vous pouvez déterminer le nom du système de paiement, et si ce système a un nombre de chiffres différent dans les numéros de carte, le champ doit changer.

5.7. Collecter les informations de paiement sur le site Web du magasin

Si, après avoir cliqué sur le bouton « Payer », l’utilisateur arrive sur une page de ressources de paiement, cela prête à confusion. Même les internautes expérimentés se sentent mal à l’aise de laisser leurs informations de paiement en dehors du magasin.

S'il n'est pas possible de remplir les données du formulaire sur le site, assurez-vous que le style du site est conservé sur la page de paiement.

Laissez sur la page de paiement la possibilité de revenir sur le site du magasin sans payer. Ici, vous pouvez également saisir des informations sur votre commande (montant de la commande et contenu du panier).

5.8. Fournir des informations sur la sécurité du paiement sur la page de paiement

• connexion https sécurisée,
• logos du système de paiement et certificats de sécurité.
• si une confirmation de paiement par SMS n'est pas requise, informer l'utilisateur que le paiement a été effectué sans la technologie 3DSecure.

5.9. Si le paiement n'a pas pu être traité, un message d'erreur devrait apparaître

Si, après l'échec du paiement, l'utilisateur est simplement redirigé vers la page de paiement ou vers le panier, il est alors difficile de comprendre si le paiement a réussi ou non.

Message indiquant que le paiement n'a pas pu être effectué sur la page « Bonjour » :

Proposez des options de paiement alternatives.

5.10. Communiquer avec le client dans un langage clair

Remplacez les termes techniques et rarement utilisés par des termes plus familiers.

• "Authentification" - "Entrez le code du SMS",
• "Mot de passe dynamique" - "Code par SMS".

5.11. Le code de confirmation doit être situé au début du SMS afin qu'il puisse être lu sans ouvrir le message

6. Confirmation de commande

Sur la page de confirmation de commande, fournissez les informations complètes :

• Nom du produit,
• Quantité,
• Prix,
• Frais de livraison,
• Mode de livraison
• Commission du système de paiement,
• Coordonnées du destinataire.

Autoriser l'utilisateur à modifier les informations sur la page de confirmation.

Confirmation de commande lors du passage de commande sur le site Mobillac :

7. « Merci pour votre achat. »

Incluez les informations de commande sur la page « Merci pour votre achat ».

Le message sur la page d'achat finale dans la boutique Moins cher est très succinct :

« Photomag » indique également le numéro de commande :

"Bonjour" donne des informations détaillées :

Dupliquez les informations complètes sur la commande dans la boîte de réception du client.

Incluez une option d’impression sur la page de confirmation de votre commande.

Si le produit est électronique, dites-nous comment vous pouvez le télécharger.

Répétons ce que nous avons couvert

Panier:

• l'ajout au panier ne doit pas contenir d'étapes inutiles,
• afficher l'information indiquant que le produit a été ajouté au panier,
• à l'intérieur du panier, affichez des informations détaillées sur les produits,
• le bouton pour continuer l'achat doit être visible et nommé conformément aux attentes de l'utilisateur,
• Le champ de saisie du code promotionnel doit être masqué par défaut,
• ajouter un bouton pour supprimer les articles du panier,
• le panier doit se souvenir de la commande.

Autorisation:

• ajouter la possibilité d'acheter sans inscription,
• ajouter un enregistrement en arrière-plan,
• faites de votre adresse e-mail ou de votre numéro de téléphone votre identifiant.

Paiement:

• utiliser des noms intuitifs de moyens de paiement avec des icônes,
• afficher les moyens de paiement par ordre décroissant de popularité,
• avertir des commissions des systèmes de paiement,
• les champs de saisie des données de la carte bancaire doivent répéter visuellement l'emplacement des informations sur la carte physique,
• permettre à l'utilisateur de revenir sur la page du magasin sans payer,
• fournir des détails si le paiement est refusé.

Livraison:

• déterminer l'adresse automatiquement avec la possibilité de la modifier,
• afficher les entrepôts de retrait sur une carte et dans une liste,
• Veuillez indiquer le coût de livraison estimé.

Page « Merci pour votre achat » :

• afficher le numéro de commande,
• dupliquer les informations de commande par email,
• Dites au client comment les événements vont se développer ensuite.

Post-Scriptum

Il existe de nombreuses options pour implémenter la même fonctionnalité, et le choix dépend de votre niche, de votre public cible et de la plate-forme de votre site.

Le message principal de l'étude et de notre article est qu'il est presque toujours plus pratique d'effectuer un achat sur le site.

À propos, les spécialistes d'Aveb ont écrit un livre sur la convivialité des boutiques en ligne. Juste des instructions d'utilisation - uniquement des recommandations et des exemples spécifiques. L'avez-vous déjà lu ? Sinon, assurez-vous de télécharger et de lire.

Quelles améliorations du panier ont considérablement augmenté les conversions sur votre site ? A quoi recommandez-vous de faire attention ?

Des changements se produisent constamment. Une forte concurrence ne permet pas de stagner les tendances de développement du marketing Internet.

Si, par exemple, hier le bouton « demander un appel » était une sorte d'innovation séduisante, aujourd'hui il est déjà partout et aucun consommateur n'en sera surpris. C'est pourquoi les propriétaires des principales boutiques en ligne sont constamment à la recherche de nouvelles idées et de nouveaux « trucs ». De plus, il s’avère souvent qu’il n’est pas nécessaire d’aller bien loin – parfois une simple refonte « cosmétique » suffit.

Aujourd'hui, nous allons parler d'une chose apparemment simple comme passer une commande dans une boutique en ligne. Chaque site Web possède une telle section. Cependant, tous les sites ne peuvent pas se vanter que le fonctionnement de cette fonction soit parfait et attire le maximum de clients. Le plus souvent, c’est exactement le contraire qui se produit : les magasins « ne s’en soucient généralement pas ». Eh bien, il existe un formulaire de commande et ce qu'il faut d'autre.

C’est donc une très grande idée fausse. Plus il est difficile et incompréhensible de passer une commande, plus il est probable qu'environ 2/3 des visiteurs ne prendront même pas la peine d'acheter des produits dans votre boutique en ligne.

Règles de base du bon de commande

Commençons par le fait qu'il est toujours nécessaire d'indiquer en combien d'étapes se déroule le processus. passer une commande et combien de temps cela prendra-t-il. Par exemple, l'expression « trois étapes simples et quelques minutes de votre temps » augmente les chances que l'acheteur finalise la commande et la finalise.

Lorsqu'une personne a déjà cliqué sur « et est en train de réaliser un achat, elle a besoin de comprendre à quelle étape elle se trouve et combien d'étapes il lui reste encore à franchir. Il est préférable de ne pas utiliser de caractères spéciaux, d'icônes ou d'images pour indiquer les étapes suivantes. Le client peut les interpréter de manière incorrecte. Il est plus sûr et plus correct de tout écrire avec les mots : « choisir un mode de livraison » ou « confirmer la commande ». À côté des boutons indiquant l'action, vous ne devez rien placer d'inutile. Qu'elle soit seule dans un espace libre, mais visible, accessible et compréhensible.

Du point de vue de la psychologie et des habitudes humaines, les boutons d'action positive (« passer une commande », « confirmer », etc.) doivent être situés à droite et être attractifs et perceptibles aux yeux du client. Les boutons des séries « retour », « annuler », etc. doivent être à gauche et ne doivent pas se détacher du fond général afin qu'il n'y ait aucune incitation à les appuyer.

Si, en remplissant le formulaire, vous demandez au client certaines données personnelles, expliquez toujours pourquoi elles sont nécessaires : nom et prénom - pour préparer les documents pour la marchandise, numéro de téléphone - pour vous contacter en cas de problèmes de livraison, adresse e-mail - pour confirmer la commande.

Le processus d'inscription doit être cohérent. Il ne faut pas admettre qu'à n'importe quelle étape, l'acheteur doive interrompre ses actions et aller, par exemple, s'enregistrer. Il est peu probable qu'après cela il poursuive sa commande, reste dans votre boutique en ligne ou y revienne. Il ne devrait y avoir aucune raison pour qu’un acheteur doive interrompre son processus de commande.

Voici un exemple d'inscription incorrecte, où une inscription soudaine est requise pendant le processus d'achat. Mais il s'agit d'Ozon.ru, le plus grand hypermarché de Russie, et il dicte ici ses propres règles.

Une autre erreur courante que l’on retrouve souvent sur les sites internet et que vous avez probablement rencontrée. Ainsi, vous avez rempli de nombreux champs différents indiquant beaucoup de données vous concernant, cela a pris un certain temps, cliquez sur le bouton « suivant », puis le système vous renvoie une erreur indiquant que, par exemple, dans un champ, vous avez écrit quelque chose de manière incomplète ou incorrecte. Et puis vous voyez que pour corriger ces erreurs, il faut d’abord remplir tous les formulaires ! Pour le moins, c'est ennuyeux. Maximum – le client quitte votre site. Ne permettez pas un si triste malentendu.

N'oubliez pas qu'à toutes les étapes de la passation d'une commande, les informations les plus importantes doivent être visibles : le coût et le contenu de la commande, les conditions de livraison et les modes de paiement.

Et enfin, l'option la plus idéale est d'indiquer spécifiquement tous les délais de livraison et leur coût spécifique. En d'autres termes, l'expression « livraison sous 5 à 15 jours » semble vague et n'évoque aucune émotion positive. L'inscription «le produit sera livré le 1er septembre» plaira bien plus à l'acheteur. Par exemple, j'aime beaucoup cette technique dans les boutiques en ligne, lorsque le champ de livraison détermine automatiquement ma ville par adresse IP et calcule immédiatement le coût et le délai de livraison de la marchandise.

Travailler sur un site internet de boutique en ligne est un travail long et minutieux. Il faut réfléchir à chaque détail et chaque petit détail de ce détail, introduire de nouvelles « astuces », analyser, changer et affiner.

Dans cet article, je vais vous parler d'une chose aussi importante pour la convivialité d'une boutique en ligne que l'interdépendance des champs sur la page de paiement dans le panier.

Je vais utiliser un exemple pour expliquer ce que c'est. Supposons que votre boutique en ligne soit géographiquement située à Saint-Pétersbourg, où vous disposez d'un point de retrait ou d'une boutique hors ligne. À Saint-Pétersbourg, vous livrez par coursier et offrez la possibilité de venir vous chercher vous-même. Mais en plus de cela, vous livrez dans toute la Russie. Dans ce cas, comment mettre en œuvre la commande correcte sur le site Web afin qu'elle soit pratique pour tout le monde, y compris ceux de vos clients qui se trouvent dans la même ville que vous (ils peuvent utiliser le retrait en libre-service ou la livraison par coursier) et d'autres qui ne peuvent que recevoir leur commande par les services postaux.

Il s'avère que tous les clients peuvent être divisés en deux groupes - locale(de Saint-Pétersbourg) et hors de la ville(depuis n'importe quelle autre ville de Russie).

Sachant cela, déterminons quel ensemble minimum de champs dans le formulaire de paiement sera nécessaire dans votre magasin pour chacun de ces groupes.

Comme vous pouvez le constater, les champs de commande sont différents pour les acheteurs des boutiques en ligne locales et pour les acheteurs non-résidents.

C'est exactement la même dépendance des champs du panier dont j'ai parlé au début. Après que l'acheteur ait indiqué sa ville, en tenant compte de cette ville, nous lui donnons la possibilité de remplir uniquement les champs nécessaires dans ce cas et lui donnons le choix uniquement des modes de paiement et de livraison que nous pouvons accepter et réaliser.

En termes simples, le magasin ne doit pas afficher à l'acheteur les champs que l'acheteur n'a pas besoin de remplir ou de sélectionner. Par exemple, si un magasin livre à Moscou uniquement via les services postaux, mais ne peut pas livrer par coursier, vous n'avez pas besoin d'afficher le mode de livraison « Courrier » pour la ville de Moscou. De plus, si lors du choix du mode de livraison « Gruzovozoff », vous ne pouvez techniquement pas accepter le paiement par « Paiement à la livraison », alors vous n'avez pas besoin d'indiquer ce mode de paiement pour le mode de livraison via « Gruzovozoff ». Je pense que la logique ici est claire.

C'est pareil avec les « locaux ». Il est inhumain qu'un acheteur local souhaitant récupérer lui-même une commande (s'il a choisi « Retrait ») soit obligé de remplir les champs « Adresse » et « Code postal ». Ensuite, lorsque « Retrait » est sélectionné, nous ne devons pas afficher les modes de paiement des clients qui ne sont pas disponibles pour le retrait. Il serait étrange que, lors du retrait, l'acheteur choisisse de payer en espèces via Euroset.

Même si à première vue cette relation entre les domaines peut paraître déroutante, en réalité tout est très simple. Surtout si cette fonctionnalité est prise en charge dans le CMS. Ainsi, dans mon CMS 1C-Bitrix préféré, une commande similaire dans une boutique en ligne peut être configurée avec la souris en 10 à 15 minutes. Sans aucun problème, vous pouvez spécifier pour quelle ville quels champs afficher, quels services de livraison et modes de paiement connecter, etc. De plus, la dépendance ne doit pas nécessairement se faire par rapport à la ville d'où est originaire l'acheteur. Cela dépend de la méthode d'expédition. J'ai choisi « Retrait » - vous ne verrez aucun champ supplémentaire dans les modes de paiement. En même temps, du côté du client, tout semble logique, il n'y a pas de questions « pourquoi je remplis l'adresse » si je récupère la commande moi-même, etc.

Les « champs liés » ont des applications qui vont au-delà de la simple amélioration de la convivialité du paiement. Vous pouvez afficher différents modes de livraison pour différentes villes. Par exemple, il existe un service de livraison pratique qui livre uniquement dans 15 villes comptant plus d'un million d'habitants. Vous pouvez configurer ce service pour qu'il soit disponible uniquement pour les acheteurs de ces villes.

Il semblerait que ce qui précède soit évident. Mais dans de nombreuses boutiques en ligne, ces choses évidentes ne sont pas appliquées et, par conséquent, recevoir et passer une commande comporte de nombreux champs, en remplissant lesquels vous pouvez non seulement commander des produits de beauté, mais également recevoir un passeport étranger :-).

Tout le monde a probablement lu les cas populaires où dans les grands magasins américains (Amazon, Zappos, eBay), en échangeant deux formulaires, le taux de conversion était décuplé. Généralement, de tels exemples sont donnés en faveur de la nécessité de créer le moins de champs possible lors de la passation d'une commande.

Les écrins sont beaux et suscitent l'intérêt. Mais ils n’ont généralement pas d’histoire. Prenons un exemple où deux formulaires ont été échangés sur la page de paiement.

Pensez-vous qu’ils n’ont pas été modifiés au hasard, mais sur la base d’une sorte d’hypothèse ?

Essayons de donner un exemple d'une telle hypothèse. Pensez-vous (en vous rappelant ce qui a été dit plus haut sur l'interdépendance des champs) qu'il y a une différence entre ce qui doit être affiché en premier sur la page de commande : le champ « Code postal » ou le champ « Ville » ? À première vue, il n’y a aucune différence.

Ajoutons maintenant les données initiales de l'exemple décrit ci-dessus, lorsque le magasin est situé à Saint-Pétersbourg. Il existe un enlèvement en libre-service, il livre par coursier uniquement à Saint-Pétersbourg et expédie les commandes vers d'autres villes par l'intermédiaire de sociétés postales et de transport (il n'y a pas de livraison par coursier). Maintenant, est-ce que le champ qui vient en premier fait une différence, le code postal ou la ville ?

Oui, maintenant c'est le cas. De plus, les nouvelles informations affectent grandement l’ensemble du processus de commande. Nous devons maintenant rendre dépendants un certain nombre de champs. À savoir, le champ « Ville » doit être le premier. Bien que le champ « Ville » ne soit pas rempli, nous n'affichons pas les champs « Code postal », « Adresse », « Modes de livraison » et « Modes de paiement ». Ils n’apparaîtront qu’après avoir sélectionné une ville autre que « Saint-Pétersbourg ». Car à Saint-Pétersbourg, comme nous l'avons dit plus haut, le magasin livre uniquement par retrait en libre-service et par coursier. Et si c'est le cas, alors il n'a pas besoin de son code postal et de son adresse du client (remplissez deux champs de moins à la fois).

Regardons plus en détail ce qui a été amélioré. Nous n'affichons pas non plus tous les modes de livraison et modes de paiement, mais montrons uniquement ceux que nous pouvons réellement accepter. Pour Pierre, comme évoqué plus haut dans l'exemple, il s'agit d'un paiement à réception en espèces ou par carte bancaire. Pour les non-résidents, dont les commandes seront expédiées via une société de transport, il n'y aura bien entendu pas de paiement « contre remboursement ». De cette façon, nous avons évité au client une confusion inutile en choisissant parmi des options qui ne lui sont évidemment pas disponibles, et nous avons épargné au gérant du magasin des questions inutiles et connexes et l'insatisfaction des clients.

Ainsi, en ajoutant simplement une relation de champs à la page de paiement, il est possible pour un certain nombre d'utilisateurs de réduire le nombre de champs à remplir, de réduire la négativité associée à l'incompréhension de certains points concernant le paiement et la livraison, et en guise de le résultat augmente la conversion du panier. Personne ne doute que le nombre de ventes est lié à la convivialité du panier ?

Consultez le messageà propos de passer une commande sans vous inscrire dans Bitrix. Cela complète parfaitement cet article.

Objectif de la leçon

Développez une partie du modèle de formulaire de service responsable de la page de paiement de la commande.

Prenez connaissance des formulaires de choix d’un mode de paiement, de livraison et du questionnaire acheteur.

Objectif principal

L'objectif principal de la page de paiement- être renseigné par le visiteur. Questions que les utilisateurs rencontrent lorsqu'ils remplissent des formulaires :

Questions

• Par où commencer ?
• Est-il facile de remplir le formulaire ? Et combien de temps cela prendra-t-il ?
• Quel mode de paiement/livraison me convient ?
• Combien d’étapes devez-vous effectuer avant que le formulaire soit complètement rempli ?
• Pourquoi devrais-je remplir ces champs ? Pourquoi ont-ils besoin de ces données ?
• Peut-on vous faire confiance ? Mon email/numéro de téléphone ne tombera-t-il pas entre les mains des spammeurs ?
• Que dois-je faire après avoir soumis le formulaire ?

Tâches

Voyons quelles tâches la page de paiement résout.

Tâche	Solution
Proposer une mise en page simple et soignée	Pour ce faire, vous devrez ajouter de l'espace libre et supprimer tout ce qui est inutile.
Attirer l'attention sur les champs de formulaire	Pour ce faire, nous ajouterons un arrière-plan différent à la boîte avec des champs et des bordures autour du formulaire.
Supprimer les champs inutiles	Vous devrez déterminer les champs que l'utilisateur doit remplir pour que la commande puisse être complétée avec succès. Rien d'inutile qui pourrait obliger l'utilisateur à quitter la page de paiement
Surmonter les doutes des visiteurs	Vous pouvez informer que la commande peut être annulée à tout moment. Ou parlez des avantages d'acheter dans votre magasin : garantie, conditions de retour ou de livraison
Utiliser la voix active	Guidez l'utilisateur tout au long du processus de paiement à l'aide de verbes actifs. Ils peuvent être utilisés dans les titres de pages ou dans l'explication des champs du formulaire de commande.
Précisez le nombre d'étapes et l'heure pour passer une commande	Cela se fait en haut de la page, avant que l'utilisateur ne procède à la conception.

Résolvons maintenant ces problèmes.

Échantillon

Proposer une mise en page simple et soignée

Commençons par le plus difficile. Voici à quoi ressemble la page de paiement par défaut :

Pour simplifier l'apparence de la page de paiement, nous avons besoin de :

• Ne laissez que le logo et le nom du site en haut du site. Aucun lien
• Modifiez le contenu de la barre latérale. Nous n'avons plus besoin d'afficher une liste de catégories. Nous mettrons un peu d'aide dans la barre latérale pour ceux qui passent une commande et un message que vous pourrez appeler si quelque chose ne fonctionne pas.
• Simplifiez la partie inférieure du site - n'y laissez que le système de droits d'auteur et le site.

Si vous le souhaitez, vous pouvez abandonner complètement la barre latérale.

Recherchez dans le modèle de la page des formulaires de service le bloc global responsable de la partie haute du site (généralement $GLOBAL_AHEADER$) et placez-le dans la structure suivante :

$GLOBAL_AHEADER$

logo_simple.png est une image de logo simplifiée. Il existe plusieurs façons de simplifier le logo de la page de paiement : réduisez-le en taille, redessinez-le, conservez le style de l'entreprise ou rendez-le en noir et blanc.

Faisons de même avec la partie inférieure du site ($GLOBAL_BFOOTER$) et la barre latérale ($GLOBAL_CLEFTER$) :

$GLOBAL_AHEADER$ $GLOBAL_CLEFTER$

Si vous rencontrez des difficultés avec les blocages globaux, n'oubliez pas.

Attirer l'attention sur les champs de formulaire

Au total, sur la page de commande, l'utilisateur est invité à remplir quatre formulaires :

1. Formulaire avec le contenu de la commande (tableau) $BODY$
2. Formulaire de sélection du mode de livraison $DELIVERY_SELECTOR$
3. Formulaire de sélection du mode de paiement $PAYMENT_SELECTOR$
4. Formulaire de saisie de données personnelles $ORDER_FIELDS$

Afin de mettre en évidence les champs du formulaire, vous devez configurer .methods-list et #order-table :

Liste des méthodes, #order-table (marge : 20px ; couleur d'arrière-plan : #e5e5e5 ; bordure : 1px solide #cccccc ; )

Supprimer les champs inutiles

Nous parlons ici du formulaire de saisie de données personnelles $ORDER_FIELDS$ . Vous avez sûrement déjà terminé la leçon 31 sur les champs de commande. Nous devrons examiner chaque domaine ajouté au microscope et nous demander : « Les informations dans ce domaine sont-elles vraiment si importantes pour nous que nous sommes prêts à perdre des clients pour cela ?

Souvent, « Nom », « Numéro de téléphone » et « Adresse de livraison » suffisent.

Bien entendu, il convient de considérer la marginalité des biens. Dans les magasins où un grand nombre de commandes doivent être traitées, des champs supplémentaires augmenteront les bénéfices en réduisant les coûts de main-d'œuvre pour le traitement. Dans le cas d'un petit flux de commandes, il est judicieux de demander uniquement le nom et le numéro de téléphone, en s'appuyant principalement sur les qualifications des responsables commerciaux.

Une fois que vous avez décidé de supprimer les champs inutiles ou d'en ajouter de nouveaux, revenez à la leçon 31.

Surmonter les doutes des visiteurs

Comment nous allons surmonter :

• Après le formulaire avec le contenu de la commande $BODY$, nous placerons de brèves informations sur la garantie et les conditions de retour.
• À côté du formulaire de sélection des modes de paiement $PAYMENT_SELECTOR$ nous placerons des icônes d'attestations, de certificats (le cas échéant) ou des icônes de modes de paiement ;
• Avant le bouton "Passer une commande" $ORDER_BUTTON$, nous vous informerons que la commande peut être annulée/modifiée à tout moment. De cette façon, l’utilisateur n’aura pas de longues réflexions sur « Ai-je tout formaté correctement ? »
• Sous le bouton « Passer une commande » $ORDER_BUTTON$, nous placerons un bloc « Que va-t-il se passer ensuite ? ». Dans ce document, nous vous informerons qu'avant la livraison de la commande, nous vous rappellerons certainement pour clarifier à l'heure indiquée.

Malheureusement, dans le cadre de cette leçon, nous ne pouvons pas réfléchir à la manière d'ajouter des icônes aux formulaires de paiement ou de livraison. Ajoutez donc simplement le bloc approprié après $PAYMENT_SELECTOR$ .

Utiliser la voix active

Regardons un exemple spécifique. Par défaut, le choix d'un mode de paiement est décrit dans cette section du modèle :

Mode de paiement

$PAYMENT_SELECTOR$

Si vous utilisez la voix active, le même fragment ressemblera à ceci :

Sélectionnez le mode de paiement

$PAYMENT_SELECTOR$

Il en va de même pour le choix du mode de livraison, la vérification du contenu de la commande et le remplissage du formulaire de données utilisateur.

Précisez le nombre d'étapes et l'heure pour passer une commande

Avant $BODY$, ajoutez un message indiquant le nombre d'étapes du processus de paiement et le temps que cela prendra, par exemple :

Passer une commande en 4 étapes ne prend pas plus de 3 minutes

Où uCoz a-t-il plusieurs étapes pour passer une commande ? Nous parlons ici d’étapes sur une seule page. Je suggère cette option :

1. Étape 1 : Vérifiez le contenu de votre commande
2. Étape 2. Sélectionnez une méthode d'expédition
3. Étape 3. Sélectionnez une méthode d'expédition
4. Étape 4. Fournissez des informations sur vous-même

Veuillez noter que le titre de chaque étape utilise la voix active.

Ceci conclut la leçon. Il existe un certain nombre de paramètres pour la page de paiement qui vous permettront d'augmenter la conversion. Nous en parlerons dans les leçons suivantes.

Exercices

1. Créer une mise en page de page de paiement simplifiée
2. Supprimez les champs inutiles et sélectionnez les champs restants
3. Placez des blocs avec du texte qui aideront à surmonter les doutes de l'acheteur
4. Précisez le nombre d'étapes et le temps nécessaire pour passer la commande

Je suis impliqué dans le e-commerce depuis 4 ans. Il a lancé plusieurs de ses propres boutiques en ligne, a également créé un studio Web qui organise les ventes en ligne et a déjà mis en œuvre plus de 50 projets réussis.

Alors, commençons. Contenu important sur la page de livraison.

1. Régions de livraison

La toute première chose que vos clients devraient voir, ce sont les régions de livraison. À titre d'exemple, vous pouvez écrire brièvement et clairement que vous livrez dans toute la Russie en utilisant le titre de la page.

2. Modalités de livraison

Vos clients devraient voir les méthodes d’expédition disponibles parmi lesquelles choisir sur la page d’expédition. Pour chaque mode de livraison, il convient de noter les informations suivantes :

• Nom de la société de transport/type de livraison,
• Délais et coûts de livraison moyens. Une calculatrice ou un tableau avec les coûts serait préférable.
• Régions vers lesquelles les commandes sont envoyées via cette méthode.
• Délais de passation d'une commande pour une livraison par ce type de livraison.

3. Adresses d’entrepôt et d’expédition

Si possible, joignez une photo de l'entrepôt ou de votre magasin. Indiquez l'adresse à partir de laquelle l'expédition sera effectuée et à laquelle les marchandises sous garantie et retour pourront être envoyées.

4. Coût et délai de livraison

Assurez-vous d'indiquer combien de temps il faudra pour expédier votre commande depuis l'entrepôt.

Si le site calcule automatiquement les délais et les frais de livraison, veuillez le décrire.

Si le calcul des coûts est effectué par le responsable après réception de la commande, vous devez alors écrire à ce sujet et joindre les exemples les plus courants de calcul des coûts, par exemple « La livraison d'une commande à Moscou prend en moyenne 2-3 jours ouvrables et coûte 700 - 100 RUB”

5. N'oubliez pas le client après l'envoi.

Indiquez que vous envoyez un numéro de suivi, décrivez quand l'acheteur doit s'attendre à un numéro de suivi et comment (SMS ou e-mail). Indiquez comment l'acheteur saura que la commande est arrivée.

6. En conclusion

Je joins un exemple de prototype de page de livraison correctement conçue.

P/S J'espère que les informations vous ont été utiles. Écrivez vos questions, je me ferai un plaisir d'y répondre.