効果的なナビゲーションの簡素化、パート1：情報アーキテクチャ

翻訳者から

サイトのナビゲーションシステムの簡素化に関する興味深い記事を翻訳することにしました。 これは、サイト上のコンテンツの構造化に関する最初の部分にすぎません。 かなりボリュームがありますが、これからもおもしろいです。読書に飽きないことを願っています。 特にオンラインストアなど、コンテンツが多い大規模なサイトの場合、情報アーキテクチャをより簡単に理解しやすくする方法についての非常に詳細な説明が含まれています。
エラーを見つけた場合は、PMに書き込んでください。修正します。
行こう！


ナビゲーションは、ユーザーエクスペリエンス（UX）の最も重要なコンポーネントの1つです。 ユーザーにとって、これは究極の目標を達成するための単なる方法であり、最終的な目標はコンテンツの消費です。 したがって、ユーザーはコンテンツとナビゲーションに関してかなり対立する期待を抱いています。 コンテンツがユニークで予測不可能でエキサイティングであると想定される場合、ナビゲーションは可能な限りシンプルで予測可能でなければなりません。

完璧なナビゲーションシステムへの4つのステップ

便利なナビゲーションシステムを作成するには、ウェブサイトの設計者が特定の順序で4つの質問に答える必要があります。
1.コンテンツを構成する最良の方法は何ですか？
2.ナビゲーションの選択肢を明確にする最良の方法は何ですか？
3.すべての選択肢に対応するには、どのタイプのナビゲーションメニューが最適ですか？
4.メニューを設計する最良の方法は何ですか？

最初の2つの質問は、コンテンツの構造化と命名に関するものであり、通常は情報アーキテクチャに関連しています 。 情報アーキテクトは通常、作業の結果をサイトマップ図で視覚化します。


サイトマップ図は、サイトのナビゲーション構造のアイデアを提供します。

ただし、この一連の記事で詳しく説明する理由により、ナビゲーションとしてのサイトマップは、可能な限り最高のユーザーエクスペリエンスに貢献しません。 同様に重要なのは、すべてのオプションを正しく保持、整理し、徐々に表示するカスタムナビゲーションメニューの作成です。 ユーザーは、可能な選択肢を快適に検索、表示、およびスキップできます。
このようなナビゲーションメニューの開発は、ナビゲーションとの対話の設計に関連する上記の3番目と4番目の質問に答えることで実現できます。 最初の2つの質問は最初の部分で検討され、2番目の2つの質問は記事の2番目の部分で検討されます。

コンテンツの構造化

Webサイトのコンテンツを適切に構造化するには、まず、ユーザーが情報を検索する方法を検討し、次にこれらの設定に最適な方法でコンテンツを構造化する必要があります。

ユーザーが情報を検索する方法

ユーザーが車、処方箋、金融サービス、衣料品、ニュース記事、フィットネス運動、娯楽ビデオ、またはその他のオブジェクトや情報を検索すると、探しているものの正確な名前がわからない場合があります。 ユーザーが探しているものの正確な名前を常に知っていると仮定する場合、ユーザーが見つけるのに役立つ最善の方法は、AからZまでの大きなリストまたは検索フィールドを介した単純な入力を提供することです。
もちろん、すべてがそれほど単純ではありません。 2番目の部分で示すように、ユーザーが探しているものの正確な名前を知っていても、AからZのリストと検索の両方に、メインまたは唯一のものとして不適切なナビゲーションツールとなる相互作用の問題があります。 さらに、ユーザーは多くの場合、正確な名前を知らないか、物やその正確な名前に興味さえありません。 むしろ、彼らは探しているものに関連するキーワードまたは特性を持っています。
ユーザーを必要なコンテンツに誘導するための最初のステップは、サイト上の商品または情報のタイプの集約または分類です 。

ナビゲーションシステムの基礎としてのメタデータ

特定のサブジェクトまたはコンテンツについて収集される情報は、通常メタデータを指します-これは情報に関する情報です。
詳細に入ることなく、ニュース記事の政治的焦点カテゴリ、モニター画面サイズ、映画監督、シャツの襟のタイプ、フィットネス運動の難易度など、アイテムはメタデータの特定のカテゴリに属する​​場合があります。 もちろん、カテゴリ自体は、価格、人気、公開日などの指標によってサブカテゴリに分類できます。
ユーザーは、これらのメタデータカテゴリを通じてコン​​テンツを検索できます。 それでも、これから見るように、コンテンツを検索するためのすべての可能なオプションをユーザーに提供する必要はありません。 最良の場合、これは単にインターフェイスを乱雑にし、ナビゲーションプロセスを遅くして複雑にし、最悪の場合、テーブルを使い果たし、サイトを離れるまでユーザーを悩ませます。
どの段階でどの段階でカテゴリをユーザーに表示するかを慎重に検討する必要があります。

