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（予定）
uenitty
miichan
qt_luigi
champ
.jpg){kind=avatar}
oshanqq
yuj1osm
minorun365
tsukuha
syossan27
.png){kind=icon}
pharma_x_tech
shimacos
bgpat
yamaguchitk333
hatefulcrawdad
malarkey
tammyeverts
addyosmani
lauravandoore
destraynor
stephaniewalter
speakerdeck
mongodb
zakiyama
kneath
