ナビゲーションをできるだけシンプルで予測可能なものにする方法 パート1で示したように、まず、ナビゲーションオプションを自然に狭めるようにコンテンツを構成する必要があります。次に、ユーザーへの精神的ストレスを最小限に抑えるために、すべてのオプションを説明します。 ただし、2つの追加手順が必要です-適切な種類のナビゲーションメニューを選択し、それに適したデザインを作成します。 このシリーズの後半では、3番目のステップについて説明し、どのタイプのナビゲーションメニューがどのコンテンツに最も適しているかを検討します。



ナビゲーションメニューは、ユーザーがWebサイト上のコンテンツを検索できるようにするナビゲーションオプションを表示するインターフェイスの任意の領域です。 これには、たとえば、ハイパーリンクを含む可能性があるが、主な目的がナビゲーションではなく消費である記事や製品ページは含まれません。



ナビゲーションモデルの主な違いは、従来のプライマリナビゲーションシステムと代替のセカンダリナビゲーションシステムの違いです。 実際には、これらの違いを判断することは困難ですが。 従来のナビゲーションでは、主にユーザーがカーソルをクリックまたはカーソルを合わせてメタデータカテゴリを選択または参照する必要がありますが、代替ナビゲーションにはこれらの側面の少なくとも1つはありません。

従来のナビゲーションメニュー

最も単純なものから最も複雑なものにソートできる5つの伝統的なナビゲーションメニューまたはウィジェットがあります。

1.メニューバー

2.通常のドロップダウンメニュー

3.メガメニュー

4.別のページ

5.動的フィルター



ハイブリッドオプションも使用できますが、上記の5種類のメニューに分類できます。 当然、どのタイプのメニューをいつ使用するかという疑問が生じます。



パート1で説明したように、デザイナーはナビゲーションオプションを指定するために、名前、タイトルと画像、名前、画像、説明の3つの方法を使用します。 ユーザーの精神的な負担を最小限に抑えるために、設計者は、可能な選択肢を理解するために、対象読者が必要とする必要十分な情報を使用する必要があります。



これを念頭に置いて、次の実用的なルールは、どのタイプのナビゲーションメニューを使用するかを決定するのに役立ちます。使用できるオプションが少なく、それらを説明するために必要な情報が少ないほど、ナビゲーションタイプは簡単になります。



特定のウィジェットが使いやすい理由と、他のウィジェットよりもどちらを選択するかを理解するために、5種類のメニューのそれぞれを詳しく見てみましょう。

メニューバー

ほとんどすべてのサイトには、一次カテゴリを含む一定の水平線または垂直線があります。







最初の最も基本的なナビゲーションアンカーは、水平リンクバーまたは垂直リンクバーです。



提言

最も重要または最も頻繁に使用されるアイテムまたはカテゴリは、メニューナビゲーションバーに配置する必要があります。



説明

メニューバーは、最も簡単な種類のナビゲーションです。 ナビゲーションバーの要素またはカテゴリはグローバルであり、表示され、すぐに使用できます。 対照的に、ドロップダウンメニューでは、含まれているオプションにアクセスするために、ユーザーはホバーするか、別のページがロードされるのを待つ必要があります。



問題

メニューのナビゲーションバー（水平または垂直）が要素の小さなリスト以上のものを取り、画面の幅とその向きに依存するとすぐに、メインコンテンツを表示するためにより効果的に使用できるスペースを占有できます。



下のスクリーンショットでは、1行だけで水平ナビゲーションが機能することに注意してください。 小さな画面に配置するために、設計者はナビゲーション要素を行に配置することにしましたが、メイン要素は下に押し出され、ユーザーはさらにスクロールする必要があります。





ナビゲーションのいくつかの行は、コンテンツへのアクセスを困難にします。



ワイド画面では、垂直ナビゲーションメニューを使用してより多くの要素を配置できますが、欠点もあります。 それは、記事、ビデオ、製品情報など、メインコンテンツのプレゼンテーションにより効果的に使用できる水平スペースを占有します。 下の画像には、効果を比較するための2つのオプションがあります。





垂直ナビゲーションは、ワイドスクリーンでのコンテンツの表示を妨げる​​場合があります。



このため、多くの場合、ドロップダウンメニューとポップアップメニューが最適です。 リクエスト時にのみ追加の要素を表示するため、ページのコンテンツが注目されます。

通常のドロップダウンメニュー

トリガーされると、ポップアップまたはポップアップメニューがコンテンツの上に表示されます。 その要素は1つの列に垂直に積み上げられ、単語のみ、または単語とアイコンで構成されます。





