サーフィンや写真、ブログ・ネット技術、Macのブログ

2009年6月20日

ウェブサイトの情報を組織化する6つの体系

前回の二つの記事に続いて、ウェブサイトの情報設計について。コンテンツの内容を分析した後は、分類、組織化するステップです。

organize

情報を組織化することで、ウェブサイトを訪れる人が理解しやすくなります。ウェブサイトに多くのコンテンツがある場合は、目的の情報を見つけるためのナビゲーション設計にもつながります。『デザイニング・ウェブナビゲーション』によると、情報の分類とは、

分類とは、ある共通した側面に基づいたアイテムの組織化です。それは、ある共通項をもったアイテムと、そうでないアイテムの間に先を引くことです。カテゴリ、組織化体系、ラベルは密接に関係しており、そのうちのひとつだけを取り出して考えることは困難です。

それでも、分類体系の一般的な種類をいくつか挙げることはできます。これらは、2つのタイプに分類できます。それは、客観的ではっきりした体系と、主観的で漠然とした体系です。

デザイニング・ウェブナビゲーション P.207』 より

客観的体系の3種類と、主観的体系の3種類を、それぞれ、具体的な例で考えてみます。

客観的体系 : Exact (Objective) schemes

Information Architecture for the World Wide Web 3e(Chapter 5, p.7)』による客観的体系とは、

This is called kwon-item searching. You know what you're looking for, and it's obvious where to find it. No ambiquity involved.

ユーザーが何を探しているのか知っていて、それがどこで見つかるかが明確なケース。曖昧さは一切ない。

客観的な組織化体系として、両書共に Alphabetical, Chronological, Geographicalの三つをあげています。

アルファベット順(Alphabetical schemes)

organize-alphabetical

意味的な関連性はないので、訪問者が目的の情報を具体的に把握している場合のみ有効。主に辞書や百科事典でなどで使われる。ウェブサイトでも、コンテンツを索引から閲覧する場合など。

時系列(Chronological schemes)

organize-chronological

年月日(と時間)に沿って組織化する。歴史的な事実などは年表形式でまとめるとわかりやすい。企業であればプレスリリース、イベント情報など。個人ではフォトアルバムなど。マイクロブログのTwitterは、完全な時系列。ブログも時系列をベースにした組織化だが、最新の更新情報を伝えると共に、個別アーカイブも作成する。アーカイブでは、カテゴリーやキーワードに応じて、情報を時系列で並べて表示する。このように時系列は、他の手法と組み合わされることも多い。

時系列から、過去の記事を読む理由には、二種類あるのではないだろうか。ひとつは単純に、その著者に興味があって、記事を読み進める場合。もうひとつは、将来的に興味のある記事が更新されそうかを判断するため。過去記事の内容や更新頻度を見て、RSSフィードリーダーに登録するかどうかを判断することも多い。 

地理的(Geographical scheme)

organize-geographical

国、地域、都市、街などの位置情報で分類。天気予報や旅行、レストランなど地理と結びついた情報は多い。ニュースも、地理的に分類される。自分で地名をクリックする意外にも、最近ではiPhone、携帯GPSなどで位置情報を取得して、自動でコンテンツを表示することも可能。

主観的体系(Subjective schemes)

Information Architecture for the World Wide Web 3e(Chapter 5, p.10)』による、主観的体系の説明。

There's a simple reason why people find ambiguous organization schemes so useful: we don't always know what we're looking for. In some cases, you simply don't know the correct label. In others, you may have only a vague information need that you can't quite articulate. For these reasons, information seeking is often iterative and interactive. What you find at the beginning of your search may influence what you look for and find later in your search. This information-seeking process can involve a wonderful element of associative learning. Seek and ye shall find, but if the system is well designed, you also might learn along the way. This is web surfing at its best.

Ambiguous organization supports this serendipitous mode of information seeking by grouping items in intellectually meaningful ways.

人々が、曖昧な体系を非常に便利だと感じるのには、シンプルな理由がある。それは、自分で何を探しているのかを、常に知っているわけではないから。あるケースでは、単に正しいラベルをしらないだけかもしれない。あるいは、はっきりとしない、漠然とした情報を求めている場合もある。このような理由で、情報の探索は、しばしばインタラクティブで繰り返しをともなう行為になる。最初に見つけた情報が、その後に何を探すかに影響をあたえるかもしれない。このような情報探索のプロセスは、連想的に情報を知るという素晴らしい側面も持っている。システムがうまくデザインされていれば、目的のものを探す過程でも、何かを学ぶことができる。これはウェブサーフィンの醍醐味のひとつである。

