OOUIってなんだ？

OOUIも知らんの？まあそう言わず、落ち着いて聞いてください。

この記事は、「OOUIという言葉をよく見かけるけど、OOUIについて説明してと言われると説明できない…」そんな皆さん(もとい私)のために書いた記事です。

🚩この記事を読み終えた皆さんの目標：OOUIを一言で説明できるようになる

先輩デザイナーからのFBで「OOUIを意識しましょう」と言われても「なんとなく」わかった気でうなずいてませんか？この機会にOOUIを意識するとはどういうことなのか、しっかり理解しちゃいましょう、！

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

OOUIを理解するにはまず「タスクベース」と「オブジェクトベース」について理解することが必要となります。

それぞれの英単語の意味として、

タスク 【 task 】：仕事、課業、職務、任務　
→つまり「動作」(動詞)

オブジェクト 【 object 】 ：物、物体、目標物、対象　
→つまり「対象物」(名詞)
参考：IT用語辞典

タスクベースは行う「動作」をベースに作られたもの、ということになります。
一方、オブジェクトベースは何に対して行うのか「対象物」をベースに作られたもの、ということになります。

💡オブジェクトベースのUIとは、
ユーザーがオブジェクト（対象物）を選ぶところから操作が始まるUIのことです。
ファイルを選んで → 開く
商品を選んで → 決済するの順番ですよね？
現実世界においても同じはずです。

「釘を打つ時、我々はまずハンマーを持ち、それから振り下ろします。振り下ろしてからハンマーを持つ人はいない」
参考：ソシオメディア｜OOUI  https://www.sociomedia.co.jp/7279

対象オブジェクトを選ぶところから操作が始まるのは非常に自然ですね。

OOUIの基本的な操作手順として、ユーザーはまずオブジェクト（対象物）を選び、次にそのオブジェクトに対するアクションを選びます。
💡操作手順が「名詞 → 動詞」になるようにデザインしなければならないのです。

2.OOUIのメリット

・自然に操作ができるようになる
操作方法を説明書を読んだりしなくても「ユーザーが好きな方法で目的に向かえる」ため、手順を覚えたりする必要がない、モードレスな設計ができます。

・構造がシンプルになる
モデル層のデータとビュー層の表示要素が自然に対応するようになり、フロントエンドとバックエンドの関係をシンプルに保つことができます。

UIの構成をタスクベースからオブジェクトベースにすると、
通常、画面数は5〜20分の1に減ります。
参考：ソシオメディア｜OOUI  https://www.sociomedia.co.jp/7279

3.OOUI設計の手順とポイント

3-1.範囲の定義

扱うものと扱わないものを決める
ユーザーが何をどのように行なっているかや、業務の内容（事業に対する位置付け、役割、フロー、入出力される情報など）をよく把握しておくことが必要です。
ユーザーの観察やインタビュー、担当者や管理者からのヒアリング、既存システムの調査を行い、このサービスで扱う範囲の定義をしておきましょう。

3-2.オブジェクトの抽出

オブジェクトの見つけ方
・同じ属性を持つものが複数ある
・それらに共通のアクションを行える
・（簡単にいうと...）一覧が作れるもの

一方、オブジェクトとして適当でない概念は
・「する」をつけると動詞としてみれてしまうもの
・項目にひとつだけつけられる「属性」のようなもの
　　(お気に入りやスターなど)

3-3.ビューの定義と設計

💡ビューとは、ユーザーが画面上で目にする、ひとまとまりの情報表示領域です。ウィンドウやページ、分割されたレイアウト内のひとつの枠（ペイン）、メニューとして表示されるひとつのリストなどがビューと呼ばれます。

オブジェクトを表象する「ビュー」は一つではなく複数種類が検討できます。
選んだビューによって表示される要素（プロパティ）に違いがでます。
各オブジェクトに対し、どのビューが必要か？、それをどう呼び出すか？がポイントになります。

ほとんどのビューは、一覧（コレクションビュー）と、詳細（シングルビュー）に当てはめることができます。

3-4.レイアウトの設計

複数種類の「ビュー」をどう表現するか？

🖥デスクトップ
・一覧のみ（必要な情報をすべて一覧表示）
・一覧と詳細（画面が分かれている）
・2カラム（左に一覧、右に詳細）
・詳細のみ（デフォルトでは一覧は非表示）
・3カラム（複数の一覧表現）
・上にタブ（オブジェクトの切り替え）
・（↑タブの数に限りがある）多いときやユーザーが追加するときはカラムにする
・タブ＋2カラム
・3カラム’（1つの画面に左から右に行くにつれて階層が深い構造）
・タブ＋3カラム

📱モバイル
・ビューのまとまりごとに別画面にする（1カラム1画面）
・下にタブ（モバイルアプリで主流）

3-5.インタラクションの設計

ビュー同士をつなぐ「インタラクションのデザイン」も大事です！

💡インタラクションは、方向性を持ってデザインする。
「左で操作した結果が右に反映される」
「上で操作した結果が下に反映される」
方向性があると、動作の意味がユーザーに理解されやすくなります。

4.さいごに：OOUIとは

OOUIとは「ユーザーがオブジェクト（対象物）を選ぶところから操作が始まるユーザーインターフェースのことで、操作手順を「名詞」→「動詞」で表し、各オブジェクトに1つ以上あるひとまとまりの情報表示領域(ビュー)の階層を 左→右 や 上→下 など方向性を持って表現し、シンプルで自然な操作性を実現したもの」である！

🚩この記事を読み終えた皆さんはOOUIを一言で説明できるようになる目標を達成できたでしょうか？

解釈に間違いなどがあった際にはぜひご指摘いただけると幸いです。🙇‍♂️

5.参考

ソシオメディア | OOUI – オブジェクトベースのUIモデリング

銀の弾丸の記事まとめ。オブジェクトベースUIを作るにはどうしたらいいの？#オブジェクトベースUI pic.twitter.com/EPJmgSShmi

— Yukari Shingyouchi / 手描きノート (@singularity8888) October 31, 2018

今回のnoteはOOUIについてあまり理解していない人に向けて書きました。
もっと理解したい方は是非上の参考ページも読んでみてください。