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