2021年2月12日

デザイン

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

目次

  1. はじめに
  2. OOUXとは?
  3. OOUXのモデリング法
  4. OOUXのメリット
  5. OOUXとOOUXの違い
  6. まとめ

はじめに

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

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

OO「UX」と呼ぶか、OO「UI」と呼ぶかはその提唱者の意向の違いなのかなと思います。最終的に「UI」を作るためのもので、以前からあった「OOUI」という言葉を上野学さんは使用しています。逆にOOUXの提唱者、Sophia Praterさんはプロダクトの情報整理や導線設計、CTA設計なども含むため、OOUXと呼んでいると思われます。

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

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

0.png (33.2 kB)

OOUXとは?

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

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

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

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

OOUXのモデリング法

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

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

STEP1: オブジェクトの抽出

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

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

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

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

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

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

1.png (2.6 kB)

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

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

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

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

2.png (9.9 kB)

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

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

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

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

3.png (18.2 kB)

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

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

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

4.png (17.3 kB)

STEP 5: CTAの設計

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

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

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

5.png (19.6 kB)

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

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

STEP 6: ページ設計

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

6.png (12.1 kB)

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

7.gif (70.3 kB)

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

7.png (15.0 kB)

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

OOUXのメリット

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

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

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

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

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

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

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

OOUXとOOUIとの違い

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

UXのお仕事に関するご相談

Bageleeの運営会社、palanではUXに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

3

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

かっきー

かっきー

まりな

まりな

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

CONTACT PAGE TOP