【BONO】OOUI（オブジェクト指向UI）コンテンツ中心のUI設計

OOUI（Object Oriented User Interface、オブジェクト指向UI）とは、モノ（ここでは『対象』または『コンテンツ』）を中心にしたデザイン設計を指す。

サービスの多くはこのOOUIであることが多く、理解しておくと今後のデザインの引き出しを増やすことができる。

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

よくあるメッセンジャーアプリを例にとる。
画像左はオブジェクト指向でデザインされたもの、右はタスク指向でデザインされたもの。

オブジェクト指向のデザインでは「メッセージ」を一覧から選んで、メッセージの内容を見たり、編集・削除を一覧から選んで行なったりなど複数のアクションが並行して行える。
「オブジェクト」に対して直感的な操作が可能であり、そしてなによりわかりやすい。

反対にタスク指向のデザインでは、わざわざ行いたいアクションのための「部屋」（モード）に入っらなけらばならず、別のアクションを同時並行で行えない。
オブジェクトもアクションと分離されているので、「メッセージ」に対してアクションをするという感覚がわかりにくい。
要は「オブジェクト」ではなく、「機能」を中心にデザインされている。

タスク指向が生かされているサービス

ゆうちょATMのUI

しかし「タスク指向は悪👿」となるのは早計である。
例えばATMのUIはタスク指向でデザインされている。ユーザーはラベルに記された「預け入れ」や「引き出し」というタスク自体が目的なのでこの方が適切なUIである。
目的に応じてUIの設計を選ぶことが大事。

オブジェクトの定義

オブジェクト指向のデザインには、表示する「オブジェクト」が何なのかを定義する必要がある。

結論を言うと、オブジェクトとは要件に必要であり、UI表現のベースとなる”操作したり作成したりする”中心コンテンツ。

Twitterのオブジェクト

STORESのオブジェクト

画像の例のTwitterであればツイートがオブジェクト、STORESであればアイテムがオブジェクトである。どちらも画面の多くの領域を占有し、アクションで操作が可能。

また覚えておきたいのは、オブジェクトは「データ」で構成されるということ。メッセンジャーアプリのトークの場合、画像左のようなデータで構成されている。

オブジェクトの要素（情報）は、大きく２つに分けられる。一つはオブジェクトの表示要素であるプロパティ、もう一つはオブジェクトに対する動作、アクションである。

これらをブレストしたら、本来の「目的」に必要なものは網羅しているか？不必要なものを載せていないか検討する。
大事なのはやはり大元の「目的」、「ユーザー」、「課題解決」である。

UIフロー図の定義

オブジェクトを定義した後は、情報の関係性をフロー図にまとめる…のだが、その前に押さえておきたいポイントを学ぶ。

「コレクション」と「シングル」のページ構成

オブジェクトをページとして表現する方法には大きく２つある。
一つがオブジェクトが並べられている「コレクション」、もう一つがオブジェクトの詳細が載っている「シングル」。

前者は「一覧」、後者は「詳細」という関係になっていることが多い。

ルートナビゲーション

ユーザーが最初に想起するページの集まりをルートナビと呼び、最上位のナビゲーション項目である。グローバルナビ、ボトムナビなどとも言う。

この中にトップページ（起点となるページ）が含まれ、それがユーザーが訪れる理由となる。

最上位というと閲覧頻度が高いもののみを想起するが、頻度が低いモノでも重要な項目も含むことがある。

UIフロー図を作る

フロー図を作成するときは、

１．オブジェクトから必要なページと構造を考える
２．ルートナビを決める
３．アクションを考える

の順番でやっていく。

1．オブジェクトをタップすると詳細に飛べそうである。

2．トップページとルートナビを決めた。「送信相手」と「メッセージ」はルートナビを通して移動することを確認。

３．アクションをしたらどういうページに移って、結果的にどのようなページに行くのかをまとめる。

プロトタイプをしながら整理する

ここまでオブジェクトやフロー図を整理してきたが、実際にプロトタイプを作って壊して作り直して…をしたほうが作業としてはやりやすい。

ビジュアル化させてから気づくことも多くあるので、あまり無理にする必要はない！

UIデザイン

どの部分がどの要素なのか分けて考えられる

UIフロー図を使ってUIをデザインすると「情報」と「アクション」を分解して考えられるので、他のUIパターンを参考にしたときに構造を把握しやすい、情報を整理してデザインしやすい、というメリットがある。

情報とアクション

UIのビジュアルデザインは基本的に「情報」と「アクション」の２つのエリアで情報を整理されていることが多い。

アクションの配置パターンはほぼ以下の３パターン。

ヘッダーに置くパターン

フッターに置くパターン（例は少ない）

情報の近くに置くパターン

PCとSPも配置は異なるがそこまで大きく変わるものではない。

結局は「目的／ユーザー」のため

同じ要素を使用しているが整理次第で使いやすさが異なる

たとえOOUIのエッセンスを取り入れデザインしやすくなっても、当初の「目的やユーザー視点」が第一ということを忘れてはいけない。

振り返り

OOUIの概念を多少なりとも理解することができた。
前回の情報設計入門での知識と組み合わせ、オブジェクトの特定、情報とアクションの分解をマスターして使いやすいUI制作を心がけたい。

また、いくらOOUIが主流と言っても、サービスの性質によってオブジェクト指向とタスク指向のどちらかが適しているのか判断する必要がある。あくまでもOOUIは手段であることを忘れないようにしたい。