web-dev-qa-db-ja.com

一部のメニュー項目が他の項目に依存しているメニューを設計するための良い方法は何ですか?

私の会社は、次のようなサイドメニューを持つインターフェースを設計することを好みます。

A side menu

このデザインの問題は、ユーザーが表示したいプロファイルを選択する前に、「プロファイル」のようなリンクをクリックできることです。これは混乱を招きます。新しいユーザーは、アプリで詳細情報を検索するときに、「依存する」リンク(「プロフィール」など)を自然に直接クリックしてみます。

これを解決するには、通常、次の2つのいずれかを行います。

  1. ユーザーが検索ページ(「顧客→検索」)にアクセスするまで、依存リンク(「顧客→プロファイル」や「顧客→注文」など)を無効にします
  2. 依存リンクを有効のままにしますが、ユーザーがエンティティを以前に選択していない場合は、ユーザーを関連する検索画面に自動的にリダイレクトします。

副作用として、このデザインは「コンテキスト」と呼ばれる概念を導入します。「顧客→プロファイル」リンクをクリックすると、現在「コンテキスト内」の(つまり、検索画面から最後に選択された)顧客が表示されます。この動作は便利な場合もありますが、いくつかの混乱やトリッキーなEdgeのケースにつながる可能性もあります。

このアプリケーションフローを再設計して、上記の問題を回避するにはどうすればよいですか?メニューの構造に直接関係していなくても、私はすべてのアイデアを受け入れます。

2
Nathan Friend

1)水平サブナビゲーション

1つの解決策は、より多くのコンテキスト(顧客またはサプライヤーの事前の選択など)を必要とするアイテムを、別個のレベルのナビゲーションに分離することです。 1つの表現は、水平方向のサブナビゲーションです。

Horizontal sub-menu

これにより、サブナビゲーションの一部のタブを顧客の選択に依存させることができ(「プロフィール」や「注文」など)、他のタブ(「苦情」など)は、「表示する顧客の包含または省略によるものではありません。 .. '要素。

最初に「顧客」をクリックして「プロフィール」ページが表示されたときに何が起こるかという問題については、コンテンツを表示することはできません(顧客がまだ選択されていないため)。そうする...

enter image description here

このアプローチの欠点は次のとおりです。

  • あなたはいつも最初に望まないかもしれない特定の1つのページにたどり着きます(例えば、顧客>プロフィール)。

  • アプリの読み込み方法によっては、サブページにアクセスするのが少し面倒です(たとえば、次のレベルのナビゲーションを表示するには、何らかの読み込みを待つ必要があります)。

これらのマイナス面がどの程度深刻かは、アプリケーションとユーザーの使用方法によって異なります。

2)既存のナビゲーションのサブグループ

別のアプローチは、既存のナビゲーションのサブグループに、さらにコンテキストが必要なものをグループ化することです。

Sub-group navigation

初期状態では、検索が実行されるまで「プロファイル」と「注文」を無効にすると何が起こっていたのかは非常に明確になると思います。

3
Zenon

私の提案は、最初にメニューにこれらのコンテキスト依存の項目が含まれないようにすることです。アイテムは、検索で最後に選択された人によって異なる場所につながるため、特に混乱します。

では、ナビゲーションはどのように見えるべきでしょうか?多くの情報源からインスピレーションを得ることができます。

Amazon、Google Play、Etsy、Gmail、その他はすべて、ナビゲーションを非コンテキストに保ち、ユーザーが検索に戻ることができるようにブラウザの戻るボタンに依存しています。これらはすべて非コンテキストナビゲーションを備えており、ユーザーはいつでもカテゴリーの概要にジャンプできます。

EBayのようないくつかのウェブサイトはさらに進んで"Back to search page" buttonを含みます。これは、モバイルアプリ内の戻るボタンの動作とよく似ています。

ブレッドクラムは、ナビゲーションの補助としても機能します。

だからあなたのための私の提案は:

  • 非コンテキストアイテムの削除ナビゲーションメニューから。あなたの場合、それはより単純な単一レベルの階層、つまり顧客、サプライヤー、製品、場所を残しているようです。
  • 人々がさまざまな種類の最近のアイテム間を頻繁に移動する必要があることがわかっている場合は、最近アクセスしたアイテムのリストを使用して最近のページを作成します。または、さらに高速なアクセスが必要な場合は、サイドバーに「最近」セクションを含めます。
  • ユーザーテストを対象ユーザーと実施して、この新しいナビゲーションに問題がないか確認します。
3
Tin Man