UXとUIの違いがスッキリわかる|専門家が事例をもとに解説

  • このエントリーをはてなブックマークに追加

UXとUIの違いが本当の意味で理解していない人は非常に多い。

それは『UX』や『UI』という言葉と接したことのあるビジネスパーソンだけではなく、UX/UIデザイナーと称する人もそうだ。

UXとUIの違いを言語的に理解するだけでは、本当の意味で違いがしっくりこないと考えているため、この記事を通してUXとUIの違いを体験していただきたいと考えている。

分かりやすく理解してもらうため、以下の流れで進めていきたい。

  • UIとUXの違いをわかりやすく解説
  • UI⇒UXの順で事例を交えながら紹介

それでは早速、UIとUXの違いを紹介したい。

UIとUXの違い

UIとUXの違いは以下のように紹介されることが一般的だ。

「そんなことは知ってるよ」という人は多いと思うが、実感をともなっている人はどれくらいいるだろうか?

早速、体験してみよう。

この文章を読んでいるということは、スマホかPCを見ていると思う。

スマートフォンのUIとUX

“UI”は、今まさにあなたが触れている「この瞬間・瞬間」の画面(インターフェイス)から得られる情報を指す。

“UX”はというと、説明が複雑なので立ち止まってもらうため、ひとつ質問をしたい。

質問

「あなたはそのスマートフォンをなぜ購入しましたか?さらに、なぜ今も使い続けているのですか?」

考えていただけただろうか?

その理由における感情や体験こそが、UXの正体だ。

UXはUIと違い「見つけた瞬間〜使い続けている現在まで」の感情や体験全体を指す。

例えば、

  • 「気がついたらストレスなく使えるようになっていた」という体験
  • 「このスマホで撮影した写真には思い出がたくさん詰まっている」という感情
  • さらに、「次はどのスマホに買い換えよう?」という感情

といったような感情や体験のすべてを包括するのがUXだ。

以上のようなことを簡単にまとめると、

UI(User Interface)によって変えられるものは『人間が機器を見たり、触れたりしたとき、その瞬間の感覚』だ。

一方で、UXによって変えられるものは『サービスをつかうコトによって「嬉しかった!」、「使って良かったぁ!」とか「めっちゃ便利だった!」という感情』だ。

UI(ユーザーインターフェイス)とは

UI設計の具体例

インターフェイスと聞くとWebサイトやアプリなどの画面そのものを想像しがちだが、実は、インターフェイスはそれにとどまらない。

人間の目とモノを繋ぐ対象が何かによって呼び名が変わり、大きく分類すると、3種類になる。

  1. 人間とモノを繋ぐ、ハードウェアインターフェイス。(洋服、メガネ、椅子 etc)
  2.  ソフトとソフトを繋ぐ、ソフトウェアインターフェイス。(API etc)
  3. 人間と何か (主にデバイス) を繋ぐ、ユーザーインターフェイス (UI)

よく言われているのが、3番目の人間と何か (主にデバイス) を繋ぐ、ユーザーインターフェイス (UI) が代表格ではあるが、整理してみると

  • 「U=ユーザー」×「I=インターフェイス(モノそのもの)」

なので、洋服もメガネもインターフェイスの一部であると整理できる。

例えば「メガネ」であれば、メガネそのものがインターフェイスであるという整理をすると分かりやすいだろう。

UX(ユーザーエクスペリエンス)とは

「メガネ」でUXデザインを例えると、

目が悪いと感じた瞬間(Trigger)〜 使い続けている今(Now)〜これからどのような体験を期待しているのか(Future)までの一連の体験全てを指す。

UXデザインが分かりにくい要因のひとつとして、メガネのようなモノ単体に対しての体験を指す場合もあれば、空間や環境、といった”雰囲気”を合わせて、モノの魅力を高めることを指す場合もあることが原因のひとつだろう。

まだまだ他にも要因は多く存在するのだが、ここでは割愛させていただく。

UX設計の具体例

体験(UX)を変える設計とはどのようなイメージだろう?

世界で成功している企業の中で、特にUX設計に時間をかけ、さらにユーザー体験を明確に変えたプロダクトといえば「ダイソン」が有名だろう。

※公式ページより引用

では、どのように「UX=ユーザー体験」を変えてきたのか紹介しよう。

このダイソン社で作られたサイクロン掃除機の第1号(DC01)が発売されたのが1993年のこと、15年という年月をかけて「5,127の試作品」と「数万人のユーザーヒアリングやテスト」を繰り返し、常にアップデートを繰り返してきた。もちろん現在でもだ。

具体的に、どのようなフローで改善を繰り返しているのかは下図を見て頂きたい。

ここで勘違いしてほしくないのは、「見た目=UIの改善」を繰り返してきたのではなく、使い勝手や機能をユーザーのニーズを抽出しながら改善を繰り返してきたことだ。

