OOUIの設計プロセス / Design process of OOUI

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（予定）

Transcript

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ʢ༧ఆʣ