曖昧な情報の組織化は、物事を知的で意味のある形にグルーピングすることであり、探索の過程でのセレンディピティを高める効果がある。

Information Architecture for the World Wide Web 3e(Chapter 5, p.10)』 より

そして、Topic, Task, Audience, Metaphor の4種類をあげています(Metaphor については、ちょっと今回は割愛)。

トピックまたはテーマ(By topic or subject)

organize-topic

トピックだけで情報を整理するサイトは多くないが、逆にほとんどのサイトでは、何らかのトピックを提示する必要がある。ウェブサイトのトピックとは、見る人に対して、そのウェブサイトがどのような目的を持っているかを説明するということ。 企業サイトであれば、製品、サービス、コンテンツなどをグループ分けして、目的の情報を探しやすくする。トップページのナビゲーションは、それ自体がサイトのテーマを説明する必要がある。ユーザーがトップページを訪れた際に、「そのウェブサイトで何ができるのか」を一目で理解できること。情報量が多い場合は、ディレクトリやツリー構造で表示され、少なければタブ・バー・垂直メニューなどで表現が可能。

対象ユーザー(By audience group)

organize-user

訪問するユーザーごとにコンテンツを切り替えて表示したり、個別のナビゲーションに誘導する。Audienceによる情報の組織化は、ウェブサイトをブックマーク保存して、頻繁に訪れる場合に特に有効。ユーザーは、自分の用途にあったウェブサイトのセクションをブックマークすることで、絞り込まれた情報にすぐにアクセスできる。逆に言うと、明らかに自分には必要ない情報を除外することで、迷うことが少なくなる。大きなウェブサイトを、対象とするユーザー毎に、いくつかの小さなウェブサイトに分割して見せるような効果がある。

タスク(By Task)

organize-task

ユーザーに提供する機能ごとの組織化。eコマースサイトでの買い物、問い合わせ、ブログでの記事の更新、スケジューラーへの要件追加など、いくつかのプライオリティの高いタスクを行いやすいように組織化する。GmailなどのWeb化されたソフトウェアを除くと、タスクによる組織化だけで、ウェブサイトとして完結するケースは少ない。ウェブサイトのトピックの中に、機能モジュールとして埋め込まれることが多い。

LATCH法

ウェブの仕事力が上がる標準ガイドブック2 Webデザイン p.33』では、Richard Saul Wurman氏のLATCH法が紹介されている。これは情報の組織化の方法を5つに定義するもの。ウェブサイトに限らず、情報を整理するための包括的な組織化体系です。

  • Location:位置
  • Aiphabet:アルファベット
  • Time:時間
  • Category:分野
  • Hierarchy:階層、または連続体
Posted by Jun Kaneko at 14:19  個別ページ | コメント (0) | トラックバック (0) | delicious_s.gif b_entry.gif はてなブックマーク
2009年6月16日

ウェブサイトのコンテンツ内容を分析・定義する8項目

前回の記事『ウェブサイトの情報を構造化する5つのパターン』に引き続き、ウェブサイトの情報設計についての勉強エントリーです。今回は、ウェブサイトで公開する情報、コンテンツをどのように定義するか。

情報設計の三要素 : Context, Content, Users

Information Architecture for the World Wide Web 3e(Chapter2, p.10)』では、情報アーキテクチャを構成する要素として、Context, Content, Users をあげています。

Contents, Context, User

Context は、ウェブサイトを運営する組織が、何を目標としているのか、その組織としてのミッションをベースに組み立てられます。どのような方法で、何の価値を生み、また、どういった組織文化をもっているのか。さらには、(企業であれば)他社に比べて、どうユニークなのか。今は何が強みで、将来的にどこに向かっているのか。あるいは、人員、技術、予算面などでの制約や、必要なプロセスなどの制限事項も含まれます。そのような、個々の組織のコンテキストにあわせて情報設計がなされるべきであると。

User は、ウェブサイトを訪れるユーザーや、サービスの顧客が、どのような属性をもっているのか。いつ、どのようにウェブサイトを利用しているか。そして、最も重要なのは、どのような情報を、ユーザーが求めているのか。

Content

