すべてのフィールドが必須で、フォームをステップに分割できない長いフォームをデザインしています。送信ボタンを下部に固定して、残りのフォームをスクロール可能にしたり、ボタンをすべてのフィールドの下にしたりする必要がありますか?
両方のアプローチの長所と短所は何ですか?
ボタンは常にページのどこかに表示され、常にクリック可能でなければなりません。ユーザーがボタンをクリックできず、その理由が明確に示されていない場合、ユーザーにとっては非常にイライラします。ユーザーが送信をクリックすることを常に許可し、検証の問題を引き起こしているすべてのフィールドを強調表示して、ユーザーが修正すべき点を明確に確認できるようにする必要があります。
ユーザーが入力したはずのフィールドを見逃してしまう可能性があるため、送信ボタンの位置をスクロール可能なフォームの下部に固定することはありません。たとえそれがたまたま画面の外にあり、ユーザーがそれを見つけるために下にスクロールしなければならない場合でも、最良の場所は、すべてのフォームフィールドの直後です。混乱やフラストレーションを避けるために、フォームの送信に必要なフィールドをマークすることが重要です。
オプションのフィールドと必須のフィールドの両方がある場合は、フォームに明確にマークを付けて、必須のフィールドがいくつかある場合は各オプションフィールドにラベルを付け、必須の場合は必須フィールドにラベルを付けることで、どのフィールドが必須かを示す必要があります。すべてのフィールドが(あなたの場合のように)単一のタイプである場合は、代わりに、フォームの上部にすべてのフィールドがオプション/必須であることを示す必要があります。フォームが常にスクロールを必要とするほど長い場合は、送信ボタンの横にこのメッセージを繰り返すことを検討してください。
無効化されたボタンは、アクセシビリティの理由から適切ではありません。一部のスクリーンリーダーは無効化された要素を完全にスキップするため、これらは美的価値を提供するだけです。
https://axesslab.com/disabled-buttons-suck/
プライマリアクション/送信ボタンは、論理的な場所(フォームの最後またはユーザーの期待する場所)にあり、非常に区別できる限り、常に画面に表示/永続化されている必要はありません。ファンが提案したように、フォームを真っ赤にしないでください。ユーザーは、ページにアクセスしたときにすぐに心配する必要はありません。また、すべてのシステムが送信ボタンを押す前に各フィールドを検証できるわけではありません。
所有している検証のタイプ、フォームの長さ、およびユーザーがエントリを修正するためにフォームのどこかに戻る必要が生じる頻度に依存します。ユーザーがフォームのある時点に戻ってエントリを修正することがわかっている場合は、ボタンを常に表示しておくと便利です。インライン検証があり、ユーザーがフィールドを入力するときにフィールドを検証する場合は、フォームの最後にあるボタンで十分です。
ボタンが見える?はい。有効ですか?いいえ。空のフォームが読み込まれたらすぐに検証することをお勧めします。この時点で、すべての必須フィールドにマークを付ける必要があります(または赤に着色)。すべての検証に合格した場合にのみ、「必須」ラベルが消え、ボタンが有効になります。
また、スクロールできるのはフォーム部分のみです。アクションボタンは常に表示されている必要があります。
答えは常にコンテキストに依存しますが、現時点では不明確です。私はあなたがフォームを壊すことができないと言うとき(それは長いフォームですが)これには正当な理由があると思いますか?長い形式を分割することは実際にはかなり良い習慣であるため、ユーザーの心理的負荷を軽減することができます。私は多くのフォームをデザインしましたが、フォームが長くなったときにそれらを分割しない理由を見つけたことがないので、あなたの理由は何だろうと思います。その上、フォームの右上に「送信」を入れて、ユーザーに常に表示されるようにします。ビジネス要件に応じて無効または有効にできますが、ユーザーが必要な入力フィールドをまだすべて入力していない場合は、有効にしません。ユーザーにアクションの実行を許可するだけで、そのアクションを実行できないことを通知する理由はありません。さらに、この場合、必要な入力フィールドが空白になるたびに、この悪いエクスペリエンスが繰り返されます。私の心の中で最高のUXは、最小限の入力フィールドのみを持つフォームであり、それらはすべて必須です(それ以外の場合、ユーザーがそれを気にする必要はありません)。 inputfieldが明確ではなく、何らかのメッセージが必要な場合は、inputfieldの下またはその隣のツールチップ内に説明ラベルを付けて、ユーザーに何が期待されているのかを明確にします。