オブジェクト指向UIとは何か / What is Object-Oriented UI

57e8d22493c141fd3c7e7dbe62196c1b?s=47 Ueni
September 16, 2020

オブジェクト指向UIとは何か / What is Object-Oriented UI

ABEMA weber 勉強会 2020/09/16

---

1. @uenitty オブジェクト指向UIとは何か ABEMA weber 勉強会 2020/09/16
2. 参考書 2 • 内容はかなり省いています • 自分の解釈で再構成しています • 間違いがあったらごめんなさい • ぜひ本を読んでください! https://www.sociomedia.co.jp/10046
3. その他の参考資料 3 https://youtu.be/2jqXiAhqCm0?t=4097 ! ! https://developer.apple.com/videos/play/wwdc2018/803/
4. 今回の内容 4 • ユーザーの主体性 • UIとは何か • オブジェクト指向UIとは何か • タスク指向UIはなぜ避けるべきか
5. ユーザーの主体性 5
6. ビジネスの目当て 6 • ビジネス的には「ユーザーから金を巻き上げられればよい」はず... ユーザー UI • 「使いやすいUI」を求めるのは、なぜ? • 作り手の自己満足? 💸
7. 無理やり行動させても、継続してくれない 7 • 自由がないのは、ユーザーにとってストレスでしかない • 従属的 👎 • 盲目的 👎 • 暗黙的 👎 • 利用や支持の継続には「ユーザーの主体性」が必要不可欠
8. 自由だから、主体的になれる 8 • 使いやすいUIは、 • 自由度が高い 👍 • 創造的になれる 👍 • 使っていて楽しい 👍 • 私たちが求めているものは、 「使いやすいUI」=「ユーザーに主導権を与え、主体性を促すUI」
9. 何もなしに主体的にはなれない 9 • ユーザーは「目当て」を目の当たりにして、主体的になる • 主体性を促すには、まず「目当て」をユーザーに見せることから始める • 「主体」性を促すために「客体」に着目すべきなのがポイント Photo by Rowan Heuvel on Unsplash 主体 = ユーザー 客体 = サービスの内容、ユーザーの目当て ❤
10. 主体性を促す「もの」 10 • 「客体」「目当て」「もの」は英語で「Object」 • 客体に着目せよ = オブジェクトを指向せよ • オブジェクト指向とは、 「目当て」を軸に、ユーザーに「主体性」を促すこと
11. UIとは何か 11
12. UI = ユーザーインターフェース 12 • 道具を使用する際に触れる部分のこと Photo by Kate Hliznitsova on Unsplash
13. 椅子のUI 13 • 座るときに触れる、座面 • 持って運ぶときに触れる、脚や背もたれ Photo by Sam Moqadam on Unsplash
14. 情報システムのUI 14 • キーボードやマウスなどのハードウェア • ソフトウェアによって ディスプレイに現される「形」 Photo by John Schnobrich on Unsplash 情報システムでは、UIこそが、 その道具が何であるかというユーザーの認知を作る、最大の設計テーマ
15. 道具性を見いだす、人の主体性 15 • 人類はただの石を、石器にした • 石器という道具を、 まるで自分の身体の一部のように操った • 素手では戦えない獲物に立ち向かえた • 心の延長のように感じられる道具が 人を主体的にしてきた 最古の石器(PHOTOGRAPH BY SONIA HARMAND, NATIONAL GEOGRAPHIC CREATIVE)
16. 道具を心の延長のように感じられるか 16 • iPhoneが提供するのは「目当て」=「オブジェクト」に直接触れる体験 • 主体性が極まったとき、道具の存在は意識から消える https://developer.apple.com/videos/play/wwdc2018/803/
17. オブジェクト指向UIとは何か 17
18. オブジェクト指向UIの原則 18 • オブジェクトを知覚でき直接的に働きかけられる • オブジェクトは自身の性質と状態を体現する • オブジェクト選択→アクション選択 の操作順序 • すべてのオブジェクトが互いに協調しながらUIを構成する
19. オブジェクトを知覚でき直接的に働きかけられる 19 • 対象物が見えており、「何をできるか」のヒントが得られる • 触ることができ、対象物の変化として作業結果が認識できる ! "
20. オブジェクトは自身の性質と状態を体現する 20 • ユーザーが状況を把握し、次に行うべき操作を考えられるようにする • ユーザーのアクションに対してリアルタイムに反応を返す • リアル世界の物理性を持った「もの」と同じ感覚で扱えるようにする https://www.sociomedia.co.jp/9267
21. オブジェクト選択→アクション選択 の操作順序 21 • 「名詞→動詞」の順序を徹底すること • 「動詞→名詞」は現実ではありえない (投げてから石を持つ人はいない) https://www.sociomedia.co.jp/8740 1. オブジェクト選択 2. アクション選択
22. すべてのオブジェクトが互いに協調しながらUIを構成する 22 • リアル世界の法則をメタファーに、 バーチャル世界への関わり方を 自然に体得できるように演出する • アラン・ケイはこれを 「ユーザーイリュージョン」 と呼んで重要性を説いた https://www.apple.com/jp/macos/big-sur-preview/
23. オブジェクト指向UIが実現すること 23 • 誰でも使える道具 • iPhoneには説明書がない • オブジェクトの反応を見ながら試行錯誤する中で、やりたいことを 実現できる • 自由な操作順序 • モードレス
24. モード 24 • 限られた操作しか行えない状態のこと https://www.sociomedia.co.jp/9094 モードレス = モードから出た状態 モーダル = モードに入った状態
25. ユーザーをモードから解放せよ 25 • 人の心は常に流動的で、刺激や思考に反応して変化する可能性がある • UIがモードを作ると、ユーザーに特定の進路を強要することになる • ユーザーに操作権を与え、主体的にするため、モードレスを徹底すべき
26. タスク指向UIはなぜ避けるべきか 26
27. タスク指向UIの例(ファイル操作) 27 • 動詞→名詞 • 「対象物の選択待ちモード」 が発生する(モーダル) https://www.sociomedia.co.jp/9275
28. タスク指向UIの例(ATM) 28 • 動詞→名詞 • 「最初からやり直してください」は モーダルな証 • 選択肢が多い https://www.aichibank.co.jp/atm/using/guide/
29. タスク指向UIはなぜ避けるべきか 29 • 動詞→名詞 • 「目当て」に対して「どうするか」を考えることこそ、 人が創造性を発揮できる領域 • UIが「やること」を指示するのは、自由を奪い、主体性を削ぐ • モーダル • 「限られた操作しか行えない状態」をUIが作るのは、ユーザーの自由な 行動を制限することになる
30. タスク指向UIはどうして生まれるのか 30 • ビジネス要求やユーザー要求は やりたいことベース • 利用手続きをデザインしようとする (会員登録フロー、購入プロセス) • ユーザー体験のデザインを利用手続 きのデザインと勘違いしている • ユーザー目線から抜け出せていない (ユーザーに寄り添ったつもり)
31. オブジェクト指向UIをデザインするには 31 • ビジネス要求やユーザー要求は やりたいことベース • →要求は鵜呑みにせず、噛み砕いて オブジェクトにする • 利用手続きをデザインしようとする (会員登録フロー、購入プロセス) • →手続きからオブジェクトを抽出し モードレスを徹底する • ユーザー体験のデザインを利用手続 きのデザインと勘違いしている • →良いユーザー体験はユーザーの 自主性から生まれることを認識する • ユーザー目線から抜け出せていない (ユーザーに寄り添ったつもり) • →ユーザーとオブジェクトを 俯瞰する「第三者の目線」に立つ
32. まとめ 32
33. オブジェクト指向UIとは何か 33 • オブジェクトを指向して、ユーザーに主体性を促す • 「名詞→動詞」の順序で「モードレス」を徹底する • 誰でも使える道具の「原理」
34. 次回予告 34
35. @uenitty OOUIの設計プロセス ABEMA weber 勉強会 2020/09/30(予定)

