web-dev-qa-db-fra.com

Comment puis-je dire très clairement que l'utilisateur doit effectuer une dernière action?

Je développe un nouvel assistant de paiement pour le site Web de mon entreprise et j'ai ajouté un panneau "confirmer vos sélections" comme dernière étape de l'assistant:

Checkout wizard

De mon point de vue en tant que designer, je sens que j'ai au moins trois indices qui indiquent que l'utilisateur doit toujours appuyer sur un bouton avant que sa commande soit terminée:

  1. Il indique "vous avez presque terminé" en haut du panneau.
  2. La barre de progression en haut montre qu'ils sont encore au milieu de l'étape "soumettre".
  3. Il y a un grand bouton vert qui dit "soumettre la demande", bien qu'en bas.

Cependant, j'ai toujours peur que certains utilisateurs se méprennent et la confondent avec une page "votre commande est terminée, voici votre récapitulatif", omettant ainsi de soumettre leur demande.

De la façon dont je le vois, je pourrais aborder cela par l'un des:

  1. Ne vous en faites pas. Aucun utilisateur ne serait aussi stupide.
  2. Soumettre automatiquement leur demande avant d'accéder à cette section. Je pense que cela peut être faux/illégal.
  3. Utiliser une sorte de pop-up Javascript ennuyeux s'ils essaient de s'éloigner ou de fermer le navigateur avant de cliquer sur "soumettre la demande".

Aucun de ces sons ne me satisfait. Y at-il autre chose que je puisse faire? Je voudrais éviter de supprimer complètement cette page, car nous avons remarqué que les utilisateurs mal orthographient fréquemment leurs adresses e-mail.

Mise à jour: Je vais essayer de combiner les étapes de paiement et de confirmation dans la dernière étape. Veuillez noter que le client ne doit pas être facturé lorsqu'il soumet sa demande - nous enregistrons simplement les informations de sa carte avec Stripe.

Combined payment and confirmation

Pour une meilleure idée de mon objectif, vous pouvez voir la version live de ce formulaire sur: http://bloomingtontutors.com/get-tutor

52
alexw

Changer le comportement pour l'adapter à l'intuition

Vous souhaiterez peut-être modifier le comportement pour l'adapter à l'intuition de l'utilisateur, au lieu de modifier la conception pour "faire comprendre à l'utilisateur" le comportement que vous aviez initialement prévu.

S'il n'y a pas de raison majeure pour que les détails soient figés à ce stade (et ils ne le sont pas, car apparemment ils peuvent l'annuler avant la première session de toute façon sans être facturés), alors toutes les erreurs peuvent être corrigées plus tard si/quand nécessaire. Vous pouvez donc supprimer cette dernière action (car du point de vue de l'utilisateur, ils ont déjà saisi tout ce qui est nécessaire, et le minimum devrait être suffisant), avoir la demande déjà "enregistrée" à ce stade et renommer la dernière écran pour "Examiner vos informations et les corriger si vous trouvez soudainement une erreur" au lieu de "Examiner avant de soumettre".

13
Peteris

Rendez la confirmation dans un modal:

enter image description here

Cela mettra explicitement en évidence pour l'utilisateur qu'une action supplémentaire est nécessaire.

77
Tom Griffin

Je n'aime pas les mots Submit Request - en tant que concepteur c'est ce que fait appuyer sur le bouton. Pour un utilisateur, cela n'a plus ou moins de sens que Press This Button. Je ne pense pas Send Request est beaucoup mieux, peut-être pire (où la demande sera-t-elle envoyée?).

  • Je suggère Place Booking si tel est le but de votre système: réserver un cours quelque part.
  • Alternativement:

    • "Réserver un cours"
    • "Finaliser la réservation"
    • "Confirmer la réservation"

Vous pouvez également avertir (comme le font certains sites):

Votre cours est non réservé jusqu'à ce que vous cliquiez sur le bouton "Place Booking". Vérifiez que vos coordonnées sont correctes et cliquez dessus lorsque vous êtes prêt.


À quoi sert le bouton "Terminer ->"? Est-ce la même chose que "Soumettre une demande"? Sinon, quel est son but?

21
Nick Gammon

Vous devriez vraiment changer le libellé de vos boutons d'action principaux pour le rendre absolument clair.

"Soumettre une demande" ou "Envoyer une demande" est ce que fait votre navigateur lorsque l'utilisateur clique sur un lien ou un bouton, mais "Payer pour la session" c'est ce que l'utilisateur veut ou a à faire dans ce contexte pour continuer.