3種類のメタデータカテゴリ

メタデータカテゴリを表示するタイミングとタイミングを決定するには、カテゴリをキー、追加、非必須の 3つのグループに分けます。
情報アーキテクチャの問題は、カテゴリをキー、追加、および非必須に分類することは、多くの点でターゲットオーディエンスの好み、Webサイトの目的、さらにはコンテンツの量に依存することです。 何らかの方法でカテゴリのグループを一度形成した後、単純なルールは、いつどのカテゴリを表示するかを決定するのに役立ちます。

主なカテゴリー

主要なカテゴリには、すべてのターゲットユーザーにとって重要なカテゴリが含まれます。 通常、このようなカテゴリはほとんどありませんが、要素は少なくとも1つのそのようなカテゴリに属している必要があります。これにより、デザイナーの作業とユーザーのナビゲーションの両方が簡素化されます。

重要なカテゴリの強調表示

食品レシピのメタデータカテゴリの小さな選択には、「料理」、「主な材料」、「特別な食事」、「特別な機会」、「料理」、「調理時間」が含まれます。 これらすべてのカテゴリについて、「キー」が唯一のキーになります。 全員が特別な食事をしているわけではなく、すべての食事が特別な機会に適しているわけではありませんが、ほぼ毎日、軽食、朝食、メインコース、サイドディッシュ、サラダ、デザートなどの食事を共有しています
料理への分割はすべてのターゲットユーザーにとって重要であるため、これはユーザーに表示されるカテゴリの最初のグループである必要があります。


ディッシュは、レシピのメタデータカテゴリの重要なグループです。

ただし、前述のように、Webサイトのターゲットオーディエンスまたは目標は、特にテーマサイトのカテゴリの分類に影響を与える可能性があります。
たとえば、「料理」に分割することは、レシピサイトにアクセスするすべてのユーザーに完全に関連するとは限りません。 しかし、サイトが世界中から人気のある料理の最高のレシピを収集する場合、「料理」は、「料理」に加えて、またはそれらに取って代わる、ターゲット視聴者にとって重要なカテゴリのグループになります。 いずれにしても、「キッチン」はテーマサイトのキーであるため、（「料理」の代わりに）最初に表示する方が適切です。


テーマWebサイトには、優れた主要なメタデータカテゴリがあります。

主要なカテゴリの構成

上記の例は、主要カテゴリの単一グループにのみ適用されます。 ただし、一連の製品またはサービスがいくつかの主要なカテゴリをカバーする場合があります。
たとえば、服を着てください。 カテゴリの重要なグループの1つは、「シャツ」、「ズボン」、「靴」、「セーター」などの服の種類への分割です。 もう1つの重要で相互に排他的なカテゴリは、性別による分離です。「男性」と「女性」です。 3番目のカテゴリは、「毎日」、「仕事中」、「落ち着いた」などの状況への区分です。 もちろん、さらに多くの重要なカテゴリを思い付くことができますが、ここではこれについて詳しく見ていきましょう。
問題は、カテゴリを配置し、いくつかの重要なカテゴリ間の潜在的な競合を解決する方法です。
最初は、トップメニューの同じレベルにあるすべての主要カテゴリの場所は論理的に見えるかもしれません。 最後に、それらはすべて重要です。 ただし、逆の方が良いです。 主要なカテゴリは、次のレベルで次々に最適に機能します。 よりよく理解するために、以下のWebサイトの情報アーキテクチャを見てみましょう。


水平メニューは、サイトを提供する製品に最もよく使用されます。

水平ナビゲーションメニューには、「ホームアクセサリー」、「狩猟と釣り」、「屋外装備」、「靴」、「衣服」など、LL Beanの利用可能な製品が一覧表示されます。 しかし、デザイナーは「服」に対して何か違うことをしました。 衣類は「男性用」、「女性用」、「子供用」に分けられますが、水平メニューの数十種類の衣類のリストの代わりに、デザイナーは重要度の低い主要カテゴリを作成することにしました。 ユーザーは「男性」と「女性」のカテゴリから開始するだけで、ドロップダウンメニューですべてのタイプの服を見ることができます。これは、1つの水平メニューよりも多くのオプションを提供します。


メインナビゲーションメニューで重要度の低いキーカテゴリを使用すると、スペースが解放されます。

