11
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

OOUI(オブジェクト指向UI)の概要をざっくり知る

Last updated at Posted at 2020-07-04

オブジェクト指向UIとタスク指向UIの違い

「オブジェクト指向UI」を理解するためには対比される「タスク指向UI」と対比しながら理解するのが早いです。

タスクUIの説明でよくあげられるのが自動販売機のUIです。
飲み物を購入するまでの手順を見てみましょう。

グループ 4.png

これは典型的な「タスク指向UI」です。
長い間、この自動販売機のUIに親しんでいるため問題がないように思えてしまうかもしれませんが、よく考えると、①お金をを先に払い(タスク)、②商品(オブジェクト)を選んで購入 という流れは物を購入する際の流れからして明らかにおかしいです。
例えば、スーパーで買い物することを想像してみてください。
購入したい商品を選び、それをレジに持っていってからお金を支払いますよね?

ということは、本来は以下の流れが自然ではないでしょうか?

グループ 3.png

これが「オブジェクト指向UI」となります。
例えば、最近だと自動販売機でもSuicaなどの電子マネーで決済するときは先に商品を選択してから支払う流れになっていませんでしょうか?
このUIであれば、購入をキャンセルしたくなった場合はわざわざ返金ボタンを押さなくてもお金を支払わなければ購入されないので一手間減らすことができます。
また、商品選択が購入の意思決定とならないので、商品のご購入の可能性も減らすことができるはずです。

実際のプロダクトで考えてみる

好きな映画のタイトル、監督、感想を登録できる簡単なアプリのUIで考えてみましょう。
まずはタスク指向UIだとどうなるでしょうか?

ooui説明用.png

中心の初期画面からやりたいこと(タスク)を選び操作するデザインです。
いかにも冗長ですよね...
このままだとタスクが増える度に更に冗長さが増していきます。

これをオブジェクト指向UIに修正するとどうなるでしょうか?

ooui説明用-2.png

初めにオブジェクトである「映画」を選ばせるようにした結果、編集や削除のタスクをそれに対して持たせるようになったのでかなりすっきりしました。
操作の手順もこちらの方がわかりやすくないでしょうか?
機能を拡張する場合もこちらのほうが冗長になりづらいはずです。

まとめ

タスク指向UIは、
__「動詞→名詞」__の流れで作られ、
__タスク選択後__にそれに対しての__オブジェクト__を選択します。

一方、オブジェクト指向UIは、
__名詞→動詞__の流れで作られ、
__オブジェクト選択後__にそれに対しての__タスク__を選択します。

実際のプロダクト開発では、タスクごとに振り分けられるため、どうしてもタスク指向UIに陥りやすいです。
オブジェクトをきちんと洗い出し、名詞→動詞でデザインしていきましょう。

参考文献

オブジェクト指向UIデザイン
https://www.amazon.co.jp/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91UI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E2%94%80%E2%94%80%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%81%AE%E5%8E%9F%E7%90%86-WEB-DB-PRESS-plus%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA/dp/4297113511/ref=sr_1_1?adgrpid=107406600368&dchild=1&gclid=CjwKCAjwrvv3BRAJEiwAhwOdM_bN8LsdIuVruRLzCG6pYUFpB6JTagTgcOGfRGZhSBTjIad2-3dZnBoC5oUQAvD_BwE&hvadid=438598633583&hvdev=c&hvlocphy=1009344&hvnetw=g&hvqmt=b&hvrand=17531827114429171754&hvtargid=kwd-311354433491&hydadcr=1313_10330732&jp-ad-ap=0&keywords=ooui&qid=1593844465&sr=8-1&tag=googhydr-22

11
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?