web-dev-qa-db-ja.com

要約されたメニューと詳細なメニューのどちらが良いですか？

Webベースのアプリケーションのナビゲーションメニューを再設計しています。現在のメニューは、サービスごとにグループ化されたタスクのリストです。新しい機能を追加するにつれて、リストは着実に増えており、ユーザーはそれをすべて表示するには下にスクロールする必要があります。リストは1ページだけにするのが理想的です。 2つのソリューションが提示されています。

  1. サービスごとに拡張されるアコーデオンのようなメニューを提示する
  2. メニューを減らすためにタスクをグループ化する

たとえば、現在のメニューには次のようなオプションがあります。

ユーザー
-編集
-削除
- パスワードを変更する

メールボックス
-編集
-削除
-権限を設定
-スパム設定の管理
-検索スパム

ソリューション1では、ユーザーとメールボックスのみが表示され、どちらかをクリックすると、上記のタスクが展開されて表示されます。

ソリューション2では、新しいメニューは次のようになります。
ユーザー
- 設定

メールボックス
- 設定
-権限
- スパム

解決策1は、最初のレベルでインターフェースを整理する一方で、2番目のレベルで読むための大量のテキストをユーザーに提示します。

ソリューション2では、ユーザーが探しているものが見つからないのではないかと心配しています。たとえば、自分のパスワードを変更しようとしているユーザーは、ユーザー設定にアクセスする必要があるとは限りません。

どちらにも長所と短所があります-どちらが良いですか？より多くのオプションをユーザーに提示して、ユーザーが実行したい正確なタスクを見つけられるようにするか、一般的な見出しの下にタスクをグループ化しますか？

編集：リクエストに応じて、アプリケーションの画面モックアップを含めました。左側はユーザーのリストです。ユーザーを選択すると、右側のユーザーのタスクが表示されます。
alt text

menu
5
Tania Gobeil

指定された2つのオプションのうち、アコーディオンメニューを使用します。

別のページとは、2回のクリックと（通常は）サーバーのラウンドトリップを意味し、次に戻る必要があります。

単一ページに多くのオプションがない限り、「事前選択」を行う利点はありません。

単一のページ（つまり、「グループ化された」メニューがなく、単一のリンクのみ）は、選択されたユーザーごとにすべての一般的なユースケースに複数のアクションが含まれる場合は問題ありません。

それ以外の場合は、「アコーディオン」メニュー、またはJavaScriptポップアップ/メガ/カスケードメニューを使用しますおよびコマンドをリストの上部に固定することを許可します。

2
peterchen

ナビゲーションに使用できるスペース、または使用する予定のスペースを確認すると便利です。しかし、知らないうちに、混乱を招くのを恐れてすべてのオプションを含める場合は、メガメニュートレンド。この件に関する例のリンクは次のとおりです。

http://designm.ag/inspiration/mega-menus-showcase/

ただし、要約されたオプションが間違いなく必要な場合は、要約されたメニューオプションのタイトルを再考する必要があります。効果的なナビゲーションシステムの設計に関する詳細については、この記事をご覧ください。

http://buildinternet.com/2009/09/principles-of-effective-web-navigation/

要約すると、ランダムなユーザーを使用したテストや、使用しているラベルの明確さに対する単純なポーリングを提案することをお勧めします。それほど複雑な調査である必要はありませんが、主題についての有用な情報が得られる可能性があります。

6
Pam Rdz

時間が経つにつれ、設定の数が増えるほど、1つのリンクを使用することを好むことに気付きました。 Amazon.comが「あなたのアカウント」という単一のリンクを持っている方法。その理由は非常に簡単です。[アカウント]リンクをクリックすると、すべての可能な選択肢を含むページが表示されます。探しているものがすぐにわからない場合は、Ctrl-FまたはCmdを押します。 -Fで、ページで必要なものを見つけます。

メニューの場合、Webアプリの唯一のオプションはそれらを読むことです。これは時間の経過とともに退屈なものになることがわかります。また、メニューが大きくなると（メガer ?!）、検索するオプションがなく、読みにくくなります。 （状況は、メニューがより「自然」に感じられ、キーボードショートカットを提供するデスクトップアプリでは異なります。）

2
Hisham

「タスク」で新しいメニューまたは設定ページに移動するのは直観に反します。 「ロールの管理...」、「パスワードの変更...」、「アカウントの無効化」などの単一のトピックに焦点を当てたタスクは、「これとそれを管理してさらに表示する...」ではなく^^しかし、それは私だけかもしれません。

理想的には、すべてのタスクを明確に記述し、必要に応じてスクロールバーを含めようとするのが理想的です。

しかし、それを圧縮するために、Visual Studioのツールボックスがそれを行う方法は、かなりすっきりしています。この場合はアコーディオンのアイデアに似ていますが、最も一般的なタスクまたはよく使用されるタスクをリストする、事前に拡張された追加のカテゴリが上部にあります。

v Basic
   Change password
   Edit user
   Search spam
> User
> Mailbox

一般的なタスクを決定することは、単純な決定である場合と、ログインしているユーザーが最も使用するものに基づいて動的に行われる場合があります。

多数のタスクが含まれる論理カテゴリが少ない場合は、カテゴリを少し変えて、各カテゴリの混雑を減らすこともできます。

v Basic
   Change password
   Edit user
v Edit
   User
   Mailbox
   Permissions
v Spam
   Search
   Settings
v Delete
   User
   Mailbox
1
Oskar Duveborn

ツールチップを使用します。

ユーザーがアイテムにカーソルを合わせたときに表示されるツールチップで、各ページで実行できるすべてのことのリストを含む要約メニューを作成します。

また、最初に移行するときは、ユーザーにいくつかのヒントを与えます。たとえば、ユーザーがユーザーメニューオプションをクリックすると、メニューの変更を説明する小さなポップアップ（このサイトで使用されているものなど）が表示されます。

0
Sruly