皆さんこんにちは、こんばんは。LiSMOtechデザイナーの原です。

この記事では、OOUI（オブジェクト指向UI）の設計方法について分かりやすく解説しています。

是非、プロダクト改善に役立てて頂ければ幸いです。

まずはじめに、OOUI＝オブジェクト指向ユーザーインターフェースとはUI設計の手法の一つです。

基礎知識やそのメリットなどは前回の記事『OOUI（オブジェクト指向UI）の設計手法やメリットの話をしよう。【UIデザイナー必見】』具体例を用いて解説しているのでそちらをご覧ください。

オブジェクト指向UIの４つの原則

まずは前回のおさらいも兼ねて、オブジェクト指向UIには４つの基本原則について確認しておきましょう。

「オブジェクト指向UIデザイン 使いやすいソフトウェアの原理」では、オブジェクト指向UIの原則として次の４つが挙げられています。

・オブジェクトを知覚でき直接的に働きかけられる
・オブジェクトは自身の性質と状態を体現する
・オブジェクト選択→アクション選択の操作順序
・すべてのオブジェクトが互いに協調しながらUIを構成する

引用：オブジェクト指向UIデザイン 使いやすいソフトウェアの原理

オブジェクトを知覚でき直接的に働きかけられる

オブジェクト指向UIでは、ユーザーがコンピューターを使って行う操作の対象がそこに知覚できる様態でなければなりません。

操作の対象、すなわちコンテンツや入力フォーム、機能的処理などが、アイコンやグラフィック、ボタンなどで知覚できる状態で表現され画面に並べられます。そして、ユーザーはそれらをマウスや指で操作し選択や移動などの作業を進めます。

これは当然のことのように思われるかもしれませんが、プログラミングを行うターミナルの画面はテキストやコマンドを打つと結果がテキストで表示されるようになっていますね。そこではあらかじめ操作対象は見えていません。そのためユーザーは頭の中でコンピューター内の情報を想像しながらコマンドを入力することで作業を進めます。このようなコマンド起点の操作モデルはCUI（キャラクターユーザーインターフェース）と呼ばれオブジェクト起点のGUIとは対照的なUI表現となっています。

コマンドを覚え慣れてしまえば操作を効率的に進められることができます。しかし一般的なコンピューターに慣れていないユーザーからすればテキストだけで情報を想像しながら作業することは非常に困難です。

そこで、我々の日々の日常生活の中で作業するのと同様に、対象物が見えていて、触ることができ、作業の結果を対象物の変化でその場で確認できるように設計されたものがオブジェクト指向UIなのです。

オブジェクトは自身の性質と状態を体現する

ユーザーがスムーズに効率よく作業を進めるためには、オブジェクト自身も現在の性質や状態を体現していることが極めて重要です。

例えば、オブジェクトをタップした時、それがタップされていることを示すように色を反転させ現在の状態を体現する。このようにリアルタイムでフィードバックを返すことで、オブジェクトの現在の状態なのか、ユーザーがどんな操作をしたのかを認知することに繋がります。

オブジェクト選択→アクション選択の操作順序

前回の『OOUI（オブジェクト指向UI）の設計手法やメリットの話をしよう。【UIデザイナー必見】』でも述べましたが、オブジェクト指向UIでは、「名詞」→「動詞」つまり「オブジェクト選択」→「アクション選択」の手順で操作が進みます。

例えば、電子マネー対応自販機でドリンクを選ぶように、複数のオブジェクトの中から目当てのものを選んだ上で、操作する選択をするということです。

すべてのオブジェクトが互いに協調しながらUIを構成する

オブジェクト指向UIでは、コンピュータで作業するのに必要な概念が対象化され、それらの集まりで画面を構成しています。

しかし、これらは無闇に存在しているわけではありません。そこではオブジェクト同士が互いに協調しながら現されていなければなりません。

つまり、オブジェクトがシステム全体のルール（レイアウトやレギュレーション）に従って存在することで作業空間の全体が構成されているのです。

