デザイニング・ウェブナビゲーションDesigning Web Navigation

by James KalbachSupervisor & Translation: Atsushi HASEGAWA, Noriyo ASANO

#08 アーキテクチャArchitecture

Reading Club | Aug 08, 2009

Naoko KAWACHIConcent, Inc.

08 アーキテクチャの内容

•説得力のあるアーキテクチャ•ナビゲーションコンセプトとコンセプトダイアグラムの作成

•情報構造のパターン•組織化手法とカテゴリ•サイトマップと詳細サイト計画の作成

アーキテクチャ？

• architecture[名詞]建築、建築術、建築様式、構造⇒設計思想、設計方式、基本設計、構築様式

•ナビゲーションコンセプト•サイト構造•ナビゲーションの組織

説得力のあるアーキテクチャ3つの主要な側面

2つのレベル

START GOALclick click click

マクロレベル

ミクロレベルex. 本を検索する ex. 詳細を見る ex. カートに入れる ex. 決済する

ex. 本を購入する

説得力のあるアーキテクチャ

• ユーザーに取ってもらいたいアクションは何か• アクションを取ってもらうために説得したいのはどのユーザーか

• ユーザーが確信をもってアクションを取るためには何が必要か

サイト設計の3つの重要なポイント

•ナビゲーションコンセプト•サイト構造•ナビゲーションの組織

説得力のあるアーキテクチャ3つの主要な側面

ナビゲーションコンセプト

• ジャンル：規則性と予測可能性

• メタファー：理解しやすく覚えやすいひとつのモデル

ユーザーがどのようにサイトをナビゲートすべきかを表すモデル

ナビゲーションコンセプト表現方法

• コンセプトダイアグラム：システムの主要な要素を図形を使って視覚的に表す

•覚えやすい•包括的（マクロ／ミクロ、将来の設計決定を含む）

•ステークホルダーのゴールと直結•ユーザーの期待に応える

ナビゲーションコンセプト要件

• 分析フェーズの情報をレビュー（ビジョン、ブランド、競合、ゴール、ユーザー関連）

• ゴールを満たすためにユーザーにとってもらいたいアクションを記述（ペルソナとシナリオをベース）

• ブレストにより、その他のナビゲーションモデルの可能性を検討（ジャンルとメタファーを利用）

• 機能とコンテンツの関係を示す、コンセプトダイアグラムを作成

• コンセプトを言葉で表現

ナビゲーションコンセプト作成手順

•ナビゲーションコンセプト•サイト構造•ナビゲーションの組織

説得力のあるアーキテクチャ3つの主要な側面

情報構造のパターン

• 直線型（＋ハブ＆スポーク）• ウェブ型• 階層型• ファセット型• 発生型

サイトの骨格、ページの配置とつながりを「物理的に」表す

直線型

使用例：サイト内検索、ウィザード

ハブ＆スポーク（直線型の変形）

ランディング

使用例：マイページがあるようなサイト（mixiなど）

ウェブ型

使用例：MySpace、関連ナビゲーション

階層型

使用例：ECサイトやコーポレートサイトなど

ホーム

詳細

カテゴリ

階層型の設計時の注意点

ホーム

詳細

カテゴリトップ

カテゴリトップ

カテゴリトップ

1. カテゴリトップ問題

ホーム

製品詳細

カテゴリ

階層型の設計時の注意点2. ポリヒエラルキー構造

ファセット型

使用例：オンラインストアでのMP3の販売

発生型

使用例：Wiki

• 個人の寄稿者によってアーキテクチャのサイズ、方向性、成長が決められる。

• サイト所有者が決定したナビゲーションは明快なシステムに基づいており、これによって発生型構造のフレームワークが与えられる。

• ボトムアップで構築される。

•ナビゲーションコンセプト•サイト構造•ナビゲーションの組織

説得力のあるアーキテクチャ3つの主要な側面

組織化

•論理的なカテゴリを与える• 一貫した方針に従ってグループ分けする⇒ナビゲーションメニューの使いやすさや予想のしやすさが向上⇒最終的なゴールに導きやすくなる

ページとコンテンツの関連づけを「意味的に」表す

組織化の手法

•アルファベット順訪問者が目的のアイテムをはっきり把握している場合に◎

• 時系列ニュースサイトでよく用いられる

• 地理的グローバルか国内か、都市か州かといった位置情報

客観的体系

• トピック／テーマ製品、サービス、コンテンツをトピックでグループ分け。メインナビゲーションはしばしばサイトのトピックが反映される。

• 対象ユーザー異なったユーザーグループ用にそれぞれナビゲーションオプションを作成

• タスクユーザー入力を多く取り入れるような場合に効果的（例：クルージングの計画、予約、実行）

主観的体系

組織化がうまくいかない時

•結果を予測しやすい適切なラベル• 一貫性のある視覚的効果• メインナビゲーションの目的をはっきりと示すメニュー位置

情報は必ずしも適切かつ均等に分類できるとは限らない

ほかのよいナビゲーションデザインの原則を適用する

ナビゲーションとビジネス

•組織化手法を取り入れたナビゲーションは、ユーザビリティの視点ではよい方法

• 戦略的、営業的な優先度をナビゲーションに取り入れることは、ビジネスの結果に貢献

ナビゲーションは顧客と企業を直接つなぐ

サイトマップアーキテクチャを示す、ウェブサイト設計の主要成果物

• コンテンツと機能の関係を表す• コンセプトを捉え、情報構造と組織化体系を視覚的に示す

サイトマップ文脈によって異なる意味を持つ

訪問者用のナビゲーションメカニズムとして用いられるもの

サイトマップ文脈によって異なる意味を持つ

検索ボット用のサイトマップ

サイトマップ

サイトのアーキテクチャを表す正式文書として用いられるもの

サイトのコンセプトをとらえ、アーキテクチャ（情報構造と組織化体系）を視覚的に示す

• ノード：　四角形で表されるページ

• コネクタ：　ノードの関係を表す

• ナンバリング：　各ページごとの識別子

• ラベル：　各ページに付されるタイトル

• ページ属性：　PDF, ポップアップ, 動的, アクセス権, ページテンプレート, 機能や特性 など

• 注釈：　例外や特別条件の説明

• スコープ：　プロジェクト内で実施するものと将来の拡張計画

• タイトルと凡例：　バージョン番号や日付、図形やシンボルの説明

サイトマップ構成要素

Visual VocabularyJesse James Garrett

日本語版の説明は、コンセントサイトで公開中http://www.concentinc.jp/labs/2009/04/visual-vocabulary

•ハイレベルサイトマップサイトのメインセクションの組み合わせを示すもので、コンテンツと機能の関係を定義。全体的な方向性やDBやバックエンドシステム構築用の技術的アーキテクチャを検討できる。

•詳細サイトマップミクロレベルのアクションの決定を行う上で重要。表計算シートを使って、ツリー構造の文書を作ることも可能。

サイトマップのレベル

サイトマップの作成アーキテクチャの統合

• 付箋を使って、機能などの要素を洗い出し• 付箋をグルーピング• VisioやOmniGraffleなどを使って作り直し

まとめアーキテクチャの統合

• サイトのアーキテクチャとは、マクロ／ミクロレベルのゴールを達成するための道筋を示すための計画

• サイトナビゲーションは、ユーザーゴールとビジネスゴールを結びつける大きな役割がある

• 構造にはパターンがある。適切なものを選択し組み合わせよ。

• 組織化体系の適切さはユーザーゴールとビジネスゴールによってのみが判断基準となる（手法による正解はない）

• サイトマップは、代替構造の検討と、アーキテクチャの理解と共有に役立つ