この記事は「もくもく会ブログリレー」 25 日目 の記事です。

最近では、UX(ユーザー体験)という言葉も広く認知されてきて、より良いユーザー体験を提供するためのUXデザインの重要性がますます高まっています。
今回はそんなUXデザインの手法の一つである、「オブジェクト指向UX(OOUX)」について、紹介します。
OOUXの概念ににたもので、「オブジェクト指向UI(OOUI)」という手法もあり、こちらの方が一般的には認知されているようですが、OOUIについては、またの機会に紹介できればと思います。

「UX」の基本については、こちらの記事で紹介していますので、ご覧ください。
今さら聞けないUXのキホン

OOUXとは?

OOUXは、Object Oriented UXの略称で、「オブジェクト指向UX」と訳されます。

ユーザーが操作する対象物(オブジェクト)を中心とした視点で設計し、ユーザーにとってより直感的でわかりやすいUX設計をするための手法です。
オブジェクト指向プログラミングの概念をUX設計に応用しています。
UXデザインをする際に、ユーザーが行う操作を中心に考えることが一般的でしたが、OOUXでは、ユーザーが操作する対象物(オブジェクト)を中心に考えていきます
ECサイトやニュースサイト、業務システムなどの情報量が多く、複雑な構造を持つサイトやシステムの設計に特に有効です。

OOUXの基本概念

以下の要素を定義して、UX設計を行うことで、ユーザーがオブジェクトに対してどのような操作を期待しているのか、どのような情報を求めているのかを明確にすることができます。

  • オブジェクト: ユーザーが操作する対象となるもの(商品、記事、カート、ユーザーなど)
  • 属性: オブジェクトが持つ性質や情報(商品名、価格、説明、レビューなど)
  • 関係性: オブジェクト間の相互作用や関連性(商品とカテゴリ、記事とタグなど)
  • 動作(アクション): オブジェクトに対して行える操作(購入する、レビューを書く、編集・削除するなど)

OOUXのメリット

OOUXの主なメリットを4つ紹介します。
① ユーザー視点でのUX設計ができる
② 情報構造を整理しやすくなる
③ 開発・保守の効率化につながる
④ チームでの連携がスムーズになる

① ユーザー視点でのUX設計ができる

ユーザーが操作するオブジェクトに対してどんな情報を求めているのかなど、ユーザーのメンタルモデルを洗い出すことにより、ユーザーが求める情報や機能を把握し、ユーザー視点でのより良い体験を実現することができます。

② 情報構造を整理しやすくなる

オブジェクトごとに必要な情報や機能を整理して、オブジェクト間の関係性を明確にすることで、
複雑なサイトやシステムでもユーザーが迷うことなく目的の情報にたどり着けるような設計が可能になります。
また、情報やUIの構造がわかりやすくなり、メンテナンス性も向上します。

③ 開発・保守の効率化につながる

オブジェクト間の関係性を明確にすることで、開発者にとってもわかりやすい設計となり、新しいオブジェクトや機能を追加する際にも既存の構造の整合性を保つことができます。
オブジェクトごとにコンポーネントを設計することで、オブジェクトの再利用性が高くなり、開発・保守の効率化や開発コストの削減にもつながります。

④ チームでの連携がスムーズになる

オブジェクトを中心にした設計は、デザイナー、エンジニア、プロダクトマネージャーなど、チーム間で共通認識を持ちやすくなり、連携がスムーズになります。チーム間での情報齟齬が生じにくく、一貫性の高いUXデザインを実現することができます。

OOUXのプロセス

① 調査・分析
② オブジェクトの定義
③ オブジェクトの構造化
④ ワイヤーフレームの作成
⑤ プロトタイプ作成とテスト
⑥ 評価・検証

①調査・分析

ユーザーのニーズや目的を理解するために、インタビュー、アンケート、ユーザビリティテストなどのユーザー調査を行います。

②オブジェクトの定義

ユーザーが操作するすべてのオブジェクト(商品、記事、カート、ユーザーなど)をリストアップして、各オブジェクトの属性(商品名、価格、説明、レビューなど)を定義します。

③オブジェクトの構造化

全てのオブジェクト、属性、関係性を視覚化したオブジェクトモデルを作成します。
全体像が明確になり、ユーザーの導線を理解しやすくなります。

④ワイヤーフレームの作成

オブジェクトモデルを基に、ユーザーがどのように利用するかを可視化したユーザーストーリー、レイアウト設計をするためのワイヤーフレームを作成します。

⑤プロトタイプ作成とテスト

ワイヤーフレームを基に、インタラクティブなプロトタイプを作成してユーザーテストを行います。
ユーザーテストからフィードバックを収集して、ワイヤーフレーム・プロトタイプを改善します。

⑥評価・検証

必要に応じて、オブジェクトマップやワイヤーフレームなどをアップデートを行い、テストと改善を繰り返します。

参考記事

OOUXについては、まだ、情報が少なく「OOUX」で検索してもヒットする記事は限られています。
参考にした記事をいくつか紹介します。

Object Oriented UX | OOUX
https://www.ooux.com/

Object-Oriented UX – A List Apart
https://alistapart.com/article/object-oriented-ux/

オブジェクト指向UX(OOUX)とは? – bagelee(ベーグリー)
https://bagelee.com/design/what-is-object-oriented-ux/

OOUXデザインプロセス 仮説の積み重ねでプロダクトの質を向上するUX設計方法 | ひらくデザイン | 株式会社コンセント
https://www.concentinc.jp/design_research/2022/07/ooux-design-process/

まとめ

OOUXは、まだ、発展途上の分野ですが、今後、重要になっていくと考えられていて、情報量が多い複雑なサイトやシステムの設計に特に有効なようなので、最新の情報を追いながら、活用していければと思います。

明日の記事は、矢原リーダーの「DynamoDB Localを使ったpytest」です。