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

@yasulab

デザイニング・インターフェイス(2e)勉強会第２回　第２章

12年6月12日火曜日

@yasulab

デザイニング・インターフェイス(2e)勉強会第２回　第２章

良ければ、本を買ってね！


注意事項

• 発表者＝デザインを勉強したいエンジニア

• 質問はUstでも口頭でもいつでも歓迎！

• 即座に回答できない場合は宿題的な感じで。

• 「それ違うんじゃね？」と感じたら是非指摘を。

• 勉強会の経緯・スケジュールはこちらから↓http://www.facebook.com/groups/di2e.study/


http://www.facebook.com/groups/di2e.study/


注意事項

• 50分ぐらい経ったら教えて下さい.

• 50分を過ぎると発表者が眠くなります。


前回の復習• ユーザの行動について.

• 良いIDはユーザの理解から.

•ユーザは何を望んでいるのか？→ユーザ調査


補足1/2：ユーザ調査

• 1. 直接観察

• 2. Case Study　

• 3. アンケート調査

• 4. ペルソナ

※他にも色々あるようですが、本題ではないので省略.

詳しくは「The Lean Startup」のMeasure等を参考に.12年6月12日火曜日








• ユーザ行動のパターン → 適切な情報構造の選定

•典型的な、12種類のユーザ行動パターン


補足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種類のユーザ行動パターン


今日の概要

1. 適切な情報構造とは？　↓　

2. 情報構造に沿ったAppのパターンとは？


略語解説集• ID: Interface Design

• SW: Software

• IA: Information Architecture


これまでのあらすじ

• 1. ユーザ調査した.

• 2. 当てはまるユーザ行動（目標）も大体把握した.

• 3. で、次はどうするの？？？


インターフェイスのスケッチは危険かも.

　↓　考え方が限定されてしまう

　↓　より柔軟な考え方を促す姿勢を保つ


（学術的に）より柔軟な考え方を促す姿勢　| |　

データ／タスクの面から考える


例えば

• どんなオブジェクトを見せているのか？

• どのように分類・整理されているのか？

• どう処理される必要があるのか？　↓　

この観点からみると何通りの方法でデザインできるか考えるとか.


例えば

• どんなオブジェクトを見せているのか？

• どのように分類・整理されているのか？

• どう処理される必要があるのか？

柔軟な考え方

↑

　↓　この観点からみると

何通りの方法でデザインできるか考えるとか.12年6月12日火曜日

で、姿勢はいいけど、それで具体的にどう考えるの？

　↓　Information Architecture


Information Architecture• 情報を体系化する技法.

• 各役割を上位レベルから順々に考えていく方法.

• 上位レベル：Desktop, (rich) website, or Mobile?

• e.g. Rich website = Gmailのメイン画面

• 下位レベル：１ページあたりの役割

• とりあえず，静的なページの役割で考える.


Information Architecture• どんな役割があるの？

• 1. 単一の項目を示すため.

• 2. 複数の項目の集合を示すため.

• 3. 何かを作成するツールを提供するため.

• 4. 単一のタスクを支援するため.

•役割 → Guild (composed of DI patterns)


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, ...　


• 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, ...　


• Canvas Plus Palette

• Many Workspaces

• Alternative Views

• Input Hints (ch. 8)12年6月12日火曜日

4. 単一のタスクを支援するため

• ✗ 何かを見せたり、作ったりする作業（目標）.

✓ 目標を達成するために必要かつムダな作業.

• Login, signup, post, print, upload, buy now, setting, ...　


• Wizard

• Settings Editor


←ここまで前置き　　ここからが本題→


単一ページの役割　↓　

　Guild　　　↓　　DI Patterns




←今ココ


例えば


“複数の項目の集合を示すため”

　↓　　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, ...

適切な情報構造

を組立てるための部品


というわけで,

Guild 集を覚えます!!


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


1. Feature, Search, and Browse

• 俯瞰する用.

• “ユーザを釣る”

仕掛けを作る

• 何が知りたいのだろうか？


2. News Stream

• 最新を追いたい人用.

• 情報→単一ストリーム

• w/ Many Workspace:

• TweetDeck

• what, who, when, and where.


3. Picture Manager

• 画像・動画系の項目を管理するため.

• List/Collection, Private/Public, and Web/Desktop.

• a

•

単一項目の表示Thumbnail Grid


4. Dashboard

• モニタリング用

• 情報密度の高い,

最新の単一ページ

• 編集者による情報の取捨選択がとても重要.



• 作成・編集用

• 仮想のPalette

• Icon ↑　 | |　認識率 ↑


6. Wizard• ユーザのタスク達成のための最善な方法を、ユーザよりもUIデザイナの方が知ってる場合(のみ)

• cf. 空港全体の構造把握する <<< 標識をたどる

• 上級ユーザは「制約→窮屈→不満」と感じるかも...


7. Settings Editor• 何かの設定を変更するため.

• 目当てのモノを見つけやすい形で提供→詳細

•12年6月12日火曜日

8. Alternative Views• 単一の見せ方では、要件が満たせない場合用.

• e.g. Explorer/Finder: Thumb. Grid, Tree, Cascading, ...


9. Many Workspaces• 複数のオブジェクトを並べて配置・表示する用

• “マルチタスクは人の常...” p. 68

• 区切り方：Tab, Windows, Panel, Separated windows


10. Multi-Level Help• 多種多様な ”Need help.” に対応するためのGuild.

• e.g. Input hint, Tool dip, Guide tour, Community, ...


以上.


Guild 集1. Feature, Search, and

Browse

2. News Stream

3. Picture Manager

4. Dashboard


6. Wizard

7. Settings Editor

8. Alternative Views

9. Many Workspaces

10.Multi-Level Help




今日やったところ




次章以降の内容


次章以降は、各Guildとそれを構成するDI Patterns

についての詳解になります.


今日のまとめ• 1. 適切な情報構造とは？

• Information Architecture：上位から下位へ.

• 最終的に、単一のページの役割を考える.

• 単一表示, 複数表示, 作業・管理, 必要なムダ

• 2. 情報構造に沿ったAppのパターンとは？


@yasulab

ご清聴ありがとうございました.

第２回　第２章


次回はどこやります？1. ユーザの行動

2. コンテンツを整理する

3. 動き回る

4. ページを構成する

5. リストで表現する

6. 事を行う

7. 複合的なDataを表示する

8. ユーザの入力を受け取る

9. Social Mediaの利用

10.モバイルへの対応

11.よい見た目にする

12.他の参考事例を探すとか.


詳細はこちらからhttp://www.facebook.com/groups/di2e.study/