ドロップダウンメニューの項目は、1つの列に垂直に積み重ねられます。



提言

要素が言葉で最もよく説明され、メニューが長すぎない場合、通常のドロップダウンメニューが最も簡単で効果的なソリューションです。



説明

メガメニューと比較して、通常のドロップダウンメニューには次の利点があります。

• より速く起動します。
• メガメニューの余分なスペースと視覚的な可能性は、いくつかのテキスト要素よりも有利ではありません。 さらに、ユーザーが最初に要素のレイアウトを理解する必要があるため、メガメニューはユーザーを混乱させるか、せいぜい遅くするだけです。 それどころか、短い垂直リストは簡単にスキャンされ、誰もが理解できます。

問題

長いメニューを使用すると、事態はさらに複雑になります。 長い垂直のドロップダウンリストは、ブラウザウィンドウで切り捨てることができます。これにより、ユーザーは常にスクロールしなければなりません。 この問題を解決するには2つの方法があります。



1つ目は、リストをサブカテゴリに分割することです。 これは良い解決策ですが、サブメニューからサブメニューに移動することは、相互作用が適切に考えられない場合、迷惑になる可能性があります。 このシリーズの記事のパート3でこの問題に戻ります。



2番目の方法は、画面の向きに最適なメガメニューを使用することです。たとえば、横向きの画面向きのメガメニューなどです。





画面に十分なスペースがない場合は、メニューを画面の向きに合わせて調整することをお勧めします。

メガメニュー

特別なタイプのドロップダウンメニューは、いわゆるメガメニューです。 メガメニューは、要素を1列に配置するだけでなく、オプションを視覚化するために画像、活版印刷の階層、さまざまなレイアウトを使用するドロップダウンメニューまたはポップアップメニューです。





メガメニューは、通常のドロップダウンメニューよりも大きく複雑です。



提言

オプションに名前と写真の両方が必要な場合は、メガメニューが最適です。



説明

通常のドロップダウンメニューでは、オプションのスペースと視覚化はあまりありません。 また、通常のドロップダウンメニューでもメガメニューでも、ナビゲーションのある別のページよりも次のような利点があります。

• 読み込みが速くなります。
• ユーザーの精神的負担は少ないです。 別のページでは、ユーザーはもっと考える必要があります。 「これはどの広告ですか？」「コンテンツ自体はどこですか？」「ナビゲーションはどこですか？」 ドロップダウンメニューにはナビゲーションのみが表示され、カーソルまたはユーザーの指の近くに表示されます。

問題

メガメニューでもスペースが限られています。 要素の数が多すぎる場合、別のページが不可避になります。

別ページ

要素またはカテゴリを表示する4番目の方法は、それらを別のページに配置することです。





別のページにサブカテゴリが自由に配置されます。



提言

メニューに名前、画像、説明が表示されている場合は、別のページが最適です。



説明

メガメニュー内のこのタイプのナビゲーションの場所は可能ですが、説明が数行のみで構成されている場合のみです。



問題

最も洗練されたソリューションではなく、コンテンツを表示するためではなく、ナビゲーションを表示するためだけに別のページにユーザーを送ります。 さらに、ユーザーは現在のページのコンテンツから離婚します。 ただし、メガメニューが非常に面倒で膨大な数の要素を配置できない場合は、個別のページが最も快適なソリューションになる可能性があります。

動的フィルター

最後に、動的フィルターは、コンテンツをナビゲートするための洗練された強力な方法であり、ユーザーの助けを借りて、外出先で必要なコンテンツのセットを選択します。





洗練された強力な動的フィルターにより、ユーザーは外出先で必要なコンテンツを選択できます。



ほとんどのサイトには最初の3種類のメニューのうちの1つしかありませんが、動的フィルターが単独で表示されることはほとんどありません。 代わりに、それらは通常、オプションとしてメインナビゲーションに追加されます。



Kmart（下図）は、通常メニューとメガメニューの両方から、ドロップダウンメニューからナビゲーションプロセスを開始します。 次のレベルでは、別のページに製品カテゴリが表示されます。 最後に、ユーザーがセクションに入った後、動的フィルターを見つけて選択を絞り込みます。





多くの場合、従来のナビゲーションに動的フィルターが追加されます。



提言

パート1のメタデータカテゴリの説明によると、最初の3種類のナビゲーションがメインおよび相互に排他的なカテゴリに最も適している場合、動的フィルタは組み合わせることができる追加のカテゴリに最適です。



説明

動的フィルターの利点は、ユーザーが外出先で値を選択および変更できることです。 ナビゲーションレベル間を行き来する代わりに、ユーザーは同じレベルにとどまり、結果が基準を満たすまで値を動的に組み合わせることができます。



