ユーザーにも開発者にもメリット大のUI設計「OOUI」

こんにちは、DX開発事業部の佐藤です。
現在、iret.mediaではテーマ別ブログリレーを実施中です！
私はデザインチームとして、こちらの記事をお届けします。

みなさんは「OOUI（オブジェクト指向ユーザーインターフェース）」という言葉を聞いたことがありますか？

OOUIは、より直感的で使いやすいサービスを提供するために有効なUI設計の考え方です。
UIと名につく通りデザインの概念ではありますが、システム開発のフロー全体に影響を与えます。
そのため、エンジニアがOOUIを理解することは、ユーザーにとっても開発者にとっても大きなメリットとなります。

この記事では、OOUIの基本的な考え方を説明します。

OOUIとは何か？

OOUIは「Object Oriented User Interface」の略で、ユーザーが操作する対象（オブジェクト）を中心にインターフェースを設計する考え方です。
OOUIの考え方に準ずると、「何を（名詞）」→「どうする（動詞）」という名詞先行の流れでインターフェースを設計することになります。
一方、OOUIに対する概念であるタスク指向UIでは、動詞→名詞の流れでインターフェースを設計します。

私たちは何かをするとき、まず先にモノを手に取ります。
机の上の「書類」を手に取ってから、「読む」「書く」「捨てる」といった行動を取りますし、「投げる」という行動の後に「ボール」を手に取ることはありません。
現実世界のモノを扱う感覚に近いのがOOUIの特徴です。

例: プロジェクト管理ツール
制作するプロジェクト管理ツールの要望として、「ユーザーが、課題を検索できるようにする」「ユーザーが、課題に担当者を割り当てられるようにする」というものがあるとします。
タスク指向でUIを作成すると、まず課題検索ボタンや担当者割り当てボタンを配置し、ボタンを押すことでその機能を使用できます。つまり、タスク指向UIでは検索、割り当てというタスク（動詞）ありきで操作が始まります。
一方、オブジェクト指向でUIを作成すると、まず課題を主要なオブジェクトとみなし、一覧として表示します。そして、課題一覧をフィルタリングできるようにし、課題を選んで詳細画面に進んでから、割り当ての操作を実行できるようにします。つまり、OOUIでは課題という対象（名詞）ありきで操作が始まります。

なぜOOUIが重要なのか？

OOUIが重要視される主な理由は以下の通りです。

1. 直感的で分かりやすい
   現実世界のメタファーに基づいているため、ユーザーは専用の学習をしなくても直感的に操作できます。
2. 学習コストの低減
   いちど操作を覚えれば、他のオブジェクトにも応用しやすく、システム全体の学習コストを下げられます。
3. 柔軟性と拡張性
   オブジェクト単位で機能を追加・変更しやすいため、システムの変更や拡張に柔軟に対応できます。
4. 人間中心設計の実現
   ユーザーが何をしたいのか、何に注目しているのか、という視点から設計するため、よりユーザーの思考プロセスに沿ったUIを実現できます。

上記のようなメリットを発揮できるにも関わらず、システム開発ではOOUIではなくタスク指向UIを採用するケースも多く見られます。
これは、要望をそのままUIに反映しようとすると、自然とタスク指向UIになってしまうためです。
システムで実現したい要望は、「ユーザーが課題を検索できるようにする」「ユーザーが課題に担当者を割り当てられるようにする」といった具体的な「タスク（動詞）」で表現されることが多く、これをそのまま表現しようとすると、タスク指向UIとなるのです。

もちろん、システムによってはタスク指向UIが適している場合もありますが、OOUIとタスク指向UIのどちらを採用すべきかは考慮する必要があります。
（タスク指向UIは、ATMのようなオブジェクト（ここでは口座）が少ないものや、確定申告のような手順が決まっている作業に向いています。）

OOUIのキーワード

OOUIにおける基本的なキーワードを紹介します。

1. オブジェクト
   OOUI設計ではまず、ユーザーがシステムで扱う「モノ」、つまり、オブジェクトを明確にします。
   例えば、ECサイトなら「商品」「カート」「注文履歴」、プロジェクト管理ツールなら「プロジェクト」「タスク」「担当者」などがオブジェクトになり得ます。
   実体であろうと概念であろうと、ユーザーが「これについて何かしたい」と考える対象がオブジェクトの候補となります。
2. オブジェクトのプロパティとアクション
   抽出したオブジェクトには、それぞれ「プロパティ」と「アクション」があります。
   プロパティ: オブジェクトが持つ情報や状態。「商品」オブジェクトなら「商品名」「価格」「商品説明」「在庫数」など。
   アクション: オブジェクトに対してユーザーが行う操作。「商品」オブジェクトなら「カートに入れる」「お気に入りに追加する」「レビューを見る」など。
3. オブジェクト間の関連性
   オブジェクト同士は互いに関連し合っています。
   この関連性を明確にすることで、ユーザーは情報をスムーズに辿れるようになります。
   例：「注文履歴」オブジェクトは複数の「商品」オブジェクトと関連し、「商品」オブジェクトは「レビュー」オブジェクトと関連している、など。
4. ビューとナビゲーション
   ビューとナビゲーションにより、ユーザーがオブジェクトをどのように見て、どのように操作するかを定義します。
   ビュー: オブジェクトの情報をどのように表示するか。一覧表示、詳細表示など、目的に応じたビューを用意する。
   ナビゲーション: オブジェクト間をどのように移動するか。ナビゲーションの手段にはリンク、メニュー、パンくずリストなどが該当する。

OOUIは要望を超える

機能が動詞としては表れないOOUIですが、もちろんシステムに載せたい機能の要望を満たせます。

テキストSNSにおいて「同じことに興味があるユーザーを探せる」という要望があれば、自分が気になった投稿をリポスト・いいねしたユーザー一覧を用意すると良いでしょう。逆に「人の目を気にせず投稿できる」ことを要望するなら、先のようなユーザー一覧は作らず、もしかするとリポスト・いいねのような拡散・同意を促すボタンごと排除する必要があるかもしれません。
このように、OOUIにおいても要望によってビューやナビゲーションは当然変化しますし、それゆえにシステムが「（技術的に）何ができるか」よりも「どうあるべきか」を深掘りする必要があります。

また、OOUIで作られたシステムは、時に要望以上の使い勝手を生み出します。
私たちは現実世界において、椅子を脚立代わりにして上に立ったり、ポストカードを栞代わりにして本に挟んだりと、本来の用途とは異なる道具の使い方をします。同じように、OOUIで制作されたシステムは、自由度が高く制作者の思い至らなかった使い方を生み出します。
結果、意図せぬ好影響を与えシステムの高評価につながります。

まとめ

OOUIは、ユーザーにとって直感的で分かりやすいシステムを実現するための強力な設計アプローチです。
デザイナーではないメンバーもOOUIの考え方を理解し、設計プロセスに取り入れることで、ユーザー満足度や質の高いシステム開発に貢献できます。