オブジェクト指向UX(OOUX)とは？

はじめに

去年あたりに、ソシオメディアの上野学さんが提唱されている「オブジェクト指向UIデザイン 」 (以下、OOUIと省略します)が非常に話題になりましたね。

本記事では、その概念と似たもので「オブジェクト指向UX」(OOUX)というモデリング手法についてのご紹介をしていきます。日本ではOOUIが非常に有名ですが、「OOUX」はその手法をUXに拡大して使おう、というものではなく、オブジェクトベースのアプローチという意味では似たようなものだと考えていただければOKです。

では、この２つはどう違うの？というですが、「OOUI」と「OOUX」はオブジェクト指向ベースのコンテンツモデリングからUIに落とし込むまでの手法と目的が少し違ってきます。

この記事ではOOUXの手法をメインにご紹介しながら、OOUIとの違いやそれぞれのメリットもお伝えしていきます。

OOUXとは？

OOUXとは、プロダクトの主なコンテンツをオブジェクトとして考えるという情報設計の手法です。

オブジェクト指向ベースで考えるというアプローチはもともとありましたが、2015年にSophia V. Praterさんが「Object-oriented UX」(オブジェクト指向UX)というものを提唱し、オブジェクト指向のアプローチをUXに応用するという手法が議論され始めました。

オブジェクト指向アプローチのデザインはタスクベースのデザインと比較されることが多いです。
「動詞→名詞」ではなく、「名詞→動詞」の順序で操作できるようにUIを組むことで、ユーザーにとって操作しやすいUIを実現することができる、というモノです。

オブジェクト指向については、ソシオメディアの上野学さんがこちらの記事でとても分かりやすく説明してくださっているので、ぜひご覧ください。

OOUXのモデリング法

それでは、早速OOUXのモデリング法をご紹介していきます。

プロダクトのデータやコンテンツを「オブジェクト」として扱いながら、付箋や色でそのオブジェクトを構成する様々な要素を洗い出していきます。

STEP1: オブジェクトの抽出

まずは、プロダクトのオブジェクトを定義していきます。こちらのステップはOOUIと変わらないので、OOUIをご存知の方は飛ばしていただいてOKです。

制作するプロダクトがどんなタスクができるのか、どんな目的を果たすのかという要件定義の文章などがあれば、そこから、繰り返し出てくる名詞を抜き出していきます。

その中でユーザーに意識させたいものを抽出していきます。

例えば、いろんなレポートを見ることができるサービスがあるとします。
その場合、「レポート」をオブジェクトとして抽出することができます。

「レポートを見る」といった動詞ではなく、名詞として抜き出すのがポイントです。

抽出したオブジェクトを並べていきます。

STEP2: 主コンテンツとメタ情報の定義

次に、それぞれのオブジェクトに紐づいた主コンテンツとメタ情報を定義していきます。

例えば、先ほどのレポートの例でいうと、レポートには「写真」、「タイトル」、「レポート内容」、「著者」といったような主コンテンツがあるかもしれません。

合わせて、オブジェクトのメタ情報も考えていきます。
メタ情報とは、ユーザーが並び替えや絞り込みに使うかもしれない情報です。
例えば、レポートの例ですと、ユーザーはレポートの「投稿日」ごとに並び替えを行う可能性があります。そのほかにもレポートの分類（カテゴリ）などがあれば、カテゴリごとに絞り込みを行う可能性もありますね。

STEP3: 関連がある他のオブジェクトを入れ子に

主コンテンツとメタ情報の定義ができたら、次はオブジェクト間の関係を見ていきます。

OOUIではこのオブジェクト間の関連性は線でつないで見える化をしますが、あまりに関連性が増えてくるとわかりにくくなるため、OOUX手法では、リストの中に関連があるオブジェクトを入れ子Mにしていきます。

例えば、先程のレポートが見れる例で考えていきましょう。
このサービスは過去のセミナー詳細とそのレポートがまとまっているサービスだとします。
そうすると、レポートだけでなく「セミナー」もオブジェクトとして定義できるかもしれません。
また、そのセミナーというオブジェクトはレポートがどのセミナーの内容をまとめたものかが分かるためレポートと関連があります。
その場合、セミナーというオブジェクトを作ることができます。
また、レポートのオブジェクトのリストにも関連オブジェクトとして、セミナーを作ることができます。

STEP 4: それぞれの要素の優先順位付け

