カテゴリーが複数あり階層もある場合、どのようなディレクトリ構造が見やすいのか調査。
もし、カテゴリーが上記のように数個であればよいのですが、2ndカテゴリー以降が数十のカテゴリーを持つ場合、サイトのディレクトリ構造も複雑になってきます。
【目次】
一般的なディレクトリ構造
3層カテゴリーがあった場合、一番シンプルなディレクトリ構造は、
・1stカテゴリーの項目を一つクリックすると、2ndカテゴリーに遷移する。
・2ndカテゴリーの中には、2ndカテゴリーの項目が表示されている。
・2ndカテゴリーの項目を一つクリックすると、3rdカテゴリーに遷移する。
・3rdカテゴリーの中に詳細ページのリスト
・3rdカテゴリーの項目を一つクリックすると、詳細ページに遷移する。
という構造です。
メリットとしては、誰もがわかりやすい階層になっているため、遷移でこまることはない。
デメリットとしては、ページ遷移が多くなってしまうことと、ディレクトリーへ遷移しないと、下層カテゴリーに自分の探している項目があるかがわからないことです。また、もしなかった場合は、上のカテゴリーにもどる必要があるので遷移が煩雑になります。
俯瞰しやすい階層化
上記の一般的なディレクトリ構造のデメリットは「次のカテゴリーに何があるかわからない」という部分です。
下層カテゴリーをイメージさせる方法としては、上層ディレクトリで、
・タグ情報を表示する
・下層カテゴリーの一覧を表示する
が考えられます。
タグを使って下層をイメージさせる
タグの表示方法の例は、価格.comのサイトトップです。
パソコンを例にとると、下層にはいくつかのカテゴリー（ディレクトリー）がありますが、ネットワーク機器をまとめて「周辺機器」などで表示したりして、キーワード（タグ）を使ってそのページの内容を表しています。
よく利用されるキーワードを使うことで、下層カテゴリーをイメージしやすくしています。
デメリットとしては、表示されていないキーワードを見落とす可能性があります。
下層カテゴリーのリストを表示する
ウェブページ用のサイトマップ（XMLではない方）的なつくりで下層カテゴリーを全て表示してしまう方法。
例は、amazonのカテゴリーです。
デメリットは、目的外のものも表示されるため、目的のものを探すのが大変です。
項目はすべて表示されているので、ブラウザのページ内検索を使えば、自分の目的とするものを確認できます。
見やすくするのであれば、表示するカテゴリーをいくつかに絞り、最後に「残りのカテゴリーを見る」ボタンを設置します。残りのカテゴリーは、Javascriptなどで表示／非表示できるようにすると、ページ遷移が必要なくなり、一定の視認性を確保できます。
※このYahooページサンプルは、詳細ページですが、このように整頓すると視認性があがります。
