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をオブジェクト指向 にする方法など詳細情報は、書籍や動画がおすすめ
uenitty
fujiwara3
yamaguchitk333
righttouch
yokawasa
chanyou0311
nishiuma
fujisawaryohei
rssytems
fnifni
.png){kind=icon}
pharma_x_tech
z63d
rayuron
lara
afnizarnur
skipperchong
orderedlist
brettharned
lauravandoore
mclloyd
addyosmani
gr2m
panda_program
kevinliebholz
tammielis