En utilisant une boîte de dialogue modale, vous montrez à l'utilisateur qu'il doit terminer la boîte de dialogue avant de pouvoir faire quoi que ce soit d'autre sur le site Web, mais les modaux sont connus pour causer des problèmes sur les petits téléphones portables lorsque le bouton "Fermer" est en dehors de la fenêtre d'affichage.

9
iHaveacomputer

Ajoutez un onglet "confirmation" en dernier, après "soumettre" (et changez le texte "soumettre" en "résumé"), afin que l'utilisateur sache qu'il y a une autre section à parcourir avant d'avoir terminé. Il est étrange que l'utilisateur soit à la dernière étape des extractions à onglets, mais cela ne soit pas fait.

4
Web UX Guy

Vous devez considérer que votre entonnoir de paiement est trop long. (autant d'étapes dans votre barre de progression. Pensez à combiner ou à éliminer certaines étapes), cela peut effrayer les utilisateurs + trop de possibilités pour l'utilisateur de quitter l'entonnoir sans conversion.

3
Helen Zhabko

Votre page donne une pondération égale à tout, et c'est pourquoi elle ressemble à une page de résumé - vos instincts sont corrects. Choisissez des éléments à mettre en évidence, comme ce qu'ils ont acheté et combien.

Les informations résumées que vous avez ici sont bonnes. Mes tests utilisateurs précédents ont montré que les clients le lisent vraiment et l'utilisent pour la correction. Pour cette raison, je ne pense pas qu'il soit si important que vous leur demandiez de "s'assurer que c'est correct" - car ils sont susceptibles de le lire de toute façon. Vous pouvez minimiser ces informations et mettre en évidence à la place ce qu'elles paient et leur montant.

Utilisez le mot "payer" ou similaire, plutôt que le mot générique "soumettre des informations"

3
jackiemb

Pas une réponse complète, mais votre approche n ° 1 est fausse, comme vous l'avez probablement deviné.

Bank of America a une page similaire lors du transfert d'argent entre les comptes ou sur le compte d'un ami. Vous choisissez le compte de, le compte à, le montant total, la date du transfert, puis appuyez sur suivant. Ensuite, vous êtes sur la page "tout revoir". Une fois que vous avez cliqué sur "terminer le transfert", il démarre le transfert réel.

J'ai, à plusieurs reprises, pensé à tort que j'avais terminé sur cette dernière page, puis je me suis demandé pourquoi mon argent n'avait pas été transféré. Je le remarque toujours parce que la prochaine chose que je fais est de vérifier mon compte pour m'assurer que le transfert apparaît dans mon journal de paiement, mais je peux certainement voir des gens faire la même erreur, en particulier sur un site Web qu'ils n'achètent pas souvent. Étant donné que vous ne traitez pas immédiatement le paiement, ils n'ont même pas la possibilité de vérifier le solde de leur compte pour s'assurer que le paiement a bien été effectué, mais s'ils étaient si fastidieux, ils auraient probablement attendu qu'une page de confirmation de paiement s'imprime ou enregistre. de toute façon, puis réalisé pourquoi ils n'en avaient pas encore.

2
MichaelS

Y a-t-il une très bonne raison pour laquelle vous mettez la page de confirmation après la page des détails du paiement?

Normalement, on confirme leur adresse e-mail et les détails d'expédition, suivis des détails de paiement (les numéros de carte ont des sommes de contrôle pour se prémunir contre les fautes de frappe, annulant tout besoin de validation supplémentaire). En outre, la plupart des banques exigent une forme d'authentification à deux facteurs lors de la mise en attente d'une carte, ce qui échouerait si l'utilisateur a tapé son numéro de carte d'une manière qui aboutit à une somme de contrôle valide.

Si l'étape de paiement est transformée en étape finale, le problème est résolu, car l'utilisateur s'attend à payer et ne considérera pas le processus terminé avant d'avoir payé. Un avantage supplémentaire est que l'utilisateur n'aurait pas besoin d'être averti (comme vous l'avez fait dans votre page de détails de paiement) du risque (inexistant) d'être doublé si le processus d'achat est interrompu.

1
March Ho

Je suggérerais également de rendre la boîte rouge plutôt que verte. Le vert donne l'impression qu'il est terminé avec succès, le rouge OMI impliquerait que plus d'action est nécessaire.

1
user71620

J'ai créé une maquette simple qui pourrait mieux expliquer l'approche. J'ai vu cela fait dans beaucoup de mobiles où le reste de l'écran est superposé mais la seule action que vous pouvez effectuer est le seul élément cliquable. Il existe également une option d'annulation pour revenir à la vue précédente. J'aime cela car il supprime les conjectures d'un modal occupé et vous offre également une sortie facile . enter image description here

0
riotgear