『オブジェクト指向UIデザイン』をチームで読み合わせ。day.16【応用編】
UIUXデザイナー必読書の、オブジェクト指向UIデザインを、デザインチームで読み合わせして、個人的な備忘録を兼ねて、noteにまとめます。
ワークアウト：Level.15（出張申請・精算アプリケーション）
社員が出張・精算を行うアプリケーションです。
申請画面：出張を計画している社員が、行き先、ルート、日程などを申請する画面です。
承認画面：出張から帰ってきた社員が、実際の行動なようやかかった経費を入力し、申請番号を入力し精算する画面。サブミットされた申請内容を上長と経理担当に送付します。
ヒント：申請と精算をタスク別に分けたことは、一見、理にかなっているようにも見える。分かりくいのが「申請」「精算」が現在ペンディングになっているものしかリスト表示されず（要対応画面）、全体に対象物の見通しが悪い。
各々が事前作成したレイアウトを見ていく
No.1です。左ナビゲーションに「申請」と「承認」のメニューを設置。オブジェクトととしては「申請」のみです。承認は権限のあるユーザーにしか表示されない想定。申請のシングルには「新規作成」「修正」「精算」の３つの状態があります（画像2）。申請のコレクションの絞り込み検索後に、「タグ」表示で検索条件が表示され、「×」クリックで解除できるのが使いやすそうです。
No.2は「出張申請」という名称でオブジェクトとまとめています。「出張申請」コレクションでは、それぞれステータス（承認依頼が来ている申請）、申請の種類（自分の作成した申請か、他の人が作成した申請か）などでタブを切り替えています。
No.3はオブジェクト抽出の画像も掲載しました。最後に記載します、本書の例のオブジェクトの括り方と同じです。
申請や精算を「出張」という大きな括りのオブジェクトでまとめています。「出張」コレクションのプルダウンに、申請の状態、種類で一覧を表示できるように配慮しています。「出張」シングルの申請内容では、精算をする前に「勘定科目」を追加できる仕様になっています。（出張後に、初回申請と違う科目の追加などが想定されるため）
No.4です。No.2と同様、申請の種類で大きく分類し、ナビゲーションを設置しています（No.2はタブ）。「自分の申請」「要対応」「すべて」で分けられており、要対応の申請にすぐアクションできるよう配慮されています。出張申請のコレクションでは申請の状態に「申請可」「清算可（申請→精算へ）」「精算申請中（申請→精算→待機中）」「済（すべて完了）」の状態に分けられています。シングルページでは、コメントができ棄却理由の記載や、申請に添付する領収書をなどをやりとりする想定のようです。
No.5は私が作成しました。「申請」と「精算」とでオブジェクトを分けてしまいました。理由としては、二つは相関関係にあっても、申請に関わるフローと、精算に関わるフローがまったく違うと考えました。（関わる人など）後の解説に記載しますが、「出張」という大きいオブジェクトで考えられればまとめられたかもしれません…。それぞれのコレクションビューでは、タブ分けなどはせず、ステータスでフィルタリングをして表示できるようにしました。
オブジェクトの抽出：「申請」と「精算」は動的な意味として捉えるとこれらは「タスク」になります。タスクには他に「承認」があり、ユーザーロールの関係でみると下記の図のように関係になります。
・社員：申請、精算
・上長：申請、精算、承認
・経理：承認
ここでの大事なポイント：「事業体において、オブジェクト（主体的ば概念物）は変化しにくく、タスク（業務）は変化しやすいもの。オブジェクトの数は限定的なのに対し、タスクは多くある場合が多い。
今回の課題は隠れたオブジェクト「出張」を導き出し、アプリケーションをシンプルに、分かりやすくユーザーに提示することが重要でした。
レイアウトパターンの適用：
２ペインのレイアウト。出張を大きなオブジェクトとして共通化させ、「申請」「精算」はオブジェクトのステータスとして扱います。
ユーザーロールによって、タスクの内容は変わりますね。シンプルなアプリケーションを作成するには、どのロールから見ても変化しない、大きなオブジェクトの見つけだしが重要でした。
Day.17に続きます。
この記事が気に入ったらサポートをしてみませんか？