web-dev-qa-db-ja.com

ダッシュボードのトップメニューとサイドメニュー

私は管理ダッシュボードを設計していますが、これが私の頭に浮かびました。

  • サイドメニューとトップメニューのどちらを使用するべきですか?
  • どうして?ユーザーエクスペリエンスの主な違いは何ですか?

トップメニューを使用すると、クロスブラウジングを分析したときに一貫性が増します。常にダッシュボードが上になるため、このダッシュボードは応答性が高くなりますが、モバイルではあまり使用されませんが、最大でもタブレットでは使用されません。これは、このダッシュボードの以前のバージョンに基づく実際の情報です。

enter image description here

一方、サイドメニューはデスクトップでより一貫性があり、メニューを変更するためのより直感的な方法のようです。

enter image description here

それで、この情報に基づいて、どのタイプのメニューを選ぶべきですか?現在、レイアウトと外観以外にどのようなメニューを使用するかについての基準はありません。

31
CelsomTrindade

XMovement.comの記事 から:

上または左のメニュー、絶対的な答えはありません。ユーザー向けのデザインに関しては、コンテキストが重要です。

あるコンテキストでうまく機能するナビゲーションは、別のコンテキストにうまく適合しない場合があります。どのナビゲーションがアプリケーションに最適であるかを結論付けるには、上と左のナビゲーションが最適に機能するさまざまなコンテキストを理解することが重要です。 enter image description here

スキャン中

  1. 左側のナビゲーションは、ユーザーがスキャンするのに高速で効率的です。
  2. 左のナビゲーションはまた、人々にとって自然な垂直走査方向を促進します。
  3. 上部ナビゲーションは、ユーザーが読書中によく使用する水平方向のスキャン方向を強制します。

可視性

  1. 上部のナビゲーションアイテムは常にスクロールせずに見える範囲にあり、見つけやすくなっているため、より見やすくなっています。
  2. 左側のナビゲーションアイテムが必ずしもスクロールせずに見えるとは限らないため、アイテムが多すぎると、一部のアイテムがスクロールしなければ見えなくなることがあります。
  3. トップナビゲーションは通常、ヘッダーとロゴが付いているため、見つけやすくなっています。どちらも視覚的に支配的なオブジェクトです。

優先度

  1. 左端のアイテムは、主要な光学領域(左上)に配置されているため、他のアイテムよりも視覚的な重みが大きくなります。
  2. 左上のアイテムはより多くの露出を得ます。
  3. 右側にバランスナビゲーションがないため、左ナビゲーションが優先されます。
  4. 上部ナビゲーションのアイテムは同じ重みではありません。

設計に関しては、1つのアプローチがすべてのケースで常に100%効果的である絶対的なものはほとんどありません。あなたとあなたのユーザーに最適なアプローチを見つけるには、関連するコンテキストの理解が必要です。

24
Grafix Guru

GUIの進化の観点から見ると、コマンドのナビゲーションレイヤーは、画面のどちら側にコマンドの操作/コンテキストレイヤーが通常見つかるかに関係なく、上部にあると予想されます。

dashboardsの特定のケースでは、ナビゲーションレイヤーが操作可能なレイヤーとマージする傾向があるため、メニューを左側に配置する方がおそらくエレガントです。 。さらに、メニューに多くのエントリがあることが予想される場合。

たとえば、wordpress adminでのナビゲートと操作はまったく同じです enter image description here

8
semion lapin

私は「ダッシュボード」のようなページ内でナビゲーションをいつどのように実装するかについていくつかの議論を進めてきたので、ここで私たちが考慮した考慮事項のいくつかを紹介します。

  • ページの長さ:サイドナビゲーションがページ全体を占めるため、上部ナビゲーションは長いページに適しています。
  • メニュー項目の量:上部のナビゲーションはメガメニュー構造または折りたたみ可能/アコーディオンのいずれかを使用してこれを処理しますが、サイドナビゲーションはツリー/フォルダー構造も使用できます
  • 追加のナビゲーション要素:ブレッドクラムまたはページ内セカンダリナビゲーションを使用する場合、これをナビゲーションシステムの残りのプレゼンテーションに合わせることが重要です。
  • ビューポート:ナビゲーションは密接にグループ化されているため、サイドナビゲーションはワイドスクリーンデスクトップに適していますが、上部ナビゲーションはさらに広がる傾向があります。モバイルでは水平方向のスペースを増やしたいので、上部のナビゲーションは側面のナビゲーションよりもうまく機能します
  • アプリケーションエコスフィア:これが一連のアプリケーションの一部である場合、選択したスタイルを一貫して適用して、共通のルックアンドフィールを作成できますか?
6
Michael Lai

最高レベルのインタラクションのためにトップメニューを予約することを好みます。次のようなもの:Webサイトの「ホーム」にアクセスする、まったく異なるワークフローに切り替える、ユーザープロファイルにアクセスするなど。これらのアクティビティはあまり一般的ではなく、ユーザーはページの最上部を直感的にスキャンして、上位レベルを探します。活動。

サイドメニューは、ユーザーがより頻繁に実行するアクションに役立ちます。グループ化するアクションが同じワークフローの一部である場合(たとえば、受信トレイのセクションをナビゲートしたり、さまざまなカテゴリの売上を監視したりする場合)、サイドメニューを使用して、ユーザーを論理的に同じワークスペースに維持します。

ユーザーがこれらのダッシュボードメニュー項目を頻繁に切り替える場合は、サイドメニューをお勧めします。そうでなければ提案するワークフローについてもっと知る必要があります。

この例については、Pivo​​tal Tracker、Facebook、Gmail、CircleCIを参照してください。

1
Jack Collins