フロントエンドエンジニアがOOUIについて理解してみた
そもそもOOUIとは
オブジェクト指向ユーザーインターフェースの略。
（Object Oriented User Interfaceの頭文字から来ている。）
この時の「オブジェクト」とはユーザーがアプリケーションなどを操作する際の「目的」や「対象」のことを指す。（例えばECサイトであれば画面上に並んでいる商品がそれに値する。）
UIが「UX5段階モデル」(UXの要素を5つの段階に分類したもの)でいうところの「構造〜表層」に当たるのに対し、OOUIは「構造」の領域に値する。
また、アプリケーションデザインにおいて基本的なテクニックであり、ソフトウェアのデザイナー、プログラマーであれば十分に理解していなければならない概念だとソシオメディアの上野学氏がオブジェクト指向UIデザイン──使いやすいソフトウェアの原理 (WEB+DB PRESS plusシリーズ)にて語っている。
UI設計は大きく2種類存在する
一つ目が前述の「オブジェクト指向UI」、二つ目が「タスク指向UI」となる。
オブジェクト指向UIとタスク指向UIの違い
オブジェクト指向UIが 「目的」や「対象」（オブジェクト）を選んだ後のアクションを設計するのに対し、タスク指向UIでは最初にアクション（タスク）を選択し、その後に「目的」や「対象」を選ぶ設計となっている。
| タスク指向UI | オブジェクト指向UI |
|---|---|
| 動詞→名詞の設計 | 名詞→動詞の設計 |
 |
 |
