web-dev-qa-db-ja.com

ナビゲーションのマルチレベルタブとドロップダウンメニューの使いやすさ

クライアントポータルの再設計の最中であり、マルチレベルのタブ設計を追求するのか、ドロップダウンメニュー（現在のバージョンのアプリケーションで使用）を追求するのかについて、いくつかの議論がありました。

エレガントでシンプルで明白なサブタブ？ のような質問と なぜホバーメニューはユーザーに害を及ぼすのか のような記事を読んだら、何かあるのかと思ったいずれかの方法で実際のユーザビリティデータ。

私が話していることを説明するために、新しいナビゲーションメソッドの保留中のデザインを次に示します。

Suggested new design

そしてこれが現在のデザインです：

enter image description here

私の見解では、提案された新しいデザインには、ユーザーがメニューを開かなくても他のサブセクションを表示してナビゲートできるという主要な利点があります。それはまた（少なくとも私にとって）より魅力的です。

不利な点は 引用した記事 で説明されているホバーナビゲーションの問題があることです。次のいずれかで対処できます。

  1. ホバー時のjQuery遅延（E * TradeおよびQuickBooksオンラインで使用）、または
  2. ユーザーがタブをクリックしてサブタブを表示するか、タブをクリックするとメインセクションページに移動する必要があります。前者は、「あなたはここにいる」描写であるデフォルトの表示の利点を失うリスクがあります。後者は、ユーザーが目的のサブページに移動する前にメインセクションのプライマリページにアクセスする必要があるため、遅延を引き起こす可能性があります。

残念ながら、私にはユーザーテストを実行する贅沢はありません。実際に使いやすさよりも変更を嫌うので、ドロップダウンを優先する方がおそらく優先されます。私たちのユーザーベースはほとんどシステムを使用する必要があるので、変更が最初に不快である場合にトラフィックを失うことを心配する必要はありません。使いやすさとシンプルな美しさを求めています。

navigationtabsdropdown
15
Josh Anderson

今まで見たことがなく、タブベースのナビゲーションとドロップダウンメニューベースのナビゲーションを具体的に評価している研究も見つかりませんでした。

私は、ナビゲーションが優れているこのタイプの質問は、ほとんどの場合、状況に応じてどちらが優れているかに結びついていると信じています。したがって、あなたが上に投稿した特定の例を検討するとき、私は注意すべきことがいくつかあります。

  • 実際には 垂直ナビゲーションはスキャンが少し簡単です （レイアウト方法によって異なります）であり、ドロップダウンメニューは理論的にはマルチレベルよりも「読みやすい」セットする。
  • for と against のドロップダウンを主張するサイトと調査のバッチがあります。ただし、例でわかるように、非常に明確なことが1つあります。ユーザーのブラウザウィンドウの幅に応じて、ドロップダウンメニューにより多くのアイテムを表示できます。これは、コンテキストがメニューの選択の中心であることについて先に述べたポイントに戻ります。 ジェイコブニールセンは、「タブ、使用済みの権利」に関する彼の記事で述べています マルチレベルのタブ（タブレベルの1つがそのオプションをラップした場合のように）は、一般に回避する必要があるため、これは間違いなく問題になる可能性がありますサイトの閲覧者が低解像度のデバイスからアクセスしている。
  • 質問で示したマルチレベルのタブベースのアプローチの明らかな利点は、家を動かしてホバーしたり、クリックしてメニューを表示したりしなくても、その場でより多くのカテゴリを表示できることです。

まとめ私は通常、メガドロップダウンメニューにもっと傾けます。実際、メガドロップダウンメニューには明確な欠点がいくつかありますが、タブを使用すると、さまざまなデバイスでのタブのラップに問題が発生し、多くのオプションを簡単に合わせることができません。 ただし、本当に基本的な廊下のユーザビリティテストを実行できた場合、yourユーザーベースは、特定の解像度でサイト上の特定の情報のサブセットにのみアクセスするため、タブベースのインターフェースは100倍優れている場合があります。だから、もしあなたが何らかの方法でテストすることができるなら、私はそのために大いにプッシュします。

追加情報/読み：

余談ですが、ここでのマルチレベルのタブベースのナビゲーションの例は、テキストの配置を切り替えただけで、メガドロップダウンメニューの一種と見なすことができるのではないでしょうか。

10
GotDibbs

Web上のすべてのサイトで、タッチスクリーンユーザーの増加に対応する必要があります。また、一部のユーザーはUser-Agent文字列を変更できるため、モバイルブラウザーを検出しようとしても、デスクトップバージョンのサイトを取得している可能性があります。ユーザーがタッチスクリーンを使用してサイトにアクセスしている可能性が高く、ホバーがタッチデバイスで機能しない可能性が高くなります。これは、引用した記事の問題に加えて問題です。私が推奨するのは、選択したソリューションでホバーしないようにすることです。

垂直メニューは、メニューのテキストをスキャンするユーザーに利点を提供し、ナビゲーションを見て、考えて、サイトの実際のコンテンツに焦点を合わせる時間を短縮できます。

ご覧ください： https://webmasters.stackexchange.com/questions/5448/pros-and-cons-of-horizo​​ntal-menus-versus-vertical

そして、F字型のパターンを考えてみましょう： http://www.useit.com/alertbox/reading_pattern.html

2
mawcsco