第三章ナビゲーション < 第4回デザイニング・インターフェース勉強会
•
2 gefällt mir•4,306 views
録画： http://www.ustream.tv/recorded/23734214 オープンソースカフェWordPress部内勉強会「デザイニング・インターフェース」の中での発表資料
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (15)
Mehr von Shinichi Nishikawa
Mehr von Shinichi Nishikawa (11)
第三章ナビゲーション < 第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 サイトが持っている（全ての）コンテンツへの リンクをページいっぱいに。 - 検索ボックスがあるといい - コンテンツ自体はなくていい