今回は「オブジェクト指向UIデザイン」についてまとめていきたいと思います⭕️

オブジェクト指向とタスク指向

オブジェクト指向UIって？

オブジェクトを起点に構成されたUIのこと。
操作する上で、ユーザーはまずはオブジェクト（対象物）を選び、その後そのオブジェクトに対するアクション（操作）を選ぶようにする。
「名詞→動詞」の順番で操作できるUIのこと。

タスク思考UIについて

一方、ユーザーがまずタスク（やること）を選び、その後でオブジェクト（対象物）を指定する、つまり「動詞→名詞」の順番で操作するUIはタスク指向UIと呼びます。

身近なものをで例えると自動販売機がタスク指向で設計されています。
自販機で飲み物を買う際は以下のように操作するからです↓

最近だと商品を選んでから電子マネーなどで払う、オブジェクト指向の設計のものも多いですね！

タスク指向の問題点🤔

問題点1️⃣
通常、物を買う時は
商品を選ぶ→お金を払う
という流れで買い物をします。

なので自動販売機の
お金を払う→商品を選ぶ
という流れはそもそも不自然なのです。

問題点2️⃣
自販機に先にお金を入れたことで、
「やっぱり買うのやめよう」と思ったらお金を取り戻すために返却レバーを押さないといけなくなります。

先に商品を選ぶオブジェクト指向で設計されていれば
「やっぱり買うのやめよう」と思ったら、その場から立ち去るだけでOKです。
「商品選択モード」にしてしまうと、操作の自由度を奪い、余計な操作を求めることになってしまうということです。

でもタスク指向を使ってはいけないというわけじゃない

ATMのようにオブジェクトが限定的で選択の必要がない場合は、タスク思考で設計しても使いづらいUIにはなりづらいです🙆‍♀️

オブジェクト指向UIのメリット🙌

タスク指向UIの問題点で

と記載しましたが、このように日常生活では「名詞」→「動詞」の流れで行動することのほうが多いです。
オブジェクト指向で作成されたUIは日常生活で馴染みのある順番で操作できるため直感的に操作できることがメリットとなります。

また、オブジェクト指向で設計されたUIのほうが構造がシンプルになるケースが多いため画面数の減少など開発側にもメリットがあります🫶

オブジェクト指向UIの設計プロセス

実際、オブジェクト指向で設計するためには以下のプロセスで設計していきます！説明だけだと分かりづらいので本書のワークアウトを用いながら説明します📝

今回の要件について

今回はワークアウト基礎編のレベル3「イベント店舗管理アプリケーション」を用いて説明します🙌

1.オブジェクトを抽出する

まずは、要件よりオブジェクトを抽出します。

先ほどの要件の中で「名詞」だと思われるものを太字にしました。

次に、名詞を汎化してつながりを考えます。
👉例えば今回は「ブース」は「会場」として統一しています。

次に、名詞同士を繋げてオブジェクトを整理します。

次に「メインオブジェクト」になるものを特定する
今回は「会場」「店舗」をメインオブジェクトとして扱います。今回グレーになっているものは「サブオブジェクト」として扱います。

また、1つの会場に対していくつも店舗があるので、店舗側に＊をつけています。

メインオブジェクトに付随するオブジェクトをプロパティとしましょう

先ほどの図を見ながら、メインオブジェクトに付随するサブオブジェクトをまとめます。
「店舗」には「名前」「電話番号」「紹介文」「メニュー」「場所」「写真」が付随する情報として挙げられます。
「会場」は「名称」のみですね！

以上でオブジェクトの抽出は終わりです🙌

2.ビューとナビゲーションの検討

次にコレクションビューとシングルビューの呼び出し関係を検討します。

💡コレクションビューとは
オブジェクトの一覧を見ることができる画面のことです。Appleのポッドキャストだと以下の画面がコレクションビューです。

💡シングルビューとは
1つのオブジェクトの詳細を示した画面のことです。

今回のワークアウトで考えるとこうなります。
1つの店舗に対して会場は1つだと仮定し、店のシングルビューからは会場のシングルビューに遷移できるようにします。
また、そうすると会場のシングルビューからは店舗のコレクションビューが見られるはずです。

3.レイアウトパターンの適用

コレクションの性質に合わせて表示形式を選択します。
今回は店舗と会場のコレクションビューはリスト表示、会場のシングルビューはマッピング表示にします。

店舗のコレクションビュー
リスト表示にして、1画面で多くの店舗を表示しています

店舗のシングルビュー
リストをクリックすると店舗のより詳細な画面がわかるように👌

会場のコレクションビュー
今回は2会場と仮定して、写真を使って1つ1つを大きめに見せています🏞️

会場のシングルビュー
今回は、「場所」という性質上マッピングで表示にしました🗾

まとめ

今回はオブジェクト指向UIについてまとめましたが、これができるようになると設計がかなりしっかりできそう…！と思いました😉
身につけるためには、まだまだ練習や実践を通して経験を積むことが必要そうなので頑張ります🔥

広野さん（社長）が解説している動画もわかりやすいのでぜひ😌