オブジェクト指向ユーザーインターフェース(OOUI)
Object-Oriented User Interface

対象物を選んで操作するユーザーインターフェース

ファイルや図形、商品といった対象物(オブジェクト)を選び、操作するインターフェースで、アイコンや画像をマウスで操作するグラフィカル・ユーザ・インターフェース(GUI)の起源と言われる。

1989年にIBMによって『Object-Oriented Interface Design – IBM Common User Access Guidelines』の資料の中で、オブジェクト指向ユーザーインターフェース(略:OOUI)を発表した。

1997年にTheo Mandelセオ・マンデル博士が『The Elements of User Interface Design』の中で操作性を高めるためにOOUIが必要と述べている。

肖像 セオ・マンデル

Theo Mandelセオ・マンデル
引用元:theomandel PhD

OOUIと機能指向インターフェースの違い

OOUIを説明するにあたり、対になる「機能指向インターフェース」の設計思想について説明する。

行動を選んで操作する機能指向インターフェース

機能指向インターフェースは、「情報を見る」、「登録する」、「連絡する」といった行動を選んだ後に対象物を選ぶ特徴をもつ。例えば、顧客管理/営業支援システムであれば、「顧客情報を見る」という行動を選択した後に、対象物の顧客を選ぶ。

最初からやり直す必要があり、同じ画面での操作が繰り返される

機能指向インターフェースの構造では、最初に選択肢が多くなり、その先の画面がどれも対象物を指定する画面になるため、最初にどの動作を選んだのかを覚えていないユーザーは、対象物を選ぶ時に迷ってしまう。

機能指向インターフェースの悪い事例

メニュー選択後の画面が同じになるため前に選択したものを忘れて迷ってしまう

機能指向インターフェースは手戻りが発生

一度選択すると行動が制限されるため、途中から他の行動には移れない。操作を強制するモーダル状態となり、行動を再選択する場合には、前の画面に戻ってから対象物を選択しなければならず手間がかかる。

機能指向インターフェースの動線図

最初からやり直す必要があり、同じ画面での操作が繰り返される

対象物を選んで操作するOOUI

OOUIは、対象物を選んだ後に、「情報を見る」、「登録する」、「連絡する」といった行動を選ぶ特徴をもつ。例えば、顧客管理/営業支援システムであれば、対象の「顧客を選択」した後に、「顧客情報を見る」という行動を選択する。

OOUI構造

名詞ー動詞の順番で選ぶOOUI構造

顧客を選択した後は、どの行動でも選択できるようになる。操作を強制しないモードレス状態になり、行動を再選択しても顧客を選択し直す必要がない。

blank

メニュー選択後の画面が同じになるため前に選択したものを忘れて迷ってしまう

OOUI設計は操作の学習効率が良い

OOUI設計のメリットは、ユーザーが操作を覚えやすいという点である。覚えやすい理由として、ユーザー動線が複雑にならず、画面遷移も少なくなり、ユーザーの各行動に対して覚える動線が少ないからである。

他にも、機能を推測できる設計のため操作しやすく覚えやすい。この例であれば、顧客データを選択してから、ファイル出力、顧客情報の追加・変更・削除などの操作ができそうだと想像できる。営業支援システムであれば、顧客を選択した後に、メールを送る、関連資料、訪問予定の登録ができそうだと見当がつく。はじめのオブジェクト(対象物)から機能を推測できる。それは例えアイコンだけであっても機能がどこにあるのか予測することができる。

OOUIに沿って設計するとユーザーは機能を推測できる

ユーザーが機能を推測できるとされえる実例を紹介する。無料プランと有料プランが存在するサービスの場合、プランを変更したいケースが発生する。契約プランは個人のアカウント情報の一つと推測できるため、特別な説明がなくてもアカウントのページに遷移し、プラン変更を行うことができる。

Adobe Creative Cloudでは、トップページに「プランを変更する」という選択肢は存在しないが、アカウント情報が存在する。ユーザーは「アカウント情報の中にプラン情報が含まれているのではないか」と推測して、アカウント情報の画面へ移動することができる。アカウント情報に移動すると、契約中のプランが表示され、「プランを管理」というリンクから、契約内容を変更できそうだと推測できる。

Adobe Creative CloudのTOP画面

Adobe Creative Cloudのサイト。TOPにはプラン変更方法の案内は特にない

Adobe Creative Cloudのアカウント表示

アカウント情報にプラン情報があると推測し、右上のアイコンからアカウント表示へ

Adobe Creative Cloudのアカウント画面

アカウント情報を表示すると契約中のプランが表示され、「プランを管理」でプランを変更できそうだと推測できる

Adobe Creative Cloudのプラン画面

推測通りプラン変更ボタンが存在した
引用元:Adobe Creative Croud

関連用語

  • GUI
  • モーダル
  • モードレス
  • OOUX
  • オブジェクト指向
  • Object, View, and Interaction Design

参考サイト

blank

YuyaTakahashi

BtoB人事業務アプリのコンサルタント→エンジニア→BtoCのWebディレクターを経て、再度BtoB業務アプリとなる物流プラットフォームのUIUXに挑戦。オンライン/オフライン双方でのBtoBUXを改善すべく奮闘中。