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

1,172 views
1,134 views

Published on

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

Published in: Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,172
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

第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日火曜日

×