情報アーキテクチャにはわずかな食い違いがありますが、設計者は水平メニューのスペースを空けることにしました。 このような解決策は、矛盾がユーザーを混乱させるまで受け入れられますが、この場合は起こりそうにありません。 それにもかかわらず、同じ水平メニュー内のカテゴリ「靴」（明らかな理由により、男性と女性に分割される）の位置は、もはやそのような良い解決策ではありません。


重要なカテゴリは、隣同士ではなく、順番に配置する必要があります。

このソリューションの問題は、2つの主要なカテゴリが同じレベルにあったことです。 「靴-男性」と「男性-靴」の両方が同じ製品への直接の道です。 それでも、両方のカテゴリが重要であるため、ユーザーはいずれの場合も両方のパスを確認する必要があります。 しかし、それらは同じレベルにあるため、ユーザーはそれらの間で選択する必要があり、両方のカテゴリが重要であるという仮定を侵食します。 そのため、たとえば「靴-メンズ」など、パスの1つを削除できます。

追加のカテゴリ

すでにいくつかの主要なカテゴリがある場合、商品とサービスの量によっては、追加のカテゴリは必要ない場合があります。 Webサイトに12を超える衣類がない場合、デザイナーはユーザーに選択肢を提供し、男性用または女性用の衣類を見て、そこに立ち寄ることができます。
ただし、多くの場合、逆のことが起こります。 すべての主要なカテゴリを使い果たした後でも、豊富なアイテムはナビゲーションの邪魔になる可能性があります。 したがって、ユーザーがコンテンツをさらにフィルタリングできるようにする追加のカテゴリを導入する必要があります。
追加のカテゴリは一部のユーザーにとって重要ですが、すべてのユーザーにとっては重要ではありません。 たとえば、「車」の2つの追加メタデータカテゴリは、「ドアの数」と「燃料の種類」です。 一部の人々は燃料の種類について非常に熱狂的ですが、ドアの数についてはあまり気にしません。 その他はまったく逆です。

追加のカテゴリーよりも重要な優先事項

原則として、訪問者が主要なカテゴリを通過した後、追加のカテゴリを表示する必要があります。
ただし、衣料品や電子機器などの多くのショッピングサイトでは、ブランド（追加カテゴリ）を製品タイプ（キーカテゴリ）と同じレベルでリストしています。


キーと追加のカテゴリは、異なるレベルにある必要があります。

このアプローチの問題は、訪問者が衣服などからブランドを選択した場合でも、数百または数千の異なる製品に遭遇し、検索を制限するために衣服の種類を選択する必要があることです。 したがって、キーレベルで追加のカテゴリを配置すると、不要な回避策が作成され、選択が複雑になり、ナビゲーションが煩雑になります。
最初から多くのナビゲーションオプションを同時に表示する代わりに、ユーザーにいくつかの重要なカテゴリを最初に表示してから、追加のカテゴリを紹介します。
したがって、上記の例では、主要なカテゴリからブランドを削除し、最初に衣​​服の種類のみを選択できるようにする方が良いでしょう。 そして、次のレベルでのみ、ブランド選択オプションをユーザーに提供します。


ユーザーが既に重要なカテゴリを選択している場合にのみ、追加のカテゴリを表示する必要があります。

動的フィルター

既に述べたように、重要なカテゴリは適切なレベルで次々に提示されるべきです。 追加のカテゴリはすべて、同じレベルで最もよく表されます。
唯一の例外は、追加のカテゴリが相互に排他的である場合です。この場合、それらはキーカテゴリと同じメニューの次のレベルに表示される必要があります。 追加のカテゴリを結合できる場合は、 動的フィルタとして実装することをお勧めします。
以下のスクリーンショットでは、Searsが主要なカテゴリをブレッドクラムまたはブレッドクラムとして表示し、追加のカテゴリが動的フィルタとして表示されていることに注目してください。


組み合わせることができる追加のカテゴリは、動的フィルタとして表示する必要があります。