動的なフィルターがほとんどの場合垂直形式で表示されるという事実は、フィルター処理された結果自体がコンテンツではないため、欠点ではありません。 それらはまだナビゲーションの一部です。 さらに、左側の選択された値と右側の結果との動的な関係により、ユーザーは基準に適合するアイテムの数とアイテムについて即座にフィードバックを得ることができます。



問題

動的フィルターは最も強力ですが、最も複雑なソリューションでもあります。 他の種類のナビゲーションよりも多くのスペースを占有し、ロードに時間がかかります。 ユーザーはフィルター、結果、並べ替えウィジェット、表示モードなどのさまざまな要素を操作する必要があるため、電話はもちろんのこと、画面のワークスペースにすべての要素を配置する作業が複雑になります。 したがって、それらがどれほど便利であっても、より単純なタイプのナビゲーションが同じ仕事をする場合は避けてください。

代替ナビゲーション

ほとんどすべてのWebサイトは、従来のタイプのナビゲーションの1つをメインとして使用します。 ただし、多くは代替ナビゲーションシステムでそれらを補完します。 したがって、最も人気のあるものを評価することも重要です。



代替ナビゲーションの4つの最も一般的なタイプを以下にリストします。

1.検索

2.サイトマップ

3.インデックスAからZ

4.タグ

検索する

検索により、ユーザーはさまざまなレベルのナビゲーションを実行する必要がなくなり、目的のアイテムに直接配信できます。 違いは、目的の結果を含むページのセクションがユーザーによって手動で設定されたことです。





検索は、複雑なマルチレベルナビゲーションシステムで目的のコンテンツに直接アクセスする方法です。



設計者は、タイプミス、類義語、さまざまな概念コンテンツモデルなど、ユーザーと検索エンジン間の誤解を考慮して、サイトのすべてのページにタグとキーワードのシステムを適用する必要があります。 つまり、検索エンジンは、ユーザーがクエリで何を意味するかを推測する必要があります。



提言

検索は、従来のナビゲーションを補完するものであり、ナビゲーションの同等の手段または直接的な手段ではないと想像してください。



説明

ユーザーが検索を使用することをほとんど好むかどうかについてさまざまな研究が異なる結論に達しました。 もちろん、検索設定は検索自体のデザインとその表示方法に依存する可能性があり、ナビゲーションデザインが貧弱である以前の経験では、検索設定が増加する可能性があります。 いずれにしても、メインのナビゲーション方法として検索を進めないでください。



開発者がミスを避けるために行っている努力にもかかわらず、 検索クエリの成功率は低いままです。 その理由は、通常、各サイトには独自のカテゴリ、分類スキーム、および名前があるためです。 ユーザーは通常、すべての詳細を知らないため、リクエストをランダムに入力することが多く、これは面倒で不確実なプロセスになる可能性があり、ほとんどの場合、リクエストを1回、おそらく2回twiceめる前に入力するという事実につながります。 これは、クエリが快適ではないモバイルデバイスで特に当てはまります。



別の問題は、すべての結果が適切であったとしても、ユーザーは自分たちがどれほど完全なものであるかと疑問に思うかもしれないことです。 「検索エンジンは、リクエストを誤解して何かを見落としましたか？」 これに対して、従来のナビゲーションでは、 すべてのカテゴリを識別して表示し 、関連するすべてのエントリの完全なリストも表示するため、ユーザーは何も見逃すことはありません。



よく議論される2番目の現象は、検索の方がナビゲーションメニューよりもコンバージョン率が高いことです。 ただし、これはブラウジングと検索の違いによって説明できます。 何かを購入する決心があまりない情報を単に見るユーザーは通常メニューを使用しますが、購入する必要があるものを知っているユーザーは通常それを検索フィールドに入力します。



たとえある特定の製品を見つけるのに検索がより効果的であっても、 ユーザーの間ではそれほど人気が​​ないということです 。 ユーザーは、特定の製品を検索する場合でも、検索よりも従来のナビゲーションを好みます。 検索の問題の1つは、製品名に特定の、多くの場合地域的な違いがあるため、正確な名前を再現するのが必ずしも容易ではないことです（「GS-50またはG-150でしたか？」）。 ユーザーは、動的フィルターを使用して、モデル、タイプ、またはバージョン番号を思い出す代わりに、探している製品の特性を正確に指定できます。