例えば、重要なものはより大きく表示し、重要でないものはそれよりも小さく表示されます。同じ種類のもの同じ規格（形、色）を持ち、違う種類のものは違う規格を持ちます。並列な関係にあるものは整列されたレイアウトで、包含関係にあるものは領域の入れ子構造で表されます。

これらの一貫した表現ルールのもとにオブジェクトを構成するからこそ、我々が日常で世界との関わり方を学習するように、コンピューターの世界でもその構造を自然に理解・体得し、ユーザーは自分の起こした行動や操作を理解することができます。

OOUI設計の３つの基本ステップ

前回記事とオブジェクト指向UIの原則から深掘りイメージがついてきたところで、

ここからは、実際にオブジェクト指向UIを活用してプロダクトを設計する際の基本的な３つのステップについて解説していきます！

※本記事では、フードデリバリーサービスアプリを例に説明していきます。

ステップ１｜オブジェクトの抽出

オブジェクト指向UIで設計をする際にまず初めに行うことは、オブジェクトの抽出です。

まずは想定される「ユーザーの目的とする対照」を明確に言語化していきます。

ユーザー視点で、できるだけ洗い出してみましょう。

• 牛丼屋を確認したい。
• ラーメン屋を確認したい。
• すき家のメニューが見たい。
• ピザの料金を確認したい。
• デリバリー料金を知りたい。

ユーザーの目的が言語化できたら、次に名詞と動詞に切り分けて名詞を抽出します。

この時、単に機械的に名詞を抽出するのではなく、ユーザーの興味・関心に対象となる概念は何かを考えてみてください。

• ラーメン屋
• 牛丼店
• メニュー
• すき家
• ピザ
• 料金
• デリバリー料金

次に「名詞」の関連性を繋げ、特に重要なオブジェクトを特定していきます。抽出された名詞の中で意味や扱いが共通するものをまとめてみましょう。

ここでは、「すき家」が店舗名になり、この店舗を一つのまとまりとして整理していきます。店舗名は「牛丼」や「メニュー」、「料金」「デリバリー料金」などと関連性を持っています。

これらの関係図を図式化し、オブジェクト同士の関係性を考えて特に重要となるメインオブジェクトを特定していきます。

ステップ２｜ビューとナビゲーションの検討

次のステップ２では、ビューとビュー同士の呼び出し関係となる導線設計を行います。

まずは、メインオブジェクトに一覧となるコレクションページと、詳細となるシングルページのビューを与えます。

そこから、それぞれの画面同士の導線をどう繋げると自然かを検討していきます。

今回のすき家の例で店舗とメニューの関係性を考えてみると、

例えば一つの店舗に対し、「牛丼」や「豚丼」「カレー」などの複数のメニューが存在する。

そのため、店舗のシングルページ内にメニューのコレクションページを表示させたり、その導線を考える必要があります。

ステップ３｜レイアウトの作成

最後に、ステップ３では、ユーザーが実際に目にする画面としてレイアウトパターンを適用していきます。

オブジェクト指向UIにおけるレイアウトパターンは、すでに一般化したパターンを適用します。

これまで様々な画面展開が試されてきており、オブジェクトの一覧表示、及びオブジェクトの追加、閲覧、更新、削除といった一連の操作に伴うレイアウトによる視覚表現は経験則により必ず「良いパターン」があります。

そのパターンを適切に踏襲することで、ユーザーはアプリケーションの振る舞いを短時間で感覚的に学習することができ、分かりやすく情報を伝えることができます。

以上がOOUIの設計方法になります！

まとめ

今回はオブジェクト指向UIの設計方法を詳しく解説しましたがいかがだったでしょうか！

OOUIはUI設計において、プロダクトの設計者がまず最初に学んでおくべき概念だと思います。

OOUIの概念がUI設計の一つの指標にもなりますので是非、本記事を読んであなたのプロダクトのサービスを作る際に参考にしてみてください！

最後まで読んでいただきありがとうございました！！