キーと追加のカテゴリの違いは、次のように説明できます。 各カテゴリは、アクセス可能なコンテンツのフィルターです。動的フィルターは、ユーザーが値を継続的に選択および変更できるため、動的フィルターと呼ばれます。 対照的に、従来のレベルベースのナビゲーションシステムでは、ユーザーは目的の値を選択するために、あるレベルから別のレベルに移動する必要があります。 これらが重要なカテゴリである場合、問題は発生しません。 ただし、追加のカテゴリでは状況が異なります。
ユーザーがシャツを検索するとき、「ブランド」、「襟の種類」、「袖丈」、「布地」、「パターン」、「ポケット」、「割引」、「価格」、「評価」など、多くの追加カテゴリが重要になります。 「、」人気度など どのカテゴリに興味があるかを正確に理解することは困難です。 誰かは何にも興味がなく、誰かは少数ですが、誰か全員に興味があります。
ユーザーが興味を持っているかどうかに関係なく、ユーザーをすべての追加カテゴリに順番に導く代わりに、デザイナーは同じレベルで動的フィルターを作成できます。 その後、ユーザーは好みのカテゴリのみを選択できます。
一方、以下に示すサイトを見てみましょう。このサイトには、主要なカテゴリと追加のカテゴリに明確な違いはありません。 代わりに、キーカテゴリを含むすべてのカテゴリを動的フィルタとして表示します。


主要なカテゴリを動的フィルタとして提示しないでください。

この区別の欠如は、いくつかの問題につながります。 まず、垂直方向のスペースを占有し、追加のカテゴリを下に移動するため、ユーザーは値を変更するためにより頻繁に下にスクロールする必要があります。
第二に、動的フィルターは「重い」ウィジェットとして知られています。それらは強力ですが、リソースを大量に消費します。 ユーザーが1つの値を選択するたびに、フィルターに適合するように結果のリスト全体が更新されます。 従来のメニューから同じキーカテゴリを選択することで、同じ結果をより迅速に達成できます。
実際、Nikeのデザイナーは通常のメニューを作成しました。これにより、仮定をテストし、同じインターフェイスで両方の相互作用モデルの速度と効果を比較できます。 （また、動的フィルタからキーカテゴリを削除する機能も提供されました。 翻訳に注意してください。 ）


主なカテゴリは、従来のナビゲーションメニューで最もよく表されます。

相互に排他的なカテゴリ

動的フィルタは、追加のカテゴリを組み合わせることができる場合にのみ必要です。 追加のカテゴリが相互に排他的である場合、メインナビゲーションメニューの次のレベルで表示する必要があります。
次のスクリーンショットでは、Daily Expressはユーザーに第1レベルで重要な質問をします。「金融」、「エンターテイメント」、「ライフスタイル」などのニューストピックを選択します。 次に、選択したセクションのメインページに、トピックに関する最新ニュースのダイジェストが表示されます。 ほとんどのユーザーは、最後の3つまたは4つの記事をチェックアウトしたいと考えています。 選択したトピックを掘り下げたい人のために、サブカテゴリは最初のレベルの下にリストされています。


相互に排他的な追加カテゴリは、メインナビゲーションメニューの追加レベルで最適に表示されます。

エンターテインメントは通常、書籍の形式、映画の形式、またはテレビ番組などのいずれかで割り当てられるため、上の画像のサブカテゴリは相互に排他的であると見なすことができます。 もちろん、組み合わせも可能です。 本から映画や演劇作品を作ることができます。 しかし、ユーザーはそのような組み合わせのダイジェストを見たいでしょうか？ その場合、動的フィルターを適用することは理にかなっています。
この質問に対する答えは、対象となる聴衆の特定の関心だけでなく、要素の種類や量よりも、要素の種類（サイト上のアイテム）に依存するものではないことに注意してください。
たとえば、ユーザーは、中華料理、低カロリー、クリスマスなどの朝食のレシピを探すことはほとんどありません。 それどころか、彼らは中国人、または低カロリー、またはクリスマスの朝食を探します。 したがって、レシピの追加カテゴリは、一般的なカテゴリに結合されることはほとんどありません。 それでも、サイトに何千ものレシピがあり、ターゲットオーディエンスがかなり具体的な好みを持っている場合、より多くの動的フィルターを提供すると便利です。


大量かつ多様なコンテンツ、およびユーザーの特定の関心は、さまざまな動的フィルターを適用するための基盤として機能します。

最後に、メタデータカテゴリの3番目のグループを検討します。

マイナーカテゴリー

