第三章ナビゲーション < 第4回デザイニング・インターフェース勉強会
2 likes•4,375 views
録画： http://www.ustream.tv/recorded/23734214 オープンソースカフェWordPress部内勉強会「デザイニング・インターフェース」の中での発表資料
第三章ナビゲーション < 第4回デザイニング・インターフェース勉強会
- 1. 下北沢オープンソース Cafe デザイニング・インターフェース勉強会 第4回 3章 - 動き回る：ナビゲーション、標識、探索経路 西川伸一 (@shinichiN) https://www.facebook.com/groups/di2e.study/
- 3. @shinichiN colog.jpの開発運営・ウェブディレクター・WordPressラブ 勉強会詳細は Facebook グループで ↓ https://www.facebook.com/groups/di2e.study/ 今日の発表について
- 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
- 7. 序論 • サイト内／アプリ内を行き来すること は、腹立ちの種、無駄、実がない • 理想は「どこへも行かずに済む状態」 • インターフェース上で大部分のツール が「手の届くところにあれば便利」 • つまり、少なければ少ないほど良し
- 8. いつでも居場所と目的地が分かる • 以下のような要素があるサイトやアプ リをデザインしている場合、どうすれ ばよい？ • セクション、サブセクション • ツール • いくつものページ、ウィンドウ • ウィザード
- 10. 標識 Signpost の例 • ページのタイトル • ロゴなどのブランディング要素 • タブ • 選択中項目の強調表示 • グローバルまたはローカルナビゲー ション • シーケンス表示 • パンくず • 注釈付きスクロールバー
- 12. • よいサイン • 環境的な手がかり • マップ 経路探索 Wayfinding で考えるべきこと
- 13. • 明快で曖昧さがない • あるべき場所にある • おもなユースケースを自分で ってみ るといい • 最初のページでは”行動への呼びかけ” 経路探索 Wayfinding ： よいサイン
- 14. • レストランのトイレは店の奥のほう • ダイアログボックスを閉じる×ボタンは右上 • ウェブサイトのロゴは左上 経路探索 Wayfinding ： 環境的な手がかり 文化的なもの その文化（OSなど）になじみがない人もいることに注意する
- 15. • 一回り大きな座標系 • 全体を頭の中にイメージできる • 意識しなくてもいいなら、 それはそれでよいナビゲーション 経路探索 Wayfinding ： マップ
- 16. ナビゲーションのコスト • 認知上のコスト。 ここは何？次はどこ？ • 形状、レイアウト、内容、出口、目的の達成方 法を探し始める • 別のことに気を取られて目的を忘れたり • ラベルを読み、アイコンを解釈し、よく分から ないリンクを理解のために無闇にクリック • 全ページで。塵も積もれば。
- 17. 移動距離は常に短く • 何段階もサブページやダイアログを経由させない • 80%のユースケースは1ページ内で行わせられるか？1回だけOKな らどうか？考えよう。 • 無理なら？ • 要素を縮小/省略、ラベルを短縮、アイコン化 • 邪魔にならない場所に移動 • モジュール別タブ/アコーディオンでデフォルト非表示 • パレートの法則で要らないのはしまってみる 移動のたびにコストがかかる → 移動を減らす
- 18. ナビゲーションのモデル • ハブとスポーク • 完全接続型 • マルチレベル型 • ステップ進行形 • ピラミッド • パンとズーム • フラットナビゲーション • モーダルなパネル • 明快な入り口 • ブックマーク • 避難口
- 19. ナビゲーションのモデル：ハブとスポーク • モバイルでよく使われる • ハブ画面に全部ある • 多くの場合ホーム画面 • ハブからスポーク(各ページ)へ • 用事を済ませたらハブに戻る
- 20. ナビゲーションのモデル：完全接続型 • 全ページが相互にリンクされている • シンプルなグローバルナビゲーショ ン / 階層の深いナビゲーションに よって、完全に接続する • どのページからどのページヘも1回 のジャンプ
- 21. ナビゲーションのモデル：マルチレベル型 • 主なページは互いに完全接続 • 下位のページはグループ内で接続 • サブレベルのサイドバーメニューな どがある • ドロップダウンやFat Menus、サイ トマップ付きフッターのパターンに より、完全接続型に切り替えられる し、その方がより望ましい
- 22. ナビゲーションのモデル：ステップ進行型 • スライドショー • プロセスフロー • 戻る／進むのリンクが目を引く形
- 23. ナビゲーションのモデル：ピラミッド • ステップ進行型の変形 • 一連の項目をハブページで一覧し て、どこにでもいける • 戻る／進むリンクを ってとなりの 項目にいける
- 24. ナビゲーションのモデル：パンとズーム • たったひとつの広いスペースが適し ている場合 = 多数の小さなスペース に分けないほうがいい場合 • 地図、大きな画像、インフォメー ショングラフィックス、量の多いテ キスト文書、音声や動画などの時間 メディア • 集中させる
- 25. ナビゲーションのモデル：フラットナビゲーション • Photoshopなどのカンバスとパレット型 • Excelのような複雑なアプリケーション • メニューやツールバー、パレットを通じて利用できる多くのツー ルや機能が用意される
- 27. ナビゲーションのモデル：明快な入り口 • 初めての訪問者やめったにアクセス しないユーザ向けのページ • まず、何をすれば良いのかを示す • 複雑なサイトやアプリの出発点を示 して、負担を和らげる
- 31. ウェブサイト向けのデザインルール • グロナビは上か左側 • ログイン済みユーザ向けのユーティリティナビ ゲーション（アカウント設定、ログアウトな ど）は右上部 • 関連ナビゲーションはコンテンツ自体の近く 慣習があるので無視しない
- 32. パターンの解説 • 明快な入り口 • メニューページ • ピラミッド • モーダルなパネル • ディープリンクできる ステータス • 避難口 ナビゲーションのモデル レイアウトから独立してる • 分厚いメニュー • サイトマップ付きフッター • ログインツール ←を一般的なレイアウトと組み合わせると 得られるパターン • シーケンス表示 • パンくず • 注釈付きスクロールバー 標識として役に立つ • アニメーション による転換 視覚的トリック
- 33. 明快な入り口 Clear Entry Points 主要な要素へのリンクを数カ所だけ 明快な「行動」のきっかけ - たくさんの機能があるアプリ - 初心者にはメニューが多すぎる
- 34. メニューページ Menu Page サイトが持っている（全ての）コンテンツへの リンクをページいっぱいに。 - 検索ボックスがあるといい - コンテンツ自体はなくていい