15分しかないLTだが全力で OOUI を紹介したい / OOUI Introduction in 15 min LT

ABEMA LT 2020/10/26

---

1. @uenitty 15分しかないLTだが 全力で OOUI を紹介したい ABEMA LT 2020/10/26
2. OOUIとは 2 • オブジェクト指向UI（Object-Oriented User Interface） • OOUIは「使いやすさ」と「開発しやすさ」が両立できる
3. オブジェクト指向とは 3 • オブジェクト • 目当て、目的、対象物、もの • 指向 • ある方向や目的に向かうこと、向かわせること • オブジェクト指向 • 目当ての対象物に着目すること
4. オブジェクト指向とは 4 • オブジェクト • 目当て、目的、対象物、もの • 指向 • ある方向や目的に向かうこと、向かわせること • オブジェクト指向 • 目当てに着目すること
5. 具体例 5 • ツイート を 投稿する • ツイート を 閲覧する • ツイート に いいねする • ツイート を 削除する
6. 具体例 6 • ツイート を 投稿する • ツイート を 閲覧する • ツイート に いいねする • ツイート を 削除する 名詞 動詞 目当て 機能 オブジェクト タスク
7. オブジェクトを指向したUIの例 7 ツイート • 最初から目当ての対象物が見えている • 操作対象を選択して、アクションを選択する • 名詞 → 動詞 • 決まった操作順序はない • モードレス
8. タスクを指向したUIの例 8 投稿する 閲覧する いいねする 削除する
9. タスクを指向したUIの例 9 投稿する 閲覧する いいねする 削除する
10. タスクを指向したUIの例 10 投稿する 閲覧する いいねする 削除する
11. タスクを指向したUIの例 11 投稿する 閲覧する いいねする 削除する いいねするツイートを 選択してください
12. タスクを指向したUIの例 12 投稿する 閲覧する いいねする 削除する いいねするツイートを 選択してください
13. タスクを指向したUIの例 13 投稿する 閲覧する いいねする 削除する • 対象物が見えていない • アクションを選択して、操作対象を選択する • 動詞 → 名詞 • 操作を始めると他のことができない • モーダル
14. タスク指向UI 14 • できることの分だけ選択肢が必要 なため、画面構成や画面遷移は 複雑になる • 小さな仕様変更や機能追加でも 大規模な開発が必要になり、 条件分岐が増えるためバグも多い オブジェクト指向UIデザイン p.39
15. オブジェクト指向UI 15 • できることが多かったり増えたり しても、画面構成や操作方法は シンプルなまま • 仕様変更や機能追加の工数は 小規模で済み、条件分岐が少なく バグも少ない オブジェクト指向UIデザイン p.40
16. これはOOUI 16https://www.apple.com/jp/newsroom/
17. これはOOUIじゃない 17 https://www.aichibank.co.jp/atm/using/guide/
18. これはOOUI 18https://abema.tv/
19. これはOOUIじゃない 19https://abema.tv/channels/payperview-1/slots/AakjKLgTGb6msu アカウントあり & コインありの場合 購入完了 アカウントあり & コインなしの場合 途中でキャンセルの場合 振り出しに戻る アカウントなし & コインなしの場合
20. OOUIが実現する「使いやすさ」 20 • 誰でも使える道具 • iPhoneには説明書がない • オブジェクトの反応を見ながら試行錯誤する中で、やりたいことを 実現できる • 自由な操作順序 • モードレス
21. OOUIが実現する「作りやすさ」 21 • 少ない画面数、シンプルな画面遷移 • タスク指向UIだと5∼20倍の画面数が必要になる※ • 少ない条件分岐 = 少ないバグ • 複雑な条件分岐は、ユーザーの思考や判断の中に移動する • 正確な工数見積、サービス成長への素早い追従 • 変わりにくいものを軸に実装することになるため、変更箇所が明確に なり、工数が少なくなる ※ オブジェクト指向UIデザイン p.ix
22. OOUI、なんでそんなにパワフルなの？ 22 • うっかり何でもできてしまうバーチャル世界に秩序をもたらすから • オブジェクト指向とは、「存在」を軸にする、ということ • リアル世界では当たり前の（= 言語化すると哲学的になる）概念 • バーチャル世界のものづくりでは、作り手が意識しないといけない • OOUIだけじゃない、「オブジェクト指向」自体の奥深さ
23. OOUIを学べる資料 23
24. OOUI本 24 • オブジェクト指向UIデザイン 使いやすいソフトウェアの原理 • OOUIについての日本語の書籍は たぶんこれだけ https://www.sociomedia.co.jp/10046
25. • 本を読む前に全体像を掴むのに おすすめ • 1時間あります OOUI本の著者の登壇動画 25 https://youtu.be/2jqXiAhqCm0?t=4097 !
26. OOUI本の著者のブログとTwitter 26 • 本とは違う切り口で説明されていることがあり、理解が深まる https://www.sociomedia.co.jp/category/blog https://twitter.com/manabuueno
27. 拙作の資料も一応 🙈 27 https://speakerdeck.com/uenitty/what-is-object-oriented-ui https://speakerdeck.com/uenitty/design-process-of-ooui
28. まとめ 28
29. OOUI やっていきましょう！ 29 • オブジェクト指向UI • 「使いやすさ」と「開発しやすさ」を両立するソフトウェアの「原理」 • 名詞 → 動詞 • ○モードレス、✗モーダル • 背景の哲学や具体的な設計方法、すでにタスク指向なUIをオブジェクト指向 にする方法など詳細情報は、書籍や動画がおすすめ

