非デザイナーのフロントエンドエンジニアがOOUIを考える

3/24(日)に開催された、Object-Oriented Conference 2024(OOC2024)のTrack D(15:00〜)トークセッションの資料です。
https://ooc.dev/2024/
https://fortee.jp/oocon-2024/proposal/5565aea9-fcdc-4122-8b03-febb5dd52cae

Transcript

1. Object-Oriented Conference 2024 0yu@yud0uhu 非デザイナーのフロントエンドエンジニアが OOUIを考える
2. 0yu(おゆ) 5 合同会社DMM.com 動画配信開発部 23$ 5 Webフロントエンドエンジニ 5 猫と甘いものと映画が好き 自己紹介 @yud0uhu @yud0uhu
3. 01 OOUI(オブジェクト指向UI)とは何か 02 タスク指向UIとはなにか 03 タスク指向を改善する 04 実践 もくじ
4. オブジェクト指向とは何か 書籍の紹介 オブジェクト指向UIデザイン――使いやすいソフトウェアの原` 0 ソシオメディア株式会社,上野学,藤井幸多 著,上野学 監修
5. 前提
6. 01 OOUI(オブジェクト指向UI)とは何か
7. オブジェクト指向とは何か OOUI(オブジェクト指向UI)とは何か q オブジェクト(もの,名詞)を起点に設計されたUIのこb q まずオブジェクト(もの)を選び、次にオブジェクト(もの)に対するアクションを選ぶ りんご 齧る
8. オブジェクト指向とは何か OOUI(オブジェクト指向UI)とは何か q オブジェクト(もの,名詞)を起点に設計されたUIのこb q まずオブジェクト(もの)を選び、次にオブジェクト(もの)に対するアクションを選ぶ 名詞 なにを 動詞 どのように
9. オブジェクト指向とは何か オブジェクトとは何か アプリケーションが扱う情報オブジェクト ユーザーが操作をするときの対象物 GUIはオブジェクト指向UIの原則をグラフィックによって適用したもの
10. オブジェクト指向UIとはなにか GUIはオブジェクト指向UI € GUIでは、コンピューターを使った作業に必要な概念がオブジェクト化されていC € ウィンドウ、画像、文字、アイコン、ファイル、フォルダ... etc
11. オブジェクト指向UIとはなにか オブジェクト指向UIの原則 ’ オブジェクトを知覚でき直接的に働きかけv ’ オブジェクトは自身の性質と状態を体現すv ’ オブジェクト選択→アクション選択の操作準備(名詞→動詞の順序8 ’ すべてのオブジェクトが互いに協調しながらUIを構成する
12. オブジェクト指向UIとはなにか オブジェクト指向UIの原則 オブジェクトを知覚でき直接的に働きかける
13. オブジェクト指向UIとはなにか GUIはオブジェクト指向UI オブジェクトは自身の性質と状態を体現する ダブルクリックで選択する
14. オブジェクト指向UIとはなにか GUIはオブジェクト指向UI オブジェクトは自身の性質と状態を体現する ダブルクリックで選択する クリック長押しでドラッグする
15. オブジェクト指向UIとはなにか GUIはオブジェクト指向UI オブジェクトは自身の性質と状態を体現する ダブルクリックで選択する クリック長押しでドラッグする 右クリックでプロパティを出す
16. オブジェクト指向UIとはなにか GUIはオブジェクト指向UI ユーザーはオブジェクトを見て、それが何であるか、どんな状態にあるかを把握する ダブルクリックで選択する クリック長押しでドラッグする 右クリックでプロパティを出す 作業の進捗を視覚的に理解し、次に行うべき操作を判断できる状態が提供されている
17. オブジェクト指向UIとはなにか GUIはオブジェクト指向UI すべてのオブジェクトが互いに協調しながらUIを構成する
18. 02 タスク指向UIとはなにか
19. タスク指向UIとはなにか タスク指向UI タスク指向UIとB @ 手続きやタスク(やること,動詞)を起点に設計されたUIのこE @ アクション(何をするか)を先に選ばせるのがタスク指向UI 動詞 齧る 名詞 りんご
20. タスク指向UIとはなにか CLIはタスク指向UI h CLIは「動詞→名詞」の順U h コマンド操作起点のタスク指A h 操作モデルがコンピューターへの命令体系として設計されている
21. タスク指向UIとはなにか 結論 f オブジェクト指向UIは創造的なUIの設計に向いてい6 f ex) MacのGUI、トークアプリ、ショッピングサイ' f タスク指向UIは定型的なUIの設計に向いてい6 f ex) CLI、ATM
22. 補足：モーダルとモードレス
23. モーダルとモードレス モーダルとモードレス T タスク指向UIはモーダル（モードがある% T 特定の状況に依存した機能制限がある状Q T オブジェクト指向UIはモードレス（モードがない% T モードが限定されず、状況に依存した機能制限のない状態
24. モーダルとモードレス モーダルとモーダレス モードレス モーダル 最初に選択肢の中から目的地を選ぶ 目的地を決めずに乗ることができる
25. 身近なUIデザインの例
26. 身近なUIデザインの例 自動販売機はタスク指向UI Q 購入の意思表示は「お金を入れる→商品選択6 Q 購入をやめたくなったら返金レバーを押す必要がある
27. 身近なUIデザインの例 電子マネー対応式自動販売機はオブジェクト指向UI y 購入の意思表示は「料金の支払い」のみに集e y 先に商品ボタンを押してもいいし、先にお金を入れてもいp y 商品を選んでから購入をやめたくなったら、単にそこを立ち去ればいい
28. 身近なUIデザインの例 オープンワールド型のゲームデザインはオブジェクト指向的 ゲームはモードレスなのか？(https://atochotto.com/1690)
29. 身近なUIデザインの例 オープンワールド型のゲームデザイン ゲームはモードレスなのか？(https://atochotto.com/1690)
30. 身近なUIデザインの例 タスク指向的なゲームデザイン ゲームはモードレスなのか？(https://atochotto.com/1690)
31. 身近なUIデザインの例 ユーザーの利用状況に合わせてUIデザインを使い分けている例 オブジェクト指向UI（OOUI）デザインと、タスク指向UIをかけ合わせたデザインの最適解｜セブ ンデックス(https://sevendex.com/post/3676/)
32. 03 タスク指向UIを改善する
33. タスク指向UIを改善する タスク指向UIのデリバリー注文アプリ メニュー 注文する 店舗検索 デリバリー注文 お届け先 住所 ただいまのお届け時間 30分 今すぐ配達 配達予約 デリバリー注文 お客様情報 氏名 電話 確認画面へ デリバリー注文 お届け先確認 氏名 XXXX XXXX 電話 XXX-XXXX-XXXX 住所 XXXX XXXXXXXX XXX XXXXXXXX XXXXX 商品選択へ デリバリー注文 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000〜 10〜25 分 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000〜 10〜25 分 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000〜 10〜25 分 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000 合計金額 0円 デリバリー注文
34. タスク指向UIを改善する タスク指向UIのデリバリー注文アプリ メニュー 注文する 店舗検索 デリバリー注文 お届け先 住所 ただいまのお届け時間 30分 今すぐ配達 配達予約 デリバリー注文 お客様情報 氏名 電話 確認画面へ デリバリー注文 お届け先確認 氏名 XXXX XXXX 電話 XXX-XXXX-XXXX 住所 XXXX XXXXXXXX XXX XXXXXXXX XXXXX 商品選択へ デリバリー注文 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000〜 10〜25 分 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000〜 10〜25 分 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000〜 10〜25 分 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000 合計金額 0円 デリバリー注文
35. タスク指向UIを改善する タスク指向UIのデリバリー注文アプリ メニュー 注文する 店舗検索 デリバリー注文 お届け先 住所 ただいまのお届け時間 30分 今すぐ配達 配達予約 デリバリー注文 お客様情報 氏名 電話 確認画面へ デリバリー注文 お届け先確認 氏名 XXXX XXXX 電話 XXX-XXXX-XXXX 住所 XXXX XXXXXXXX XXX XXXXXXXX XXXXX 商品選択へ デリバリー注文 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000〜 10〜25 分 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000〜 10〜25 分 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000〜 10〜25 分 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000 合計金額 0円 デリバリー注文
36. タスク指向UIを改善する タスク指向UIのデリバリー注文アプリ メニュー 注文する 店舗検索 デリバリー注文 お届け先 住所 ただいまのお届け時間 30分 今すぐ配達 配達予約 デリバリー注文 お客様情報 氏名 電話 確認画面へ デリバリー注文 お届け先確認 氏名 XXXX XXXX 電話 XXX-XXXX-XXXX 住所 XXXX XXXXXXXX XXX XXXXXXXX XXXXX 商品選択へ デリバリー注文 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000〜 10〜25 分 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000〜 10〜25 分 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000〜 10〜25 分 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000 合計金額 0円 デリバリー注文
37. タスク指向UIを改善する タスク指向UIのデリバリー注文アプリ メニュー 注文する 店舗検索 デリバリー注文 お届け先 住所 ただいまのお届け時間 30分 今すぐ配達 配達予約 デリバリー注文 お客様情報 氏名 電話 確認画面へ デリバリー注文 お届け先確認 氏名 XXXX XXXX 電話 XXX-XXXX-XXXX 住所 XXXX XXXXXXXX XXX XXXXXXXX XXXXX 商品選択へ デリバリー注文 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000〜 10〜25 分 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000〜 10〜25 分 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000〜 10〜25 分 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000 合計金額 0円 デリバリー注文
38. タスク指向UIを改善する タスク指向UIのデリバリー注文アプリ メニュー 注文する 店舗検索 デリバリー注文 お届け先 住所 ただいまのお届け時間 30分 今すぐ配達 配達予約 デリバリー注文 お客様情報 氏名 電話 確認画面へ デリバリー注文 お届け先確認 氏名 XXXX XXXX 電話 XXX-XXXX-XXXX 住所 XXXX XXXXXXXX XXX XXXXXXXX XXXXX 商品選択へ デリバリー注文 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000〜 10〜25 分 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000〜 10〜25 分 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000〜 10〜25 分 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000 合計金額 0円 デリバリー注文 選択が本当に正しいのかわからないまま先へ進まなければならない状況 「情報なき合意（アラン・クーパー『コンピュータは、むずかしすぎて使えない』）」
39. タスク指向UIを改善する オブジェクト指向UIによる改善例 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000〜 10〜25 分 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000〜 10〜25 分 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000〜 10〜25 分 毎日食べたい王道の味！ 定番チキンカレーライスセット ￥1,000 合計金額 0円 デリバリー注文 ユーザーはデリバリーを注文するのにアプリを使っているのだから トップ画面でわざわざ「やること」を選ばせる必要はない
40. タスク指向UIを改善する なぜタスク指向UIになってしまうのか？ 9 やることベースに機能要件を定義するかw 9 「体験をデザインする」が「順番通りにやるだけ」になってしまっていd 9 タスクを手順化して画面フローに落とし込むだけだと、タスク指向UIに陥りがち
41. タスク指向UIを改善する オブジェクト指向UIを設計するには ️️タスクに必要な情報をオブジェクトとして抽出する ユーザーが実行するアクションとその順序を自由に決定し、目的を達成できる状態を作る
42. 04 実践
43. 実践 オブジェクトを抽出する 事前リサーチや要求分析から タスクを洗い出す モデル インタラクション プレゼンテーション オブジェクトの抽出 ビューとナビゲーションの検討 レイアウトパターンの適用
44. 実践 名詞を抽出する 機械的に抜き出すのではなく を考えて 抜き出す ユーザーの関心の対象となる 概念(もの・こと) モデル インタラクション プレゼンテーション オブジェクトの抽出 ビューとナビゲーションの検討 レイアウトパターンの適用
45. 実践 名詞とそれらの関係を抽出する タスクごとに線で繋いでいく モデル インタラクション プレゼンテーション オブジェクトの抽出 ビューとナビゲーションの検討 レイアウトパターンの適用 モデル インタラクション プレゼンテーション オブジェクトの抽出 ビューとナビゲーションの検討 レイアウトパターンの適用
46. 実践 名詞を汎化し、粒度を揃える 複数の名詞から共通項を見つけ、 一つの名詞に共通化できるか考える モデル インタラクション プレゼンテーション オブジェクトの抽出 ビューとナビゲーションの検討 レイアウトパターンの適用
47. 実践 メインオブジェクトを特定する 名詞の関係性をつなげて 優先度の高いオブジェクトだけを抽出 モデル インタラクション プレゼンテーション オブジェクトの抽出 ビューとナビゲーションの検討 レイアウトパターンの適用
48. 実践 ビューとナビゲーションの検討 コレクションビューとシングルビューを用意し 呼び出し関係を整理 思考の起点になるように考える モデル インタラクション プレゼンテーション オブジェクトの抽出 ビューとナビゲーションの検討 レイアウトパターンの適用
49. 実践 レイアウトパターンの適用 店舗 会場 店舗 会場 店舗 会場 A会場 B会場 ソラリス [A会場] 53m / ブース2 156 156 2 ソラリス [A会場] 53m / ブース2 156 156 2 ソラリス [A会場] 53m / ブース2 156 156 2 セブン [B会場] 60m / ブース2 156 156 2 セブン [B会場] 60m / ブース2 156 156 2 セブン [B会場] 60m / ブース2 156 156 2 チェンマイ [A会場] 150m / ブース3 156 156 2 チェンマイ [A会場] 150m / ブース3 156 156 2 チェンマイ [A会場] 150m / ブース3 156 156 2 カルデラ カルデラ コレクション 店舗
50. 実践 レイアウトパターンの適用 シングル 店舗 店舗 会場 店舗 会場 店舗 会場 カルデラ A会場 53m / ブース2 ショップ紹介 Edit Delete 000-1234-5678 サンプルサンプルサンプルサンプルサンプルサンプルサンプ ルサンプルサンプルサンプルサンプルサンプルサンプルサン プル メニュー ※当日の状況により2Fレストラン 「シースケープ テラス・ダイニング」もしくは、「グリロジー バー&グリル」での ご案内となります。 ・パンの盛り合わせ ・ホッケのタルタル　 アスパラガス　 キャロット　 白味噌バジルソース ・鱈のポテト包み焼き　 ハーブバター 　 または　 北海道産スペアーリブのジンギスカンソース ・北海道産生クリーム　 ピスタチオのヌガーグラッセ　 イチゴソース ・コーヒーまたは紅茶 Edit Delete
51. 実践 レイアウトパターンの適用 コレクション 会場 店舗 会場 店舗 会場 店舗 会場 A お茶の水ロード B お茶の水ガーデン
52. 実践 非デザイナーがワークを実践してみて D “直感的なUI”は理論的な分析・モデリングができg D “思考をデザインする”という感覚を持てI H 文字のみだと、手続き的に考えが‚ D 図にすることでモードレスに考えやすくなg D レイアウトパターンに適用しにくいときはオブジェクトの抽出に立ち戻るこ™ D 何度もブラッシュアップすることでUIの違和感が消えていく
53. 実践 思考をデザインするということ s 『良いデザインとは、ユーザーに合わせたものではなく、ユーザが自らを合わせられ るものである8 s 箸やバイオリン、自転車なY s 非デザイナーであっても、身の回りのUIのレイアウトパターンから思考をリバースエ ンジニアリングしてみるのは学びがありそう