非必須カテゴリは、ターゲットではない訪問者がコンテンツを検索する可能性が高いカテゴリです。 ただし、このようなカテゴリは、全体的なユーザーエクスペリエンスにとってまったく重要ではありません。
記事を検索するメタデータの2つのカテゴリは、「単語数」と「画像の数」です。 これらのカテゴリがデータベースの列として実装された場合、コンテンツストラテジストはこれらのカテゴリの値を調べて、ほとんどの記事が長すぎて写真がないことがわかり、多くの訪問者が記事を読み終える前にサイトを離れる場合があります。 この場合、コンテンツストラテジストは、デザイナーまたはクライアントとこの問題について話し合うことができ、コンテンツの改善に役立ちます。 ただし、これらのカテゴリが貴重な情報をデザイナーに提供できるとしても、ユーザーは「単語数」または「画像の数」で記事を検索したいとは思わないでしょう。
要するに、重要でないカテゴリはサイトに表示されるべきではありません。 それらは無視され、インターフェースを混乱させ、ユーザーを混乱させることさえあります。 ただし、要素の数が多いと、必須ではないカテゴリが追加される可能性があります。
たとえば、「単語数」は通常、記事を検索できる重要度の低いカテゴリになります。 ただし、下に示すサイトには長年にわたって非常に多くの記事が蓄積されているため、設計者はコンテンツをフィルタリングするための追加カテゴリとして記事の長さを追加する必要があると判断しました。


大量のコンテンツは、必須ではないカテゴリを追加する可能性があります。

上記のWebサイトは、レシピと衣服が含まれており、通常は多数のメタデータカテゴリを必要とするため、カテゴリの優先順位の重要性を説明するのに適しています。 しかし、特に企業向けに設計する場合、設計者がある時点で直面する問題は1つもありません。

法人向け製品の分類

ほとんどのレシピサイトでは、レシピを無差別に収集し、その分類をデザイナーに任せています。 しかし、企業はしばしば製品を分類する独自の内部方法を持っているため、要件の競合につながる可能性があります。
マシンの最初の重要なカテゴリーを検討してください。 「コンパクトカー」、「バン」、「スポーツカー」、「セダン」、「リムジン」などの意味を持つ、サイズまたはライフスタイルに応じてカテゴリを選択します。 車の種類ごとにプライベートライフスタイルが考慮されるため、このようなカテゴリが重要です。これは、ほぼすべての自動車ドライバーにとって重要です。 たとえば、小型車は小さく、安く、運転しやすく、街に駐車するのは簡単です。 バンには大きなトランクがあり、家族に最適です。 全く異なるライフスタイルのためのスポーツカー。 などなど。
ただし、ほとんどの自動車会社は独自の方法でモデルを分類しています。 以下のBMVは、番号（1、3、5、7など）による分類に従います。


企業の分類がうまく機能する場合もあります。

内部分類スキームはユーザビリティの問題を引き起こす可能性がありますが、BMV分類は実際に情報アーキテクチャをより便利にします。 このようなスキームは企業的であるという事実にもかかわらず、一般によく知られています。また、小型車、セダン、リムジンなどの広範な分類とほぼ一致して、車のサイズの増加に応じて車の数が論理的に増加します。 この場合、企業分類以外はユーザーを支援するよりもむしろ押しのける可能性があります。
次の例はそれほど単純ではありません。 同様に、Opelは独自の内部名に従ってマシンモデルをリストします。


内部分類は、常に外部ユーザーに理解されるとは限りません。

問題は、これらの製品ラインの構造があまり明確ではなく、ユーザーがすべてのモデルを見るためにスライダーを操作する必要があるという事実によって容易にされないことです。 ユーザーは、製品がどのように相互接続されているかを理解する簡単な方法がないため、製品を好みに応じてフィルタリングできません。
内部分類スキームがユーザーに対して機能しない場合、既知の外部が内部よりも優先される必要があります。
フォルクスワーゲン（下）が自動車モデルの名前と分類に独自のパスをどのように適用したかに注目してください：Jetta、Passat、Touaregなど しかし、会社は会社の分類よりも一般的な外部分類を優先しました。 その結果、理解しやすく、ユーザーが興味のあることに集中できるメニューができます。


一般的な分類スキームが企業のスキームよりも優先されるため、ナビゲーションメニューがわかりやすくなります。

もちろん、クライアントは企業分類をバックグラウンドで見たくないかもしれません。 それでも、この必要性はクライアントに詳細に説明する必要があります。

ナビゲーションの選択肢の説明

ユーザーの好みに応じてナビゲーションオプションを構成することは、サイトの情報アーキテクチャを簡素化する重要なステップです。しかし、そもそもユーザーがナビゲーション機能を理解できない場合、最も高度な構造でさえ無駄になります。そのため、ユーザーにオプションを説明する最善の方法について少し考えてください。
ユーザーが選択を理解するために必要なだけの情報を表示します。必要以上の何かを追加すると、ユーザーを疲れさせ、インターフェイスが乱雑になり、ナビゲーションが遅くなり、障害が発生する危険性があります。
他方では、彼らはあまりにも少ない情報を与えるべきではありません。ユーザーがリンクの先を推測し、最後に動揺した場合、すぐにインターフェイスに対する自信を失い、ウェブサイトを離れます。
設計者は、3つの方法のいずれかを選択してオプションを説明できます
。
2.名前と画像。
3.名前、画像、説明。
適切な方法を選択するには、ターゲットオーディエンスの単純名の明確さを評価します。