Content については、以下の6つの側面から定義づけられている(Chapter2, p.13)。

  • Ownership(所有者)
    誰がそのコンテンツを作成し、管理するのか。一部門で集中しておこなうのか、各部門に分散しているのか。社外のコンテンツも含まれるか?ライセンスは?
  • Format(フォーマット)
    コンテンツの形式。文章、写真、ビデオ、あるいはMS WordやPDFなどの特定のファイル形式など。
  • Structure(構造)
    コンテンツは、その種類によって独自の構造を持っている。例えば、100文字足らずの重要なメモもあれば、何百ページにおよぶ製品マニュアルもある。
  • Metadata(メタデータ)
    既存のコンテンツが、どの程度、分類されているか。カテゴリーやタグ付けはされているか。そこで使われている用語は統一、管理されているか。現状の管理体系を、ウェブサイトでのコンテンツ整理にも役立てる。
  • Volume(量)
    対象にするコンテンツのボリューム。十数ページの文章と、数百のカタログ情報では、適する管理方法は異なる。
  • Dynamism(変化)
    どれぐらいの頻度でコンテンツが作成され、各コンテンツはどのぐらいの寿命があるか。

ナビゲーション設計からみた、コンテンツ分析

一方、『デザイニング・ウェブナビゲーション --最適なユーザーエクスペリエンスの設計(p.166)』では、ナビゲーション設計の観点から、以下のようにコンテンツを分析します。

  • 頻度(Frequency)
    コンテンツが生成される頻度。情報が頻繁に更新される場合は、適応型ナビゲーションメカニズムなどの動的なものが適しており、柔軟性も求められる。
  • 寿命(Longevity)
    すぐに時代遅れになってしまうコンテンツよりも、価値が長持ちするコンテンツを扱うほうが、ナビゲーション設計の計画は立てやすくなる。
  • 量(Quantity)
    対象の分野での、平均的な文章の長さや、適切な情報の量。サイト全体での典型的な量を把握することで、ページの長さがコンテンツをまとめる単位を判断できる。
  • リンクと相互参照(Linking and Cross Referencing)
    対象の分野で、引用や参照、情報のリンクがどのような意味合いを持っているか。学術論文では引用は大きな意味をもつが、ニュースなどでは相互参照の意味合いは低い。
  • 権威性(Authority)
    内容に関する信頼性を向上させるために、どのような権威性が重要か。重要人物の名前や、検証方法などを考慮してユーザーをナビゲートする必要があるかどうか。
  • ジャンル(Genres)
    対象とする領域での、標準的なジャンル分けや、一般的な文章形式があるかどうか。

まとめ

二冊の書籍は、それぞれ、情報設計とナビゲーション設計という面から、コンテンツを定義しています。以下の表にまとめてみました。確かに、コンテンツの状況を分析、定義するのに役に立ちそうです。

Information Architectureデザイニング・ウェブナビゲーション
Ownership(所有者)
Format(フォーマット)
Structure(構造)
Metadata(メタデータ)ジャンル(Genres)
Volume(量)量(Quantity)
Dynamism(変化)頻度(Frequency)
寿命(Longevity)
リンクと相互参照
(Linking and Cross Referencing)
権威性(Authority)
Posted by Jun Kaneko at 00:22  個別ページ | コメント (0) | トラックバック (0) | delicious_s.gif b_entry.gif はてなブックマーク
2009年6月14日

ウェブサイトの情報を構造化する5つのパターン

ウェブサイトと一口に言っても、個人ブログから企業サイト、あるいは大規模なコミュニティーまで、多様なウェブサイトが存在します。公開するコンテンツの内容、目的、ページ数、参加するユーザー数などの条件は、個々のウェブサイト毎に異なります。ウェブサイトを制作するためには、このような多様な形態から、最も目的にあったパターンを選ぶ、情報設計が不可欠です。

polyhierarchy

この『ウェブサイトの情報設計』について、基本を勉強してみたいと思い、主に以下の書籍を参照しながら、何回かにわけてまとめてみたいと思います。なを、記述内容や図については、書籍を読解しつつ、自分で書き起こしているので、正確な引用ではありません。内容に興味がわいたら、ぜひ原書を読まれることを、おすすめします。

まず初回は『情報構造のパターン』について。『デザイニング・ウェブナビゲーション --最適なユーザーエクスペリエンスの設計(p.200)』では、以下の5つのパターンに分類されている。

直線型(Linear)

そのサイトの目的が明確で、ゴールがはっきりしている場合に有効。例えばキャンペーンの告知と申し込み用のサイトなど。ユーザーはいくつかのステップを経由して、最終的な目的を達成する。ECサイトなどは、階層型と直線型の組み合わせで、商品の発見は階層型だが、その後の購入までのステップは直線型になる。

structure-linear

ハブとスポーク型(A hub and spoke)

直線型の派生系ともいえる。中心(ハブ)から、ユーザーの目的を選択して、ゴールに向かってステップを進んでいく。ひとつの目的が達成されたら、サイトの利用を終了するか、出発点であるハブに戻る。複数の直線型が、一つのハブから始まる型。