Step3までできたら、ある程度主要な情報とその関係は洗い出せました。
次に、それぞれの情報をどういう優先順位でユーザーが欲しがっているのか考え、カードを並び替えていきます。

上にユーザーが最も欲しい情報を並べ、下の方に補足コンテンツを並べていきます。

STEP 5: CTAの設計

次にそれぞれのオブジェクトごとに設定したいCTAの付箋を入れていきます。

例えば、先程のレポートであれば、ダウンロードや会員登録などのCTAが考えられるかもしれません。

こちらはオブジェクトの上に緑の付箋でまとめていきます。

こちらで情報のモデリングは完了です。

では、このモデルをどう活かすのか、というところですが、それぞれのオブジェクト（列）を１ページとして扱っていきます。

STEP 6: ページ設計

例えば、先程のレポートの例をSTEP6まで行うとレポートオブジェクトはこのような形になるはずです。

それぞれの情報をどれくらいの大きさで見せるのかを考えながら、この付箋を並び替えていきます。

このような感じで、ページの形にコンテンツを並び替えます。
するとこのようにワイヤーのようなものが出来上がります。

OOUX手法を使うことにより、情報の抽出から一貫してワイヤーにまで落とし込むことができるためユーザーに伝えたい情報を分かりやすく洗い出し、優先順位付けすることができます。

OOUXのメリット

OOUXはあくまで１つの手法なので、すべてをそのまま導入する必要はありませんし、プロジェクトの規模に応じて省いても良いステップなどもあるかもしれませんが、OOUXを使用するメリットをいくつかご紹介します。

ユーザーのメンタルモデルに沿ったUXがデザイン可能

OOUXでは、ユーザーが操作対象であるオブジェクトに対してどんな情報を求めているのか、どんな関連を見たがっているのかなどユーザーのメンタルモデルをリスト形式で再現することができます。
ユーザーのメンタルモデルに沿ったデザインを作成することで、さらに良いユーザー体験を実現することが可能です。

レスポンシブデザインに強い

情報設計のデザインにおいて、それぞれページ上に表示する要素とその優先順位をあらかじめ洗い出すことによって、PCにもSPでもさらにタブレットなどいろんなデバイスを網羅的に扱うことが可能です。

デザイナーとエンジニアのコミュニケーションがしやすくなる

エンジニアはプロダクトの設計時に上記に近い整理をしているため、デザイナーとエンジニア間でのコミュニケーションがしやすく、デザインを論理立てて行うことができます。

OOUXとOOUIとの違い

冒頭でもお話しした通り、基本的にOOUXとOOUIはオブジェクト指向ベースで情報設計をし、UIを組んでいくという同じような点があります。

ただ、手法に少し違いがあり、以下のような違いがあるのではないかと考えます。

全体設計とページ内の設計のフォーカスの違い

・ OOUIはプロダクト全体の導線設計（どういうビューが必要でどういったナビゲーションが必要か）にフォーカスされた手法である
・ OOUXは１つ１つのページの中身に優先度にもフォーカスされた手法である

OOUIとOOUXの２つを上手く組み合わせることで、論理立てられた全体設計 + ページ内設計を行うことが可能になると思います。

オブジェクト内の要素の違い

・ OOUIでは、オブジェクトの要素として情報を持つ「プロパティ」とユーザーがオブジェクトに行うことができる「アクション」の２つがあります
・ OOUXでは、主コンテンツ、メタ情報、関連オブジェクト、CTAのように要素をOOUIよりも細かく分けるアプローチをとっています

Prioritizeのステップ (情報に優先度をつけるステップ)

・ OOUIではメインオブジェクトとサブオブジェクトの区別をつけるものの、プロパティ内の優先度やアクション内の優先度はそこまで重要視されていない
・OOUXでは、それぞれの情報やデータの優先度を最終的に考えるステップがある

OOUIはプロダクト全体の設計を重視しているため、プロパティの優先度については詳しく書かれていませんが、時間がある方はOOUXを応用しOOUIのオブジェクト概念フェーズで優先度という視点で並び替えを試してみるのも良いかもしれません。

まとめ

今回はオブジェクト指向UX、OOUXについてご紹介しました。
オブジェクト指向ベースのUIやUXは論理立てて考えることができ、タスクベースのアプローチよりも画面を少なく、且つユーザー体験を飛躍的に向上させることが可能です。

さらにOOUXについてご興味がある方はSophia PraterさんのObject-Oriented UXとOOUX: A Foundation for Interaction Designをぜひご一読ください。