複雑なUI設計への銀の弾丸 「オブジェクト指向UIデザイン」

【teamLab Study Session ~frontend~ #2 】にてチームラボのフロントエンドエンジニアが登壇用に作成したスライドです。

teamLab Study Session ~frontend~ とは

チームラボのフロントエンド班がチームラボ内で定期的に実施している勉強会を、フロントエンドの技術に興味ある参加者を募集し、オンラインで配信する勉強会です。

https://teamlab.connpass.com/event/373566/

Transcript

1. © teamLab Inc. 複雑なUI設計への銀の弾丸 「オブジェクト指向UIデザイン」 朴木　優斗 チームラボ　パッケージチーム　フロントエンド班
2. © teamLab Inc. 所属｜ 2 自己紹介 2 パッケージチーム フロントエンド班 朴木 優斗 Honoki Yuto ❏ 中途入社３年目 ❏ 趣味はNHKの朝ドラを見ることです ❏ 公認心理師という心理カウンセラーの 国家資格保持者です
3. © teamLab Inc. アジェンダ 1. はじめに 2. 「オブジェクト指向UIデザイン」とは？ 3. 「オブジェクト指向UIデザイン」の進め方は？ 4. 「オブジェクト指向UIデザイン」は銀の弾丸？ 3
4. © teamLab Inc. はじめに 4
5. © teamLab Inc. この発表は「オブジェクト指向UIデザイン ─ 使いやすいソフトウェアの原理」がベースです 5 https://amzn.asia/d/fx2eY52 ❏ 「FEエンジニアにわかりやすい」を 心がけました ❏ 参考箇所には以下のバッジをつけています ❏ 「UI」を「Design＝設計」する話のため グラフィックデザインの話はしません。 （要件〜ワイヤーフレームまで） 書籍 p.XX
6. © teamLab Inc. 「オブジェクト指向UIデザイン」とは？ 6
7. © teamLab Inc. 「オブジェクト指向UIデザイン」とは・・・ 7 「オブジェクト指向 UI」は「タスク指向 UI」と比較するとわかりやすいです オブジェクトを手がかりにUIを設計すること 書籍 p.9
8. © teamLab Inc. 以下の具体的な要件例から「タスク指向UI」と「オブジェクト指向UI」の比較を考えます 8 本を登録できる ようにしたい 登録済みの 本を削除できる ようにしたい 本に感想文 をつけたい 最近登録した 本を一覧で見たい 要件 登録した本を 修正できるように したい 本には 著者名をつけたい この要件から、 UIを２パターン作りました 自宅の本棚が溢れかえり始めたので「自宅本棚管理アプリ」を作ることにしました 本に 自分で作った タグをつけたい
9. © teamLab Inc. 9 実際に作ったUI パターン❶
10. © teamLab Inc. パターン❶では、初期ビューは「本」に対して可能なアクションを一覧にしています 10
11. © teamLab Inc. 修正・削除したい時は「修正・削除を選択」→「本を選択」→「修正・削除を実行」 11 修正する本を選択 削除する本を選択 修正する 削除する 「本を修正する」押下 「本を削除する」押下
12. © teamLab Inc. 12 実際に作ったUI パターン❷
13. © teamLab Inc. パターン❷では、初期ビューは「本」の表紙が一覧になっています 13
14. © teamLab Inc. 修正・削除したい時は「本を選択」→「修正・削除を選択」→「修正・削除を実行」 14 削除する 修正・削除の選択 本を選択 修正する
15. © teamLab Inc. では、どちらが「オブジェクト指向UI」でしょうか？ 15 パターン❶ パターン❷
16. © teamLab Inc. 「パターン❷」が「オブジェクト指向UI」で設計された「自宅本棚管理アプリ」です 16 パターン❶ パターン❷ オブジェクト指向UI タスク指向UI
17. © teamLab Inc. 本 削除する 「本」と「修正・削除」という関係の場合、「タスク指向UI」の方に違和感があるはずです 17 修正する タスク指向UI オブジェクト指向UI 興味の対象は本なのに、 先に操作から・・・？ 削除する 修正する 本 本を手にとって、 それに対する操作ができる 「オブジェクト (本)」を以て「タスク (修正・削除 )」があるという順番が人間にとって直感的
18. © teamLab Inc. 先は極端な例ですが、アプリは意外と「タスク指向UI」になりがちです 18 書籍 p.29 本を登録できる ようにしたい 登録済みの 本を削除できる ようにしたい 本に感想文 をつけたい 本に 自分で作った タグをつけたい 最近登録した 本を一覧で見たい 要件 登録した本を 修正できるように したい 本には 著者名をつけたい 要件はユーザの利用手続きから 考えるので基本動詞だらけに 動詞群をそのまま アプリにしてしまう
19. © teamLab Inc. 改めて「オブジェクト指向UIデザイン」とは・・・ 19 書籍 p.9 オブジェクトを手がかりにUIを設計すること 思想は理解できても、どうやって設計を進めたら良いのでしょうか？
20. © teamLab Inc. 「オブジェクト指向UIデザイン」の進め方は？ 20
21. © teamLab Inc. UI設計を３レイヤーに分け、３STEPで進めます（※厳密な順番はなし） 21 書籍 p.40-45 モデル インタラクション プレゼンテーション 最初の「自宅本棚管理アプリ」の「パターン❷」を例に、それぞれの設計の流れを説明します STEP. 1 STEP. 2 STEP. 3 抽象 具体 ユーザの関心対象 を決める アプリの構造と機能 を決める スタイルやレイアウト を決める
22. © teamLab Inc. 22 モデル インタラクション プレゼンテーション STEP. 1 STEP. 2 STEP. 3
23. © teamLab Inc. STEP.1 「モデル」では、オブジェクトを抽出します 23 書籍 p.42-43 ❏ モデルは「オブジェクト指向UIデザイン」の60%を占めると 言われているほど、重要な工程です ❏ 事前にユーザ調査やタスク分析を行い、業務を理解する必要 があります ❏ 分析した内容を元に、オブジェクトとアクションを抽出し、 図式化します モデル インタラク ション プレゼンテー ション
24. © teamLab Inc. まず「自宅本棚管理アプリ」の要件から「名詞・動詞」を抽出します 24 書籍 p.65 本を登録できる ようにしたい 登録済みの 本を削除できる ようにしたい 本に感想文 をつけたい 本に 自分で作った タグをつけたい 最近登録した 本を一覧で見たい 要件 登録した本を 修正できるように したい 本には 著者名をつけたい 本 著者名 感想文 一覧見る 修正 登録 削除 名詞 動詞 タグ 最近登録
25. © teamLab Inc. 実際に作った「モデル」がこちら 25 新規登録 編集 削除 並び替え 本 タイトル 著者名 ISBN 感想文 購入日 新規登録 編集 削除 タグ 名前 ＊ ＊
26. © teamLab Inc. 抽出した「名詞・動詞」からオブジェクトとアクションを図式化しています 26 書籍 p.75 新規登録 編集 削除 並び替え 本 タイトル 著者名 ISBN 感想文 購入日 新規登録 編集 削除 タグ 名前 ＊ オブジェクト： 「本」と「タグ」 アクション： 本もタグも、 基本のCRUDは必要そう 対多になりそうな場合 「多」の方に「＊」をつける 要件になくても 必要そうな項目 は提案 ＊ アクション： 「最近登録」を 「並び替え」で 対応
27. © teamLab Inc. 27 モデル インタラクション プレゼンテーション STEP. 1 STEP. 2 STEP. 3
28. © teamLab Inc. STEP.2「インタラクション」では、ビューとナビゲーションを検討します 28 ❏ インタラクションは、 「モデル」と「プレゼンテーション」をつなぐ メカニズムです。 ❏ ビュー同士の関係や、ナビゲーションをここで規定し、 図式化します。 ❏ ビューには大きく分けて コレクション（≒一覧）とシングル（≒詳細）があります。 書籍 p.44 モデル インタラク ション プレゼンテー ション
29. © teamLab Inc. ビューの「コレクション」と「シングル」は機能が異なります 29 書籍 p.78 コレクション ＝「眺める」機能 シングル ＝「よく見る」機能 いわゆる一覧画面 いわゆる詳細画面
30. © teamLab Inc. 実際に作った「インタラクション」がこちら 30 シングル 本 コレクション 本 シングル タグ コレクション タグ ビュー ナビゲーション
31. © teamLab Inc. オブジェクトのシングルとコレクションを決め、ナビゲーションで繋ぎます 31 書籍 p.78 シングル 本 コレクション 本 シングル タグ コレクション タグ 本の一覧から 本の詳細を見る 本に紐づく タグの一覧を見る タグに紐づく 本の一覧を見る タグの一覧から タグの詳細を見る 本・タグ × コレクション ・シングル の4ビューを作る ビュー ナビゲーション
32. © teamLab Inc. 32 モデル インタラクション プレゼンテーション STEP. 1 STEP. 2 STEP. 3
33. © teamLab Inc. STEP.3 「プレゼンテーション」では、レイアウトパターンを適用します 33 ❏ プレゼンテーションは、「インタラクション」の メカニズムを様々なUI表現でユーザーに示すものです ❏ オブジェクトの一覧、詳細、登録、編集、削除などは、 経験則として「良いパターン」が存在しています ❏ そのため、「オブジェクト指向UIデザイン」では すでに一般化されているレイアウトのパターンを選びます 書籍 p.44, 87 モデル インタラク ション プレゼンテー ション
34. © teamLab Inc. 34 レイアウトパターン 一部紹介 ※詳しくは書籍で
35. © teamLab Inc. 「ルートナビゲーション」のパターン 35 書籍 p.88 左 上 開閉式 下 SPだと幅が狭いので開閉式にしたり、下にアイコンだけ表示したりします
36. © teamLab Inc. 「ナビゲーション」のパターン 書籍 p.90 36 左右分割 36 画面遷移 …etc PCだと画面の片側半分が 空きがちなので そのスペースを活用します
37. © teamLab Inc. 「シングル」のパターン 書籍 p.108, 109 37 シングルメイン すべて表示 ＞ すべて表示 ＞ コレクションメイン …etc コレクションを一部を省略したりします 全部見たい場合、コレクションビューに ナビゲーションします シングルの情報よりも 紐づくコレクションの情報を優先します
38. © teamLab Inc. 「コレクション」のパターン 書籍 p.95-99 38 38 1項目複数行 1項目1行 サムネイルグリッド マッピング …etc ECサイトとかに 多い 業務アプリ に多い メールの 件名と本文等 位置が重要な アプリに多い
39. © teamLab Inc. 「コレクション」の「フィルタリング」パターン 書籍 p.103-107 39 AND条件 キーワード検索 ソート …etc 複雑な条件に対応できます スピーディに調べたい 時に便利です フィルタではないですが 情報を整理できます
40. © teamLab Inc. Createのパターン 40 書籍 p.114 ブランク パラメータ 登録 キャンセル 新規登録を押すと ブランク項目が次に追加されます 新規登録を押すと 複数項目のフォームが表示されます …etc
41. © teamLab Inc. Updateのパターン 41 書籍 p.120 モードレスエディット あいうえお かきくけこ さしすせそ たちつてと モーダルエディット あいうえお かきくけこ キャンセル　保存 編集 あいうえお かきくけこ さしすせそ たちつてと さしすせそ たちつてと 参照モードと編集モードに分かれています 常時編集可能です 自動保存だとなお良しです …etc
42. © teamLab Inc. Deleteのパターン 42 書籍 p.118, 119 モードレスコンファーム モーダルコンファーム 削除 あいうえお かきくけこ さしすせそ たちつてと 削除押下後に、 削除確認ダイアログが出ます 削除 あいうえお かきくけこ さしすせそ たちつてと 削除 キャンセル 本当に 削除しますか？ あいうえお かきくけこ さしすせそ たちつてと 削除 削除押下後に、 その場で削除ボタンが出ます …etc
43. © teamLab Inc. 43 レイアウトパターン の適用
44. © teamLab Inc. パターン適用前に「モデル」と「インタラクション」を再確認・・・ 44 シングル 本 コレクション 本 シングル タグ コレクション タグ モデル インタラクション 新規登録 編集 削除 並び替え 本 タイトル 著者名 ISBN 感想文 購入日 新規登録 編集 削除 タグ 名前 ＊ ＊
45. © teamLab Inc. 実際に作った「プレゼンテーション」がこちら（次に実際のレイアウトをお見せします） 45 シングル 本 コレクション 本 シングル タグ コレクション タグ Create：パラメータ Update：モードレスエディット Delete：モーダルコンファーム フィルタ：キーワード＋ソート ナビゲーション：画面遷移 コレクション：サムネイルグリッド コレクション：1項目1行 ナビゲーション： PC： 左右分割 SP： 画面遷移 新規登録 編集 削除 並び替え 本 タイトル 著者名 ISBN 感想文 購入日 新規登録 編集 削除 タグ 名前 ＊ ＊ Create：ブランク Update：モーダルエディット Delete：モードレスコンファーム シングル： コレクションメイン表示 シングル：シングルメイン表示 ルートナビゲーション： PC：上 SP： 開閉式
46. © teamLab Inc. 46 実際に作った デザインで解説 ViteとReactで軽く作りました https://honokiyuto.github.io/object-task-compare-ui/
47. © teamLab Inc. ルートナビゲーション 47 ルートナビゲーション： PC：上 SP： 開閉式
48. © teamLab Inc. 「本」コレクション・「本」シングル 48 フィルタリング： キーワード　＋　ソート ナビゲーション： 画面遷移 コレクション： サムネイルグリッド シングル： シングルメイン表示
49. © teamLab Inc. 「本」アクション 49 Create： パラメータ Update： モードレスエディット Delete： モーダルコンファーム
50. © teamLab Inc. 「タグ」コレクション・「タグ」シングル 50 コレクション： 1項目1行 シングル： コレクションメイン表示 ナビゲーション： PC： 左右分割 SP： 画面遷移
51. © teamLab Inc. 「タグ」アクション 51 Create： ブランク Update： モーダルエディット Delete： モードレスコンファーム デザイン完成✨
52. © teamLab Inc. 「オブジェクト指向UIデザイン」は銀の弾丸？ 52
53. © teamLab Inc. 「オブジェクト指向UIデザイン」で設計すると何が嬉しいのか？ ❏ 基本、ISOの人間中心設計のプロセスで は、品質保証等の観点から議論されていま す ❏ その中に「アプリ」そのものを 原理的な「道具」として使い、 「要求」への「解決策」を導くという 具体的な方法論はありません 53 書籍 p.33 「オブジェクト指向 UIデザイン」では、その「要求」〜「解決策」の間の部分を整理して 体系化しています 設計の評価 解決策の作成・設計 要求事項の明示 ？
54. © teamLab Inc. さらに、同じInterfaceでも、冪等な「API」と異なり「UI」は多種多様で非常に難しい 54 API Application Programming Interface UI User Interface UX (体験) 経験 文化 認知 身体 人間は、 ・入力の方式、強弱、有無が様々 ・内部処理のブラックボックスの 　可視化はほぼ不可能 ・出力もブラックボックスを 　通ってから行われる システム内のあらゆるInterfaceは、 (きちんと作れば)基本的にフォーマルで冪等 両方同じ方法論で設計するのは難しい
55. © teamLab Inc. しかし、現実にある「道具」は、UIがうまく確立されているものが多いです 55 UX (体験) 経験 文化 認知 身体 色々「道具」はありますが、 なぜかここの ブラックボックスが 解決されています
56. © teamLab Inc. 人間の多様な入出力に対応するには「現実にある道具に近い使用感」を意識するべきです ❏ いわゆる「メンタルモデル」に沿った UI設計が重要です ❏ そのためには 「オブジェクト」と「アクション」に 焦点を当てた 「オブジェクト指向UIデザイン」 が有効です 56 理論上、複雑な UI設計には「オブジェクト指向 UIデザイン」こそが銀の弾丸になります
57. © teamLab Inc. 57 ご清聴 ありがとうございました 挿絵： https://loosedrawing.com/ ViteとReactで軽く作りました https://honokiyuto.github.io/object-task-compare-ui/
58. © teamLab Inc. 補足 58
59. © teamLab Inc. 補足：グラフィックデザインは別本で学んでください。 59 https://amzn.asia/d/afb5fPi ここを知りたいならこの本→ 本会趣旨とは異なりますが、 とてもいい本です ヒアリング ワイヤーフレーム グラフィック デザイン この勉強会
60. © teamLab Inc. 補足：「タスク指向UI」と「オブジェクト指向UI」の違いを文章で説明 60 ❏ 名詞 → 動詞 ❏ まずオブジェクトを選び、次にそ のオブジェクトに対するアクショ ンを選ぶ ❏ ナビゲーションはオブジェクト を手掛かりにする ❏ あらゆる情報システム、特に作業 者による探索や創意工夫が期待さ れるものについて有効 ❏ 動詞 → 名詞 ❏ まずタスクを選び、次に引数とし てオブジェクトやパラメーターを 指定する ❏ ナビゲーションはタスク を手掛かりにする ❏ オブジェクトを選択する必要がな い場合や、定型の入力手続きだけ を提供する場合にのみ有効 書籍 p.20 オブジェクト指向UI タスク指向UI
61. © teamLab Inc. 補足：「タスク指向UI」が許容されるパターン、ATM 61 書籍 p.19 お預入れ お引出し 残高照会 チャージ お振込み 通帳記入 いらっしゃいませ ご希望のお取引を選択してください キャッシュカードを入れた時、オブジェクトをコレクションから選択することになるので、 パネルを操作する時点でシングルにおけるアクションが始まっています ATMは「口座」そのものが「オブジェクト」
62. © teamLab Inc. 補足：フロントエンド勉強会なので、JavaScriptで例えます 62 オブジェクト指向プログラミング 手続き型プログラミング // 三角形の「オブジェクト」を作る class Triangle { constructor(base, height) { this.base = base; this.height = height; } // 三角形の面積を計算するメソッド getArea() { return (this.base * this.height) / 2; } } // 情報をあらかじめ与えてインスタンス化する const triangle = new Triangle(10, 5); // 名詞 → 動詞 の感覚で使える const area = triangle.getArea(); // 三角形の面積を計算する「タスク」を作る const getTriangleArea =(base, height)=> { return (base * height) / 2; } // 動詞 → 名詞　の感覚で使える const area = getTriangleArea(10, 5); 「オブジェクト指向」な利用体験になる 「タスク指向」な利用体験になる 書籍 p.276
63. © teamLab Inc. 補足：モデルはER図にも似ていますが目的が異なります 63 UIデザインのモデル DB設計のモデル 本テーブル id タイトル 著者ID ISBN 感想文 購入日 タグID タグテーブル id 名前 著者テーブル id 姓 名 ミドルネーム 生年月日 本-タグテーブル 著者ID タグID BFFや、React component props の設計に近い。ユーザに見える オブジェクトだけ抽出。 本とタグはお互い複数の場合あるか、 本と著者どうしよう・・・？ など裏ロジックの考慮も必要。 「似ている」ということは、逆に言えば、 DB設計とUI設計のモデリングは密接につながっているとも 解釈できます 書籍 p.43 新規登録 編集 削除 並び替え 本 タイトル 著者名 ISBN 感想文 購入日 新規登録 編集 削除 タグ 名前 ＊ ＊
64. © teamLab Inc. 補足：オブジェクト指向UIデザインの流れおさらい 64 モデル インタラクション プレゼンテーション ユーザーの要件から、オブジェクトとアクションを抽出し、 図にまとめます オブジェクトを中心とした「ビュー」を並べ、 それらの関係性を「ナビゲーション」で表現します ユーザーが経験的に良いとされているUIパターンから、 「モデル」と「インタラクション」に沿うものを選びます 厳密に順番にやる必要はありません。 基本モデルから決めますが、そこからはそれぞれ並行で進めるのも OKです。
65. © teamLab Inc. 65 EOF