4.コンテンツを整理し、ナビゲーションを簡素化しましょう
Health literacy online （日本語訳）
はじめに
この節では、さまざまなサイズのデバイスにおけるウェブサイトの構造に関わる2つの重要な概念について説明します。
コンテンツの体系化（情報アーキテクチャとも言われます）
情報アーキテクチャとは、ウェブサイト上で情報が分類される方法です。それは、典型的にはカテゴリ構造<分類学>とラベルが含まれます。
例えば、書店内を見て回ると考えてください。はっきりと分類された区分＜ミステリー、ノンフィクション、ティーン、ビジネス＞は、あなたが探しているものを見つけるのに役立ちます。コンテンツをうまく整理すると、ユーザーが情報をすばやく見つけることができます。
ナビゲーション
ナビゲーションとは、ユーザーがあなたのウェブサイトのページをどのように移動するかを指しています。ナビゲーションの要素は、メニュー、タブ、見出し、パンくずリスト、サイトマップ、および「戻る」や「次」ボタンを含みます。
コンテンツの体系とナビゲーションを、シンプルで一貫性があるようにしてください。ユーザーは通常、トピックに注目しています。ユーザーの求めるものに沿って体系化と分類を行い、彼らにとって親しみのある用語を使用しましょう。
4.1. シンプルで魅力的なホームページを作りましょう
研究によると、リテラシー能力の乏しいウェブユーザーは、一度に複数の概念を処理することが難しいと言われています。ですから、ホームページは、サイトのコンテンツへの入り口がシンプルで焦点が合っているものである必要があります。このことは、モバイルサイト、さらにはレスポンシブサイトをデザインする時にも有効です。
ホームページはできるだけシンプルにしましょう
ホームページ上は、文字の量を少なくしておきましょう（Figure 4.1は省略します）
便利なホームページは、ほとんどがリンクと短い説明文で構成されています。優れたデザインのホームページは、多くの余白と大きなボタンを備えています。
（Figure 4.2は省略します）
多言語で情報を提供している場合は、トップページから英語以外のセクションに直接リンクするようにしましょう。また、ユニバーサルメニューバーから英語以外のセクションにリンクすることも重要です。そうすれば、ユーザーが検索エンジンを使ってコンテンツを見つけたときに、英語以外のコンテンツも見つけられます。
4.2. ユーザーのことを考えて、コンテンツにラベルを付けて整理しましょう
専門用語やキャッチーな言葉ではなく、ユーザーが知っている言葉を使いましょう。あなたの目的は、ユーザーが必要なものをできるだけ早く見つけられるようにすることです。
（Figure 4.3は省略しますが、説明を紹介しておきます）
Office of Women's Healthのウェブサイトには、読者に適した分類ラベルのナビゲーション欄があります （10歳から16歳の女子のためのサイト）。例えば、メンタルヘルスのセクションでは専門的な用語ではなく「あなたの気持ち」と表示されています。
健康情報をグループ化する時のメンタルモデル（方法）は人によって異なります。様々なユーザーが必要な情報を見つけられるように、複数のカテゴリーでトピックを繰り返し表示します。例えば、カードソーティングに基づいて、マンモグラフィに関するコンテンツは、healthfinder.govでは3つのカテゴリー（「がん」「女性」「医師の診察」）に表示されています。
やってみよう
次に、サイト内のコンテンツに優先順位をつけたり、ランク付けしたり、整理したりする必要が生じたら、ユーザーと一緒にカードソーティングを試してみましょう。
カードソーティングとは、コンテンツを直感的に整理するためのユーザー中心のデザイン手法です。まず、ウェブサイトの各ページにインデックスカードを作ります。そして、そのカードをグループごとに分類してもらいます。これにより、ユーザーがどのようにコンテンツが整理され、ラベル付けされることを期待しているかわかります。
また、カードを重要度や関心度の高い順に並べてもらうこともできます。ODPHPが実施したカードソーティングの演習では、リテラシーの低いユーザーは、次のような種類の健康情報が最も有用であるという優先順位をつけました。
- 知っておきたい基礎知識（理解）
- もっと知りたい(評価)
- 私にもできる（障壁の克服）
- これは私にとってどのように役立つのか？（動機付け）
- 自分が行動を起こすための方法（戦略）
- どこに行けば助けてもらえるか？(コミュニティリソース)
カード・ソーティングの詳細については、usability.govをご覧ください。
4.3. 直線的な情報のパス（Linear information path）を作りましょう
直線的な情報のパスは、リテラシーの低いウェブユーザーが、ウェブサイト上のコンテンツを学び、理解し、移動するのに役立ちます。
サイト内の各トピックやセクションには、それぞれ直接的なパスがあります。このパスは、一連のページや画面を使ってユーザーにセクションを案内します。最初のページでは、ユーザーにコンテンツの概要を説明します。セクション内の各ページには、次のページに移動するためのボタンやリンクを設けます。このようにして、ユーザーは直線的な情報のパスを簡単にたどることができます。
直線的な情報のパスは、情報を論理的な順序で提示します。スライドショーのように、明確で論理的な順序があると考えてください。
（Figure 4.4は省略します）
コンテンツを論理的なまとまりに分割できない場合は、1つのページにまとめましょう。ウェブユーザーにとっては、明確に論理性のない一連のページをクリックしていくよりは、スクロールしたほうが良いです。また、重要な情報は必ずページの一番上に置くようにしましょう。
（Figure 4.5は省略します）
4.4. ボタンに意味のあるラベルをつけましょう
ボタンやリンクには、ユーザーがどこに行くのかを示すラベルを付けましょう。クリックすることで目的の場所に行けると思わせることができれば、ウェブユーザーはクリックします。ページ番号や、「次へ」「戻る」などの一般的なラベルは使用しないでください。代わりに、「コレステロールは何か？」や「ホームページに戻る」のような具体的なラベルを使いましょう。
（Figure 4.6は省略します）
4.5. クリックできる要素を認識できるようにしましょう
ボタンやリンクなど、クリックできる要素が見つけにくいと、ユーザーは不満を感じます。
見つけやすいボタンをデザインしましょう
そのためには：- 大きく
- 明るく
- 周りの文字や背景と対照的な色で
- クリックできるということを明確に
（Figure 4.7は省略します）
ボタンのラベルはわかりやすいものにしましょう
"進む（go） "や "スタート（get started）"のようなラベルを使用してください。リテラシーの低いユーザーの中には、"送信（submit）"という言葉を理解できない人もいます。ボタンと他の場所と区別しましょう
クリックできない場所がボタンのように見えると、ユーザーは混乱してしまいます。そのため、見出しに背景色をつけたり、カラフルなボックスをたくさん配置することは避けましょう。（Figure 4.8は省略します）
リンクには明確な視覚的手がかりをつくりましょう
リンクがクリックできることを明確にすることで、ユーザーがテキストにマウスオーバーしてクリックできるかどうかを確認するようなことは避けましょう。例えば、リンクの色は青など、本文よりも目立つ色にします。(リンクをクリックできるように見せる方法については、セクション3を参照してください)（Figure 4.9は省略します）
すべてのリンク要素をクリック可能にしましょう
写真、アイコン、文字など、互いに関連するすべての要素をクリック可能にします。ユーザーは、大きなターゲットエリアをクリックしやすくなります。リンクにアイコンを使用する場合は、文字ラベルなど、他の視覚的な手がかりと組み合わせてください。（Figure 4.10は省略します）
一貫性を持たせましょう
どのようなボタンやリンクのスタイルを選択しても、ウェブサイト全体で一貫して適用されるようにしましょう4.6.ブラウザの"戻る"ボタンが機能しているか確かめましょう
リテラシーの低いウェブユーザーは、ウェブサイトを移動するために「戻る」ボタンをよく使用します。ですから、このボタンが予想通りに常に機能することが非常に重要です。
例えば、ユーザーが登録ページやフォームのデータ入力をする場合に、ユーザーが「戻る」ボタンをクリックしても情報が削除されないようにします。
4.7.ホーム画面やメニュー画面に簡単にアクセスできるようにしましょう
ウェブユーザーは、ページの最初からやり直したり、ページ間をジャンプしたりするオプションを求めています。しかし、リテラシーの低いユーザーは一般的にパンくずリストを使わないことがわかっています。ODPHPのユーザビリティ・テストでも、リテラシーの低いユーザーは、サイトのヘッダーのロゴをクリックしてホーム画面に移動することはほとんどありませんでした。
パンくずリストとは、ユーザーがウェブサイト内での位置を確認したり、中間のページに効率的に移動したりするのに役立つナビゲーション要素です。通常、パンくずリストはページの最上部（通常はブラウザのアドレスバーの下）に表示されます。例えば、ユーザーが糖尿病の症状について読んでいる場合、パンくずリストは次のように表示されます。
ホーム > 健康状態 > 糖尿病 > 症状
そのために、トップページかメインメニューにユーザーが戻るための大きなボタンを、サイト上に載せましょう。
（Figure 4.11は省略しますが、説明を紹介しておきます）
NIH SeniorHealthは説得力のある左側の案内メニューを使用しています。ユーザーがサイトのどこにいるかを簡単に確認できるよう、現在のセクションを案内バーで異なる色で強調して表示しています。
モバイル用のメニューボタンを使いましょう
モバイル端末はスペースが限られています。モバイルでは左のナビゲーションメニューを使う代わりに、モバイル用に最適化されたカスタムメニューを開くメニューボタンを追加しましょう。これにより、ユーザーは必要に応じてメニューを拡張することができます。
メニューにホームボタンやホームオプションを設けることで、モバイルユーザーがホームページに戻ることができます。
ユーザーは、元の場所に戻る必要はなく、ホームページから新たにスタートできると評価します。
4.8.ユーザーに閲覧の選択肢を与えましょう
リテラシーの低いユーザーの多くは、検索ボックスを使わずにコンテンツのカテゴリーで閲覧します。これは以下の理由によります。
- 検索ボックスが見当たらない（ウェブ経験の浅いユーザーの多くは、どこに検索ボックスがあるのかわからない）
- スペルミスが気になる
- 検索結果に圧倒されてしまう
- 検索ボックスのプレースホルダーテキストを理解していない
複数の方法でトピックを閲覧できるようにする（例えば、A to Zリストでトピックのカテゴリー別に閲覧するなど）
（Figure 4.12は省略しますが、説明を紹介しておきます）
healthfinderのウェブサイトは、ユーザーが、トピックカテゴリー、AtoZリスト、検索ボックス、または左側のメニュー一覧から健康情報を検索することができます。
4.9シンプルな検索機能を搭載しましょう
リテラシーの低いウェブユーザーは、シンプルで使いやすい検索機能を利用する傾向にあります。検索機能は、見つけやすく、使いやすいものにしましょう
大きなテキストボックスとわかりやすいボタンを使用する。検索ボックスの横に「スタート（get started）」または「進む（go）」ボタンを使用しましょう
ODPHPが実施したユーザビリティ・テストでは、リテラシーの低いユーザーが、検索ボックスに用語を入力せずに「検索（search）」ボタンをクリックしていました。わかりやすいラベルがついたボタンは、ユーザーに最初に用語を入力する必要があることを知らせます。一般的なスペルミスを考慮しましょう
リテラシーの低いユーザーにとってスペルは難しいので、ユーザーがスペルを間違えても検索エンジンが動作するようにしてください。スペルチェックやオートコンプリートで、ユーザーの検索をサポートします。4.10.検索結果をわかりやすく表示しましょう
ユーザーの検索体験を効率化するために、最も関連性の高い検索結果を最初（トップ）に表示します。
検索結果を表示する際
- 1ページに表示される結果の件数を制限する（コンテンツが多いページとは異なり、スクロールしなくていいように番号を振ったページを使う）
- ページのタイトルは分かりやすいものにし、各検索結果に対して、簡潔でわかりやすい言葉を使った説明を加える
- できる限り、長いURLの使用を避ける
- ユーザーがぱっと見て分かるようにURLにキーワードを使用する
- 検索結果の間に余白を多く設ける
- 大きく読みやすいフォントを使用する
- 検索結果では検索ワードを強調表示する
まとめ
ユーザーにコンテンツを読んでもらうためにはまず、ユーザーの目に留まることが必要です。
ユーザーになじみのある用語を使った簡潔で一貫性のあるナビゲーションを構築し、ユーザーにとって意味が通るようにコンテンツを整えること。
検索別や項目別の閲覧など、ユーザーに選択肢を与えると、どんな機器からでもユーザーにとって最もやりやすい方法でサイト内をナビゲートすることができるようになります。
サイトがうまく構成されていれば、ユーザーは求める情報をすばやく簡単に見つけることができます―そしていらいらしたり、最終的にあきらめてしまったりする可能性が低くなります。
次のセクションでは、マルチメディアと双方向型コンテンツでユーザーを引き付ける戦略について説明します。