Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

第2回デザイニング・インターフェイス勉強会「情報の構造」

1,297 views

Published on

Designing Interface (2e) Study Group http://www.facebook.com/groups/di2e.study/

Published in: Design
  • Be the first to comment

第2回デザイニング・インターフェイス勉強会「情報の構造」

  1. 1. デザイニング・インターフェイス(2e)勉強会 第2回 第2章 @yasulab12年6月12日火曜日
  2. 2. 良ければ、 本を買ってね! デザイニング・インターフェイス(2e)勉強会 第2回 第2章 @yasulab12年6月12日火曜日
  3. 3. 注意事項 • 発表者 = デザインを勉強したいエンジニア • 質問はUstでも口頭でもいつでも歓迎! • 即座に回答できない場合は宿題的な感じで。 • 「それ違うんじゃね?」と感じたら是非指摘を。 • 勉強会の経緯・スケジュールはこちらから↓ http://www.facebook.com/groups/di2e.study/12年6月12日火曜日
  4. 4. 注意事項• 50分ぐらい経ったら教えて下さい. • 50分を過ぎると発表者が 眠くなります。12年6月12日火曜日
  5. 5. 前回の復習 • ユーザの行動について. • 良いIDはユーザの理解から. • ユーザは何を望んでいるのか?→ユーザ調査12年6月12日火曜日
  6. 6. 補足1/2:ユーザ調査 • 1. 直接観察 • 2. Case Study  • 3. アンケート調査 • 4. ペルソナ ※他にも色々あるようですが、本題ではないので省略. 詳しくは「The Lean Startup」のMeasure等を参考に.12年6月12日火曜日
  7. 7. 前回の復習 • ユーザの行動について. • 良いIDはユーザの理解から. • ユーザは何を望んでいるのか?→ユーザ調査12年6月12日火曜日
  8. 8. 前回の復習 • ユーザの行動について. • 良いIDはユーザの理解から. • ユーザは何を望んでいるのか?→ユーザ調査 • ユーザ行動のパターン → 適切な情報構造の選定 • 典型的な、12種類のユーザ行動パターン12年6月12日火曜日
  9. 9. 補足2/2:ユーザ行動パターン• 1.Safe Exploration • 8. Microbreaks• 2. Instant Gratification • 9. Spatial Memory• 3. Satisficing • 10. Prospective Memory• 4. Changes in Midstream • 11. Streamlined Repetition• 5. Deferred Choices • 12. Keyboard Only• 6. Incremental Construction • 13. Other People’s Advice• 7. Habituation • 14. Personal Recommendations 12年6月12日火曜日
  10. 10. 今日の概要 • ユーザの行動について. • 良いIDはユーザの理解から. • ユーザは何を望んでいるのか?→ユーザ調査 • ユーザ行動のパターン → 適切な情報構造の選定 • 典型的な、12種類のユーザ行動パターン12年6月12日火曜日
  11. 11. 今日の概要 1. 適切な情報構造とは?  ↓  2. 情報構造に沿ったAppのパターンとは?12年6月12日火曜日
  12. 12. 略語解説集 • ID: Interface Design • SW: Software • IA: Information Architecture12年6月12日火曜日
  13. 13. これまでのあらすじ • 1. ユーザ調査した. • 2. 当てはまるユーザ行動(目標)も大体把握した. • 3. で、次はどうするの???12年6月12日火曜日
  14. 14. インターフェイスのスケッチは危険かも.  ↓  考え方が限定されてしまう  ↓  より柔軟な考え方を促す姿勢を保つ12年6月12日火曜日
  15. 15. (学術的に)より柔軟な考え方を促す姿勢  | |  データ/タスクの面から考える12年6月12日火曜日
  16. 16. 例えば • どんなオブジェクトを見せているのか? • どのように分類・整理されているのか? • どう処理される必要があるのか?  ↓  この観点からみると 何通りの方法でデザインできるか考えるとか.12年6月12日火曜日
  17. 17. 例えば • どんなオブジェクトを見せているのか? • どのように分類・整理されているのか? • どう処理される必要があるのか? え 方  ↓  軟 な考 柔 この観点からみると ↑ 何通りの方法でデザインできるか考えるとか.12年6月12日火曜日
  18. 18. で、姿勢はいいけど、それで具体的にどう考えるの?  ↓  Information Architecture12年6月12日火曜日
  19. 19. Information Architecture • 情報を体系化する技法. • 各役割を上位レベルから順々に考えていく方法. • 上位レベル:Desktop, (rich) website, or Mobile? • e.g. Rich website = Gmailのメイン画面 • 下位レベル:1ページあたりの役割 • とりあえず,静的なページの役割で考える.12年6月12日火曜日
  20. 20. Information Architecture • どんな役割があるの? • 1. 単一の項目を示すため. • 2. 複数の項目の集合を示すため. • 3. 何かを作成するツールを提供するため. • 4. 単一のタスクを支援するため. • 役割 → Guild (composed of DI patterns)12年6月12日火曜日
  21. 21. 1. 単一の項目を示すため • 単一のコンテンツの表示・再生だけで、 他に情報を示す必要が無い場合. • 相性の良い Guild 例: • Alternative Views (ch.2) • Many Workspaces (ch.2) • Deep-linked State (ch. 3) • Sharing Widget (ch. 9)12年6月12日火曜日
  22. 22. 2. 複数の項目の集合を示すため. • e.g. List, menu, grid images, search result, table, tree, ...  • 相性の良い Guild 例: • Feature, Search, and Browse • News Stream • Picture Manager (ch. 5) • 組み合わせも可能 (ch. 5) • (Thumb. Grid + Pagination) w/ Two-Panel Selector12年6月12日火曜日
  23. 23. 3. 何かを作成するツールを 提供するため. • 制作/編集ツール系のこと. • MS Word/Excel/PP, photoshop, illustrator, InDesign, ...  • 相性の良い Guild 例: • Canvas Plus Palette • Many Workspaces • Alternative Views • Input Hints (ch. 8)12年6月12日火曜日
  24. 24. 4. 単一のタスクを支援するため •✗ 何かを見せたり、作ったりする作業(目標). ✓ 目標を達成するために必要かつムダな作業. • Login, signup, post, print, upload, buy now, setting, ...  • 相性の良い Guild 例: • Wizard • Settings Editor12年6月12日火曜日
  25. 25. ←ここまで前置き  ここからが本題→12年6月12日火曜日
  26. 26. 単一ページの役割  ↓   Guild    ↓   DI Patterns12年6月12日火曜日
  27. 27. 単一ページの役割  ↓   Guild  ←今ココ   ↓   DI Patterns12年6月12日火曜日
  28. 28. 例えば12年6月12日火曜日
  29. 29. “複数の項目の集合を示すため”  ↓  適切な情報構造  Picture Manager (ch. 5)   ↓  を組立てるための部品 two-panel selector, one-window drilldown, list inlay, thumbnail grid, carousel, row striping, pagination, jump to item, alphabet scroller, cascading lists, tree table, new-item row, ...12年6月12日火曜日
  30. 30. というわけで, Guild 集を 覚えます!!12年6月12日火曜日
  31. 31. Guild 集 1. Feature, Search, and 6. Wizard Browse 7. Settings Editor 2. News Stream 8. Alternative Views 3. Picture Manager 9. Many Workspaces 4. Dashboard 10.Multi-Level Help 5. Canvas Plus Palette12年6月12日火曜日
  32. 32. 1. Feature, Search, and Browse • 俯瞰する用. • “ユーザを釣る” 仕掛けを作る • 何が知りたい のだろうか?12年6月12日火曜日
  33. 33. 2. News Stream • 最新を追いたい人用. • 情報→単一ストリーム • w/ Many Workspace: • TweetDeck • what, who, when, and where.12年6月12日火曜日
  34. 34. 3. Picture Manager • 画像・動画系の項目を管理するため. • List/Collection, Private/Public, and Web/Desktop. Thumbnail Grid 単一項目の表示 •a •12年6月12日火曜日
  35. 35. 4. Dashboard• モニタリング用• 情報密度の高い, 最新の単一ページ• 編集者による 情報の取捨選択が とても重要.12年6月12日火曜日
  36. 36. 5. Canvas Plus Palette • 作成・ 編集用 • 仮想の Palette • Icon ↑  | |  認識率 ↑12年6月12日火曜日
  37. 37. 6. Wizard • ユーザのタスク達成のための最善な方法を、 ユーザよりもUIデザイナの方が知ってる場合(のみ) • cf. 空港全体の構造把握する <<< 標識をたどる • 上級ユーザは「制約→窮屈→不満」と感じるかも...12年6月12日火曜日
  38. 38. 7. Settings Editor • 何かの設定を変更するため. • 目当てのモノを見つけやすい形で提供→詳細 •12年6月12日火曜日
  39. 39. 8. Alternative Views • 単一の見せ方では、要件が満たせない場合用. • e.g. Explorer/Finder: Thumb. Grid, Tree, Cascading, ... •12年6月12日火曜日
  40. 40. 9. Many Workspaces • 複数のオブジェクトを並べて配置・表示する用 • “マルチタスクは人の常...” p. 68 • 区切り方:Tab, Windows, Panel, Separated windows •12年6月12日火曜日
  41. 41. 10. Multi-Level Help • 多種多様な ”Need help.” に対応するためのGuild. • e.g. Input hint, Tool dip, Guide tour, Community, ... •12年6月12日火曜日
  42. 42. 以上.12年6月12日火曜日
  43. 43. Guild 集 1. Feature, Search, and 6. Wizard Browse 7. Settings Editor 2. News Stream 8. Alternative Views 3. Picture Manager 9. Many Workspaces 4. Dashboard 10.Multi-Level Help 5. Canvas Plus Palette12年6月12日火曜日
  44. 44. 単一ページの役割  ↓   Guild    ↓  今日やったところ DI Patterns12年6月12日火曜日
  45. 45. 単一ページの役割  ↓  次章以降の内容  Guild    ↓   DI Patterns12年6月12日火曜日
  46. 46. 次章以降は、各Guildと それを構成するDI Patterns についての詳解になります.12年6月12日火曜日
  47. 47. 今日のまとめ • 1. 適切な情報構造とは? • Information Architecture:上位から下位へ. • 最終的に、単一のページの役割を考える. • 単一表示, 複数表示, 作業・管理, 必要なムダ • 2. 情報構造に沿ったAppのパターンとは?12年6月12日火曜日
  48. 48. ご清聴ありがとうございました. 第2回 第2章 @yasulab12年6月12日火曜日
  49. 49. 次回はどこやります? 1. ユーザの行動 7. 複合的なDataを表示する 2. コンテンツを整理する 8. ユーザの入力を受け取る 3. 動き回る 9. Social Mediaの利用 4. ページを構成する 10.モバイルへの対応 5. リストで表現する 11.よい見た目にする 6. 事を行う 12.他の参考事例を探すとか.12年6月12日火曜日
  50. 50. 詳細はこちらから http://www.facebook.com/groups/di2e.study/12年6月12日火曜日

×