Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

4.232 visualizaciones

Publicado el

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

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

Publicado en: Diseño
  • Sé el primero en comentar

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

  1. 1. 下北沢オープンソース Cafeデザイニング・インターフェース勉強会第4回 3章 - 動き回る:ナビゲーション、標識、探索経路 西川伸一 (@shinichiN) https://www.facebook.com/groups/di2e.study/
  2. 2. デザイニング・インターフェース 第2版 パターンによる実践的インタラクションデザイン http://amzn.to/LfZuHZ
  3. 3. 今日の発表について @shinichiNcolog.jpの開発運営・ウェブディレクター・WordPressラブ 勉強会詳細は Facebook グループで ↓ https://www.facebook.com/groups/di2e.study/
  4. 4. 3章に書いてあること ナビゲーションユーザに「現在地・目的地・移動方法」 をいかに知らせるか
  5. 5. 目次1.序論2.いつでも居場所と目的地が分かる2.1.標識 signpost2.2.経路探索 wayfinding3.ナビゲーションのコスト4.ナビゲーションのモデル5.ウェブサイト向けのデザインルール6.パターンの解説
  6. 6. 目次:パターンの解説1.明快な入り口 Clear Entry Points2.メニューページ Menu Page3.ピラミッド Pyramid4.モーダルなパネル Modal Panel5.ディープリンクできるステータス Deep-kinked State6.避難口 Escap Hatch7.分厚いメニュー Fat Menus8.サイトマップフッター Sitemap Footer9.ログインツール Sign-in Tools10.シーケンス表示 Sequence Map11.パンくず Breadcrumbs12.注釈つきスクロールバー Annotated Scrollbar13.アニメーションによる転換 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. ピラミッド Flickrなどの画像管理ツール Pyramid
  36. 36. モーダルなパネル ユーザの入力が必須。 Modal Panel それ無しには進めない場面で。SlideShareのログイン画面。アップロードしようとすると出る。
  37. 37. ディープリンクできる パーマリンクに「状態」を加えたリンクステータスDeep-linked StateGoogleBooksが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 全ページに。 rei.com Flickr
  42. 42. ログインツール ログインユーザ向けに。Sign-in Tools ユーザ自身に関する設定やログアウトWordPress iTunes
  43. 43. シーケンス表示 手続き中に、今どの段階にいるのかを表示Sequence Map ←イマココ 縦表示の場合もある
  44. 44. パンくず 階層の表示。Breadcrumbs カテゴリなどの親分類の表示。
  45. 45. 注釈つきスクロールバー 縦に長い1ページ内のコンテンツで、Annotated Scrollbar 現在地を表示 GoogleChromeの検索結果の存在位置を 表示してくれているところ
  46. 46. 注釈つきスクロールバー 自分がどう移動したのかAnnotated Scrollbar アニメーションで明示する
  47. 47. まとめ1.無駄。コストについて理解する2.モデルを知る。3.組み合わせる

×