web-dev-qa-db-ja.com

2つのオプションの1つまたは両方を選択するためのパターンが必要です(+明確にするために編集)

ユーザーが銀行口座情報(+アカウント情報は、ユーザーが今または後で支払うことを望む誰かのためのものです-これはeコマースではなく銀行のコンテキストです)をキャプチャし、次に何をするかを選択できる画面があります。その情報で。オプションは、pay or save orのいずれかです。 (+ユーザーがこの時点で支払いを行っていない可能性があるため、即時支払いを必要とするソリューションは機能しません)

私のプロトタイプ(概念テストに使用)では、これらを2つのチェックボックスとして表しています。ユーザーは1つまたは両方を選択する必要があります。相互作用は不器用で、よりエレガントな解決策を探しています。

当面の要件はWeb(デスクトップおよびモバイル)ですが、ネイティブアプリの要件もある場合があります。

任意の提案をいただければ幸いです。

6
LynnseyS

私はミックスで行きます:

チェックボックス、ボタン、リンク/目立たないボタン。

Checkbox Save, Pay now or Save without paying

メリット:

  • ユーザー設定を保存できるため、ほとんどの場合、デフォルトのボタンを1つクリックするだけで済みます。
5
Falco

おそらく、以下は相互作用の流れについて考えるようになるでしょう。

私の見方では、既存のオプションのコレクション、または新しいオプションを追加するオプションがあります。このリストには、[Saved Options]ボタンからアクセスできます。これにより、2番目のモックアップに示すように、モーダルウィンドウがトリガーされます。

一連の支払いオプションの保存は利用可能な機能ですが、ユーザーが続行する必要はないので、ページ終了の近くではなく、データ入力で論理的にグループ化して、ページのコントロールを完成させることができます(つまり、[Pay Now]ボタン)この例)。

[Save Payment Options]ボタンはボタンである必要があります。保存されたオプションリストに追加されますが、ページから移動するわけではないためです。

モーダルから[Use Selected]をクリックすると、フォームが事前に入力されます。

どのフィールドを扱っているのかはわかりませんが、これがあなたが始めるのに役立つことを願っています。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

4
maxathousand

私はあなたが前もってオプションでユーザーを過負荷にすることなくそれのすべてを達成できると思います。 2つのボタンを提供することを検討します。「今すぐ支払う」と「保存して続行」

ユーザーが保存することを選択した場合、それが発生して満足し、フローの同じ場所に残されます。彼らが支払うことを選択した場合、彼らは中断することなくそのフローに取り込まれますが、支払いプロセスの最後に、将来の購入のために支払い情報を保存するオプションを提供します

私の0.02ドル

2
Mattynabib

私はユーザーが混乱しないように非常に異なる方法を提案したいと思います。また、それはユーザーの機密情報であるため、脅威のようには見えません。

「支払い」ボタンを1つだけ表示してください。ユーザーが支払い情報を入力して[支払い]をクリックすると、「このお支払い方法を優先オプションとして保存しますか」というポップアップと、「今はしない」と「保存して支払う」の2つのオプションのみが表示されます。

ありがとうございました!

2
Sudarshan T

1つの操作をメイン操作に選択します。画面はそれくらいで、もうひとつも可能です。このようにすると、画面がぎこちなくなり、すぐに理解できます。

その後、ユーザーが後でいつでも2つの操作のいずれかを実行できるようにします(つまり、連絡先リストから支払うか、支払いの履歴から連絡先を保存します)。

これは、携帯電話で電話番号をダイヤルするのと同じ状況です。通常、3つのオプションがあります。新しい連絡先を作成する、SMSを送信する、またはダイヤルした番号に電話をかける。

phone dial app

呼び出しボタンは緑色で明るく、テキストではなくアイコンが付いているため、インターフェイスはすっきりとしたデザインになっており、インターフェイスが表示されているときは(電話ダイヤラにあると予想されるとおり)既にそこにあります。他のオプションは、番号をダイヤルした後に、メインオプション(緑色のボタン "通話")からのオートコンプリート候補と共に表示されます。また、電話をかけた後に番号を保存したい場合は、通話履歴から保存できます。

1
Heitor

この回答は更新されました。

この選択がこの画面の主要なアクションである場合、チェックボックスではなく、使用可能なオプションのラベルが付いたボタンを使用します。ボタンはpay and save payeepaysave payeeと表示されます。画面に終了メカニズムがない場合は、キャンセルボタンをスローする必要もあります。

ただし、3つのオプションを提供することで、おそらく別々にしておくべき2つの操作を組み合わせます。インタラクションを扱いにくくするために、これら2つの操作を分離することができます。このフローが役立つと思います:

  1. 情報が取得されたら、今すぐ支払うおよび後で支払うボタンを提供します。
  2. ユーザーが今すぐ支払うを選択したら、受取人に支払いが行われたことを通知し、保存する受取人および完了ボタンを提供します。
  3. ユーザーが後で支払うを選択したら、受取人を保存することを選択できることを通知します(おそらく、保存された受取人に支払うためのステップも含まれます)。再度、save payeeおよびdoneボタンを提供します。
0
Andre Dickson

私の提案は

提案1-このトランザクションのアプローチでは、Payがデフォルトになります。 -保存はオプションです-[情報を保存]に[支払い]ボタンを付け、チェックボックスを追加することをお勧めします。

提案2-銀行情報を収集するときに、「この支払い情報を保存」などの情報を保存するためのチェックボックスオプションを追加します-次の画面で支払いのオプションを提供します-このアプローチでは、ユーザーは最適なオプションを決定することを認識しており、明確なアプローチです

0
Grafix Guru