Transcript

1. @uenitty 15෼͔͠ͳ͍LT͕ͩ શྗͰ OOUI Λ঺հ͍ͨ͠ ABEMA LT 2020/10/26
2. OOUIͱ͸ 2 • ΦϒδΣΫτࢦ޲UIʢObject-Oriented User Interfaceʣ • OOUI͸ʮ࢖͍΍͢͞ʯͱʮ։ൃ͠΍͢͞ʯཱ͕྆Ͱ͖Δ
3. ΦϒδΣΫτࢦ޲ͱ͸ 3 • ΦϒδΣΫτ • ໨౰ͯɺ໨తɺର৅෺ɺ΋ͷ • ࢦ޲ • ͋Δํ޲΍໨తʹ޲͔͏͜ͱɺ޲͔ΘͤΔ͜ͱ • ΦϒδΣΫτࢦ޲ • ໨౰ͯͷର৅෺ʹண໨͢Δ͜ͱ
4. ΦϒδΣΫτࢦ޲ͱ͸ 4 • ΦϒδΣΫτ • ໨౰ͯɺ໨తɺର৅෺ɺ΋ͷ • ࢦ޲ • ͋Δํ޲΍໨తʹ޲͔͏͜ͱɺ޲͔ΘͤΔ͜ͱ • ΦϒδΣΫτࢦ޲ • ໨౰ͯʹண໨͢Δ͜ͱ
5. ۩ମྫ 5 • πΠʔτ Λ ౤ߘ͢Δ • πΠʔτ Λ Ӿཡ͢Δ • πΠʔτ ʹ ͍͍Ͷ͢Δ • πΠʔτ Λ ࡟আ͢Δ
6. ۩ମྫ 6 • πΠʔτ Λ ౤ߘ͢Δ • πΠʔτ Λ Ӿཡ͢Δ • πΠʔτ ʹ ͍͍Ͷ͢Δ • πΠʔτ Λ ࡟আ͢Δ ໊ࢺ ಈࢺ ໨౰ͯ ػೳ ΦϒδΣΫτ λεΫ
7. ΦϒδΣΫτΛࢦ޲ͨ͠UIͷྫ 7 πΠʔτ • ࠷ॳ͔Β໨౰ͯͷର৅෺͕ݟ͍͑ͯΔ • ૢ࡞ର৅Λબ୒ͯ͠ɺΞΫγϣϯΛબ୒͢Δ • ໊ࢺ → ಈࢺ • ܾ·ͬͨૢ࡞ॱং͸ͳ͍ • ϞʔυϨε
8. λεΫΛࢦ޲ͨ͠UIͷྫ 8 ౤ߘ͢Δ Ӿཡ͢Δ ͍͍Ͷ͢Δ ࡟আ͢Δ
9. λεΫΛࢦ޲ͨ͠UIͷྫ 9 ౤ߘ͢Δ Ӿཡ͢Δ ͍͍Ͷ͢Δ ࡟আ͢Δ
10. λεΫΛࢦ޲ͨ͠UIͷྫ 10 ౤ߘ͢Δ Ӿཡ͢Δ ͍͍Ͷ͢Δ ࡟আ͢Δ
11. λεΫΛࢦ޲ͨ͠UIͷྫ 11 ౤ߘ͢Δ Ӿཡ͢Δ ͍͍Ͷ͢Δ ࡟আ͢Δ ͍͍Ͷ͢ΔπΠʔτΛ બ୒͍ͯͩ͘͠͞
12. λεΫΛࢦ޲ͨ͠UIͷྫ 12 ౤ߘ͢Δ Ӿཡ͢Δ ͍͍Ͷ͢Δ ࡟আ͢Δ ͍͍Ͷ͢ΔπΠʔτΛ બ୒͍ͯͩ͘͠͞
13. λεΫΛࢦ޲ͨ͠UIͷྫ 13 ౤ߘ͢Δ Ӿཡ͢Δ ͍͍Ͷ͢Δ ࡟আ͢Δ • ର৅෺͕ݟ͍͑ͯͳ͍ • ΞΫγϣϯΛબ୒ͯ͠ɺૢ࡞ର৅Λબ୒͢Δ • ಈࢺ → ໊ࢺ • ૢ࡞Λ࢝ΊΔͱଞͷ͜ͱ͕Ͱ͖ͳ͍ • Ϟʔμϧ
14. λεΫࢦ޲UI 14 • Ͱ͖Δ͜ͱͷ෼͚ͩબ୒ࢶ͕ඞཁ ͳͨΊɺը໘ߏ੒΍ը໘ભҠ͸ ෳࡶʹͳΔ • খ͞ͳ࢓༷มߋ΍ػೳ௥ՃͰ΋ େن໛ͳ։ൃ͕ඞཁʹͳΓɺ ৚݅෼ذ͕૿͑ΔͨΊόά΋ଟ͍ ΦϒδΣΫτࢦ޲UIσβΠϯ p.39
15. ΦϒδΣΫτࢦ޲UI 15 • Ͱ͖Δ͜ͱ͕ଟ͔ͬͨΓ૿͑ͨΓ ͯ͠΋ɺը໘ߏ੒΍ૢ࡞ํ๏͸ γϯϓϧͳ·· • ࢓༷มߋ΍ػೳ௥Ճͷ޻਺͸ খن໛ͰࡁΈɺ৚݅෼ذ͕গͳ͘ όά΋গͳ͍ ΦϒδΣΫτࢦ޲UIσβΠϯ p.40
16. ͜Ε͸OOUI 16 https://www.apple.com/jp/newsroom/
17. ͜Ε͸OOUI͡Όͳ͍ 17 https://www.aichibank.co.jp/atm/using/guide/
18. ͜Ε͸OOUI 18 https://abema.tv/
19. ͜Ε͸OOUI͡Όͳ͍ 19 https://abema.tv/channels/payperview-1/slots/AakjKLgTGb6msu ΞΧ΢ϯτ͋Γ & ίΠϯ͋Γͷ৔߹ ߪೖ׬ྃ ΞΧ΢ϯτ͋Γ & ίΠϯͳ͠ͷ৔߹ ్தͰΩϟϯηϧͷ৔߹ ৼΓग़͠ʹ໭Δ ΞΧ΢ϯτͳ͠ & ίΠϯͳ͠ͷ৔߹
20. OOUI͕࣮ݱ͢Δʮ࢖͍΍͢͞ʯ 20 • ୭Ͱ΋࢖͑Δಓ۩ • iPhoneʹ͸આ໌ॻ͕ͳ͍ • ΦϒδΣΫτͷ൓ԠΛݟͳ͕Βࢼߦࡨޡ͢ΔதͰɺ΍Γ͍ͨ͜ͱΛ ࣮ݱͰ͖Δ • ࣗ༝ͳૢ࡞ॱং • ϞʔυϨε
21. OOUI͕࣮ݱ͢Δʮ࡞Γ΍͢͞ʯ 21 • গͳ͍ը໘਺ɺγϯϓϧͳը໘ભҠ • λεΫࢦ޲UIͩͱ5ʙ20ഒͷը໘਺͕ඞཁʹͳΔ※ • গͳ͍৚݅෼ذ = গͳ͍όά • ෳࡶͳ৚݅෼ذ͸ɺϢʔβʔͷࢥߟ΍൑அͷதʹҠಈ͢Δ • ਖ਼֬ͳ޻਺ݟੵɺαʔϏε੒௕΁ͷૉૣ͍௥ै • มΘΓʹ͍͘΋ͷΛ࣠ʹ࣮૷͢Δ͜ͱʹͳΔͨΊɺมߋՕॴ͕໌֬ʹ ͳΓɺ޻਺͕গͳ͘ͳΔ ※ ΦϒδΣΫτࢦ޲UIσβΠϯ p.ix
22. OOUIɺͳΜͰͦΜͳʹύϫϑϧͳͷʁ 22 • ͏͔ͬΓԿͰ΋Ͱ͖ͯ͠·͏όʔνϟϧੈքʹடংΛ΋ͨΒ͔͢Β • ΦϒδΣΫτࢦ޲ͱ͸ɺʮଘࡏʯΛ࣠ʹ͢Δɺͱ͍͏͜ͱ • ϦΞϧੈքͰ͸౰ͨΓલͷʢ= ݴޠԽ͢Δͱ఩ֶతʹͳΔʣ֓೦ • όʔνϟϧੈքͷ΋ͷͮ͘ΓͰ͸ɺ࡞Γख͕ҙࣝ͠ͳ͍ͱ͍͚ͳ͍ • OOUI͚ͩ͡Όͳ͍ɺʮΦϒδΣΫτࢦ޲ʯࣗମͷԞਂ͞
23. OOUIΛֶ΂Δࢿྉ 23
24. OOUIຊ 24 • ΦϒδΣΫτࢦ޲UIσβΠϯ ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ • OOUIʹ͍ͭͯͷ೔ຊޠͷॻ੶͸ ͨͿΜ͜Ε͚ͩ https://www.sociomedia.co.jp/10046
25. • ຊΛಡΉલʹશମ૾Λ௫Ήͷʹ ͓͢͢Ί • 1࣌ؒ͋Γ·͢ OOUIຊͷஶऀͷొஃಈը 25 https://youtu.be/2jqXiAhqCm0?t=4097 !
26. OOUIຊͷஶऀͷϒϩάͱTwitter 26 • ຊͱ͸ҧ͏੾ΓޱͰઆ໌͞Ε͍ͯΔ͜ͱ͕͋Γɺཧղ͕ਂ·Δ https://www.sociomedia.co.jp/category/blog https://twitter.com/manabuueno
27. ੿࡞ͷࢿྉ΋ҰԠ 27 https://speakerdeck.com/uenitty/what-is-object-oriented-ui https://speakerdeck.com/uenitty/design-process-of-ooui
28. ·ͱΊ 28
29. OOUI ΍͍͖ͬͯ·͠ΐ͏ʂ 29 • ΦϒδΣΫτࢦ޲UI • ʮ࢖͍΍͢͞ʯͱʮ։ൃ͠΍͢͞ʯΛཱ྆͢Διϑτ΢ΣΞͷʮݪཧʯ • ໊ࢺ → ಈࢺ • ◦ϞʔυϨεɺ✗Ϟʔμϧ • എܠͷ఩ֶ΍۩ମతͳઃܭํ๏ɺ͢ͰʹλεΫࢦ޲ͳUIΛΦϒδΣΫτࢦ޲ ʹ͢Δํ๏ͳͲৄࡉ৘ใ͸ɺॻ੶΍ಈը͕͓͢͢Ί