別の問題は、検索が関連製品の検出に干渉する可能性があることです。 ユーザーが検索で探していたものを見つけた場合、これは彼が見る唯一のアイテムかもしれません。 動的フィルターを使用すると、ユーザーは目的の製品だけでなく、追加の特性や低コストの製品を含む類似の製品も表示します。



当然、動的フィルターを検索に追加することも可能です。これにより、基本的に両方のナビゲーションモデルの利点を1つのインターフェイスに組み合わせることができます。



一般に、特に高度な機能とアルゴリズムを備えた検索エンジンは良好な結果をもたらすことができますが、固有の問題があるため、適切に設計された従来のメニューよりも劣っています。 メニューがユーザーを満足させない場合、追加のナビゲーション方法として検索が最も適しているのはそのためであり、ナビゲーションのメインまたは唯一の手段としてではありません。



最後に、ユーザーが自分のコンテンツに名前を付けたりタグを付けたりしたことがわかっているため、ユーザーが生成したコンテンツが多数ある場合に検索が最適に機能することに注意してください。

インデックスAからZ（A-Zインデックス）

AからZまでのインデックスは、サイトで利用可能な要素をアルファベット順に完全またはほぼ完全にリストします。





インデックスAからZは、サイト上のすべてのコンテンツをアルファベット順に並べ替えます。



提言

AZポインターを従来のメニューよりも優先しないでください。 さらに、多くの場合、カテゴリのあるページのみのリストは、数千の個々のページの完全なリストよりも効果的です。



説明

AZインデックスは、誰でもアルファベット順のリストをナビゲートする方法を知っているため、使いやすいです。 ただし、アルファベット順のリストには3つの問題があります。



まず、AZインデックスは通常、名前でうまく機能しますが、頻繁に必要な画像や説明ではめったに機能しません。



第二に、用語をユーザーの期待に合わせるのは必ずしも容易ではありません。 地域、時代遅れ、または概念的に異なる用語を使用すると、ユーザーはインデックスのまったく異なるセクションにいることに気付く場合があります。 問題を解決する唯一の方法は、同義語を有効にすることですが、これは情報アーキテクチャを混乱させるという事実にもかかわらずです。 従来のナビゲーションでは、同義語はそれほど大きな問題ではありません。理想的には、ユーザーは少数のオプションから少数のオプションに移行するでしょう。



第三に、検索などのAZインデックスは、関連製品を表示できない場合があります。 ユーザーがインデックスで「卵と豆」を検索すると、卵と豆のみを受け取り、それ以上は受け取りません。 従来のナビゲーションでは、ユーザーは、「朝食」カテゴリで「卵と豆」を検索しながら、速度を落とすことなく（もちろん、「朝食」カテゴリがアルファベット順にソートされていない限り）、ユーザーとサイトの両方に適した他の朝食レシピを見ることができます。

サイトマップ

サイトマップは、通常は見出しと小見出しでサイトのナビゲーション構造を表示します。





サイトマップは、サイトのナビゲーション構造を明確に示しています。



提言

スキャンされたsitemap.xmlファイルは、検索エンジンがサイトのインデックスを作成するのに役立ちます。 ただし、インタラクティブなプレゼンテーションのため、ナビゲーションの主な手段としてサイトマップを強調すべきではありません。



説明

通常、サイトマップはテキストのみで構成されます。 また、ユーザーは多くの場合、すべてのオプションを理解するためにアイコン、写真、説明が必要です。 もちろん、これらの要素をサイトマップに含めることは可能ですが、これは2番目の問題を悪化させるだけです。サイトマップでは、すべての要素は通常、不要な要素をスキップまたは非表示にすることなくすぐに表示されるため、表示しようとしているユーザーに問題が発生します。特に多くのコンテンツがある場合は、情報を操作します。

タグ

タグは、デフォルトでは、親カテゴリまたは子カテゴリのないキーワードとして説明できます。 通常、記事の最後に表示されます。





「詳細」とマークされたタグ



提言

タグシステムには、パフォーマンスを向上させるための追加の手段が必要です。 しかし、それでも、従来のカテゴリベースのシステムよりも劣っています。



説明

すべての代替ナビゲーション方法の中で、タグは従来のナビゲーションに最も近いです。 最終的に、タグ付け（本質的にはメタデータを作成するプロセス）は、従来のナビゲーションの基盤である適切な情報アーキテクチャに向けた最初のステップです。 ただし、1つの記事に少数のタグがある場合でも、近い将来に数百、数千のタグに遭遇する可能性があります。



それがタグの分類が必要な理由です。 タグを親カテゴリと子カテゴリに分割することにより、設計者は多数のタグを関​​連情報を持つ小さなセットに構成できます。 これらのカテゴリを含む従来のナビゲーションでは、ユーザーは不要なセットをスキップして、興味のあるセットのみを表示できます。



