web-dev-qa-db-ja.com

すべての必須フィールドに入力した後、送信ボタンを常に表示または表示する必要がありますか?

すべてのフィールドが必須で、フォームをステップに分割できない長いフォームをデザインしています。送信ボタンを下部に固定して、残りのフォームをスクロール可能にしたり、ボタンをすべてのフィールドの下にしたりする必要がありますか?

両方のアプローチの長所と短所は何ですか?

19
vaibhav Kothari

ボタンは常にページのどこかに表示され、常にクリック可能でなければなりません。ユーザーがボタンをクリックできず、その理由が明確に示されていない場合、ユーザーにとっては非常にイライラします。ユーザーが送信をクリックすることを常に許可し、検証の問題を引き起こしているすべてのフィールドを強調表示して、ユーザーが修正すべき点を明確に確認できるようにする必要があります。

ユーザーが入力したはずのフィールドを見逃してしまう可能性があるため、送信ボタンの位置をスクロール可能なフォームの下部に固定することはありません。たとえそれがたまたま画面の外にあり、ユーザーがそれを見つけるために下にスクロールしなければならない場合でも、最良の場所は、すべてのフォームフィールドの直後です。混乱やフラストレーションを避けるために、フォームの送信に必要なフィールドをマークすることが重要です。

オプションのフィールドと必須のフィールドの両方がある場合は、フォームに明確にマークを付けて、必須のフィールドがいくつかある場合は各オプションフィールドにラベルを付け、必須の場合は必須フィールドにラベルを付けることで、どのフィールドが必須かを示す必要があります。すべてのフィールドが(あなたの場合のように)単一のタイプである場合は、代わりに、フォームの上部にすべてのフィールドがオプション/必須であることを示す必要があります。フォームが常にスクロールを必要とするほど長い場合は、送信ボタンの横にこのメッセージを繰り返すことを検討してください。

48
James Coyle

無効化されたボタンは、アクセシビリティの理由から適切ではありません。一部のスクリーンリーダーは無効化された要素を完全にスキップするため、これらは美的価値を提供するだけです。

https://axesslab.com/disabled-buttons-suck/

  • 画面の下部にボタンが固定されていて、無効になっていますか?悪い、色覚異常のユーザーは、それが無効になっているとは必ずしも言えない。位置が固定されていると、フォームの最後がどこにあるのかという誤った感覚を与える可能性があり、ユーザーがフォームをタップ/クリックすることさえできない場合、そこにあるのは何の意味ですか?
  • 画面の下部にあるボタンを修正して有効にしましたか?はい、しかし、ユーザーがすべてのフィールドへの入力を完了する前に、誤って送信してしまう可能性があります。
  • フォームの下部にボタンがあり、無効になっていますか?悪い、ユーザーは上下にスクロールして、不完全なフィールドを検索する必要があります。
  • フォームの下部にボタンがあり、有効になっていますか?送信後、ユーザーが不完全なフィールドを持っている場合は、エラーを強調表示し、フィールドがすでに明確にラベル付けされている場合でもユーザーが何をする必要があるかを説明します(つまり、「経験年数を選択してください」)。

プライマリアクション/送信ボタンは、論理的な場所(フォームの最後またはユーザーの期待する場所)にあり、非常に区別できる限り、常に画面に表示/永続化されている必要はありません。ファンが提案したように、フォームを真っ赤にしないでください。ユーザーは、ページにアクセスしたときにすぐに心配する必要はありません。また、すべてのシステムが送信ボタンを押す前に各フィールドを検証できるわけではありません。

11
eileenwong

私たちの会社でうまくいったこと:

無効になっている送信ボタンの横には、フォームが待機している内容をユーザーに通知する領域があります。必須フィールドごとにフォーム検証が実行されるため、この「待機中...」リストは、最終的に「準備完了!」と表示されるまで短くなります。緑色で表示され、送信ボタンが有効になります。

これはフォームを少しゲーム化し、ユーザーは常に何が期待されているかを知っています。

Waiting for...Ready!

5
Zee

所有している検証のタイプ、フォームの長さ、およびユーザーがエントリを修正するためにフォームのどこかに戻る必要が生じる頻度に依存します。ユーザーがフォームのある時点に戻ってエントリを修正することがわかっている場合は、ボタンを常に表示しておくと便利です。インライン検証があり、ユーザーがフィールドを入力するときにフィールドを検証する場合は、フォームの最後にあるボタンで十分です。

2
xul

ボタンが見える?はい。有効ですか?いいえ。空のフォームが読み込まれたらすぐに検証することをお勧めします。この時点で、すべての必須フィールドにマークを付ける必要があります(または赤に着色)。すべての検証に合格した場合にのみ、「必須」ラベルが消え、ボタンが有効になります。

また、スクロールできるのはフォーム部分のみです。アクションボタンは常に表示されている必要があります。

答えは常にコンテキストに依存しますが、現時点では不明確です。私はあなたがフォームを壊すことができないと言うとき(それは長いフォームですが)これには正当な理由があると思いますか?長い形式を分割することは実際にはかなり良い習慣であるため、ユーザーの心理的負荷を軽減することができます。私は多くのフォームをデザインしましたが、フォームが長くなったときにそれらを分割しない理由を見つけたことがないので、あなたの理由は何だろうと思います。その上、フォームの右上に「送信」を入れて、ユーザーに常に表示されるようにします。ビジネス要件に応じて無効または有効にできますが、ユーザーが必要な入力フィールドをまだすべて入力していない場合は、有効にしません。ユーザーにアクションの実行を許可するだけで、そのアクションを実行できないことを通知する理由はありません。さらに、この場合、必要な入力フィールドが空白になるたびに、この悪いエクスペリエンスが繰り返されます。私の心の中で最高のUXは、最小限の入力フィールドのみを持つフォームであり、それらはすべて必須です(それ以外の場合、ユーザーがそれを気にする必要はありません)。 inputfieldが明確ではなく、何らかのメッセージが必要な場合は、inputfieldの下またはその隣のツールチップ内に説明ラベルを付けて、ユーザーに何が期待されているのかを明確にします。

0
Bart Van Hecke