web-dev-qa-db-ja.com

クレジットカードフォームでの段階的開示

私は、ユーザーが有効なカード情報(チェックサム番号、有効期限、セキュリティコード)を入力するまで、クレジットカードフォームの送信ボタンを完全に非表示にするという考えをもてあそんでいます。無効なデータが入力されるとすぐに、ユーザーにコンテキストエラーが表示され、すべての有効なデータが入力されるとすぐに、[支払い]ボタンが表示されます。ボタンを完全に非表示にすることと無効にすることの有効性について何か考えはありますか?

3
jscheel

ほとんどの場合、これは良い考えではありません。それはUXの目標に帰着します:

クレジットカードフォームの主な目的は、通常ユーザーに購入を完了することです

エラー修正と検証は、その目的を達成するのに役立つ場合にのみ役立ちます。

Buy it nowPurchase it、またはComplete purchaseボタンは通常、顧客に明確な 行動を促すフレーズ を表示する優れた機会です。したがって、このボタンを非表示にすると、購入を完了するよう顧客に促す機会がなくなります。

通常、行動を促すフレーズはエラー検証よりもはるかに重要です。そのため、ほとんどすべてのショッピングカートには、支払いフォームのすぐ隣に画面に表示され、消えることのない太字の購入ボタンが用意されています。

ユーザーが支払いの詳細を誤って入力した場合、フォームは詳細を修正するようユーザーに促しますが、ボタンはフェードしたり放棄したりしません...それは、目標と目標に注意を向けるように設計された明るくクリアなボタンですプロセス:

buy now button

3
tohster

送信ボタンを非表示にすることは 段階的な開示 の一部ではありません。送信ボタンが事前に利用できない唯一のケースは、おそらく段階的な開示内にあり、ウィザードまたは同様のパターンで相互依存するステップがいくつか表示されます。プロセスの最後のタスクの一部として提出が行われます。プログレッシブとステージの区別については、以下を参照してください。

enter image description here

上記の区別を念頭に置いて、クレジットカードのフォームは非常に単純で、複数のステップのプロセスに分割する必要はありません。したがって、「送信」ボタンは、ユーザーがアクションをコミットするために使用可能で表示可能である必要があります。

プロセスを改善したい場合は、レイアウトを改善し、より良いフォーマットのためにフォームを最適化することに焦点を当てることができます。その場合、次の部分が役立つことがあります。

「有効期限」フィールドをクレジットカードとして正確にフォーマットします(40%間違っています)

4
Okavango

期待されているのは、ユーザーがフォームのアイデアを知っていて、そこにボタンを表示したい場合です。それ以外の場合は、コンポーネント全体が不完全/壊れているように見えます。

無効ボタンは、ユーザーがフォームを送信する前に(正しく)フォームに入力する必要があることを視覚的に示しています。ボタンを非表示にすることで、そのような状態がないことをほのめかしています。ユーザーは以前の経験から条件が必須であることを知っているので、フォームにバグがあると思われるかもしれません。必然的に、フォームに何か問題があると思って、完了せずにプロセスから落ちるユーザーの割合があります。

2
Zoe K