なんと、その数は5,000回以上というから驚きだ。

とてつもなく長く険しい道のりだということは言うまでもないだろう。

ゴミを捨てるときにホコリが舞う、交換が面倒、フィルターが目詰まりするなど様々な不満を持っているユーザーからの声にひとつひとつ丁寧に答えていったことによって、結果、人々の体験を変えることができた素晴らしい事例だ。

そもそもなぜUIとUXが同一に扱われるのか

UXデザインは、ユーザーが「サービスを認知し脳細胞が発火した瞬間」から、「サービスを忘れてしまうまで」の体験全てを指す。

UIとUXの関係が曖昧になりやすい要因のひとつは、その体験の中に「UI=インターフェイス」が包括されていることだ。

アプリやWEBサービスを例に考えると、

  • 「サービスを認知した瞬間から、使いやすい・使いづらい」という感情に繋がったことは、その瞬間・瞬間のインターフェイスから発信される情報(UI)のせいだったのか?

もしくは、

  • サービスを認知した瞬間から、何らかの環境要因や充電の持ちなどが積み重なって、フツフツと湧き上がってきた感情(UX)のせいだったのか?

ということを考えてみてほしい。

上の図で示されているように、UXの中にUIが包括されているのは、一連の体験の中で、ユーザーの感情を上向かせるためには、

「体験の設計×その体験を助けるインターフェース」

の両側からの課題解決が必要不可欠となるため、”UI/UX”のような曖昧な表現が生まれてしまう。

大切なのは、「UIとUXにあまり境界線を引こうとしないこと」だ

サービスを通じてユーザーの「小さな成功体験」を積み重ねていくためには、UI=インターフェイスデザイン、UX=体験デザインの両側から真摯なアプローチが必要だからだ。

UIデザインの改善案

ここからは、具体的にUIやUXをどのような改善策が考えられるのか見ていこう。

UIデザインの改善案

「問い合わせボタン」を例に考えてみる。

仮にあなたのWEBサイトにこの問い合わせボタンがあったとする。
どちらが「押す」という行動を後押ししてくれるだろうか?
さらに、この後どんなことが起こるのか分かりやすいのはどちらか?

おそらく答えは”右側”だろう。

UIを改善する上で大切なことは以下の通りだ。

  • 自然と行動想起ができるようなデザインであること
  • 次に何が起こるのか?少ない情報量で伝えてあげること
  • 文字情報と、カラーや形状の整合性が合っていること

挙げればキリはないが、この3点に気を配るだけで、全く別のサイトになるだろう。

UIデザインを設計ときに最も忘れてならないのは、

  • 「誰に」「どのような」情報を届け、総じてどのような体験を目指しているのか?

を考えながら作り上げていくことだ。

UIとUXが密接な関係にあるのは、このようにUIとUX設計を行ったり来たりしながら完成を目指すところにある。そのため切っても切り離せない存在であるということは理解できるだろう。

UXデザインの改善案

UXデザイン=ユーザー体験の改善については、UIデザインと比べて説明が非常に難しいので事例を元に紹介していこう。

UX設計のために踏んだ5つのステップ「ダグ・ディーツが小児患者とMRIにかけたデザインの魔法」とは?

GE(ゼネラル・エレクトリック)ヘルスケアという医療機器メーカーでCAT、PETやMRIスキャナのデザインを担当していたプリンシパル・デザイナーのダグ・ディーツ(Doug Dietz)氏。

ダグ氏は去年に米国講演会グループ「TED」のコミュニティであるサンノゼのTEDxで、自らのデザイン・プロジェクトの失敗と成功を語って、観客総立ちの拍手喝采を浴びた。

子供たちと家族のために医療業界を変革させる(英語のみ)

恐怖と苦痛を期待と冒険に変えた理由

20年もの経験を持つベテラン・デザイナーのダグ氏が、ユーザーエクスペリエンス(UX)のデザインに真剣に取り組むようになったきっかけは、とある少女の涙だった。

ダグ氏は、自分がデザインしたスキャナを設置して病室から出ようとしたとき、入れ違いに入って来た子供とその家族の姿を見た。

子供はまだ7歳くらいの幼い少女で、ダグ氏のデザインしたスキャナのユーザーとなる患者だったが、その少女はスキャナを見た途端、怖がって泣き出してしまったのだ。

薄暗い部屋に設置された低い音を立てる見慣れない大きな機械の内部に入るのが、どうしても嫌だと泣いて訴えていた。
そして、そんな少女をどうしてなだめればいいのか判らず、途方に暮れている両親の姿。

患者である子供のほとんどがこの少女と同じような反応を示し、鎮静剤が使用されていることを病院側から知らされたとき、ダグ氏の心は打ち砕かれた。

(幼い子供が病気になるだけで十分大変なことなのに、私がデザインしたスキャナのために、その子供や家族が余計な恐怖と苦痛を経験している…)

