Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

btmup Blog

Web制作全般

UX と UI の違いを具体例で説明してみる。

更新日:

どうもまだまだ UX と UI を混同している人が多いっぽいので、具体的な例を挙げて説明してみたいと思います。
「説明」という言葉を使うのは、ちょっとおこがましい気もするんですけどね。
「僕なりの解釈を紹介」という風に理解していただければ。

まずは以下の写真をご覧ください。
大阪の、とあるビルにあるトイレの洗面台(蛇口)です。

皆さんはこれを見て、どんなことを考えるでしょうか。

僕の感想

僕がこの蛇口を実際に使ったとき、非常にイラっとしました。
その主な理由は、「冷水と温水の区別が付かない」ことです。

水を出すためのレバー(ハンドル)は、サイズもデザインも大した違いはなく、左右対称に据え付けられています。
「2 つレバーがあるということは、そのどちらかを動かせば冷水か温水が出るんだろうな」とは推測できますが、どちらのレバーを動かせばどちら(冷水 or 温水)が出るのか、一見しただけでは分かりません。

経験上、「右が冷水で左が温水かな?」とは思ったのですが、それも個人的な経験による個人的な推測に過ぎません。
そもそも「どちらかが冷水でどちらかが温水」ということ自体が、経験に基づく推測ですし。
結局、実際にどちらかのレバーを動かして水を出してみるしか、確かめる方法はないわけです。

例えば、冷水のレバーには青のライン、温水のレバーには赤のラインを入れるだけで、分かりやすさは格段に向上します。
別にデカデカと「冷水」や「温水」という文字を入れる必要はありません。
全体の雰囲気を損なうことなく、分かりやすくする方法はいくらでもあるはずです。
にも関わらず、ここではそれをしていません。

「冷水と温水の区別が付かない」ことに加え、「それを改善することを怠っている」(と感じた)こと。
それが、僕がイラっとした主な理由です。

ということがあったので、僕はこの洗面台だけでなく、トイレ、そしてビルに対して、非常に不快な印象を抱くことになりました。
次に同じビルへ行くことがあったら、恐らくその不快な印象がよみがえってくるでしょう。
「蛇口」という小さな「パーツ」が、ビル全体の印象を悪くしてしまったんです。

誰もが同じ印象を抱くとは限らない

では、この蛇口を他の人が使ったとき、僕とまったく同じ印象を抱くでしょうか?
答えはもちろん「NO」です。

「不親切だな」と思いつつも、「不快」まではいかない人。
特に何も感じることなく、ただ手を洗って立ち去るだけの人。
ひょっとしたら、僕とは正反対に「余計な装飾がなくて美しい」と感じる人だって居るかも知れません。
「美しい」と感じる人にとってみたら、僕の考える「改善」は意味がないどころか、余計なことでしょう。

また、同じ人でも、時と場合によって感じ方は変わってきます。
普段なら僕と同じようなことを気にする人でも、たまたま別のことを考えていて、手元のデザインには気付かない(興味を抱かない)場合もあるでしょう。
逆に、普段なら「美しい」と感じるような人でも、何か嫌なことがあったりしてピリピリしている状態であれば、ほんの些細なことで気分を害することだってあります。

僕だって、この蛇口を見たときにたまたま「不親切だな」と感じただけで、別のタイミングであれば何も感じなかったり「美しい」と感じたりしたかも知れません。
それに、このビルのことをもっとよく知っていて、仮にその印象が良いものであれば、トイレの蛇口がちょっと不親切だったからといって、ビル全体の印象まで悪くなるようなこともなかったはずです。

UI と UX の違い

さて、以上の具体例で、何が「UI」で、何が「UX」でしょうか。
少々極端な表現をすれば、「蛇口=UI」で、「それ以外=UX」です。

蛇口は、手を洗う人が水を出すための「インターフェイス」です。
それ自体は、誰が使おうが変化はありません。
これが、いわゆる「UI」です。

しかし、その「インターフェイス」を使うとき、あるいは使った後の印象や感想は人それぞれです。
また、同じ人が使ったとしても、時と場合によって抱く印象は変わってきます。
さらに、蛇口から抱く印象はそれ自体に留まらず、より大きな範囲(トイレやビル)にも影響します。
これが「UX」と呼ばれるものです。

もちろん、ビルにおける「UI」はトイレの蛇口だけではありません。
扉、階段、案内標識、フロア図、エスカレーターやエレベーター、壁面や照明などの装飾……などなど、挙げればキリがないほど至る所に存在しています。
手に触れるもの、目に留まるもの、それらすべてがビルの「UI」と言えるかも知れません。
そして、それらを通して感じること、受ける印象、いわゆる「体験」が「UX」です。

こうして具体例を挙げれば、「UI」と「UX」がまったくの別物であることは容易に分かるでしょう。
にも関わらず、この二つを混同している人が未だに多く居るというのは、言葉の意味をちゃんと考えていないということなんですかね。
「UI」と「UX」で似てるのは、字面(文字の見た目)だけですよ!




-Web制作全般
-, , , , ,

Copyright© btmup Blog , 2024 All Rights Reserved Powered by AFFINGER5.