| ①削除する(タスク)を選択 ②一覧画面から対象のファイル(オブジェクト)を選択 ③確定する |
①一覧画面から対象のファイル(オブジェクト)を選択 ②削除する(タスク) |
OOUIの4つの原則
オブジェクト指向UIにおいての原則は以下の4つとされている。
1. オブジェクトを知覚でき直接的に働きかけられる
ユーザーが行う操作の対象が知覚できる容態で示される。
例）Macで利用できるLaunchpad。アイコンによってユーザーはより直感的に操作ができる。
2. オブジェクトは自身の性質と状態を体現する
ユーザーは、オブジェクトを見ることにより、それがなにで、どのような状態で、次に何ができるかなどを把握する。
よって、オブジェクトは状態に合わせて見た目を変えながら、ユーザーにリアルタイムに情報を与える必要がある。
3. オブジェクトを選択→アクション選択の操作手順
OOUIの大きな特徴は、「オブジェクト選択→アクション選択」の順序になっていること。
ユーザーは操作の対象を選んでから、その操作に対するアクションを実行する。
それは日頃、私たちが日常的に行なっている所作ととても似ており、目的達成しようとする行動の流れとして自然と「名詞」→「動詞」になっている。
例) 本(名詞)を手に取ってからその本を読む（動詞）、ヘッドホン(名詞)を耳に装着する（動詞）など。
4. 全てのオブジェクトが互いに協調しながらUIを構成する
オブジェクトは自身の性質を体現しながら並べられ、システム全体の一貫したルールに従って、画面全体の空間を構成している。
同じ種類のものは同じ色や形、並列な関係にあるものは整列された位置関係、包含関係にあるものは領域の入れ子構造として表現される。（この辺りはデザインの4大原則に直結するようなことでもある。）
それらのルールによってオブジェクトが存在しているからこそ、操作に応じてオブジェクト自体の状態の変化があった際に、UI全体における差分としてユーザーは自分が行った操作を認知することができる。
OOUI設計の基本ステップ
この方法はモバイルアプリでもデスクトップアプリでも共通して適用が可能。
デザインするアプリケーションの性質に応じて、アレンジを加える余地が大きく残されている。
1. オブジェクトの抽出
オブジェクト指向でUIを作成するために、まずはユーザーにとってのオブジェクトの定義を行う必要がある。
対象ドメイン（ユーザーの活動領域）のスコープの把握や、どこまでサポートしていくのかを決めなくてはならない。
オブジェクトかどうかの判定には以下の3点をポイントにして考えると良いそう。
- 数えられる名詞として表せる
- 同種の集合として管理され得る
- 共通のアクションを持っている
以上を元に、「出前アプリ」を例に簡易的に考えてみた。
想定できるユーザーのタスク
- 食べたい料理のカテゴリーを選ぶ
- 近くで注文できるお店を探す
太字のところが名詞であり、オブジェクトの精査対象となる。
2. ビューとナビゲーションの設計
オブジェクトの抽出ができたら、次にビューの設計を行う。
ビューとは、ウィンドウやページ、メニューのリストなど、ユーザーが実際に画面で目にするひとまとまりの情報表示領域のことをいう。
ビューは大きく「コレクション」と「シングル」の2つがある。
| コレクション | シングル |
|---|---|
| オブジェクトは複数を表示 | オブジェクトはひとつ分を表示 |
| 重要な情報(属性)のみ表示 | コレクションより多くの情報(属性)を表示 |
| 例）一覧画面など | 例)詳細画面など |
ここで以下の3つのビューを考えてみた。
オブジェクト「料理」のビュー
コレクション...料理のメニュー一覧が画面に表示される
シングル...選んだ料理の詳細情報が画面に表示される
オブジェクト「カテゴリー」のビュー
コレクション...料理のカテゴリー一覧が画面に表示される
オブジェクト「お店」のビュー(下の図では割愛)
コレクション...近くの配達可能店舗が画面に表示される
シングル...選んだ店舗の詳細情報が画面に表示される
また、上記でカテゴリーのビューのシングルを割愛しているように不要なビューは省略可能。
（カテゴリーに詳細画面は必要ない為今回シングルは省いた。）
ビューが増えるとその分画面数も増えてしまうため、最適なビューを設計するようにする。
3. レイアウトパターンの適用
ビューのおおよそが定義されたら、実際の画面のレイアウトを適用する。
レイアウト作成まで終えたら、ユーザー視点で「きちんとオブジェクトに向かっているUIになっているか」を確認するようし、Step1〜3を行き来しながらユーザーにとって最適なUIを設計する。
結局のところオブジェクト指向UIだと何が嬉しいのか
ユーザー側としてのメリット
- タスク指向UIでは決められたタスクを決められた順序でしか行えない一方で、オブジェクト指向UIのプロダクトではユーザーに操作の自由性を与えることができる。
- 目的に到達するまでの手順がユーザーに委ねられているため、プロダクトを利用する「楽しさ」や「学習意欲」を向上させることができる。
- ユーザーに主体性を持って利用してもらうことが効率につながり、プロダクトの持つ価値を最大限に引き出すことができる。
開発者側としてのメリット
- オブジェクト指向UIは、タスクをベースにしたタスク指向UIより設計がシンプルになる。
- オブジェクトを起点にすることによって、画面数が少なくよりわかりやすく簡潔になりやすい。
- 画面数が少なくなり、プログラムもシンプルになるため、フロントエンドとバックエンドの連携がスムーズになる。
タスク指向が悪なわけではない
ATMの様にオブジェクトが限定されていたり、オブジェクトを選択する必要が無いものはタスク指向UIの方が使い勝手は良くなります。
また、対象物が定まっていない場合もタスク指向UIが有効です。
不動産サイトのような検索サイトでは「駅名から探す・エリアから探す」など先に検索軸を絞った方が効率的であり、オスススメ物件（オブジェクト）から再検索させるのは複雑となり、非効率です。
状況に応じてオブジェクト指向UIとタスク指向UIを使い分けるのが良さそう。
学んでみた感想
ソフトウェアにおいてユーザーファーストなUIを構築するために、今回学んだOOUIはフロントエンドエンジニアとしても知っておくべきとても重要な考え方だなと思いました。
また日頃の業務上でのデザイナーとのコミュニケーションなどでも、覚えておいておくとどこかで生きてくるんじゃないかと思います。
参考著書
オブジェクト指向UIデザイン──使いやすいソフトウェアの原理 (WEB+DB PRESS plusシリーズ)
これを読めばOOUIについて一通り網羅できるといっても過言ではない、言わずと知れた有名書籍です。OOUIについて更に深掘りたい方、実践的に学びたい方は強く購入をお勧めします！
Discussion