オブジェクト指向UIで作るべき理由
こんにちは、デザイナーの畠です。
私が普段デザインをするときに意識していることの一つにオブジェクト指向UIがあります。
あまり聞き慣れない言葉かもしれませんが、メルカリ、Netflixなど、近代の多くのサービスがオブジェクト指向UIをベースに設計されています。
オブジェクト指向とは別にタスクを基本としたタスク指向もあるので、それぞれ説明します。
タスク指向UIとは
何かを操作するときに、タスク＝”購入する、編集する、削除する、聞くといったアクション”を先に選択し、その次に対象や設定などを指定する流れの設計を指す。
「動詞」→「名詞」の順の操作になる。
例：銀行のATMの操作画面
オブジェクト指向UIとは
何かを操作するときに、まず最初に対象のオブジェクトを選択し、その後アクションを選択する流れの画面設計。
「名詞」→「動詞」の順の操作になる。
例：Amazon、Netflix、Spotify
タスク指向UIの課題
タスクが複数あったときにタスクをベースに画面を整理することは困難です。
タスク単体では優先度が高いのか重要度が高いのか判断できないためです。
また、タスクというのは基本的に1つのサービスだけでもたくさんあります。
タスクの一例：キャンセル、保存、表示、解約、購入、追加、編集
例えば、本のオンライン販売のサービスを例にあげてみます。
サービス内での”削除”というタスクについて考えてみましょう。
削除の対象は下記のように様々なものがあります。
- 全データをまとめて”削除”(解約)する
- 登録済のクレジットカードを”削除”する
- カートに入れた商品を”削除”する
- アドレス帳の1つの住所を”削除”する
- ほしいものリストに登録済の商品を”削除”する
すべてのデータを削除(解約)は、頻度は低く重要度は高いタスクになります。
また、ほしいものリストの一つの商品を削除は、それなりの頻度になりますが、重要度は低いタスクになります。
画面の設計は重要度や頻度といった内容に左右されます。
下の「タスク指向UIのTopページ」はタスク指向UIで設計したページになります。
ボタンを押すと何が起こるか全く想像がつかないでしょう。
また、削除ボタンを押した後に遷移した「削除の対処を選ぶ画面」では 対象のオブジェクトの粒度や内容が多岐にわたるため、ラジオボタンの選択肢に一貫性がありません。
タスク指向UIでは、まず商品の情報を見たいのに いきなり購入するのか、予約するのか、編集するのか、といったアクションを並べられて、困ってしまうという状況が発生してしまうのです。
オブジェクト指向UIのメリット
ではオブジェクト指向UIではどうなるのでしょうか？
UIをシンプルに整理できる。
オブジェクト指向UIであればユーザーにまず商品を選ばせ、その後商品を購入するなど、人が自然な感覚で操作で操作を行えるようになります。
下の画像はオブジェクト指向UIで作成された、Topページと商品を選んだ後のページです。
まず、オブジェクトをTopページなどで全面に出し、
オブジェクトを選んでもらいます。
詳細ページでは、選んだオブジェクトに適したアクションのみを表示させます。
”解約”など、選んだ本に直接関係ないアクションを表示させる必要はありません。
本が選択された状態であれば、”お気に入りに追加”や”購入”ボタンに違和感を感じません。
人はオブジェクトを選ぶことによって、具体的なアクションもイメージできるようになるのです。
まとめ
今回はオブジェクト指向UIについて解説しました。
ほとんどのサービスにおいて、タスク指向UIは適していません。
しかしながら、ユーザーや社内での要望が「○○したい」といった機能追加の内容が挙げられる場合に、 それをそのまま開発しようとして、画面設計においてもタスク指向を押し出した設計をしてしまうケースが起こっているようです。
基本はまず、オブジェクトを選ぶUIで考え、適材適所でタスク指向を検討するようにしましょう。