web-dev-qa-db-ja.com

画面の左側または右側が「クリックしやすい」ですか?

私は自作のCMSを微調整する2年目ですが、送信ボタン、戻るボタン、リンクのほとんどが右側にあるようなインタラクティブな要素を配置するのが最善であるというこの理論(私は想像した)を続けてきました画面の-特に、アイテム(ページ、ユーザーなど)の大きなリストまたはテーブルを表示している場合。

私の推測では、もう1つの重要なインタラクティブ要素である垂直スクロールバーが(常に?)画面の右側にあるため、ほとんどの「ボタン」をそれに近づけると、より簡単になります。ユーザーがそれらの間を移動するため。個人的には、マウスホイールや矢印キーを使用しますが、多くの人が想像しますdoカーソルとスクロールバーを使用します。

ここに例があります。アクションボタンはすべて右側にありますが、すべてのナビゲーションはすべて左に配置されています。

enter image description here

何らかの理由で、画面の側は私にとってははるかに自然に感じられます(特に、戻るボタンとページネーションを含むナビゲーション)。 3ページの項目を削除する必要がある場合のように、ボタンの.

ナビゲーションを右に揃えたり、ボタンを左に揃えたりする方が理にかなっていますか?配置を逆にするのはどうですか?これに関する共通のアドバイスはありますか?

6
Wesley Murch

ほとんどのダイアログには、右側または下部にボタンがあります。これは、コンテンツが、ユーザーが実行できるアクションよりも(特に最初は)重要であるからです。さらに、太古の昔からの慣習でもあります。

ウィンドウ内の新しいタスクダイアログの登場により、データ入力ダイアログはこの「右または下のボタン」のマントラに従っていますが、慣例は多少変化しています。

この考えは対話を超えたものだと思います。ダイアログ以外のフォームの場合、ナビゲーションは左側にある必要があるというコンセンサスがあります。デスクトップアプリとウェブアプリは、場所のナビゲーションと「その他のアクション」ボタンの配置が非常に似ています。ナビゲーションは左側にあります。これは、MS Outlookなどのデスクトップアプリや、メインメニューが基本的に左側に複製されてアプリケーションのメイン領域へのアクセスを許可するその他の汎用アプリのデスクトップアプリで確認できます。これは、サイトナビゲーションまたはWebアプリの特定の領域へのナビゲーションに非常に似ています。

ただし、すべてのボタンまたはアクション可能な(クリック可能な)アイテムを左側に配置する必要があるという意味ではありません。アクションとナビゲーションは似ていますが、同じではありません。ナビゲーションにより、1つのページ/フォームから別のページまたはフォームに移動します。アクションは他のページ(ウェブ)/フォーム(デスクトップ)を開く場合がありますが、現在のページ/フォームで何かを行うこともできます。そして、アクションが別のページ/フォームを開いた場合でも、それは通常、現在のページ/フォームで選択されているものに関する(より)詳細な情報を持つページ/フォームです。

興味深いことに、デスクトップアプリとウェブアプリは、ナビゲーション以外のアクションのボタン/リンクをコンテンツのすぐ近くに配置するという点でも非常に似ています。たとえば、リストには通常、上部と下部にアクションボタンがあります(例については、GMailの受信トレイを参照してください)。 Webアプリの単一アイテムのアクションは通常リンクですが、デスクトップのアクションはコンテキストメニューにあり、デフォルトのアクションはダブルクリックでアクティブにできます。また、複数アイテムの選択に対するアクションのボタンまたはリンクは、上部と下部(一部のデスクトップアプリの場合は右側)にもあります。唯一の違いは、複数選択がデスクトップのものであることは「標準」であることですが、Webアプリではこれに個別のチェックボックス列が必要です。

全体として、私は一般的な考え方は次のように要約されていると思います:

  • ナビゲーションアクションは、ユーザーを別のコンテンツ領域に移動させるアクションです。
  • コンテンツアクションは、ユーザーを別のページ/フォームに移動させる可能性がありますが、ユーザーをコンテンツ領域から移動させないアクションです。
  • ナビゲーションアクションは左側にあります。
  • コンテンツアクションは、コンテンツに可能な限り近くなります。

注:Webサイトでは、右側にセカンダリナビゲーションアイテムがよくあります。ブログには、多くの場合、カテゴリリストやタグクラウドなどがあります。彼らは通常メインメニューのサブ(サブ(サブ))メニューのこのものを配置するので、セカンダリナビゲーションはデスクトップアプリではあまり一般的ではありません。

注:コンテンツアクションは、意味があるだけでなく、マウスの移動距離を短くするためにも、できるだけコンテンツに近づけます。画面のこちら側のコンテンツにフォーカスしている場合、ボタンをクリックするだけで画面の反対側に移動しなければならないのはかなりイライラします...

注:多くの場合、ウェブサイトではリストの上部と下部にコンテンツアクションボタンが複製されますが、デスクトップアプリでは複製されません。これはおそらく、デスクトップアプリには通常固定サイズのウィンドウがあり、スクロールバーを使用して長いコンテンツを移動し、ウェブアプリには通常すべてのコンテンツが1つのページにあり、ユーザーがブラウザーのスクロールバーを使用して下にスクロールする必要があるためです。ボタンがスクロールして見えなくなったために、ずっと上(または下)まで移動する必要がある場合は、問題はありません。もちろん、もう1つのオプションは、リストの長さを制限してページ分割を許可することです。

4
Marjan Venema