web-dev-qa-db-ja.com

ボタンの配置

私は現在ウェブサイトを開発しており、私たちには不明なボタンのある配置でいくつかのことに遭遇しました。

ウェブサイトには予約プロセスがあり、このプロセスではすべての段階でボタンを右揃えにしています。

お問い合わせフォームとお問い合わせフォームでは、ボタンを左揃えにして、フォームのフィールドの左揃えに関連付けています。

Webサイトのすべてのボタンの配置を同じように配置するのが最善ですか、または現時点で機能するはずの方法です。

16
alanhornedotcom

ベニーは素晴らしい答えを出しました、そして、私達が連絡フォームが予約プロセスの一部ではないという事実に関して彼が言わなければならないことに同意します。一貫性。

ただし、フォームのレイアウトは、リーダーがフォームの内容をすばやくスキャンして入力できるようにし、call to actionボタン(送信ボタン)は、フォームのレイアウトと揃う場所にあります

" フォームボタンの配置がレイアウトに依存する方法 "が件名で言う必要があることを引用するには:

フォームボタンの配置方法は、選択したフォームレイアウトによって異なります。フォームが1列のレイアウトを使用している場合、ボタンをテキストフィールドの左側に配置すると、ボタンがユーザーに見やすくなります。 1列のレイアウトでは、ユーザーの目は主に垂直方向に移動してフォームに記入します。ユーザーがフォームの下部に到達すると、ボタンを見つけるために目を左または右に移動する必要がなくなります。フォームボタンを表示してクリックするには、垂直方向に進む必要があります。 enter image description here

ただし、連絡フォームに2列のレイアウトがある場合に備えて、記事では次のように引用しています。

ユーザーが2列のレイアウトでフォームに入力すると、目が左から右にジグザグの方向に移動します。ユーザーがフォームの最後に到達すると、西洋文化では人々が左から右に読むため、ユーザーの目は通常、ページの右側に終わります。 2列のフォームレイアウトでボタンをテキストフィールドの右側に配置すると、ユーザーがフォームのスキャンを終了したときにボタンに直接移動できます。

enter image description here

フォーム上のボタンの配置に関して、次の記事を読んでください。

  1. ボタンを異なるフォームに配置する最良の方法
  2. 優れたWebフォームデザインのための有用なアイデアとガイドライン -実際にはあまり多くのベストプラクティスやガイドラインを提供していませんが、いくつかの良い例があります
  3. Webフォームデザインパターン:サインアップフォーム
  4. ユーザーが左のアクションよりも右のアクションをクリックする理由
10
Mervin

いいえ。お問い合わせフォームと予約フォームは同じプロセスの一部ではないため、ボタンの配置を変えても問題ありません。連絡フォームは通常、名前、電子メール、電話、テキストフィールド+ボタンなど、入力するフィールドの数が制限された単純なフォームです。下に示すように、ボタンは多くの場合、メッセージテキストボックスと左揃えになります。送信ボタンがメッセージのテキストボックスと右揃えになるバリエーションがありますが、テキストとの垂直方向の配置は失われます。

enter image description here

予約は、ウィザードなどの複数のステップがあり、かなり複雑なプロセスになる場合があります。次に、ボタンを右揃えして本のページをめくる感覚を与えるのは、多くの場合その逆です。したがって、複数ページのフォームのボタンは右揃えになります(注:ここにもバリエーションがあります)。

ただし、文化の違いには注意してください。一部の国では、本の分析が機能しない場所で本を右から左に読んでいます。いつものように、本番環境に入る前に、既存のWebサイトでのターゲットユーザーの使用を調査することをお勧めします。

enter image description here

幸運を!

5
Benny Skogberg