web-dev-qa-db-ja.com

「Add New Button」の最適な場所はどこですか?

レコードのリストがあります。新しいレコードは定期的に追加されますが、一度に1つのレコードのみが追加されます。 「Add New Button」の最適な場所を決定するのに苦労しています。ボタンをクリックすると、ユーザーがレコードの詳細を入力できる新しいウィンドウが開きます。

2つのオプションが検討されています。

  1. リストの外側にレコード追加ボタンのあるリスト(上、下、左揃え、右揃え?)
  2. 新しいレコードを追加するためのリンクが付いた永続的な追加行(上部または下部)を持つリスト。新しいレコードを明確にすると、このテーブルに追加されます。

私のクライアントは2が大好きですが、既存の例を見つけるのに苦労しています。これはどこでもうまく使用されていますか?

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

12
Lisa

ワークフローの設計!

ユーザーがレコードを作成する理由と方法をモデル化します。

例えば:

  • ユーザーがレコードを作成する明確な目的でページを開く可能性が高い場合、ボタンを左上にすぐに配置すると、ユーザーは最小限の摩擦でボタンを押すことができます(ボタンを探す必要はありません)。

  • ユーザーがレコードを作成する前にテーブルをスキャンする必要がある場合(たとえば、既存のレコードがあるかどうかを確認するため)、下部に作成ボタンを配置すると、そのワークフローに役立ちます。

  • ユーザーの90%がテーブルを読み取り、ユーザーの10%だけがレコードを追加する場合、テーブルを最上部に配置し、下に作成ボタンを配置することは、90%のユーザーにとってより良いワークフローです。

...これらの例は、ランダムな他のサイトが行うことを単にコピーするのではなく、実際のワークフローと生産性に基づいて、ユーザーワークフローのモデリングにアプローチし、効果的なソリューションを設計する方法のアイデアを提供するのに役立ちます。

16
tohster

要素の位置はコンテンツの量によって異なります。要素がレコードの下に配置されている場合、ユーザーは行を追加するときにさらに下にスクロールする必要があります。

フローティングアクションボタンを見る

Googleのマテリアルデザイン フローティングアクションボタン は、多くの場合画面の右下に配置され、上の要素から絶対的に配置されますページ。状況によってはユーザーのビューをブロックする可能性があるため、FABボタンに関していくつかのUXの不満がありました。その場合は、コンテンツの右上にボタンを配置する必要があります。

ユーザーが多くの行を追加する場合、ボタンを画面の右下の固定位置に配置すると、最もユーザーフレンドリーになります。

ボタンまたはリンク?

フィッツの法則 によると、ユーザーが定期的にクリックした場合、ボタンになるはずです。

4
Max de Mooij

Razor9012の答えから続く:

ボタンを上に配置することをお勧めします。理由は、ビューポート全体をカバーする多数の行がテーブルにあるとしましょう。次に、この場合、ボタンはビューポートから非表示になります。ユーザーが実際に新しい行を追加するには、下にスクロールする必要があります。ほとんどのユーザーは、画面が小さく、下にスクロールしなかった場合に、追加ボタンがあることさえ知りません。 Razor9012の回答に記載されている画像は、この良い例です。アイデアは、プライマリアクションボタンをユーザーに表示することです。

2
K K

右上から見たところ、右から左に読む中東の地域を除いて、右上が新しいボタンの最も一般的な配置のようです。

http://blog.mailchimp.com/wp-content/uploads/2013/06/Redesign2x_iPad.pnghttp://blog.datalicious.com/assets/sites/2/ TagSummary1.pnghttps://www.submarinecrm.com/assets/post-shortcuts.png

0
Ameen Akbar