コンテンツ（コンテンツベースのWebサイト）に重点を置いた多くのサイトは、複雑な従来のメニューをハイブリッドナビゲーションに置き換えています。 せいぜいタグを大まかに分類し、最初は外部および内部の検索エンジン、イベントフィード、ソーシャルメディアリンクなどの他のナビゲーションモデルに依存しています。 このタイプのシステムにより、ユーザーは必要な記事をすばやく見つけることができますが、ユーザーは関心のある記事を他の人から特定するのが困難です。 代償として、一部のデザイナーは単にキーワードのリストで記事を終わらせます。たとえば、「バラクオバマ」、「民主党員」、「共和党員」、「ヘルスケア」、「仕事の中止」などです。 この場合、ユーザーはタグにアクセスして、関連する関連記事を見ることができます。



従来のナビゲーションでは、ユーザーは、 ニュース→政治→米国→国内政治→健康など、関心のあるキーワードを含む一貫したカテゴリを使用します。 この場合、ユーザーはバラク・オバマ、民主党員、共和党員、または仕事の停止について言及しているわけではないため、米国の医療について説明しているため、この記事に興味があります。 関連記事を表示するには、ユーザーは親カテゴリに切り替えるだけです。





従来のレベルベースのメニューは、最も正確なナビゲーション方法です。



タグに基づくシステムは、ソーシャルメディアの形式の強力な伴奏と優れた検索エンジンによって補完される場合に最も効果的です。 ただし、ターゲットを絞った検索ではなく、ポイントにより類似した方法でナビゲートするという漠然とした方法のままです。 さらに、ユーザーは検索や外部リンクに頼ってサイトをナビゲートするべきではありません。 それどころか、彼らはメインページから直接情報を見つけられるべきであり、よく考え抜かれた伝統的なメニューがこれを行う最も効果的な方法です。

おわりに

適切な種類のナビゲーションを選択するときが来たら、ポイントは簡単です。使用できるオプションが少なく、それらを説明するために必要な情報が少ないほど、ナビゲーションの種類は簡単になります。



より複雑な問題は、従来のナビゲーションモデルに加えて代替ナビゲーションモデルを実装するかどうか、およびその実装方法です。



代替ソリューションは、安価で実装が簡単です。 しかし、それらはすべて、プライマリまたは唯一のナビゲーションシステムとして機能することを妨げる自然の障壁を持っています。 さらに、ユーザーは通常、これらの代替手段を探しませんが、従来のナビゲーションが役立ちます。



したがって、これらのマイナーソリューションの開発または改善に多大な努力を払う代わりに、メインナビゲーションの実装に適切に投資すれば、ほとんどの場合、セカンダリソリューションは不要になります。



この記事の推奨事項を以下に要約します。

従来のナビゲーションの選択

• 垂直ナビゲーションバーは、水平ナビゲーションバーよりも有用ですが、コンテンツと同じレベルに表示されるメインコンテンツから注意をそらすことができます。 水平メニューバーは、単一行である限り、第1レベルのカテゴリに有効です。 単一行が不可能な場合は、固定垂直メニューではなく、ドロップダウンメニューまたは別のページを使用します。
• オプションを説明するのに数語で十分な場合は、通常のドロップダウンメニューを使用します。 サブカテゴリに長いリストをレイアウトするか、画面の向きに合ったメガメニューを使用します。
• 名前と画像が必要な場合は、メガメニューを使用してください。
• 名前、画像、説明が必要な場合は、別のページを使用してください。
• 上記のソリューションはすべて、自然で相互に排他的なカテゴリに適しています。 カテゴリーを組み合わせることができる場合は、動的フィルターを従来のメニューに追加します。

代替ナビゲーションの選択

• ユーザーが探している製品の正確な名前を知っている場合、AからZへの検索またはインデックスはうまく機能します。 ただし、どちらのシステムも曖昧な傾向があり、関連製品を見つけるのが困難になることがよくあります。 従来のナビゲーションではなく、それらに注目しないでください。
• コンテンツの分類が高すぎるか複雑すぎる場合は、タグベースのナビゲーションが優れた代替システムになります。 何らかの方法で、強力な検索エンジンとソーシャルメディアの統合によって補完される必要があります。

どのナビゲーションタイプが最適であるかを知ることは非常に価値があります。 しかし、4番目のステップ、つまり、ナビゲーションをできるだけシンプルで予測可能かつ快適に設計する方法が必要です。 これについては、パート3で説明します。