下北沢オープンソース Cafe
デザイニング・インターフェース勉強会
第4回 3章 - 動き回る：ナビゲーション、標識、探索経路
西川伸一 (@shinichiN)
https://www.facebook.com/groups/di2e.study/

デザイニング・インターフェース 第2版
パターンによる実践的インタラクションデザイン
http://amzn.to/LfZuHZ

@shinichiN
colog.jpの開発運営・ウェブディレクター・WordPressラブ
勉強会詳細は Facebook グループで ↓
https://www.facebook.com/groups/di2e.study/
今日の発表について

3章に書いてあること
ナビゲーション
ユーザに「現在地・目的地・移動方法」
をいかに知らせるか

目次
1.序論
2.いつでも居場所と目的地が分かる
2.1.標識 signpost
2.2.経路探索 wayfinding
3.ナビゲーションのコスト
4.ナビゲーションのモデル
5.ウェブサイト向けのデザインルール
6.パターンの解説

目次：パターンの解説
1.明快な入り口 Clear Entry Points
2.メニューページ Menu Page
3.ピラミッド Pyramid
4.モーダルなパネル Modal Panel
5.ディープリンクできるステータス Deep-kinked State
6.避難口 Escap Hatch
7.分厚いメニュー Fat Menus
8.サイトマップフッター Sitemap Footer
9.ログインツール Sign-in Tools
10.シーケンス表示 Sequence Map
11.パンくず Breadcrumbs
12.注釈つきスクロールバー Annotated Scrollbar
13.アニメーションによる転換 Animated Transition

序論
• サイト内／アプリ内を行き来すること
は、腹立ちの種、無駄、実がない
• 理想は「どこへも行かずに済む状態」
• インターフェース上で大部分のツール
が「手の届くところにあれば便利」
• つまり、少なければ少ないほど良し

いつでも居場所と目的地が分かる
• 以下のような要素があるサイトやアプ
リをデザインしている場合、どうすれ
ばよい？
• セクション、サブセクション
• ツール
• いくつものページ、ウィンドウ
• ウィザード

標識 Signpost
ユーザが
自分居場所、周囲に何があるか
を認識するのに役立つ機能

標識 Signpost の例
• ページのタイトル
• ロゴなどのブランディング要素
• タブ
• 選択中項目の強調表示
• グローバルまたはローカルナビゲー
ション
• シーケンス表示
• パンくず
• 注釈付きスクロールバー

経路探索 Wayfinding
ユーザが
目標に向かうための経路を見つけていく行為
認知科学、環境設計、ウェブサイトデザイン
の専門家が研究を重ねている重要なテーマ

• よいサイン
• 環境的な手がかり
• マップ
経路探索 Wayfinding で考えるべきこと

• 明快で曖昧さがない
• あるべき場所にある
• おもなユースケースを自分で ってみ
るといい
• 最初のページでは”行動への呼びかけ”
経路探索 Wayfinding ： よいサイン

• レストランのトイレは店の奥のほう
• ダイアログボックスを閉じる×ボタンは右上
• ウェブサイトのロゴは左上
経路探索 Wayfinding ： 環境的な手がかり
文化的なもの
その文化（OSなど）になじみがない人もいることに注意する

• 一回り大きな座標系
• 全体を頭の中にイメージできる
• 意識しなくてもいいなら、
それはそれでよいナビゲーション
経路探索 Wayfinding ： マップ

ナビゲーションのコスト
• 認知上のコスト。 ここは何？次はどこ？
• 形状、レイアウト、内容、出口、目的の達成方
法を探し始める
• 別のことに気を取られて目的を忘れたり
• ラベルを読み、アイコンを解釈し、よく分から
ないリンクを理解のために無闇にクリック
• 全ページで。塵も積もれば。

移動距離は常に短く
• 何段階もサブページやダイアログを経由させない
• 80%のユースケースは1ページ内で行わせられるか？1回だけOKな
らどうか？考えよう。
• 無理なら？
• 要素を縮小/省略、ラベルを短縮、アイコン化
• 邪魔にならない場所に移動
• モジュール別タブ/アコーディオンでデフォルト非表示
• パレートの法則で要らないのはしまってみる
移動のたびにコストがかかる
→ 移動を減らす

ナビゲーションのモデル
• ハブとスポーク
• 完全接続型
• マルチレベル型
• ステップ進行形
• ピラミッド
• パンとズーム
• フラットナビゲーション
• モーダルなパネル
• 明快な入り口
• ブックマーク
• 避難口

ナビゲーションのモデル：ハブとスポーク
• モバイルでよく使われる
• ハブ画面に全部ある
• 多くの場合ホーム画面
• ハブからスポーク(各ページ)へ
• 用事を済ませたらハブに戻る

ナビゲーションのモデル：完全接続型
• 全ページが相互にリンクされている
• シンプルなグローバルナビゲーショ
ン / 階層の深いナビゲーションに
よって、完全に接続する
• どのページからどのページヘも1回
のジャンプ

ナビゲーションのモデル：マルチレベル型
• 主なページは互いに完全接続
• 下位のページはグループ内で接続
• サブレベルのサイドバーメニューな
どがある
• ドロップダウンやFat Menus、サイ
トマップ付きフッターのパターンに
より、完全接続型に切り替えられる
し、その方がより望ましい