簡単な名前

使用する名前が十分に認識できる場合は、それらで十分です。 「ジーンズ」、「ショートパンツ」、「シャツ」、「ジャケット」が何であるかを説明するために、大きな画像や長い説明は必要ありません。


おなじみのことをするには単純な表記で十分です。

名前はできるだけ簡潔であることが望ましいと同時に、簡潔さのために簡潔さを達成すべきではありません。 UXやBMI（body mass index）などの頭字語と専門用語は、対象読者にとって馴染みやすく便利な場合にのみ機能します。
ただし、用語自体が明確な場合もありますが、その用語が現れるコンテキストによってあいまいになります。大規模な組織の多くのサイトには、組織のコアビジネスの側面を示す一定の水平ナビゲーションと、サブセクションを示すコンテキスト依存の垂直ナビゲーションが含まれています。この方法では、表記が重複する場合があります。バース大学（下記）には、上部の一般的な水平ナビゲーションメニューと左側の垂直サブメニューに「研究」という指定が含まれています。


多くのサブセクションを持つ大規模な組織では、名前が重複する傾向があります。

これはユーザーを少し混乱させるかもしれませんが、慎重な設計はあいまいさを避けるのに役立ちます。上記のスクリーンショットでは、学部の探索メニューの見出しは、研究という用語が大学全体ではなく学部を指すことを示す良いヒントです。念のため、「この部門について」と言う「私たちについて」を長くすることができます。
別のオプションは、このカテゴリに含まれるオブジェクトの数を示す数字を使用して、名前のコンテキストを表示することです。


一部のメニューでは、カテゴリ内のアイテムの数が名前の横に表示されます。

このような数値は、多くの場合、動的フィルターに含まれています。


動的フィルターを備えた多くのインターフェースでは、カテゴリー内のアイテムの数が名前とともに表示されます。

ほとんどのユーザーはこれらの数値を見たいと思っていますが、実際に表示する必要がある場合は慎重に検討する必要があります。たとえば、ホームページを見てサイト上のコンテンツの量を推測することは非常に困難です。そのため、サイトに含まれるコンテンツの量を明確に示すことで、ユーザーに勝つことができます。「もちろん、サイトにも何かあります。」


サイトコンテンツの量の定量的評価は、訪問者を引き付けることができます。

もちろん、ウェブサイトにまだ十分なコンテンツがない場合は、おそらくこの数字を公開したくないでしょう。
同様に、ユーザーがカテゴリを見て特定のトピックに関心がある場合、重要度の低い他のカテゴリよりもオブジェクトの数が少ない場合でも、対応するカテゴリを調べたいと考えています。おそらくこの場合の数字の表示でさえ、検索を遅くし、インターフェースを混乱させる可能性があります。


状況によっては、統計によりユーザーが思いとどまることがあります。

動的フィルターでも同じことが可能です。ユーザーは、含まれるオブジェクトの数に基づいてカテゴリを選択しますか？はいの場合、数値のマッピングが行われます。そうでない場合は、値を灰色にするか、すべて削除するのが最善です。
いずれの場合でも、ユーザーが既に選択を行った後、カテゴリ内のオブジェクトの数を表示するか、動的フィルターを適用した後、ユーザーに有用な情報を提供できます。
アイコンは、シンボルに追加されることもある別のタイプの要素です。それらがよくできていて簡単に認識できる場合、それらは有用な追加物になります。ユーザーにオプションを説明する必要はありませんが、アイコンを使用すると、選択肢の処理と共有が容易になります。以下のスクリーンショットでは、メニュー項目からアイコンを削除しました。名前はまだ代替を説明するのに十分であることに注意してください。 「車」、「モーターサイクル」、「トラック」の意味は誰でも知っています。


多くの場合、名前自体で十分ですが、処理には少し時間がかかります。

ただし、名前の横にアイコンを追加すると、ユーザーが選択肢を認識して共有しやすくなります。


名前の横にアイコンを追加すると、ユーザーが選択肢を認識して共有しやすくなります。

名前のないアイコンは混乱を招く可能性があります。アイコンが馴染みのあるものであっても、ユーザーは特定のコンテキストでそれが何を意味するのかわからない場合があります。

