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

by yud0uhu

Slide 1

Slide 1 text

Object-Oriented Conference 2024 0yu@yud0uhu 非デザイナーのフロントエンドエンジニアが OOUIを考える

Slide 2

Slide 2 text

0yu(おゆ) 5 合同会社DMM.com 動画配信開発部 23$ 5 Webフロントエンドエンジニ 5 猫と甘いものと映画が好き自己紹介 @yud0uhu @yud0uhu

Slide 3

Slide 3 text

01 OOUI(オブジェクト指向UI)とは何か 02 タスク指向UIとはなにか 03 タスク指向を改善する 04 実践もくじ

Slide 4

Slide 4 text

オブジェクト指向とは何か書籍の紹介オブジェクト指向UIデザイン――使いやすいソフトウェアの原` 0 ソシオメディア株式会社,上野学,藤井幸多著,上野学監修

Slide 5

Slide 5 text

前提

Slide 6

Slide 6 text

01 OOUI(オブジェクト指向UI)とは何か

Slide 7

Slide 7 text

オブジェクト指向とは何か OOUI(オブジェクト指向UI)とは何か q オブジェクト(もの,名詞)を起点に設計されたUIのこb q まずオブジェクト(もの)を選び、次にオブジェクト(もの)に対するアクションを選ぶりんご齧る

Slide 8

Slide 8 text

オブジェクト指向とは何か OOUI(オブジェクト指向UI)とは何か q オブジェクト(もの,名詞)を起点に設計されたUIのこb q まずオブジェクト(もの)を選び、次にオブジェクト(もの)に対するアクションを選ぶ名詞なにを動詞どのように

Slide 9

Slide 9 text

オブジェクト指向とは何かオブジェクトとは何かアプリケーションが扱う情報オブジェクトユーザーが操作をするときの対象物 GUIはオブジェクト指向UIの原則をグラフィックによって適用したもの

Slide 10

Slide 10 text

オブジェクト指向UIとはなにか GUIはオブジェクト指向UI GUIでは、コンピューターを使った作業に必要な概念がオブジェクト化されていC ウィンドウ、画像、文字、アイコン、ファイル、フォルダ... etc

Slide 11

Slide 11 text

オブジェクト指向UIとはなにかオブジェクト指向UIの原則オブジェクトを知覚でき直接的に働きかけv オブジェクトは自身の性質と状態を体現すv オブジェクト選択→アクション選択の操作準備(名詞→動詞の順序8 すべてのオブジェクトが互いに協調しながらUIを構成する

Slide 12

Slide 12 text

オブジェクト指向UIとはなにかオブジェクト指向UIの原則オブジェクトを知覚でき直接的に働きかける

Slide 13

Slide 13 text

オブジェクト指向UIとはなにか GUIはオブジェクト指向UI オブジェクトは自身の性質と状態を体現するダブルクリックで選択する

Slide 14

Slide 14 text

オブジェクト指向UIとはなにか GUIはオブジェクト指向UI オブジェクトは自身の性質と状態を体現するダブルクリックで選択するクリック長押しでドラッグする

Slide 15

Slide 15 text

オブジェクト指向UIとはなにか GUIはオブジェクト指向UI オブジェクトは自身の性質と状態を体現するダブルクリックで選択するクリック長押しでドラッグする右クリックでプロパティを出す

Slide 16

Slide 16 text

オブジェクト指向UIとはなにか GUIはオブジェクト指向UI ユーザーはオブジェクトを見て、それが何であるか、どんな状態にあるかを把握するダブルクリックで選択するクリック長押しでドラッグする右クリックでプロパティを出す作業の進捗を視覚的に理解し、次に行うべき操作を判断できる状態が提供されている

Slide 17

Slide 17 text

オブジェクト指向UIとはなにか GUIはオブジェクト指向UI すべてのオブジェクトが互いに協調しながらUIを構成する

Slide 18

Slide 18 text

02 タスク指向UIとはなにか

Slide 19

Slide 19 text

タスク指向UIとはなにかタスク指向UI タスク指向UIとB @ 手続きやタスク(やること,動詞)を起点に設計されたUIのこE @ アクション(何をするか)を先に選ばせるのがタスク指向UI 動詞齧る名詞りんご

Slide 20

Slide 20 text

タスク指向UIとはなにか CLIはタスク指向UI h CLIは「動詞→名詞」の順U h コマンド操作起点のタスク指A h 操作モデルがコンピューターへの命令体系として設計されている

Slide 21

Slide 21 text

タスク指向UIとはなにか結論 f オブジェクト指向UIは創造的なUIの設計に向いてい6 f ex) MacのGUI、トークアプリ、ショッピングサイ' f タスク指向UIは定型的なUIの設計に向いてい6 f ex) CLI、ATM

Slide 22

Slide 22 text

補足：モーダルとモードレス

Slide 23

Slide 23 text

モーダルとモードレスモーダルとモードレス T タスク指向UIはモーダル（モードがある% T 特定の状況に依存した機能制限がある状Q T オブジェクト指向UIはモードレス（モードがない% T モードが限定されず、状況に依存した機能制限のない状態

Slide 24

Slide 24 text

モーダルとモードレスモーダルとモーダレスモードレスモーダル最初に選択肢の中から目的地を選ぶ目的地を決めずに乗ることができる

Slide 25

Slide 25 text

身近なUIデザインの例

Slide 26

Slide 26 text

身近なUIデザインの例自動販売機はタスク指向UI Q 購入の意思表示は「お金を入れる→商品選択6 Q 購入をやめたくなったら返金レバーを押す必要がある

Slide 27

Slide 27 text

身近なUIデザインの例電子マネー対応式自動販売機はオブジェクト指向UI y 購入の意思表示は「料金の支払い」のみに集e y 先に商品ボタンを押してもいいし、先にお金を入れてもいp y 商品を選んでから購入をやめたくなったら、単にそこを立ち去ればいい

Slide 28

Slide 28 text

身近なUIデザインの例オープンワールド型のゲームデザインはオブジェクト指向的ゲームはモードレスなのか？(https://atochotto.com/1690)

Slide 29

Slide 29 text

身近なUIデザインの例オープンワールド型のゲームデザインゲームはモードレスなのか？(https://atochotto.com/1690)

Slide 30

Slide 30 text

身近なUIデザインの例タスク指向的なゲームデザインゲームはモードレスなのか？(https://atochotto.com/1690)

Slide 31

Slide 31 text

身近なUIデザインの例ユーザーの利用状況に合わせてUIデザインを使い分けている例オブジェクト指向UI（OOUI）デザインと、タスク指向UIをかけ合わせたデザインの最適解｜セブンデックス(https://sevendex.com/post/3676/)

Slide 32

Slide 32 text

03 タスク指向UIを改善する

Slide 33

Slide 33 text

タスク指向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円デリバリー注文

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

タスク指向UIを改善するオブジェクト指向UIによる改善例毎日食べたい王道の味！定番チキンカレーライスセット￥1,000〜 10〜25 分毎日食べたい王道の味！定番チキンカレーライスセット￥1,000〜 10〜25 分毎日食べたい王道の味！定番チキンカレーライスセット￥1,000〜 10〜25 分毎日食べたい王道の味！定番チキンカレーライスセット￥1,000 合計金額 0円デリバリー注文ユーザーはデリバリーを注文するのにアプリを使っているのだからトップ画面でわざわざ「やること」を選ばせる必要はない

Slide 40

Slide 40 text

タスク指向UIを改善するなぜタスク指向UIになってしまうのか？ 9 やることベースに機能要件を定義するかw 9 「体験をデザインする」が「順番通りにやるだけ」になってしまっていd 9 タスクを手順化して画面フローに落とし込むだけだと、タスク指向UIに陥りがち

Slide 41

Slide 41 text

タスク指向UIを改善するオブジェクト指向UIを設計するには ️️タスクに必要な情報をオブジェクトとして抽出するユーザーが実行するアクションとその順序を自由に決定し、目的を達成できる状態を作る

Slide 42

Slide 42 text

04 実践

Slide 43

Slide 43 text

実践オブジェクトを抽出する事前リサーチや要求分析からタスクを洗い出すモデルインタラクションプレゼンテーションオブジェクトの抽出ビューとナビゲーションの検討レイアウトパターンの適用

Slide 44

Slide 44 text

実践名詞を抽出する機械的に抜き出すのではなくを考えて抜き出すユーザーの関心の対象となる概念(もの・こと) モデルインタラクションプレゼンテーションオブジェクトの抽出ビューとナビゲーションの検討レイアウトパターンの適用

Slide 45

Slide 45 text

実践名詞とそれらの関係を抽出するタスクごとに線で繋いでいくモデルインタラクションプレゼンテーションオブジェクトの抽出ビューとナビゲーションの検討レイアウトパターンの適用モデルインタラクションプレゼンテーションオブジェクトの抽出ビューとナビゲーションの検討レイアウトパターンの適用

Slide 46

Slide 46 text

実践名詞を汎化し、粒度を揃える複数の名詞から共通項を見つけ、一つの名詞に共通化できるか考えるモデルインタラクションプレゼンテーションオブジェクトの抽出ビューとナビゲーションの検討レイアウトパターンの適用

Slide 47

Slide 47 text

実践メインオブジェクトを特定する名詞の関係性をつなげて優先度の高いオブジェクトだけを抽出モデルインタラクションプレゼンテーションオブジェクトの抽出ビューとナビゲーションの検討レイアウトパターンの適用

Slide 48

Slide 48 text

実践ビューとナビゲーションの検討コレクションビューとシングルビューを用意し呼び出し関係を整理思考の起点になるように考えるモデルインタラクションプレゼンテーションオブジェクトの抽出ビューとナビゲーションの検討レイアウトパターンの適用

Slide 49

Slide 49 text

実践レイアウトパターンの適用店舗会場店舗会場店舗会場 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 カルデラカルデラコレクション店舗

Slide 50

Slide 50 text

実践レイアウトパターンの適用シングル店舗店舗会場店舗会場店舗会場カルデラ A会場 53m / ブース2 ショップ紹介 Edit Delete 000-1234-5678 サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルメニュー ※当日の状況により2Fレストラン「シースケープテラス・ダイニング」もしくは、「グリロジーバー&グリル」でのご案内となります。・パンの盛り合わせ・ホッケのタルタル　アスパラガス　キャロット　白味噌バジルソース・鱈のポテト包み焼き　ハーブバター　または　北海道産スペアーリブのジンギスカンソース・北海道産生クリーム　ピスタチオのヌガーグラッセ　イチゴソース・コーヒーまたは紅茶 Edit Delete

Slide 51

Slide 51 text

実践レイアウトパターンの適用コレクション会場店舗会場店舗会場店舗会場 A お茶の水ロード B お茶の水ガーデン

Slide 52

Slide 52 text

実践非デザイナーがワークを実践してみて D “直感的なUI”は理論的な分析・モデリングができg D “思考をデザインする”という感覚を持てI H 文字のみだと、手続き的に考えが D 図にすることでモードレスに考えやすくなg D レイアウトパターンに適用しにくいときはオブジェクトの抽出に立ち戻るこ D 何度もブラッシュアップすることでUIの違和感が消えていく

Slide 53

Slide 53 text

実践思考をデザインするということ s 『良いデザインとは、ユーザーに合わせたものではなく、ユーザが自らを合わせられるものである8 s 箸やバイオリン、自転車なY s 非デザイナーであっても、身の回りのUIのレイアウトパターンから思考をリバースエンジニアリングしてみるのは学びがありそう