WebサイトにおけるOOUIの必要性

Warning: Undefined variable $_cat_enginieer_flag in /home/growgroup/online-study.jp/public_html/wp-content/themes/online-study-wp/views/object/components/related-posts-inline.php on line 37

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

WebサイトにおけるUIデザイン

UIって何ですか？ぼくはwebデザイナーになって数カ月間UIについて説明することが出来ませんでした。
ワードは知っているがどんなものか概要がイマイチ分からなかったのです。

そんなとき上野学さんのOOUIというサイトを見つけて読んでいくうちにどんどんのめり込んでUIって知れば知るほど身近にあるし、何より勉強してて楽しいと思えました。

ぜひこの記事を読んでいる皆さんもOOUIの楽しさに触れていただければと思います。

OOUIとはどんなものか

OOUI＝自分が行おうとしていることを達成するために使用するモノを基準に考える。

つまりオブジェクト指向ユーザーインターフェースということになります。オブジェクトが主人公となり、どう動くか動かすかによって課題を解決していくこととも言えます。

OOUIを推進すべき理由

OOUIを推進していくべき理由は３つあります。

劇的な遷移（ページ）数削減による工数縮小

もし「どう動かすか」が先にあるサイトの場合、ECサイトで例に上げると「買う・詳細を見る・問い合わせる」といったボタンがTOPページに有るとしましょう。
おそらくエンジニアはこの３つのボタンの遷移先ごとに商品一覧ページを作らなくてはなりません。

しかし、商品一覧がTOPにある場合、商品ごとに「買う・詳細を見る・問い合わせる」のボタンを実装すればいいだけなので圧倒的にページ数の削減に繋がります。

デザイナーとエンジニア間の手戻り減

OOUIは銀の弾丸とも呼ばれており、この共通言語を用いることで常に目的達成のためのサイト・アプリを作成することができます。
よって、１つの正解をもとに開発を行うことで職種間にブレない目的が作り上げられます。

ユーザーライクなUIデザインが可能になる事

人間は生まれながらにして「モノもって動かす」ような思考が一般的です。動作が先に来てモノを決めるなど安易にできるはずありません。
サイトの中でも「モノをどうするか」といった導線を張ることでユーザーにストレスのないサイト回遊をさせることができます。

以上の３つよりOOUIはプロダクト改善に有効な施策といえます。

OOUIの「オブジェクトベース」とは

そもそもUIは大きく分けて「オブジェクトベース」と「タスクベース」の2通りの方法で考える事ができます。

両者の区別は、かんたんにストーリーの始まりが「名詞」か「動詞」かで分けられます。

例で、「商品をレジに持って行ってお金を払う」だと商品が始まりで成り立っているので「オブジェクトベース」。

「自販機にお金を入れてジュースを買う」だとお金を入れるが始まりなので「タスクベース」となります。

オブジェクトベースのほうが使いやすい理由

なぜオブジェクト指向は使いやすいのかというと、世の中にはオブジェクトベースでありふれているからです。

日常でいうと「飲食店に入ったとき商品を選んでから帰りに料金を払います。」もしこれが逆の場合も世の中にはあり、セルフガソリンスタンドだと先にお金を入れてからガソリンを入れていきます。これはおそらく、もう買うもの（ガソリン）が決まっていて看板にデカデカと料金が書いてあるからこそ成り立っているのでしょう。もし飲食店で「先に手持ちのお金いくらまで出せるか教えて下さい。教えないとメニュー見せられません」なんて言われたらもうそのお店に行くことをやめてしまうでしょう。

もっとわかり易い例でよく言われているのが「人はハンマーを持って釘に向かって振り下ろす」が「振り下ろしてからハンマーを持つ人はいない」です。

つまり日常的にオブジェクトベースの処理の流れがあるからこそネット内にも合わせるべきと言えます。