57e8d22493c141fd3c7e7dbe62196c1b?s=128

Ueni

September 16, 2020
Tweet

Transcript

  1. @uenitty ΦϒδΣΫτࢦ޲UIͱ͸Կ͔ ABEMA weber ษڧձ 2020/09/16

  2. ࢀߟॻ 2 • ಺༰͸͔ͳΓল͍͍ͯ·͢ • ࣗ෼ͷղऍͰ࠶ߏ੒͍ͯ͠·͢ • ؒҧ͍͕͋ͬͨΒ͝ΊΜͳ͍͞ • ͥͻຊΛಡΜͰ͍ͩ͘͞ʂ

    https://www.sociomedia.co.jp/10046
  3. ͦͷଞͷࢀߟࢿྉ 3 https://youtu.be/2jqXiAhqCm0?t=4097 ! ! https://developer.apple.com/videos/play/wwdc2018/803/

  4. ࠓճͷ಺༰ 4 • Ϣʔβʔͷओମੑ • UIͱ͸Կ͔ • ΦϒδΣΫτࢦ޲UIͱ͸Կ͔ • λεΫࢦ޲UI͸ͳͥආ͚Δ΂͖͔

  5. Ϣʔβʔͷओମੑ 5

  6. Ϗδωεͷ໨౰ͯ 6 • Ϗδωεతʹ͸ʮϢʔβʔ͔ΒۚΛר্͖͛ΒΕΕ͹Α͍ʯ͸ͣ... Ϣʔβʔ UI • ʮ࢖͍΍͍͢UIʯΛٻΊΔͷ͸ɺͳͥʁ • ࡞Γखͷࣗݾຬ଍ʁ

  7. ແཧ΍Γߦಈͤͯ͞΋ɺܧଓͯ͘͠Εͳ͍ 7 • ࣗ༝͕ͳ͍ͷ͸ɺϢʔβʔʹͱͬͯετϨεͰ͔͠ͳ͍ • ैଐత • ໡໨త • ҉໧త

    • ར༻΍ࢧ࣋ͷܧଓʹ͸ʮϢʔβʔͷओମੑʯ͕ඞཁෆՄܽ
  8. ࣗ༝͔ͩΒɺओମతʹͳΕΔ 8 • ࢖͍΍͍͢UI͸ɺ • ࣗ༝౓͕ߴ͍ • ૑଄తʹͳΕΔ • ࢖ָ͍͍ͬͯͯ͠

    • ࢲ͕ͨͪٻΊ͍ͯΔ΋ͷ͸ɺ ʮ࢖͍΍͍͢UIʯ=ʮϢʔβʔʹओಋݖΛ༩͑ɺओମੑΛଅ͢UIʯ
  9. Կ΋ͳ͠ʹओମతʹ͸ͳΕͳ͍ 9 • Ϣʔβʔ͸ʮ໨౰ͯʯΛ໨ͷ౰ͨΓʹͯ͠ɺओମతʹͳΔ • ओମੑΛଅ͢ʹ͸ɺ·ͣʮ໨౰ͯʯΛϢʔβʔʹݟͤΔ͜ͱ͔Β࢝ΊΔ • ʮओମʯੑΛଅͨ͢Ίʹʮ٬ମʯʹண໨͢΂͖ͳͷ͕ϙΠϯτ Photo by

    Rowan Heuvel on Unsplash ओମ = Ϣʔβʔ ٬ମ = αʔϏεͷ಺༰ɺϢʔβʔͷ໨౰ͯ ❤
  10. ओମੑΛଅ͢ʮ΋ͷʯ 10 • ʮ٬ମʯʮ໨౰ͯʯʮ΋ͷʯ͸ӳޠͰʮObjectʯ • ٬ମʹண໨ͤΑ = ΦϒδΣΫτΛࢦ޲ͤΑ • ΦϒδΣΫτࢦ޲ͱ͸ɺ

    ʮ໨౰ͯʯΛ࣠ʹɺϢʔβʔʹʮओମੑʯΛଅ͢͜ͱ
  11. UIͱ͸Կ͔ 11

  12. UI = ϢʔβʔΠϯλʔϑΣʔε 12 • ಓ۩Λ࢖༻͢Δࡍʹ৮ΕΔ෦෼ͷ͜ͱ Photo by Kate Hliznitsova

    on Unsplash
  13. ҜࢠͷUI 13 • ࠲Δͱ͖ʹ৮ΕΔɺ࠲໘ • ࣋ͬͯӡͿͱ͖ʹ৮ΕΔɺ٭΍എ΋ͨΕ Photo by Sam Moqadam

    on Unsplash
  14. ৘ใγεςϜͷUI 14 • ΩʔϘʔυ΍Ϛ΢εͳͲͷϋʔυ΢ΣΞ • ιϑτ΢ΣΞʹΑͬͯ σΟεϓϨΠʹݱ͞ΕΔʮܗʯ Photo by John

    Schnobrich on Unsplash ৘ใγεςϜͰ͸ɺUI͕ͦ͜ɺ ͦͷಓ۩͕ԿͰ͋Δ͔ͱ͍͏Ϣʔβʔͷೝ஌Λ࡞Δɺ࠷େͷઃܭςʔϚ
  15. ಓ۩ੑΛݟ͍ͩ͢ɺਓͷओମੑ 15 • ਓྨ͸ͨͩͷੴΛɺੴثʹͨ͠ • ੴثͱ͍͏ಓ۩Λɺ ·ΔͰࣗ෼ͷ਎ମͷҰ෦ͷΑ͏ʹૢͬͨ • ૉखͰ͸ઓ͑ͳ͍֫෺ʹཱͪ޲͔͑ͨ •

    ৺ͷԆ௕ͷΑ͏ʹײ͡ΒΕΔಓ۩͕ ਓΛओମతʹ͖ͯͨ͠ ࠷ݹͷੴثʢPHOTOGRAPH BY SONIA HARMAND, NATIONAL GEOGRAPHIC CREATIVEʣ
  16. ಓ۩Λ৺ͷԆ௕ͷΑ͏ʹײ͡ΒΕΔ͔ 16 • iPhone͕ఏڙ͢Δͷ͸ʮ໨౰ͯʯ=ʮΦϒδΣΫτʯʹ௚઀৮ΕΔମݧ • ओମੑ͕ۃ·ͬͨͱ͖ɺಓ۩ͷଘࡏ͸ҙ͔ࣝΒফ͑Δ https://developer.apple.com/videos/play/wwdc2018/803/

  17. ΦϒδΣΫτࢦ޲UIͱ͸Կ͔ 17

  18. ΦϒδΣΫτࢦ޲UIͷݪଇ 18 • ΦϒδΣΫτΛ஌֮Ͱ͖௚઀తʹಇ͖͔͚ΒΕΔ • ΦϒδΣΫτ͸ࣗ਎ͷੑ࣭ͱঢ়ଶΛମݱ͢Δ • ΦϒδΣΫτબ୒→ΞΫγϣϯબ୒ ͷૢ࡞ॱং •

    ͢΂ͯͷΦϒδΣΫτ͕ޓ͍ʹڠௐ͠ͳ͕ΒUIΛߏ੒͢Δ
  19. ΦϒδΣΫτΛ஌֮Ͱ͖௚઀తʹಇ͖͔͚ΒΕΔ 19 • ର৅෺͕ݟ͓͑ͯΓɺʮԿΛͰ͖Δ͔ʯͷώϯτ͕ಘΒΕΔ • ৮Δ͜ͱ͕Ͱ͖ɺର৅෺ͷมԽͱͯ͠࡞ۀ݁Ռ͕ೝࣝͰ͖Δ ! "

  20. ΦϒδΣΫτ͸ࣗ਎ͷੑ࣭ͱঢ়ଶΛମݱ͢Δ 20 • Ϣʔβʔ͕ঢ়گΛ೺Ѳ͠ɺ࣍ʹߦ͏΂͖ૢ࡞Λߟ͑ΒΕΔΑ͏ʹ͢Δ • ϢʔβʔͷΞΫγϣϯʹରͯ͠ϦΞϧλΠϜʹ൓ԠΛฦ͢ • ϦΞϧੈքͷ෺ཧੑΛ࣋ͬͨʮ΋ͷʯͱಉ͡ײ֮Ͱѻ͑ΔΑ͏ʹ͢Δ https://www.sociomedia.co.jp/9267

  21. ΦϒδΣΫτબ୒→ΞΫγϣϯબ୒ ͷૢ࡞ॱং 21 • ʮ໊ࢺ→ಈࢺʯͷॱংΛపఈ͢Δ͜ͱ • ʮಈࢺ→໊ࢺʯ͸ݱ࣮Ͱ͸͋Γ͑ͳ͍ ʢ౤͔͛ͯΒੴΛ࣋ͭਓ͸͍ͳ͍ʣ https://www.sociomedia.co.jp/8740 1.

    ΦϒδΣΫτબ୒ 2. ΞΫγϣϯબ୒
  22. ͢΂ͯͷΦϒδΣΫτ͕ޓ͍ʹڠௐ͠ͳ͕ΒUIΛߏ੒͢Δ 22 • ϦΞϧੈքͷ๏ଇΛϝλϑΝʔʹɺ όʔνϟϧੈք΁ͷؔΘΓํΛ ࣗવʹମಘͰ͖ΔΑ͏ʹԋग़͢Δ • ΞϥϯɾέΠ͸͜ΕΛ ʮϢʔβʔΠϦϡʔδϣϯʯ ͱݺΜͰॏཁੑΛઆ͍ͨ

    https://www.apple.com/jp/macos/big-sur-preview/
  23. ΦϒδΣΫτࢦ޲UI͕࣮ݱ͢Δ͜ͱ 23 • ୭Ͱ΋࢖͑Δಓ۩ • iPhoneʹ͸આ໌ॻ͕ͳ͍ • ΦϒδΣΫτͷ൓ԠΛݟͳ͕Βࢼߦࡨޡ͢ΔதͰɺ΍Γ͍ͨ͜ͱΛ ࣮ݱͰ͖Δ •

    ࣗ༝ͳૢ࡞ॱং • ϞʔυϨε
  24. Ϟʔυ 24 • ݶΒΕͨૢ࡞͔͠ߦ͑ͳ͍ঢ়ଶͷ͜ͱ https://www.sociomedia.co.jp/9094 ϞʔυϨε = Ϟʔυ͔Βग़ͨঢ়ଶ Ϟʔμϧ =

    Ϟʔυʹೖͬͨঢ়ଶ
  25. ϢʔβʔΛϞʔυ͔Βղ์ͤΑ 25 • ਓͷ৺͸ৗʹྲྀಈతͰɺܹࢗ΍ࢥߟʹ൓Ԡͯ͠มԽ͢ΔՄೳੑ͕͋Δ • UI͕ϞʔυΛ࡞ΔͱɺϢʔβʔʹಛఆͷਐ࿏Λڧཁ͢Δ͜ͱʹͳΔ • Ϣʔβʔʹૢ࡞ݖΛ༩͑ɺओମతʹ͢ΔͨΊɺϞʔυϨεΛపఈ͢΂͖

  26. λεΫࢦ޲UI͸ͳͥආ͚Δ΂͖͔ 26

  27. λεΫࢦ޲UIͷྫʢϑΝΠϧૢ࡞ʣ 27 • ಈࢺ→໊ࢺ • ʮର৅෺ͷબ୒଴ͪϞʔυʯ ͕ൃੜ͢ΔʢϞʔμϧʣ https://www.sociomedia.co.jp/9275

  28. λεΫࢦ޲UIͷྫʢATMʣ 28 • ಈࢺ→໊ࢺ • ʮ࠷ॳ͔Β΍Γ௚͍ͯͩ͘͠͞ʯ͸ Ϟʔμϧͳূ • બ୒ࢶ͕ଟ͍ https://www.aichibank.co.jp/atm/using/guide/

  29. λεΫࢦ޲UI͸ͳͥආ͚Δ΂͖͔ 29 • ಈࢺ→໊ࢺ • ʮ໨౰ͯʯʹରͯ͠ʮͲ͏͢Δ͔ʯΛߟ͑Δ͜ͱͦ͜ɺ ਓ͕૑଄ੑΛൃشͰ͖ΔྖҬ • UI͕ʮ΍Δ͜ͱʯΛࢦࣔ͢Δͷ͸ɺࣗ༝Λୣ͍ɺओମੑΛ࡟͙ •

    Ϟʔμϧ • ʮݶΒΕͨૢ࡞͔͠ߦ͑ͳ͍ঢ়ଶʯΛUI͕࡞Δͷ͸ɺϢʔβʔͷࣗ༝ͳ ߦಈΛ੍ݶ͢Δ͜ͱʹͳΔ
  30. λεΫࢦ޲UI͸Ͳ͏ͯ͠ੜ·ΕΔͷ͔ 30 • Ϗδωεཁٻ΍Ϣʔβʔཁٻ͸ ΍Γ͍ͨ͜ͱϕʔε • ར༻खଓ͖ΛσβΠϯ͠Α͏ͱ͢Δ ʢձһొ࿥ϑϩʔɺߪೖϓϩηεʣ • ϢʔβʔମݧͷσβΠϯΛར༻खଓ

    ͖ͷσβΠϯͱצҧ͍͍ͯ͠Δ • Ϣʔβʔ໨ઢ͔Βൈ͚ग़͍ͤͯͳ͍ ʢϢʔβʔʹدΓఴͬͨͭ΋Γʣ
  31. ΦϒδΣΫτࢦ޲UIΛσβΠϯ͢Δʹ͸ 31 • Ϗδωεཁٻ΍Ϣʔβʔཁٻ͸ ΍Γ͍ͨ͜ͱϕʔε • →ཁٻ͸ӏವΈʹͤͣɺטΈࡅ͍ͯ ΦϒδΣΫτʹ͢Δ • ར༻खଓ͖ΛσβΠϯ͠Α͏ͱ͢Δ

    ʢձһొ࿥ϑϩʔɺߪೖϓϩηεʣ • →खଓ͖͔ΒΦϒδΣΫτΛநग़͠ ϞʔυϨεΛపఈ͢Δ • ϢʔβʔମݧͷσβΠϯΛར༻खଓ ͖ͷσβΠϯͱצҧ͍͍ͯ͠Δ • →ྑ͍Ϣʔβʔମݧ͸Ϣʔβʔͷ ࣗओੑ͔Βੜ·ΕΔ͜ͱΛೝࣝ͢Δ • Ϣʔβʔ໨ઢ͔Βൈ͚ग़͍ͤͯͳ͍ ʢϢʔβʔʹدΓఴͬͨͭ΋Γʣ • →ϢʔβʔͱΦϒδΣΫτΛ ၆ᛌ͢Δʮୈࡾऀͷ໨ઢʯʹཱͭ
  32. ·ͱΊ 32

  33. ΦϒδΣΫτࢦ޲UIͱ͸Կ͔ 33 • ΦϒδΣΫτΛࢦ޲ͯ͠ɺϢʔβʔʹओମੑΛଅ͢ • ʮ໊ࢺ→ಈࢺʯͷॱংͰʮϞʔυϨεʯΛపఈ͢Δ • ୭Ͱ΋࢖͑Δಓ۩ͷʮݪཧʯ

  34. ࣍ճ༧ࠂ 34

  35. @uenitty OOUIͷઃܭϓϩηε ABEMA weber ษڧձ 2020/09/30ʢ༧ఆʣ