Overwrite Save

趣味も仕事も、本気で楽しむオトコのブログ

Webの価値を向上させる「UI/UX」を改めて考えてみる【WebコンテンツにおけるUIとUX】

20170718231547


ここ最近、至るところで普通に使われている「UI」と「UX」。

言葉自体はかなり昔からあったのだが、最近のように一種のバズワードのように扱われているが、こういった言葉は常用化されていくと、本質的な意味を見失ってしまいがちだ。
僕の周りの話を聞いていても「UI」と「UX」をきちんと使い分けている人は少なく、最悪の場合、混同して使っていることも少なくない。
書籍やWEBの記事でも「UI/UX」と混同して併記されることも多く(当ブログでも併記した記憶があるが)、「UI」と「UX」の違いを読者が分かっている前提で書かれていることも多い。そのために、余計に「UI」と「UX」が分かりにくくなってきているのかもしれない。

今回は、今一度「UI」と「UX」について改めて整理するとともに、Webにおける「UI」と「UX」に焦点を当てて、「UI」「UX」の観点からWebの価値を向上させるための考え方について考察していきたい。

「UI(User Interface)」とは

「UI」とはユーザーインターフェースの略であり、ユーザとシステム間の橋渡しをする「機能」を指したものだ。
Interfaceを日本語で訳すと「二者間の境界面,接点」という意味であり、まさにユーザとシステムとの接点部分を「UI」と呼ぶ。

例えば、スマートフォンで文字を入力する際、ソフトウェアキーボード(qwertyキーやテンキー)が表示されるが、これもユーザがシステム上に文字入力を実現するためのインターフェースである。
もちろん物理キーボードやマウスもインターフェースであるし、Webサイト上の入力フォームやツイッターアカウントのフォローボタンも全てインターフェースである。

「UX(User Experience)」とは

「UX」とはユーザーエクスペリエンスの略であり、ユーザが「UI」を通してシステムを使用した時にユーザが感じた「体験」を指す。
体験とは、楽しい、嬉しい、不快、退屈等の感覚から成るものだ。

例えば、今では当たり前となったsuicaによる改札の通過を思い浮かべて欲しい。一昔前までは、券売機で財布を出して切符を買い、自動改札機に投入する(又は駅員さんへ渡す)ことで改札を通過していた。
今では、チャージされた残高を利用してタッチ一つで改札を通過できる。乗客は切符を買う行為から開放され、小銭の煩わしさもなくなり、初めて利用したときは大きな快適さ、感動を覚えたはずだ。
他にも、UXの代名詞として扱われるiPhoneも、初めて見た時や使った時の感動を覚えている人も多いだろう。

このような「ユーザが抱く感情、感覚」が「UX」であり、この感情や感覚をより向上させていくことがユーザの獲得に繋がっていくことは、言うまでもない。

Webにおける「UI」「UX」

Webにおける「UI」とは、そもそもの見た目(見易さ、かっこよさ)や、ボタンフォームなどのサイトを構成している様々なパーツ等を指す。
一方で「UX」は、その見た目やパーツの使い勝手、利便性、見易さ等の様々な要因から感じる体験や感情を指す。「このサイト、オシャレでかっこいい!」「使いやすい!」は「UX」だ。また、ページが軽い重たい等、直接ユーザの目に見えない体感部分も「UX」であり、HTMLやCSSの構造をシンプル化するなどの工夫も求められる。

「UI」と「UX」は並列的に考えがちであるが、Webを作るということはまず先に「UX」を考える必要があることは改めて理解しておく必要がある。
ユーザにどんな体験をもたらしたいか、ユーザに何を感じて欲しいか。ここを明確に設定しておかなければ、どんな「UI」を実装すべきなのか決まらないはずである。
「UI」は「UX」を実現するための手段なのだ。

