Besoin d'un modèle pour choisir 1 ou les 2 options (+ édité pour plus de clarté)
J'ai un écran qui permet à l'utilisateur de saisir les informations de compte bancaire (+ les informations de compte sont pour quelqu'un que l'utilisateur souhaite payer, maintenant ou plus tard - c'est un contexte bancaire, pas de commerce électronique), puis de choisir quoi faire avec cette information. Les options sont soit payer o enregistrer o les deux. (+ l'utilisateur peut ne pas payer à ce stade, donc une solution qui nécessite un paiement immédiat ne fonctionnera pas)
Dans mon prototype (utilisé pour les tests de concept), je les ai représentés comme 2 cases à cocher. L'utilisateur doit sélectionner 1 ou les deux. L'interaction est maladroite et je recherche une solution plus élégante.
L'exigence immédiate concerne le Web (ordinateur de bureau et mobile), mais il peut également exister une application native.
Toute suggestion serait appréciée.
J'irais avec un mix:
Une case à cocher, un bouton et un lien/bouton moins visible.
Avantage:
- Vous pouvez enregistrer la préférence des utilisateurs, donc dans la plupart des cas, il suffit de cliquer sur le bouton par défaut unique.
Peut-être que ce qui suit peut vous faire réfléchir sur le flux d'interaction.
Selon moi, vous avez une collection d'options existantes, ou la possibilité d'en ajouter une nouvelle. Cette liste est accessible via le [Saved Options] bouton. Cela déclenchera la fenêtre modale comme indiqué dans la deuxième maquette.
L'enregistrement d'un ensemble d'options de paiement est une fonctionnalité disponible, mais pas obligatoire pour qu'un utilisateur continue, vous pouvez donc le regrouper logiquement avec la saisie de données plutôt que près de la fin de la page, finalisant les contrôles de la page (c'est-à-dire le [Pay Now] dans cet exemple).
Le [Save Payment Options] devrait être un bouton car il déclenche une action immédiatement - s'ajoutant à la liste des options enregistrées - mais ne s'éloigne pas de la page.
En cliquant [Use Selected] du modal peut simplement préremplir votre formulaire pour vous.
Je ne sais pas dans quels domaines vous avez affaire, mais j'espère que cela vous aidera à démarrer.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Je pense que vous pouvez accomplir tout cela sans surcharger l'utilisateur avec des options à l'avant. J'envisagerais de donner DEUX boutons: juste "Payer maintenant" et "Enregistrer et continuer".
Si l'utilisateur choisit de sauvegarder, cela se produit et il est satisfait, laissé au même endroit dans le flux. S'ils choisissent de payer, ils seront intégrés à ce flux sans aucune interruption, mais à la fin du processus de paiement, fournissez-leur la possibilité d'enregistrer leurs informations de paiement pour de futurs achats.
Mon 0,02 $
Je voudrais suggérer une manière très différente afin que l'utilisateur ne puisse pas se tromper, il ne ressemblera pas non plus à une menace car il s'agit d'une information sensible de l'utilisateur.
Affichez simplement un seul bouton "Payer". Une fois que l'utilisateur aura renseigné les informations de paiement et cliqué sur payer, n'afficher que la fenêtre contextuelle "Voulez-vous enregistrer ce mode de paiement comme option préférée" et afficher l'option 2 "Pas maintenant" et "Enregistrer et payer".
Je vous remercie!
Choisissez une opération comme principale. L'écran sera à ce sujet, et l'autre sera également possible. De cette façon, l'écran ne sera pas maladroit, comprenant qu'il sera immédiat.
Ensuite, laissez l'utilisateur effectuer l'une des deux opérations plus tard quand il le souhaite (c'est-à-dire payer à partir d'une liste de contacts ou enregistrer un contact dans l'historique des paiements).
C'est la même situation de composer un numéro de téléphone sur le téléphone portable. Habituellement, il offre trois options: créer un nouveau contact, envoyer un SMS ou appeler le numéro composé.
L'interface a un design épuré car le bouton d'appel est proéminent, vert, clair, avec une icône au lieu du texte et est déjà là lorsque l'interface est affichée (comme vous vous attendez à être dans un numéroteur téléphonique); les autres options sont affichées après avoir composé le numéro, ainsi que les suggestions de saisie automatique, à l'exception de l'option principale (bouton vert "appeler"). Et si vous souhaitez enregistrer le numéro après l'avoir appelé, vous pouvez le faire à partir de l'historique des appels.
Cette réponse a été mise à jour.
Si ce choix est l'action principale de cet écran, j'utiliserais des boutons étiquetés avec les options disponibles au lieu de cases à cocher. Les boutons doivent indiquer payer et enregistrer le bénéficiaire, payer, enregistrer le bénéficiaire. Vous devrez également ajouter un bouton d'annulation si l'écran n'a pas de mécanisme de sortie.
Cependant, en proposant trois options, vous combinez deux opérations qui devraient probablement rester distinctes. Pour rendre l'interaction moins maladroite, vous pouvez séparer ces deux opérations. Je pense que ce flux pourrait aider:
- Une fois les informations capturées, fournir les boutons payer maintenant et payer plus tard.
- Lorsque l'utilisateur sélectionne payer maintenant l'informer que le bénéficiaire a été payé et lui fournir les boutons enregistrer le bénéficiaire et terminé.
- Lorsque l'utilisateur sélectionne payer plus tard l'informer qu'il peut choisir de sauver le bénéficiaire (éventuellement inclure également des étapes pour payer un bénéficiaire enregistré). Fournissez-leur à nouveau les boutons enregistrer le bénéficiaire et terminé.
Ma suggestion serait
Suggestions 1 - dans cette approche des transactions, Pay serait par défaut. - enregistrer serait une option - il est préférable de donner le bouton Payer et d'ajouter une case à cocher à Enregistrer les informations.
Suggestions 2 - lors de la collecte des informations bancaires, ajoutez une option de case à cocher pour enregistrer les informations telles que "enregistrer ces informations de paiement" - l'écran suivant fournit une option pour le paiement - dans cette approche, l'utilisateur serait conscient de décider de la meilleure option et c'est une approche claire