Successfully reported this slideshow.

第三章ナビゲーション < 第4回デザイニング・インターフェース勉強会

2

Share

Loading in …3
×
1 of 47
1 of 47

第三章ナビゲーション < 第4回デザイニング・インターフェース勉強会

2

Share

Download to read offline

録画: http://www.ustream.tv/recorded/23734214

オープンソースカフェWordPress部内勉強会「デザイニング・インターフェース」の中での発表資料

録画: http://www.ustream.tv/recorded/23734214

オープンソースカフェWordPress部内勉強会「デザイニング・インターフェース」の中での発表資料

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

第三章ナビゲーション < 第4回デザイニング・インターフェース勉強会

  1. 1. 下北沢オープンソース Cafe デザイニング・インターフェース勉強会 第4回 3章 - 動き回る:ナビゲーション、標識、探索経路 西川伸一 (@shinichiN) https://www.facebook.com/groups/di2e.study/
  2. 2. デザイニング・インターフェース 第2版 パターンによる実践的インタラクションデザイン http://amzn.to/LfZuHZ
  3. 3. @shinichiN colog.jpの開発運営・ウェブディレクター・WordPressラブ 勉強会詳細は Facebook グループで ↓ https://www.facebook.com/groups/di2e.study/ 今日の発表について
  4. 4. 3章に書いてあること ナビゲーション ユーザに「現在地・目的地・移動方法」 をいかに知らせるか
  5. 5. 目次 1.序論 2.いつでも居場所と目的地が分かる 2.1.標識 signpost 2.2.経路探索 wayfinding 3.ナビゲーションのコスト 4.ナビゲーションのモデル 5.ウェブサイト向けのデザインルール 6.パターンの解説
  6. 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. 7. 序論 • サイト内/アプリ内を行き来すること は、腹立ちの種、無駄、実がない • 理想は「どこへも行かずに済む状態」 • インターフェース上で大部分のツール が「手の届くところにあれば便利」 • つまり、少なければ少ないほど良し
  8. 8. いつでも居場所と目的地が分かる • 以下のような要素があるサイトやアプ リをデザインしている場合、どうすれ ばよい? • セクション、サブセクション • ツール • いくつものページ、ウィンドウ • ウィザード
  9. 9. 標識 Signpost ユーザが 自分居場所、周囲に何があるか を認識するのに役立つ機能
  10. 10. 標識 Signpost の例 • ページのタイトル • ロゴなどのブランディング要素 • タブ • 選択中項目の強調表示 • グローバルまたはローカルナビゲー ション • シーケンス表示 • パンくず • 注釈付きスクロールバー
  11. 11. 経路探索 Wayfinding ユーザが 目標に向かうための経路を見つけていく行為 認知科学、環境設計、ウェブサイトデザイン の専門家が研究を重ねている重要なテーマ
  12. 12. • よいサイン • 環境的な手がかり • マップ 経路探索 Wayfinding で考えるべきこと
  13. 13. • 明快で曖昧さがない • あるべき場所にある • おもなユースケースを自分で ってみ るといい • 最初のページでは”行動への呼びかけ” 経路探索 Wayfinding : よいサイン
  14. 14. • レストランのトイレは店の奥のほう • ダイアログボックスを閉じる×ボタンは右上 • ウェブサイトのロゴは左上 経路探索 Wayfinding : 環境的な手がかり 文化的なもの その文化(OSなど)になじみがない人もいることに注意する
  15. 15. • 一回り大きな座標系 • 全体を頭の中にイメージできる • 意識しなくてもいいなら、 それはそれでよいナビゲーション 経路探索 Wayfinding : マップ
  16. 16. ナビゲーションのコスト • 認知上のコスト。 ここは何?次はどこ? • 形状、レイアウト、内容、出口、目的の達成方 法を探し始める • 別のことに気を取られて目的を忘れたり • ラベルを読み、アイコンを解釈し、よく分から ないリンクを理解のために無闇にクリック • 全ページで。塵も積もれば。
  17. 17. 移動距離は常に短く • 何段階もサブページやダイアログを経由させない • 80%のユースケースは1ページ内で行わせられるか?1回だけOKな らどうか?考えよう。 • 無理なら? • 要素を縮小/省略、ラベルを短縮、アイコン化 • 邪魔にならない場所に移動 • モジュール別タブ/アコーディオンでデフォルト非表示 • パレートの法則で要らないのはしまってみる 移動のたびにコストがかかる → 移動を減らす
  18. 18. ナビゲーションのモデル • ハブとスポーク • 完全接続型 • マルチレベル型 • ステップ進行形 • ピラミッド • パンとズーム • フラットナビゲーション • モーダルなパネル • 明快な入り口 • ブックマーク • 避難口
  19. 19. ナビゲーションのモデル:ハブとスポーク • モバイルでよく使われる • ハブ画面に全部ある • 多くの場合ホーム画面 • ハブからスポーク(各ページ)へ • 用事を済ませたらハブに戻る
  20. 20. ナビゲーションのモデル:完全接続型 • 全ページが相互にリンクされている • シンプルなグローバルナビゲーショ ン / 階層の深いナビゲーションに よって、完全に接続する • どのページからどのページヘも1回 のジャンプ
  21. 21. ナビゲーションのモデル:マルチレベル型 • 主なページは互いに完全接続 • 下位のページはグループ内で接続 • サブレベルのサイドバーメニューな どがある • ドロップダウンやFat Menus、サイ トマップ付きフッターのパターンに より、完全接続型に切り替えられる し、その方がより望ましい
  22. 22. ナビゲーションのモデル:ステップ進行型 • スライドショー • プロセスフロー • 戻る/進むのリンクが目を引く形
  23. 23. ナビゲーションのモデル:ピラミッド • ステップ進行型の変形 • 一連の項目をハブページで一覧し て、どこにでもいける • 戻る/進むリンクを ってとなりの 項目にいける
  24. 24. ナビゲーションのモデル:パンとズーム • たったひとつの広いスペースが適し ている場合 = 多数の小さなスペース に分けないほうがいい場合 • 地図、大きな画像、インフォメー ショングラフィックス、量の多いテ キスト文書、音声や動画などの時間 メディア • 集中させる
  25. 25. ナビゲーションのモデル:フラットナビゲーション • Photoshopなどのカンバスとパレット型 • Excelのような複雑なアプリケーション • メニューやツールバー、パレットを通じて利用できる多くのツー ルや機能が用意される
  26. 26. ナビゲーションのモデル:モーダルなパネル • 表示されたメッセージの了解や入力 の完了、クリックしてパネルを閉じ る • オーバーレイで表示される
  27. 27. ナビゲーションのモデル:明快な入り口 • 初めての訪問者やめったにアクセス しないユーザ向けのページ • まず、何をすれば良いのかを示す • 複雑なサイトやアプリの出発点を示 して、負担を和らげる
  28. 28. ナビゲーションのモデル:ブックマーク • 自分で選んだ場所まで、いつでもい ける
  29. 29. ナビゲーションのモデル:避難口 • 行き詰まった時、エラーになった、 理解できない時に逃げられる • 見覚えのある場所に戻るための分か りやすいラベルの付いたリンク
  30. 30. ナビゲーションのモデル:注意点 1.組み合わせて使われる 2.ユーザの選択肢を意図せず規定してしまうこと がある 2.1.スライドショーの時には「戻る/進む」リン クと避難口だけでいい 2.2.グロナビがあると離脱が起きることがある 3.表現形態はあとから決める。情報アーキテク チャとナビゲーションのモデルが決まってから ビジュアルのデザインに入る
  31. 31. ウェブサイト向けのデザインルール • グロナビは上か左側 • ログイン済みユーザ向けのユーティリティナビ ゲーション(アカウント設定、ログアウトな ど)は右上部 • 関連ナビゲーションはコンテンツ自体の近く 慣習があるので無視しない
  32. 32. パターンの解説 • 明快な入り口 • メニューページ • ピラミッド • モーダルなパネル • ディープリンクできる ステータス • 避難口 ナビゲーションのモデル レイアウトから独立してる • 分厚いメニュー • サイトマップ付きフッター • ログインツール ←を一般的なレイアウトと組み合わせると 得られるパターン • シーケンス表示 • パンくず • 注釈付きスクロールバー 標識として役に立つ • アニメーション による転換 視覚的トリック
  33. 33. 明快な入り口 Clear Entry Points 主要な要素へのリンクを数カ所だけ 明快な「行動」のきっかけ - たくさんの機能があるアプリ - 初心者にはメニューが多すぎる
  34. 34. メニューページ Menu Page サイトが持っている(全ての)コンテンツへの リンクをページいっぱいに。 - 検索ボックスがあるといい - コンテンツ自体はなくていい
  35. 35. ピラミッド Pyramid Flickrなどの画像管理ツール
  36. 36. モーダルなパネル Modal Panel ユーザの入力が必須。 それ無しには進めない場面で。 SlideShareのログイン画面。 アップロードしようとすると出る。
  37. 37. ディープリンクできる ステータス Deep-linked State パーマリンクに「状態」を加えたリンク GoogleBooksがURLに持たせているState情報 ・本の表示位置 ・表示モード(見開きか、1ページか) ・ツールバー表示の有無 ・書籍内検索の結果
  38. 38. 避難口 Escape Hatch 見慣れた場所に戻るためのリンク グロナビなどの他の選択肢がない時に用意する ログイン/会員登録を求められているが、 トップに戻りたい。。→ロゴをクリック ←これ
  39. 39. 分厚いメニュー Fat Menus グロナビ等からドロップダウンやフライアウトメニュー。 各セクションへのリンクを全部見せる。 Starbucks Kayacを見てみよう http://www.kayac.com
  40. 40. サイトマップ付きフッター Sitemap Footer グロナビを補完。 全ページに。 かものはしプロジェクト
  41. 41. サイトマップ付きフッター Sitemap Footer グロナビを補完。 全ページに。 Flickr rei.com
  42. 42. ログインツール Sign-in Tools ログインユーザ向けに。 ユーザ自身に関する設定やログアウト WordPress iTunes
  43. 43. シーケンス表示 Sequence Map 手続き中に、今どの段階にいるのかを表示 ←イマココ 縦表示の場合もある
  44. 44. パンくず Breadcrumbs 階層の表示。 カテゴリなどの親分類の表示。
  45. 45. 注釈つきスクロールバー Annotated Scrollbar 縦に長い1ページ内のコンテンツで、 現在地を表示 GoogleChromeの検索結果の存在位置を 表示してくれているところ
  46. 46. 注釈つきスクロールバー Annotated Scrollbar 自分がどう移動したのか アニメーションで明示する
  47. 47. まとめ 1.無駄。コストについて理解する 2.モデルを知る。 3.組み合わせる

×