structure-hub-spoke

ウェブ型

開始ページや最終ページが明確に定められていない。各ページは、リンクや相互参照でつながっていて、中心のない構造。インターネット(WWW)全体を見ると、このような構造。

structure-web

ウェブ型の各ページは『ハブとスポーク型』のハブとして機能する可能性を秘めている。例えば、ソーシャルネットワーク・サービスのユーザー同士のリンク。閲覧者はその間を自由に移動しつつ、各ユーザーのプロフィールページを起点に、日記などの情報を見たり、メッセージを送るなどのアクションを開始できる。ページ同士のリンクをナビゲーションとして整理することで、ウェブ型の情報を、構造化することが可能、ということでしょうか。

structure-web-hub

階層型(hierarchy)

通常のウェブサイトでよく見られるパターン。サイトのトップページ(ホームページ)を起点に、情報を親子関係で整理する。階層構造内で、下の階層のコンテンツは、親コンテンツの意味や内容を受け継ぎ、それを次の階層につなげる。

Information Architecture for the World Wide Web 3e』の5.4.1. The Hierarchy: A Top-Down Approachでは、階層型をさらに二種類に分類しています。

横の幅が狭く、階層が深いもの Narrow-Deep

structure-narrow-deep

横の幅が広く、階層が浅いもの Broad-Shallow

structure-broad-shallow

階層の横の幅と深さ、この二つの間のバランスがとれた構造が望ましいとされる。ただし、ユーザーにとっては、クリックして進んだ先を確認するより、カテゴリーのリストをざっと見て選ぶ方が、瞬間的に判断できるので、深い階層より、浅くて幅広いもののほうがナビゲーションしやすい。トップページは階層構造への入り口になるため、ユーザーが「ぱっと見て、どこに行けばいいのか」わかるように、選択肢を並べておくのが有効。

structure-hierarchy

階層型の情報構造では、適切なラベル付け、グループ分けがされていることが非常に需要。理想的にはトップページのナビゲーションを見ることで、ウェブサイト全体に、どのようなコンテンツがあるのかを理解できること。また、ウェブ制作においては、後からコンテンツが随時追加されていく場合も多いので、それを見越してバランスを設計したり、必要に応じて定期的に見直す必要があるだろう。

ポリヒエラルキー

ひとつのページやコンテンツが、複数の親に所属するケースは、ポリヒエラルキー(複合型階層)と呼ばれる。例えば、複数のコンテンツの『連絡先』をクリックすると、ひとつの連絡用フォームのページに遷移する場合など。パン屑ナビゲーションなどで、表示がおかしくならないように気をつけて設計をする必要がある。

polyhierarchy

ファセット型(Facets)

ファセット型は階層型の代わりに利用することができる。馴染みのない名前だが、ECサイトなどでは頻繁に用いられる。例えば、一眼レフカメラのレンズをECサイト上で探す場合。目的の機種を探すために、様々な絞り込み条件を組み合わせることになる。

  1. メーカーを一覧から選ぶ
  2. 対応するカメラの機種から選ぶ
  3. レンズの焦点距離を選ぶ
  4. レンズの明るさを選ぶ
  5. 価格帯を指定する

structure-facets

これらの条件は、どこから指定してもよいし、また一部を組み合わせるだけでもよい。予算が決まっている人は、まず価格帯を選び、望遠・広角などの焦点距離を指定して、そのなかで最も安いレンズを選ぶ。一方で、より専門的な目的でレンズを探している人は、レンズの焦点距離、明るさから選び、最終的に予算を決定するかもしれない。このように、「ユーザーはさまざまな角度から情報にアクセスしようとする(P.203)」という特性にあわせつつ、情報検索に大きな柔軟性を持たせることができる。

また、ファセットを構成するカテゴリは、相互に排他的なので、新たにカテゴリを追加したり、既存のカテゴリの内容を変更しても、それが他のカテゴリに影響をあたえることがない。これは親子関係が定義されている階層型と大きな違いで、高い拡張性をもたらす。

発生型

Wikipedia のように、事前に計画するのではなく、コンテンツの投稿者によって自律的に構造がつくられるもの。投稿者が一定のルールや規則に基づきながらも、自由にコンテンツの方向性をきめることができる。発生型の多くはウェブ型の階層をもつことになる。Wikipediaのように、wikiというツールの操作性がナビゲーションや情報の構造を規定するケースもある。

 
Posted by Jun Kaneko at 16:23  個別ページ | コメント (0) | トラックバック (0) | delicious_s.gif b_entry.gif はてなブックマーク