名前と画像

シンボルとアイコンは、簡単に認識できるオブジェクトでうまく機能します。あまり一般的ではない場合、画像が必要です。ブランドの名前を考慮してください。以下のスクリーンショットでは、車のモデルがメニューにプレーンテキストとして表示されています。


ブランド名を理解するには、単なる名前以上のものが必要です。

実際、TribecaとLegacyの意味がわかりません。したがって、表示する製品を決定するには名前だけでは不十分です。以下に示すような画像の名前が最適なソリューションです。


なじみのない用語を説明するには、名前と画像が最適な方法です。

ナビゲーションメニューで画像やアイコンを使用するのが適切な場合-これは興味深い質問です。明らかに、たとえば「13インチMacbook Pro」や「Samsung Galaxy Note 3」などの非常に具体的なオブジェクトを説明するには、対応する画像だけが役立ちます。
製品カテゴリの説明はそれほど単純ではありません。一部のメニューでは、アイコンを使用してカテゴリを説明しています。


一部のメニューでは、アイコンを使用してカテゴリを説明しています。

他のメニューでは、同じカテゴリが、カテゴリ内の対応する製品の画像を使用して説明されています。


一部のメニューでは、カテゴリ内の対応する製品の画像を使用してカテゴリが説明されます。

製品カテゴリの場合、アイコンは画像よりも適しています。メニューは、現実的な製品画像よりもよくできたアイコンでよりプロフェッショナルに見えます。
さらに、対応するカテゴリの製品画像を使用すると、ユーザーの間に無意識のうちに疑問が生じる場合があります。 「この特定の製品がこのカテゴリを表しているのはなぜですか」、「これは彼らが持っている最高のものですか？」、「カテゴリ内の製品セットはこのタイプのアイテムに直接関連していますか？」、「このようなアイテムが必要ない場合、このサイトは私？」メニューの画像のように、ユーザーがカテゴリの最初のオブジェクトを見ると、これらの恐怖が高まります。それどころか、アイコンは、このカテゴリに特定の種類の製品が含まれているという情報を伝えるだけで、それ以上でもそれ以下でもありません。
ただし、アイコンが特定の基準を満たす場合、これはアイコンで機能します。アイコンの描画が不十分な場合、アイコンは簡単にずれているように見えます。そして、それが十分に認識できない場合、ユーザーを簡単に混乱させる可能性があります。したがって、アイコンが製品のカテゴリにより適しているという事実にもかかわらず、それらを専門的かつ認識できるようにすることができるかどうかわからない場合は、それらを完全に削除する方が良いです。

名前、画像、説明

製品カテゴリを明確にするには、名前や画像でさえ十分ではない場合があります。銀行、保険会社、インターネットサービスプロバイダーなどの統合ソリューションサービスプロバイダーは、多くの場合、「50 plus」や「Internet on the go」などのサービスを呼び出します。ブローカーと話しているカップルやスマートフォンで話している女の子の大きな画像では、提供されるサービスを示すのに十分ではない場合があります。そのような製品の場合、名前と画像とともに数行が最も役立ちます。


複雑な製品では、名前、画像、説明を明確にする必要があります。

記事の見出しとタイトルは、画像と説明が必要な場合とそうでない場合がある別の種類の指定です。
多くの著者は、重要な情報を記載したトーキングヘッドラインを使用し、それらを可能な限り短くしています。


一般的な推奨事項：見出しをできるだけ短くして、自分で話してください。

上記の見出しは短く、本質的に、この書き方にはリスクがあり、すべてのサイトに当てはまるわけではありません。
最初の質問は、説明をどこでどのように書くかです。 BBCの見出しには多くの場合説明が付いています。説明付きの見出しを以下に示します。注意できるように、単により多くの単語で構成されていますが、新しい情報はありません。


説明には、ヘッダーに既に含まれている情報を含めないでください。

上記のように、見出しにすでに重要な情報が含まれている場合、説明は不要です。おそらくこれでも、説明を読んだためにユーザーの速度が低下しますが、見出しを読んだ後も記事の中で自分自身を適切に方向付けることができます。
ただし、見出しを単独で表示したり、このスタイルで見出しを書いたりすることは、常に最良の選択肢であるとは限りません。記事がイベントに関する短いストーリーである場合は、BBCのような見出しが適切な選択です。しかし、記事がタイトルよりも深い場合、画像と説明はより効果的で魅力的なものになります。
以下のスクリーンショットのタイトルは、情報提供よりもキャッチーであり、すべての重要な情報は以下の数行で示されています。記事のトーンを設定するための画像も追加されました。


