web-dev-qa-db-ja.com

長いフォームの上にある送信ボタン

たとえば、ユーザーは長いフォームを含むオプションページを持っています。最も人気のあるオプションは、多くの場合フォームの上部にあります。そのため、ユーザーはそれらを変更し、フォームの下部までスクロールして[送信]ボタンを押す必要があります。ユーザーが頻繁に何かを変更する必要があり、毎回ユーザーがフォームを送信するためにページの一番下までスクロールする必要があると想像してください。私見ユーザーがフォームの上に「送信」ボタンを置くことはより良いでしょう、そして彼らはより少なくスクロールします。 jsfiddle で2種類のフォームをテストする例.

長いフォームは、フォームを使いやすくするためにタブに分割される場合があります。ただし、タブの高さが異なり、「送信」ボタンの位置が同じにならないため、「送信」ボタンをタブの上に配置することをお勧めします。

上部に「送信」ボタンを配置する利点:

  • "送信"ボタンは常に同じ場所にありますフォームの長さに関係なく
  • フォームの最も頻繁に使用されるオプションがほとんどの場合よりもフォームの上部に(あるべきように)配置されている場合"送信"ボタンはスクロールなしでユーザーに表示されます

長いフォームの上部に[送信]ボタンを配置することに不利な点はありますか?

妥協の可能性:ユーザーが多分2つの[送信]ボタン長い形式(1つはフォームの上部、もう1つは下部に)に配置するとよいでしょう。

同様の質問

追伸ログイン、登録、または調査フォームでは、ユーザーがテキスト入力を1つずつ入力し、エンドユーザーが[送信]ボタンを押すため、[送信]ボタンはフォームの下部にある必要があります。これらの(または同様の)ケースでは、フォームの上部に[送信]ボタンを配置しても意味がありません。

4
webvitaly

私のコメントを拡張すると、可能性はフローティングヘッダー/フッター送信ボタンを使用することです。これにより、送信ボタンは常に表示され、フォーム上の位置に関係なく簡単にアクセスできます。

ただし、これは混乱する可能性があります。もちろん、いつでも送信ボタンを押すことはできないことは明らかです(もちろんできる場合は除きます)。代わりに、インライン検証を使用して、フォームに欠けているものを示す必要があります。送信ボタンをクリックすると、フォームのエラーまでスクロールする可能性があります(画面に表示されていない可能性があるためです)が、それをテストしたいと思います。ユーザーのスクロール位置を自動的に移動することはほとんどありません。

フォームの線形性も考慮してください。フローティング送信ボタンは、フォームが次の場合に最適です。

  1. 複数のスクロール可能なページの長さ
  2. 明確な終点がないか、フォームの複数の部分の編集を順不同に招待している
  3. 以前に完了したフォームを編集するためによくアクセスされます。

このパターンは、フォームが顧客情報のようなものであり、すでに入力済みのフォームに繰り返しアクセスして編集する必要がある場合に特に効果的です。これは、Googleドキュメントでのドキュメントの編集に似ています。送信は、シーケンシャルフォームの最終メモではなく、簡単にアクセスできる保存機能になりました。

3
Ben Brocka

コンテキストボタンを備えたオーバーレイボトムバーを作成することについてどう思いますか?

Buttons on long form

更新:画面の配色を説明するだけです。緑色のボタンは「保存」、赤色のボタンは「キャンセル」、この場合、青色のボタンは割り当てられていないエントリを確認するために使用されます。これは、「スクロール乱交」を排除するためのボトムバーを設けるというアイデアの具体的な実装です。

1
Anton Kalcik