この問題を解決するために、機能やユーザビリティではなくユーザーの体験(エクスペリエンス)を改善するための新プロジェクトが開始された。

少女の体験を変えた5つのステップ

  1. Emphasize(まずは共感すること)
  2. Define(再定義する)
  3. Ideate(アイデアを創出する)
  4. Prototype(試してみる)
  5. Test(子供達に改めて使ってもらう)

    

1.共感するところから始める

Emphasizeとは共感能力のことだ。

「ユーザーである子供たちの気持ちを理解し、どうすれば彼・彼女らがスキャナを楽しく使えるのか」を追求するために、

ダグ氏のチームは、地元の保育園で子供達や子供の教育、医療に関する専門家らと数多いブレインストーミング・セッションを行った。

そして子供達について”徹底的”に学び、「子供たちが楽しいと思う経験は何か」「恐怖感を軽減させるためにできることは何か」を明確にしたのだ。

【共感とは、相手の意識を想像し、自分の意識に反映させる能力である】

 

2.再定義する

次に、現在抱える問題点や状況などを明確に定義した。
定義されたことは以下の3つだ。

  • 精神的苦痛を和らげるために、子供たちの80%に対して鎮静剤が使用される。
  • スキャンに必要な数分間、中にいる子供たちは身動きすることができない。
  • スキャナの外観や環境が、子供たちの恐怖感や不安感を増す。

   

3.アイデアを創出する

このプロジェクトでは、ユーザーである子供たちの五感を楽しませることにフォーカスし、以下のように改めて体験をデザインし直した。

  • 上部から流れる青い照明の下にある、その道を歩いていくと、 横には鯉が泳ぐ池が見える。
  • ジャスミンの香りが立ちこめられている部屋に入ると、そこにある踏み石が並べてある道の上を歩く。
  • スキャナの中にはカヌー・ボートが置かれており、子供たちは 「池の中から鯉が飛び跳ねるかもしれないから、この中に横たわって動かずじっとしていてね」と聞かされる。

   

4.プロトタイプ

上記で出したアイデアを、そのまま形にし実際に環境を整えた。

すると、このジャングル・アドベンチャーを見て、それまで嫌がっていた子供たちが、自分から進んでスキャナの中に入っていくようになった。

機能は全く同じスキャナなのにも関わらず、子供達の体験は明らかに変わった。

スキャナの中でじっとしていなければならない間も、「一体自分には何が起こるのだろう」という恐怖と不安から 「いつ鯉が池の中から飛び出してくるのだろう」という期待と喜びに変わったからだ。

ダグ氏は、新しいユーザー体験をデザインすることで【恐怖と苦痛】を【期待と冒険】に変身させたのだ。

 

5.ユーザーテスト

ジャングルアドベンチャーに続き、ダグ氏は海賊アドベンチャーや珊瑚シティなどというデザインを創り出し、それらも大成功させてしまう。

どちらも根底にあるコンセプトはジャングル・アドベンチャーと同じだが、各自のテーマに合わせて、以下のような独自の工夫がなされた。

海賊アドベンチャー

  • スキャナを船と見立てて内部に操舵装置するためのハンドル、外部には海を見立てた池のようなオブジェを設置。
  • ティキ像があり、ピナコラーダなどの飲み物が入ったグラスが置いてある南国のバー風インテリア。
  • 子供達が入室するときに海賊の帽子を渡され、看護婦さんは全員海賊の衣装を着るという演出。
珊瑚シティ

  • ディスコのミラーボールの白い照明を利用し、泡のように見せる。
  • 海中にいるような感覚を生み出すための光を落とした照明。
  • ハープの音楽。
  • スキャナを黄色い潜水艦のように見せるようなデザイン。

まとめ

このスキャナを導入した結果、ユーザーである子供達の体験は「怖くて恐ろしいもの」から「楽しくてワクワクするもの」に180度変化した。

その結果、鎮静剤を使う子供の数は激減し、子供が嫌がらないために時間や労力も短縮され、ユーザーである子供や、その家族の精神的負担を減らしただけではなく、病院側の利益も大幅に上昇した。

まさに相乗効果を生み出すことに成功した、ユーザーエクスペリエンスの好事例と言える。

 

さいごに

私たち人間はどうしても感情に支配される生き物であることに違いはない。

これから、どのように時代や技術が変わっても、私たちが人間であり続ける限り、お互いの【共感能力】は重要なもので在り続ける。

これから一体どんな分野で、なにを通じて、どんな物を創り出そうが、お互いデザイナーとして、ダグ氏が提唱するこの【デザインの鼓動】を常に感じ続けることがユーザーエクスペリエンスの改善にとって最重要であると言える。

「それだけのことか」と思う方もいるかもしれないが、【純粋にユーザーの課題を解決したい!】そう思えることこそが、ユーザーの体験をより良くする“きっかけ”になるのだろうと、改めて感じている。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*