こんにちはデザイナーの大村です。「Air ビジネスツールズ*」のデザインガイドライン制作するチームに所属しています。

*Airレジ、Airペイをはじめとしたリクルートの業務支援サービス

先日、ソシオメディアの藤井 幸多先生を講師にお招きし、OOUIトレーニングを開催しました。
私は2020年2月から事業に参画させていただいてる業務委託のフリーデザイナーなので、厳密には「開催してもらいました」になります。参画時に「やりたいワークショップとかあったら教えてね」と言ってもらえたので兼ねてから気になっていたソシオメディアさんのトレーニングを提案したところ、わずか2週間で決定し開催*に至りました。

OOUIは大きな事業に関わる各プロダクトを可能な限りシンプルに作る上で有効な考え方の一つだと思います。

*本ブログは、2月時点に行った研修を題材としています。

OOUIとは

OOUI（object-oriented user interface）は、プロダクトのUI設計の考え方のひとつとして注目されています。日本語で言うと、「オブジェクト指向のUI設計」です。

OOUIではユーザーの関心は”オブジェクト”であり、それに直接働きかけられることを原則としています。

操作手順として、ユーザーはまずオブジェクト（名詞）を選び、次にそのオブジェクトに対するアクション（動詞）を選びます。
必ず「名詞 → 動詞」の順で選択されるように設計します。
GUI* はオブジェクトベースでモデリングされなければならないと考えられています。

*GUI（Graphical User Interface）とは、グラフィックベースの操作体系を持つUIのことです。 情報の表示にグラフィックを多用しており、命令文を入力して実行する方式(CUI)に比べ、直感的に操作することが可能です。

典型的な例がMacのLaunchpadです。色んなアプリケーションのアイコンが並んでいてユーザーはそれを直感的に認知し選択できます。

密度の濃かったトレーニング

トレーニングは、初級・中級編の2日に分けて実施されました。（各3時間半程度）
参加メンバーは、Air各プロダクトのデザイナーやディレクター合計約20名。昨今の状況を鑑みて、参加者全員は会場入りせず半数はリモートで参加となりました。両日とも前半は藤井先生講演による座学、後半はアプリケーションをどうモデリングしUIに落とし込むか手を動かしながら考えるワークショップという二部構成でした。

前半：座学

座学ではユーザーインターフェースの成り立ちからOOUIの概念やメリットをスライドを用い丁寧に解説していただきました。幾つかの実在するアプリケーションのUIをモチーフにオブジェクト指向の有用性について語られた内容は一番心に残りました。オブジェクトベースとタスクベースについての説明ではイラストを用いて噛み砕いて説明され、一瞬会場が「わっ」をなる場面もありました。

後半：ワークショップ

ワークショップは、オブジェクト指向で設計する癖をつけるためのトレーニング内容で、具体的なアプリケーションを題材に4-5人チームに分かれ、意見交換しながら行いました。

手順は以下です

1. モデル　オブジェクトの抽出
2. インタラクション　ビューとナビゲーションの検討
3. プレゼンテーション　レイアウトパターンを適用

1. 題材の文章からオブジェクト（名詞）を抽出しアプリケーションの構成の材料となるプロパティ（物体の特性・特質）を洗い出しモデル化（問題解決に必要な部分だけを抜き出して簡単化・抽象化する）します。
2. それらをシングルとコレクションに分けてビューを書き出し、どのようにインタラクション（相互に作用）するかビューとナビゲーションの検討。3. 最後にプレゼンテーションとしてレイアウトパターンを適用していきます。

行ってる時間は、オブジェクト指向で出来ているかを周りのメンバーや先生と答え合わせしながら進めるので、トレーニング時間内で手法として身についたかと思います。
この方法を実務の際に実施すると脳内整理ができるのではと感じました。

題材は以下のようなアプリケーションでした。

1日目　初級編
レベル1. メモアプリケーション
レベル2. 社員名簿アプリケーション
レベル3. イベント運営アプリケーション

2日目　中級編
レベル4. 会議室予約アプリケーション
レベル5. 家族で遊べる場所を探すアプリケーション
レベル6〜9. 商品管理アプリケーション

一つの題材につき10〜20分の持ち時間で中級編になるとかなり集中しても時間内には出来上がらないくらい密度の濃いものでした。

OOUIのメリット

ひとつはオブジェクトベースでモデリングできると、サービス全体の設計がシンプルになり画面やオブジェクトの数が減り、結果的にユーザーはより短い時間で作業を完了することができるようになることです。開発者は物理的に量が減るため作業工数の削減にもつながります。

もうひとつはユーザーが主体性を持って行動するようになるため、プロダクトへの関心が高まり学習意欲が自然と湧くということです。
オブジェクトベースで設計することはつまり操作対象（オブジェクト）を前面に出し、それをユーザーが自由に選択できるモードレスな状態を作ることです。そうする事でユーザーは自分で次に何をするか考えながら行動するようになります。結果、学習意欲も自然と向上しその人にとって使いやすいプロダクトになります。

オブジェクトベースに対してタスクベースという考え方があります。これはタスクを完了するというモードに入るモーダルになります。
タスクベースの設計では画面に配置する入り口が増え、あるユーザーには必要だが別にユーザーには必要のない情報なども並列に見え結果的にユーザーを迷わせることになる事があります。また、完了できないと次の行動ができないという不自由さもあります。

オブジェクトベースとタスクベース

オブジェクトベースのUI（モードに入らないただのオブジェクトが配置された構成）とタスクベースのUI（モードに入るオブジェクトが配置された構成）を実際の例をご紹介します。

「Air ビジネスツールズ」の中に「Airレジ」という会計に使うアプリケーションがあります。これには店頭での会計業務に使用する画面と、経営者が各種設定をしたり売り上げを管理するバックオフィスの画面があります。

会計画面では、商品（名詞）を選んで会計処理を行う（動詞）オブジェクトベースで構成されています。老若男女が初めて使用する場合でも分かりやすく設計されており、従業員の教育コストも軽減されるのではないかと思います。

一方でバックオフィスではレジチェックを行う（動詞）や設定を行う（動詞）などタスクに依存する形の作業が多いためタスクベースでの構成になっています。これは、経営上行わなければならない業務を端的に表して経営者の負担を軽減し、本来大切にしたい接客に集中することができるよう配慮したい思想からこのような構成になっています。

対象物を選ぶ必要のない場合や万人に同じ操作を行ってもらいたい場合はタスクベースのUIが有効なケースもありますので、案件に応じて見極ることが重要です。

オブジェクトベースとタスクベースの比較はソシオメディアさんのOOUI – オブジェクトベースのUIモデリングに詳しく書かれていますのでもっと詳しく知りたい方はご覧ください。

トレーニングを受けて今、思うこと

UI設計は、「何をどこにどのように置けば良いのか」という事を考えますが、実はデザイナーの経験則や一般論で行われていることが多く、実際絵を起こすデザイナーやレビューをするリーダーその先のステークホルダーに至るまで、持っている情報に個人差があり落とし所が難しいと感じることがあります。
そんな時、ひとつの指向を基にロジカルに設計できれば落とし所も自然と絞られるのではないかと思います。
対象ユーザーや状況によってはタスクベースの方が有効なケースもありますが、多くの場合はオブジェクトベースで設計できていると構造がシンプルになり、開発者は開発工数、ユーザーはクリック数が削減されストレスの軽減に繋がることは確かです。この考え方を同じプロジェクトに関わるメンバーが心に留めて従事できると、ゆくゆくはプロダクトの成長を加速させることができるのではないかなと感じました。