フォームのデザインとアクションボタンの配置
この質問には、Webアプリケーションのデータ入力フォームが含まれます。フォームはデスクトップ環境でのみ使用されます。モバイルを説明する必要はありません。このWebアプリの1人のユーザーが、このフォームに1日に何百回も入力する可能性があります。
フォームのコンテンツは動的ですが、質問のリストは常に約20程度の範囲になります。私は「質問」と言いますが、より正確には「質問」テストは、ほんの数語の長さの短いデータキャプションになります。このような状況では、フォームはブラウザウィンドウよりも少し長くなるため、ブラウザのスクロールバーがアクティブになります。
私の質問は次のとおりです。アクションボタン、主に[保存]ボタンを配置するのに最適な場所は何ですか。また、この件に関してどのような調査が行われましたか。
いくつかの実装の可能性：
オプション1：トップナビゲーションまたはセカンダリトップナビゲーションにアクションボタンを含め、このトップナビゲーションを固定位置に配置します。この例は、Gmailで見られる構造です。 （Gmailとデータ入力アプリはまったく同じではありませんが、似ています。）
オプション2：アクションボタンをページの下部の固定位置に配置して、ボタンがフォームの質問よりもZインデックスが高くなり、常に表示されるようにします。
オプション3：固定位置を使用しないでください。フォームの下部に[保存]ボタンを配置し、ユーザーがデータ入力フィールドに入力するときにボタンにアクセスできるようにします。
オプション4：フォーム内の現在の位置に自動スクロールする一連のボタンを用意します。
オプション5：上部と下部のボタンを固定位置に配置します。
Luke Wの作品 をいくつか読んだことがありますが、フォームデザインのこの特定の側面のレビューに出くわしたとは思わないでしょう。
固定位置の上部にあるボタンに傾いています。この場合、スクロールバーはブラウザーのスクロールバーであり、内部要素からのスクロールバーではありません。それは 保存およびキャンセルボタンの配置に関する質問 で取られた方向であるように見えましたが、その質問の回答は、特定のアプローチがよりうまく機能する理由については不十分でした。
ユーザーが常にフォームに入力する必要がある場合は、断続的に保存する必要がある場合にのみ、ユーザーのスクロール位置に続くボタンを使用します。ボタンをフォームの下部に配置するだけです。
ページ上部のバーに保存ボタンを配置しようとしたとき、ユーザーは数秒間どこを探すべきかわからなかった。欲求不満と苦情が続いた。
あなたが提供した情報に基づいて、オプション3をお勧めします。ユーザーがフォームに記入してページを下に移動すると、ユーザーのアクションに合わせてフォームフィールドの後にアクションボタンが表示されることを期待しています。少なくとも、アクションボタンは、フォームの完成時にユーザーのフォーカスポイントに配置されます。
オプション1は、アクションボタンがフォームの先頭に配置されることをユーザーが期待しないという点で問題があります。それらの焦点は、それらが終了する場所であり、ボタンは別の場所に配置されます。さらに、ユーザーが主にキーボードから入力する場合は、停止してマウスをつかみ、上部のアクションボタンの上に置いてクリックする必要があります。アクションボタンがフォームの最後にある場合、ユーザーはアクションボタンにタブで移動した後でEnterキーを押すことができます。また、固定ボタンを保持する領域の垂直方向のスペースをブロックすることにより、フォームフィールドに使用できるスペースを減らします。
オプション2を使用すると、アクションボタンに達したために完了していると想定して、「スクロールせずに見える範囲」にあるフォームフィールドが表示されなくなる場合があります。繰り返しますが、キーボードのヘビーユーザーの割合が高い場合、アクションボタンが正しいタブ順序になっていない可能性があります。
オプション4では、どの時点で使用するかわからないため、ユーザーのワークフローに不確実性が生じる可能性があります。
オプション5は、使用可能な画面スペースをさらに減らし、オプション2で潜在的な問題をさらに悪化させます。