btmup Blog

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

Web制作全般

「写真が語るUXとUIの違い」について思うこと。

投稿日:2012 年 5 月 6 日 更新日:

及川卓也さんが「写真が語るUXとUIの違い」というブログ記事で、タイトルの通り「UX と UI の違いを示す写真」を紹介しています。

その写真を見て、僕は Facebook にこう書きました(5 月 3 日)。

この写真は「理解できていない人が理解するため」ではなくて「理解している人がクスッと笑うため」のものだと思う。一種のジョークというか。
むしろ理解してない人が見たら勘違いしそうな気がするな。

これから書くのは、この発言を自分なりに反芻して、もう少し具体的に掘り下げて考えてみた結果です。

写真について僕が感じたこと

「一種のジョーク」「理解してない人が見たら勘違いしそうな気がする」と僕が書いたのは、つまり「この写真じゃ UX と UI の違いなんて分かりっこない」だと感じたからです。
むしろ「勘違いしそう」なくらい、誤解を招く恐れのある「不完全なビジュアル表現」だと思った訳ですね。

まずはその写真を見ていただきましょう。
UX と UI の違いを示した写真
[元記事:The Difference Between UX and UI: Subtleties Explained in Cereal | Design.org

「一種のジョーク」「勘違いしそう」と僕が感じた主な原因は、まさに「UX」の部分です。
色々なシリアルを混ぜてミルクを入れた、いわば「完成品」として掲載されていますね。
「これは違うでしょ……」と瞬間的に思いました。

なぜそう思ったのかを説明するためにも、先に UX と UI の定義について整理しておきましょう。
上記の及川さんの記事でも紹介されているので、一部引用します。

UX(ユーザーエクスペリエンス)は、製品やサービスに対して、ユーザーがどのように感じ、そして反応するかのことである。

一方、UI(ユーザーインターフェイス)とは、Interefaceという英語が示すように、製品やサービスと人間との橋渡しをするデザインのことを示す。ソフトウェア製品の場合には、まさにユーザーが目にする画面のことと考えて良い。

もっと詳しい UX についての説明や、有名なハニカム構造も及川さんの記事には掲載されていますので、その辺りを詳しく知りたい方はそちらをどうぞ。
(僕はいつまで経ってもこのハニカム構造が覚えられない……)

さて、UX と UI についての違いですが、一目瞭然ですよね。
UX は文字通り「体験」のことで、UI も文字通り「インターフェース」のことです。
勘違いしたり混同したりする要素なんて一つもありません。

で、話は戻ります。なぜ僕が写真を見た瞬間「これは違う」と思ったか。
それは、「体験(=目に見えないもの)」であるはずの「UX」を、「完成品」として(実存するモノとして)ビジュアル化してしまっているからです。
写真に写っているシリアルの例でいえば、食べた人(=ユーザー)が感じる「味」や「食感」や「香り」などが「体験(=UX)」であるはず
さらに、食べたときの印象や記憶なども UX に含めていいかも知れません。
(「体験」をどこまで含めるか、というのは難しいところですが)

でも、このビジュアルではそのことは伝わりません。
逆に、「出来上がったもの=UX」と解釈されてしまう恐れすらある
だから僕は、写真を見た瞬間に「これは違う」と思い、その後「一種のジョーク」「勘違いしそう」と思うに至った訳です。

改善するとしたら?

ダメ出しばかりしてもアレなので、どうしたら良いのか少し考えてみました。
が、「体験」をビジュアル化するのって難しいですよね。
何しろ人それぞれの中にあって、ものすごく抽象的で、決して外へ出てこないものですから。

というエクスキューズを挟みつつw、僕が一つ提案するのは「食べている人の表情や風景」を使うことです。

例えば、こんなのとか、

Christmas 2007-Eating the GB house / PghMom

こんなのとか、

How to eat cake / TheGiantVermin

こんなのとか。

Tetra Pak – Girl eating ice cream / Tetra Pak

全部シリアルじゃないですけどねw。

ただ、「体験」をビジュアルで表現するのってこういうことなんじゃないかと思うんですが、どうでしょう。

で、現在「UX」に掲載されている「完成品」こそ「PRODUCT」にした方が良いんじゃないかなぁ、という気がしています。
(現在「PRODUCT」になっているのは「PARTS」とかにするとして)

そもそも「UI ってスプーンだけかよw!」とか、いろいろツッコミどころはあるんですが、「一種のジョーク」だと好意的に解釈して、敢えて触れずにおきます。

オマケ

全然関係ないんですが、こんな写真も見付けたのでついでに載せておきます。かわいいw。

Eating a magazine / mahiro1322







-Web制作全般
-, ,

執筆者:


  1. 興味深く拝読しました。ありがとうございます。PRODUCTはMATERIALでもいいかもしれませんね。

  2. btmupblog_admin より:

    ISHIBASHIさん。コメントありがとうございます。
    そうですね。確かに「MATERIAL」の方が良いかも知れません。
    英語って難しいですね……。

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

新聞を読んでいる人のRSSアイコンを配布しているサイトをようやく発見。

いろんなサイトでよく見かける、新聞を読んでいる姿を描いた→のようなRSS用のアイコン。 ようやくその画像を配布しているページを発見しました。 どのサイトでも同じ画像を使ってるっぽいので、きっと大元の「 …

no image

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

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

no image

4 月 7 日(土)『「Web な人」大阪お話し会』開催のお知らせ。

Twitter やら Facebook やらで散々告知してるにも関わらず、ブログという手段をすっかり忘れてました。 という訳で、いきなりですが告知! 4 月 7 日(土)に『「Web な人」大阪お話し …

no image

Webサイト公開にあたってするべきことリスト。

Webサイトの制作が完了して公開するにあたって「これくらいはやっといた方がいいんじゃね?」と思うこと諸々。 書き留めておかないと忘れたり抜けたりしそうなので、まとめてみました。 やるべきことが増えれば …

no image

AdSense 管理画面に新しく追加された「カバレッジ」の意味。

最近、AdSense の管理画面がリニューアルしました。 というか、厳密には「しつつあります」ですかね。 変わったり戻ったりを繰り返してるので、どの時点で変わったか分かりづらいんですが。 もうそろそろ …