しかし、コンテンツを実際に作り上げる現場においては、「UX」を事前に設定せずに「UI」ありきでWebの構成を考えることがしばしば見受けられる。
何となく良さそうな「UI」を集めてみたものの、ユーザの求める体験とはかけ離れてしまい最悪はユーザ離反を起こしてしまうというのは決して珍しいことではない。(ガラケーを代表とする日本企業による家電プロダクトの高機能化によるユーザ離れは、良い事例だ)

20170718231551

必ずユーザ起点で「UX」考える

Webにおいて「UX」を明確に設定するとは、どういうことか。考えれば考えるほど泥沼に陥ってしまいがちであるが、それは至って明確であり簡単だ。

まず、Webがターゲットにしているユーザの年齢、性別、趣味、リテラシー、仕事等のユーザプロフィールを設定する。
その上で、そのユーザが「何を求めているのか」「どんなことを期待しているのか」を徹底的に考え抜くことだ。この「求めていること」「期待していること」を実現することで、ユーザにより良い「UX」を提供することができる。
(こういった、ユーザ像のことを「ペルソナ」という)

こういったユーザ像は、具体的であればあるほど、ユーザの欲しいものが想像しやすくなる。通勤経路、家族構成、学生時代の過ごし方等、様々なユーザ特性が考えられるが、こういった一つ一つの特性の違いによって、ユーザの取る行動や期待値は大きく異なるものだ。
一見すると難しそうな作業だが、自分自身もWebユーザの一人であることを考えれば、「自分がその人だったら」を考えるだけで、ユーザ像が自然と見えてくるだろう。または、自分の周りにいる実在する人物と置き換えて想像してみても良い。
いくら丁寧にユーザ像を想像しているつもりでも、僕たちも人間である以上Web設計側の希望が入ってしまいがちだ。気がつくと、「ユーザはこう思っているに違いない」「ユーザはこう動いてくれると嬉しい」等と希望的観測を取り入れてしまっている。
このようにWeb設計側に都合の良いユーザ像を設定してしまわないように、客観的に中立的に分析するよう注意しよう。

過去にこのブログでも、ユーザ起点の大切さは何度となく語っている。
スマッシュヒットを生み出すコンテンツの原則を書いた以下の記事でも触れているので、ご一読頂きたい。
www.overwrite-save.com

Web「UX」を継続して向上させるために、「使いやすい」という感覚を洗練していく

上述したように、あなたも普段はWebユーザとして、あらゆるWebを使っているはずだ。
その際に何気なく感じたことに、少し意識を向けてみよう。おそらく「使いやすい」「使いにくい」「かっこいい」「かっこ悪い」等、必ずといって良いほど何かしらの感情を抱いているはずだ。
そのときに感じたことを感じたまま放置せずに、少しだけ立ち止まって考えてみよう。

この広告位置は邪魔だ。
タイトルが分かりやすい。
シンプルで見やすい、
関連記事の位置がちょうど良い。
アニメーションが派手過ぎる。
情報過多で何がやりたいのか分からない。

Web設計者はどういった思想、どういったポリシーでこのようなWebを構築したのかを想像してみよう。
そして、自分だったらこのように作る、このように改善する、を想像しよう。
これを繰り返していく内に、自分自身の中にユーザ起点のWeb構築のポリシーが出来上がっていくはずだ。

ここまでくれば、自分自身のWebで実践していくのみである。
最初から優れたWebを作り上げるのは無理な話だ。ユーザのWeb回遊情報の分析等も駆使しながら、継続的にPDCAを繰り返していくことでユーザファーストの「UI」で構成されたWebが出来上がり、ユーザに素晴らしい「UX」をもたらすことができる。


最後に、デザインの本質を書いた「誰のためのデザイン?」という本を強くお勧めしたい。
当ブログの他の記事でも触れたが、本質を語った良書というのは時間の経過で色褪せることなく価値を保ち続けるのだ。

誰のためのデザイン? 増補・改訂版 ―認知科学者のデザイン原論

誰のためのデザイン? 増補・改訂版 ―認知科学者のデザイン原論

www.overwrite-save.com