『オブジェクト指向UIデザイン』をチームで読み合わせ。day.11【応用編】
UIUXデザイナー必読書の、オブジェクト指向UIデザインを、デザインチームで読み合わせして、個人的な備忘録を兼ねて、noteにまとめます。
ワークアウト：Level.10（スマートフォン用の営業支援アプリケーション）
タスクベースになっている問題の状態を、オブジェクトベースのアプリケーションにリバースエンジニアリングする。
ヒント：「訪問予定」「訪問検索」のように名詞と動詞が混在しており、タスクとオブジェクトの関係が曖昧になっている。「やること」を選んでから「対象」を選ぶフローを改善する。
オブジェクト抽出：ある程度出揃っているタスクから「オブジェクト」を抽出し、名詞を拾って見ると「顧客」「案件」「訪問予定」「営業資料」といったオブジェクトを抽出できるはず。
各々が事前作成したレイアウトを見ていく
メインオブジェクトは「顧客」「案件」「営業資料」「訪問予定」で、「顧客」のアクションの中にメッセージが格納されています。「顧客」の中に「人」と「企業」をまとめ、本書のオブジェクト抽出と最も近い形。ただ、階層構造になっているので、ビューの表示は少し違う印象です。顧客のシングルに「案件」の一部コレクションが表示され、関連する案件や担当者が分かるのが分かりすいです。顧客のコレクションでは、履歴に基づく企業の表示があります。
No.2です。オブジェクトに「企業」と「顧客」、さらに「メッセージ」があります。メッセージを顧客のアクションと捉えてもいますが、「メッセージ」にもコレクション（送受信メール一覧や履歴）のビューが必要だと考えナビゲーションにも配置されています。（案件のナビは配置忘れ）
顧客のシングルビューにメッセージの一部コレクションが配置されており、顧客とのやりとりが確認しやすいように配慮されています。メッセージへの到達フローで言いますと、「企業」と「人」を分けているので、最短フローにはなるかと思います。
No.3もNo.2と同様、「メッセージ」をオブジェクトととして抽出しています。案件を概念上「リード」と変換して考えており、一つの企業に対して「リード」が複数あり、「顧客」「予定」「資料」が紐づく相関関係になっています。ナビゲーションに肝心の「リード（案件）」を入れ忘れてしまった。顧客が「企業」「人」さらには「お気に入り」とタブで切り替えられ、本書の「顧客」のコレクションビューに最も近い形です。顧客のシングル、メッセージのシングルの作成は省かれています。
No.4は私です。オブジェクトの相関図は割愛しました。「顧客」の中に「企業」と「人」が格納されていますが、No.1と同じく階層構造になっており、ビューが分かれているのが本書と違うところです。顧客のシングルからメッセージのアクションを行います。（メッセージシングルの作成は割愛）
ナビゲーションを配置せず、今回はハンバーガーメニューを設置することにしました。こういった業務アプリケーションは、ログインや設定、機能の追加が考えられますので、今後の拡張性を考慮しました。
他の人の作成物を見ていて、メッセージのコレクションがないことに気がつきました。（メッセージアプリが別で起動する場合はこの見た目になりますが…。それだとアプリケーションが複数にまたがるのでNG）
メッセージを送信後のアクションを想定できていませんでしたので、ハンバーガーに通知のドット、メッセージのコレクションビューへの導線を追加しました。
総括
今回のポイントは「顧客」の中に「人」と「企業」をまとめられるかでした。メンバー感で議論になったのは「メッセージ」をオブジェクトとして扱うかどうかでした。結論、コレクションもシングルも存在させる必要があるので、オブジェクトとしては必要だが、配置場所をナビゲーションにするかどうかはユースケースを見て判断となりそうです。
スマホのアプリケーションということですので、出先での使用を想定し、ユーザーの最も必要な機能をヒアリングする必要がやはりありそうです。
基礎のワークアウトをこなしてきたせいか、皆オブジェクトの判断や、相関関係の理解がとても早くなってきている印象です。
Day.12に続きます。
この記事が気に入ったらサポートをしてみませんか？