web-dev-qa-db-ja.com

マルチレベルのドロップダウンメニューは良いアイデアではないことをディレクターに説明する方法

私のディレクターとデザイナーは、私たちのサイトで大きなドロップダウンメニューを作成したいと考えています。マルチレベルメニュー：

|     MENU 1     |     MENU 2     |     MENU 3     |     MENU 4     |
-----------------|----------------|----------------|----------------|
                 |  SUBMENU 2-1   | 
                 |  SUBMENU 2-2   |
                 |  SUBMENU 2-3 > |----------------|
                 |  SUBMENU 2-4   |  SUBMENU 2-3-1 |
                 |----------------|  SUBMENU 2-3-2 |
                                  |  SUBMENU 2-3-3 |
                                  |  SUBMENU 2-3-4 |
                                  |  SUBMENU 2-3-5 |
                                  |----------------|

それは悪い考えだと思います。とても不快だと思います。私は正しいですか？ Webサイトでこのようなナビゲーションメニューを実行するのは、本当に悪い考えですか。 （2011年に ;)）

navigationmenudropdown
20
Larry Cinnabar

メガメニューの使い方は？ http://www.useit.com/alertbox/mega-dropdown-menus.html

28
Wander

この問題に関するヒューマンコンピュータインタラクションに関する多くの研究があり、一般的なコンセンサスは、幅が深さを上回っていることです（読み取り：ワイドトップレベルナビゲーションは、ネストされたサブメニューを上回ります）。

これは、短期記憶（STM）ストレージの問題と、STMが呼吸と深度の両方にどのように影響されるかが原因です。いくつかのハードリサーチを指摘することはあなたのケースをあなたのディレクターとデザイナーに非常にうまく助けるはずです。これが本の抜粋です Human Computer Interaction ：

非常に大きな階層、または一般に複雑なWebナビゲーション構造の場合、実際には、階層の深さのどこにあるかを追跡することは、表示されているアイテムのリストをスキャンするよりもメモリに負担をかける可能性が高くなります。つまり、深さはメモリ制限です。

オプションを表示できる場合、STMはそれほど影響を受けません。そのため、一般的に幅が優先されます。深さによって、オプションがどこにあるかを思い出すように強制されます。

アクセス時間は深さの関数 であることもわかりました。これは、メニュー構造が深いほど、アクセス時間が長くなることを意味します。これは、上記のSTMに関するポイントを考慮すると理にかなっています。

全体的に結果は、アクセス時間がメニュー選択の深さに比例することが証明されているKiger（1984）の結果と一致しています。

以下は、UIデザインニュースレターからの 深さvs幅 の概要です（強調は私のものです）。

  • 深すぎると、ユーザーはエンコードが難しくなり、その結果、深いサイトをナビゲートすることが難しくなります。
  • 広すぎると広すぎる：逆に非常に広いサイト（満足度を高める可能性がある）も効率に課題をもたらす
    ナビゲーション。
  • 効果的なサブグループ化により、知覚される幅が減少します：ナビゲーション要素をグループ化すると、最も広い構造でもパフォーマンスが主題的に向上します。

彼らの結論は、適切なグループ化の重要性も強調しています。論理的なグループ化は直感的にknowサブメニューの下にあるものを意味するため、これは短期間のメモリ負荷を制限するのに役立ちます。調べるためにlookする必要はありません。

結論、多くの調査で、深いナビゲーションメニューが遅いか混乱していることが示されています。これは、質問の「サブメニュー」の各レイヤーが遅くなることを意味します深いメニュー内に隠されているアイテムのアクセス時間。これは、他の人が育てたメガメニューなどの代替案を検討するのに十分な理由です。

32
Ben Brocka

マルチレベルのネストされたメニューが最高のユーザビリティを提供しない2つの理由があります。

  1. ユーザーが最初のレベルのアイテム、2番目のレベル、3番目のレベルのアイテムを物理的に選択するのは困難です。ユーザーのマウスが目的のターゲットから外れる傾向があるため、ユーザーはトップレベルに戻り、ナビゲーションプロセスを再開する必要があります。

  2. 2番目と3番目のレベルのアクションは非常に隠されており、ユーザーがそれらを見つけるのは困難です。これらのアクションが本当にほとんど使用されない場合、おそらくそれらをより低いレベルに埋めることは有効な決定です。ただし、主要なアクションは、より簡単に発見、表示、および使用できる必要があります。

さて、これらすべてのことを踏まえると、たとえば一部の高度な3Dアプリケーションでは、2レベルのナビゲーションが理にかなっている可能性があります。これらのアプリは確かに非常に複雑だからです。私はめったに見たことがありませんが、3つのレベルを使用するのに十分な理由があります。

15
Nadine Schaeffer

そのようなことを行うための代替オプションとして、ユーザーにサブメニューのボタンをクリックさせ、クリックすることで、サブタブ全体をサブサブタブに変換することができます。ユーザーが戻りたい場合は、マウスをメニューから離し、サブメニューをもう一度開くか、戻るボタンを押します。

おそらく、ちょっとしたことを確認するためだけにユーザーがページや他のページをロードするのを退屈させるのを恐れるため、ディレクターはこれを望んでいるでしょう。

1
Pedro Falcão