多くの場合、タイトル、画像、および説明は、記事の詳細な説明を提供するための最良の方法です。

この記事の内容をスニペットから理解することは難しくありません（簡単な説明）。さらに、魅力的なタイトルと説明を使用して記事を明確にし、画像を使用して記事のトーンを設定することで、ユーザーに通知するだけでなく、記事の問題を伝えるスペースを著者に提供します。
最後に、見出しを書くときによく出されるアドバイスを考慮してください。これは、サイトのコンテキスト外でタイトルを明確にすることです。最終的に、タイトルは検索結果、ソーシャルメディア、および他のWebサイトのコンテキストに表示される場合があります。一部の著者は、この目的のために数式を考案しています。


多くの著者は、元のWebサイトのコンテキスト外で理解できるように見出しを書き込もうとします。

ヘッダーにコンテキストを追加するときに、不要な情報を追加しないように注意してください。
ウェブサイトはウェブデザインに関するものであり、マルチカラムレイアウトはホームページ、メニュー、記事などで役割を果たす可能性があるため、上記の「マルチカラムレイアウトを避ける」タイトルは十分なコンテキストを提供しません。 。、フォームだけでなく。したがって、「フォームフィールドの使いやすさ」は、元のヘッダーにコンテキストを直接追加します。見出しを参照する他の人々が自分の文脈を提供しようとするので、外部の文脈のために書くことは必ずしも必要ではありませんが。
検索エンジンの開発者は、検索結果が期待を満たしていない場合、ユーザーがバイパスすることを知っています。そのため、スニペット、画像、プレビューを拡大する場合でも、アルゴリズムを改善する場合でも、結果の関連性と成功を高めるために常に努力しています。同様に、タイトルが別の記事の「推奨読書」に登場した場合、記事自体が必要なコンテキストを提供します。

まとめると

情報アーキテクチャ、つまり コンテンツの構造と指定は、簡単なナビゲーションの基礎です。設計者は、ターゲットオーディエンスのナビゲーション機能を自然に絞り込んで補完する方法でコンテンツを構成し、選択肢を説明してユーザーの精神的負担を最小限に抑えることで、Webサイトの情報アーキテクチャを効果的に簡素化できます。
この記事に記載されている推奨事項は、「コンテンツの構造化」と「要素名」に分けられた次の2つのリストに分類できます。

コンテンツの構造化

1.ユーザーがナビゲートする必要がある要素のタイプに関するメタデータを収集して整理します。
2.メタデータカテゴリをキー、オプション、および非必須にグループ化します。主要なカテゴリはすべてのターゲットユーザーにとって重要であり、追加のカテゴリーは一部のユーザーにとって重要であり、重要ではないカテゴリーは非ターゲットユーザーにとって重要です。
3.第1レベルで、主要カテゴリのグループを1つだけ紹介します。
4.次のレベルの要素が特定の量を超えない場合、次のカテゴリは必要ありません。それ以外の場合は、後続の各レベルで次のキーカテゴリを次々に表示します。
5.すべての主要カテゴリを使い果たした後、選択した主要カテゴリに対応するすべてのアイテムが表示されるページを表示します。
6.残っている要素がまだ多すぎる場合は、同じレベルにあるすべての追加カテゴリを想像してください。
7.追加のカテゴリが相互に排他的である場合、キーに追加のレベルでそれらを入力します。追加のカテゴリを組み合わせることができる場合、それらを動的フィルタと考えてください。

アイテム名

•要素の指定が十分に知られている場合、それ自体で十分です。明確さを失うことなく、できるだけ短く指定してください。メインページとカテゴリページに要素の合計数を表示しますが、間にはありません。また、シンボルにアイコンを追加して、処理プロセスを簡素化し、代替案を選択することを検討してください。
•表記が十分でない場合は、画像を追加することを検討してください。アイコンを使用してカテゴリを示しますが、それはアイコンがよくできていて認識できる場合のみです。それ以外の場合は、画像をより適切に使用します。
•包括的なサービスと製品については、シンボルに画像と説明を追加することを検討してください。説明は、言い換えの見出しだけでなく、真に新しい情報を提供する必要があります。また、ヘッダーにコンテキストを追加するときは、冗長な情報を追加しないように注意してください。

アーキテクチャを簡素化した後、ユーザーは自分の満足のために対話の選択肢を与えられます。したがって、常にユーザーの選択に適したナビゲーションメニューを開発し、快適な対話を作成する必要があります。ナビゲーションメニューの設計プロセスについては、このシリーズの後半で説明します。