第2回デザイニング・インターフェイス勉強会「情報の構造」
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,037 views

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

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

Statistics

Views

Total Views
1,037
Views on SlideShare
1,037
Embed Views
0

Actions

Likes
4
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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