最近噂のOOUI、オブジェクトベースのUIとは何だ!?

(この記事は「CRESCO Advent Calendar 2019」5日目の記事です)

こんにちは。UXデザインセンター金井です。

2019年11月20日~22日で開催された「ET & IoT Technology 2019」の、スペシャルセッションプログラムに参加してきました。

色々とHCDやデザインにまつわるお話が聞けた中、ソシオメディア取締役 上野さんのディスカッション、「これからのUIデザイン ~オブジェクトベースUIへの招待~」がとても印象的だったのでレポートしたいと思います。

UI設計は、「何をどこにどういう状態で置けば良いのか」という事を考えるわけですが、実はデザイナーの経験則や一般論で行われていることが多く、これまで明確なルールやロジックは特にありませんでした。

そんな中、今注目を集めているのが「OOUI(object-oriented user interface)」。
日本語で言うと、「オブジェクト指向のUI設計」となります。

ひとつの指針としてこの考え方を用いればロジカルにUI設計できるとあって、デザイナーからも開発者からも注目されています。

オブジェクトベースUIって何?

早速ですが、OOUIとはなんでしょうか。

上野さんの講演案内から引用させていただくと、

オブジェクトベースUI設計とは、GUIの発明的起源であるオブジェクト指向のコンセプトを用いたUI設計手法であり、アプリケーションのUI構成を決める際に、オブジェクト分析の結果を手掛かりにして画面とデータを対応づけるものです。

とあります。

UI設計は大きく分けて「オブジェクトベース」と「タスクベース」の2通りの方法で考える事ができます。両者の区別は、Userから「見えているもの」がタスクか、オブジェクトかで判断します。

例えばファイルを削除する、という行為をUI設計しよう、と考えたとき、

タスクベースでは。。

①「削除」などのボタンを並べておき、ボタンを選択させる
②ファイルの一覧ページを表示し、どのファイルを開くかを選択させる
③「確定」ボタンでファイルを開く

これをオブジェクトベースで考えると。。

①ファイルの一覧を表示し、どのファイルを開くのか選択させる
②「削除」ボタンを押す

こんな風になります。

上記の例で考えると、タスクベースでのステップ数は3ステップ、オブジェクトベースでは2ステップと、ステップ数が減少しています。また、同時に画面数も減らす事が出来ています。

特に違うオブジェクトに対して同じような処理を行う場合は、タスクベースと比べて画面数を大幅に減らすことが出来るとのこと。

「覚えやすい手順」は本当に必要?

もう1つ、大きな違いとして、「モード」という考え方があります。
タスクベースの開くボタンを押した場合では、ユーザーは「開くモード」に入り、その他の操作をする事が出来ません。反対にオブジェクトベースでは「モード」には入らず、ユーザーに操作を自由に選ばせています。

このように、オブジェクトベースでは、操作対象のオブジェクトをはじめに見せ、後の操作をユーザーに任せる事で、ユーザーが自由に操作を選択できる、という特徴があります。
根底には、いくら「覚えやすく」ても、設計者が決めた「手順」を押し付けてはいけない、という考え方があるのですね。

講演の中では、これを「ユーザーの学習」を前提にしたUI設計、という事で語られていました。
確かに、最初は手探りでも自分であれこれ学習できるUIであれば、他のオブジェクトにも簡単に転用できそうでよね。

具体的にはどんなUIになるの?

講演の中で紹介された、オブジェクトベースUIの原則は以下です。

  • オブジェクトが見えていて直接働きかけられる
  • オブジェクトは自身の性質と状態を体現する
  • オブジェクトを選択してから、アクションの選択をする(名詞→動詞の順)
  • 全てのオブジェクトが互いに協調しながらUIを構成する

OOUIのポイントは?

オブジェクトベースでUI設計をするうえでのポイントはどんな事でしょうか。

まずは進め方ですが、

1:オブジェクトの抽出
2:ビューとナビゲーションの検討
3:アクションの検討

という順番で進行していく、という事でした。

お話を聞いていると、この「オブジェクトの抽出」が勘所かな、と感じました。
オブジェクト抽出の具体的な方法ですが、これはユーザー調査等で分かったユーザーの要求から「名詞」を探す、という作業になります。

例えば学校関係者が使う「学校の情報管理アプリ」を例にしましょう。

次のような要求がある場合、名詞→動詞になっている部分を探します。

  • ある生徒が所属している部活を確認できる
  • 各部活の顧問の電話番号を確認できる
  • 部活の顧問に、所属する生徒の成績をメール添付で送信できる

ある生徒、部活、顧問、電話番号、成績・・などが候補にあがります。

ここから次のような作業をします。

  • 抽出した名詞を整理(粒度や名称を揃える)
  • 名詞の関係性をつなげ、必要なオブジェクトを特定する
  • オブジェクト、プロパティ、アクションに分けて整理する

最終的には開発で使う、クラス図のようになるとのこと。

ここを上手く整理できるか、という所が大きなポイント、と感じました。

認知負荷が少なく、ユーザーが自由に操作できるシステムを作るためには、ユーザーに
どういうオブジェクトを提示すれば、出来そうな「タスク」を想起できるか、という視点が大切になってきます。

つまり抽出したオブジェクトをそのままUIにしては当然NGで、人間のメンタルモデルと処理の流れを一致させていく行為が必要です。

タスクベースの方がいい場合は?

所でオブジェクトベースより、タスクベースの方が適している場合はないのでしょうか。

例えば銀行のATMの様に、そもそも操作対象が限られているケースではどうでしょう。

大体のユーザーは「自分の口座に入っているお金」に対して何かをしに来るので、すぐにタスクから始めた方が自然ですよね。

やはりどちらが良いか、というのはメンタルモデルとの一致、という点で検討できそうです。

具体的にはこれ以外に、

  • 操作が定型的なもの
  • 絶対に完遂が求められる操作

などはタスクベースの方がよい、との事でした。

ただ、オブジェクトベースの事を知らずに機能を実装すると、タスクベースになってしまいがち、というご意見は納得でした。
まずはそういう考え方がある事を知り、オブジェクトベースではどうか、という事を比較検討できる事が大切です。

最後に講師の上野さんが詳しく説明しているサイトをご紹介します。
とても分かりやすく解説されていますので、興味を持たれた方はぜひご一読くださいませ。
というか、こっちから読んだ方が良かったりするかも(笑)

OOUI ? オブジェクトベースのUIモデリング

  • このエントリーをはてなブックマークに追加

クレスコのUXデザイン

クレスコでは、より良いユーザー体験を実現するために、良いUXを量産する仕組みの設計/アドバイス/コンサルティング等の支援を行っています。

UXデザインやHCD(人間中心設計)の知見を持つ専門家が、B2C/B2Bを問わず、サービスの企画立案・要求策定、要件定義/設計など、さまざまな局面で幅広いご支援を行っています。

Webマーケティング、UX/UIデザイン、ビジュアルデザイン、ユーザビリティ評価/改善についてのお問い合わせ・ご相談は、お気軽にどうぞ。

クレスコのUXデザインを詳しく見る