ナビゲーションのモデル：ステップ進行型
• スライドショー
• プロセスフロー
• 戻る／進むのリンクが目を引く形

ナビゲーションのモデル：ピラミッド
• ステップ進行型の変形
• 一連の項目をハブページで一覧し
て、どこにでもいける
• 戻る／進むリンクを ってとなりの
項目にいける

ナビゲーションのモデル：パンとズーム
• たったひとつの広いスペースが適し
ている場合 = 多数の小さなスペース
に分けないほうがいい場合
• 地図、大きな画像、インフォメー
ショングラフィックス、量の多いテ
キスト文書、音声や動画などの時間
メディア
• 集中させる

ナビゲーションのモデル：フラットナビゲーション
• Photoshopなどのカンバスとパレット型
• Excelのような複雑なアプリケーション
• メニューやツールバー、パレットを通じて利用できる多くのツー
ルや機能が用意される

ナビゲーションのモデル：モーダルなパネル
• 表示されたメッセージの了解や入力
の完了、クリックしてパネルを閉じ
る
• オーバーレイで表示される

ナビゲーションのモデル：明快な入り口
• 初めての訪問者やめったにアクセス
しないユーザ向けのページ
• まず、何をすれば良いのかを示す
• 複雑なサイトやアプリの出発点を示
して、負担を和らげる

ナビゲーションのモデル：ブックマーク
• 自分で選んだ場所まで、いつでもい
ける

ナビゲーションのモデル：避難口
• 行き詰まった時、エラーになった、
理解できない時に逃げられる
• 見覚えのある場所に戻るための分か
りやすいラベルの付いたリンク

ナビゲーションのモデル：注意点
1.組み合わせて使われる
2.ユーザの選択肢を意図せず規定してしまうこと
がある
2.1.スライドショーの時には「戻る/進む」リン
クと避難口だけでいい
2.2.グロナビがあると離脱が起きることがある
3.表現形態はあとから決める。情報アーキテク
チャとナビゲーションのモデルが決まってから
ビジュアルのデザインに入る

ウェブサイト向けのデザインルール
• グロナビは上か左側
• ログイン済みユーザ向けのユーティリティナビ
ゲーション（アカウント設定、ログアウトな
ど）は右上部
• 関連ナビゲーションはコンテンツ自体の近く
慣習があるので無視しない

パターンの解説
• 明快な入り口
• メニューページ
• ピラミッド
• モーダルなパネル
• ディープリンクできる
ステータス
• 避難口
ナビゲーションのモデル
レイアウトから独立してる
• 分厚いメニュー
• サイトマップ付きフッター
• ログインツール
←を一般的なレイアウトと組み合わせると
得られるパターン
• シーケンス表示
• パンくず
• 注釈付きスクロールバー
標識として役に立つ
• アニメーション
による転換
視覚的トリック

明快な入り口
Clear Entry Points
主要な要素へのリンクを数カ所だけ
明快な「行動」のきっかけ
- たくさんの機能があるアプリ
- 初心者にはメニューが多すぎる

メニューページ
Menu Page
サイトが持っている（全ての）コンテンツへの
リンクをページいっぱいに。
- 検索ボックスがあるといい
- コンテンツ自体はなくていい

ピラミッド
Pyramid
Flickrなどの画像管理ツール

モーダルなパネル
Modal Panel
ユーザの入力が必須。
それ無しには進めない場面で。
SlideShareのログイン画面。
アップロードしようとすると出る。

ディープリンクできる
ステータス
Deep-linked State
パーマリンクに「状態」を加えたリンク
GoogleBooksがURLに持たせているState情報
・本の表示位置
・表示モード（見開きか、1ページか）
・ツールバー表示の有無
・書籍内検索の結果

避難口
Escape Hatch
見慣れた場所に戻るためのリンク
グロナビなどの他の選択肢がない時に用意する
ログイン/会員登録を求められているが、
トップに戻りたい。。→ロゴをクリック
←これ

分厚いメニュー
Fat Menus
グロナビ等からドロップダウンやフライアウトメニュー。
各セクションへのリンクを全部見せる。
Starbucks
Kayacを見てみよう http://www.kayac.com

サイトマップ付きフッター
Sitemap Footer
グロナビを補完。
全ページに。
かものはしプロジェクト

サイトマップ付きフッター
Sitemap Footer
グロナビを補完。
全ページに。
Flickr
rei.com

ログインツール
Sign-in Tools
ログインユーザ向けに。
ユーザ自身に関する設定やログアウト
WordPress
iTunes

シーケンス表示
Sequence Map
手続き中に、今どの段階にいるのかを表示
←イマココ
縦表示の場合もある

パンくず
Breadcrumbs
階層の表示。
カテゴリなどの親分類の表示。

注釈つきスクロールバー
Annotated Scrollbar
縦に長い1ページ内のコンテンツで、
現在地を表示
GoogleChromeの検索結果の存在位置を
表示してくれているところ

注釈つきスクロールバー
Annotated Scrollbar
自分がどう移動したのか
アニメーションで明示する

まとめ
1.無駄。コストについて理解する
2.モデルを知る。
3.組み合わせる