ABEMA weber 勉強会 2020/09/30
---
1. @uenitty OOUIの設計プロセス ABEMA weber 勉強会 2020/09/30
2. 参考書 2 • 内容はかなり省いています • 自分の解釈で再構成しています • 間違いがあったらごめんなさい • ぜひ本を読んでください！ https://www.sociomedia.co.jp/10046
3. 前回の資料 3 https://speakerdeck.com/uenitty/what-is-object-oriented-ui
4. 今回の内容 4 • OOUIの勘所 • UIを考える目線 • OOUI設計の基本ステップ
5. OOUIの勘所 5
6. オブジェクト：タスク ＝ 1：∞ 6 • タスクはオブジェクトとアクションの組み合わせ • オブジェクト群の相互作用が環境を構成する（タスクは組み合わせ爆発） • 1つの「オブジェクト」に対して、その「使い方」「タスク」は無限にある オブジェクト オブジェクト タスク タスク タスク ・ ・ ・
7. タスク指向UI 7 • できることの分だけ選択肢が必要 なため、画面構成や画面遷移は 複雑になる • 小さな仕様変更や機能追加でも 大規模な開発が必要になり、 条件分岐が増えるためバグも多い オブジェクト指向UIデザイン p.39
8. オブジェクト指向UI 8 • できることが多かったり増えたり しても、画面構成や操作方法は シンプルなまま • 仕様変更や機能追加の工数は 小規模で済み、条件分岐が少なく バグも少ない オブジェクト指向UIデザイン p.40
9. UIを考える目線 9
10. 第三者の視点から議論する 10 • ユーザーがプロダクトを利用する文脈的環境の全体像 ＝ プロダクト環境を 客体として主体的に捉え直すことが、本当の「ユーザー中心設計」 https://www.sociomedia.co.jp/8740
11. ソフトウェアデザインのレイヤー 11 • オブジェクトという根源的なものを軸に UIを見つめると、最低でもこの3層への 分解が必要 • モデル、インタラクション、 プレゼンテーション • フロントエンド、バックエンドの 区別なく1つのシステムと見て議論する • デザインの究極の目的は「形」 • ユーザーから見たUIはどちらの区別も ないし、実際どちらも多分に影響を 与える オブジェクト指向UIデザイン p.42
12. 各レイヤーを何度も行き来する 12 • UIデザインは各レイヤーを何度も順不同に 行き来して全体のバランスを見ながら行うもの • むしろプレゼンテーション層をいきなり発想 してそこから逆算で他を考えることも多い • デザインにプロセスはない オブジェクト指向UIデザイン p.48
13. OOUI設計の基本ステップ 13
14. OOUI設計の基本ステップ 14 1. オブジェクトの抽出（モデル） 2. ビューとナビゲーションの検討（インタラクション） 3. レイアウトパターンの適用（プレゼンテーション） これらを順不同で繰り返し調整し、全体としてのまとまりを作り上げる
15. 1.オブジェクトの抽出（モデル） 15 • ユーザーのメンタルモデルや業務の中にどのような概念が存在しているか調べる • ある概念がオブジェクトといえるか判断する手がかり • 数えられる名詞として表せる • 同種の集合として管理され得る • 共通のアクションを持っている オブジェクト指向UIデザイン p.54
16. 2.ビューとナビゲーションの検討（インタラクション） 16 • ひとまとまりの情報表示領域（ビュー）と それらの呼び出し関係（ナビゲーション） を考える • 1つのオブジェクトは、場面に応じて姿を 変え、異なる面積や情報の詳細度で ユーザーに向けて表象されるため、 この中間的な抽象度のレイヤーが 柔軟なOOUIを構築する上で重要になる オブジェクト指向UIデザイン p.100
17. 2.ビューとナビゲーションの検討（インタラクション） 17 • ビュー（ひとまとまりの情報表示領域）の種類は大きく2つ • コレクション：同種のオブジェクトを複数並べて表示するもの • シングル：1つのビューで1つのオブジェクトを表示するもの オブジェクト指向UIデザイン p.56
18. 2.ビューとナビゲーションの検討（インタラクション） 18 • オブジェクト間の繋がりと多重性から参照可能性を導き、ナビゲーションを定義する • ナビゲーションはビュー同士の呼び出し関係であり、画面遷移ではないことに注意 • インタラクション層は画面という単位に依存しない抽象度のレイヤー オブジェクト指向UIデザイン p.56
19. 3.レイアウトパターンの適用（プレゼンテーション） 19 オブジェクト指向UIデザイン p.58 オブジェクト指向UIデザイン p.57
20. 3.レイアウトパターンの適用（プレゼンテーション） 20 オブジェクト指向UIデザイン p.59 オブジェクト指向UIデザイン p.58
21. 3.レイアウトパターンの適用（プレゼンテーション） 21 • インタラクション層を反映するようにビューを配置して、ユーザーが実際に 目にする画面を構成する • 画面の単位を変えることで、まったく同じUIモデルで異なる画面環境に 対応できる • すでに一般化しているレイアウトパターンを踏襲することで、ユーザーの 学習効率や操作性を向上できる
22. まとめ 22
23. OOUIの設計プロセス 23 1. オブジェクトの抽出（モデル） 2. ビューとナビゲーションの検討（インタラクション） 3. レイアウトパターンの適用（プレゼンテーション） これらを順不同で繰り返し調整し、全体としてのまとまりを作り上げる
24. 次回予告 24
25. @uenitty OOUI設計の実践 ABEMA weber 勉強会 2020/10/28（予定）
uenitty
coconala_engineer
mosa_siru
tkhresk
minorun365
takasehideki
poteboy
ouchi2501
route06
lmi
revcomm_inc
yoshiitaka
comucal
sachag
denniskardys
danielanewman
mclloyd
3n
tammielis
addyosmani
eileencodes
deanohume
lauravandoore
chriscoyier
aarron