【翻訳】改めてUIとUXの違いを考える（UserFacet, 2021） - 体験とデザイン、スタートアップについて

www.userfacet.com

プロダクトやWebサイトを構築する際の会話では、ユーザーインターフェース（UI）とユーザーエクスペリエンス（UX）という言葉が必ず同義で語られ、また同じように使われます。第一部「ユーザーインターフェイスとユーザーエクスペリエンスとは？UXはUIではないのか？」*1では、この2つの構成要素が何であるか、そしてUIがUXの構成要素であることを説明しました。

これにより、この2つの構成要素が思考プロセス、議論、または話し合いの一部となったときに起こる一般的な混乱も解消されるでしょう。

このテーマとあまり関係のない技術的背景を持つ人が、詳細な文脈ではなく一般論として話す場合、両者は同じことを述べているように見えるかもしれません。

しかし、そうではありません。この2つは相互に関連し合い、その違いが際立っているのです。その相互関係と違いを知るために、読み進めていきましょう。

UIとUXの関係

この2つは重なり合う概念ですが、上記のように2つの間には微妙な、しかし顕著な違いが存在します。

ユーザーとデジタルプロダクトのやり取りはすべてUI＝ユーザー・インターフェースを介して行われますが、プロダクトを使用する前、使用中、使用後のユーザーの総合的な体験は、ユーザー・エクスペリエンスとしてカウントされます。

しかし、UIとUX、どちらが先なのでしょうか？例えば、幼児の男の子のための部屋をデザインするとしましょう。理想を言えば、最初のステップは何でしょう？

その部屋に住む人、つまり幼児について知ることです。

性別や年齢など、基本的な情報を確認した時点で、ユーザーエクスペリエンスを提供するための基礎ができあがります。

両親を通して幼児を知り、その好みを知る努力をすることもあるでしょう。

そして、安全性、収納場所、遊び場などを考慮した上で、幼児に共感してもらいます。

あとはUIが追随します。壁をブルーに塗ることもできますが、ロッククライミング用の壁を組み込み、安全性を確保することで、幼児の体験をより豊かなものにしようと考えたのです。

ここでは、「使いやすさ」を最前線に置きながら、壁に美的魅力を与えました。

その結果、UIとUXが一体となり、最適化されたユーザーインターフェースを通じて、忘れられないユーザー体験を提供することができたのです。

UIとUXの違いを理解する

UIとUXの違いは、以下のとおりです。

UXは認知科学であり、プロダクトがどのようにユーザーに影響を与え、影響を及ぼし、感動させるかを考えるのに対し、UIはより技術的で、プロダクトにデジタルインターフェースを提供し、ユーザーが体験を感じるためのインタラクションポイントを容易にするものです。
UXはユーザーのニーズや問題に対するソリューションとしてプロダクトをデザインすることに重点を置き、UIはインターフェイスの表示や操作に重点を置きます。
理想的には、プロダクトデザイン開始と同時にユーザーを意識したUXデザインが始まり、その後にUIが続きます。
UXデザインは、ユーザーがプロダクトを使用する際に感じるユーザーエクスペリエンスを提供することを目的としており、UIは、画面、アイコン、色、レスポンシブデザインなど、ユーザーが目にするあらゆるビジュアル要素やインタラクションを通じてユーザーにインターフェースを提供することを目的としています。

UXデザイン	UIデザイン
物理的なプロダクトとデジタルプロダクトに適用される	デジタルプロダクトに適用される
体験主導型	視覚主導型
効果重視	美的インタラクション重視
機能よりも感触を重視する	どちらかというと機能を重視する
ベース：リサーチ、ワイヤーフレーム	ベース：タッチポイント、ビジュアルマッピング
プロダクト開発の前半に来る	プロダクト開発の後半に来る
状況や解決策に基づく	直感的でインタラクティブなインターフェイスに基づく
競合他社や消費者の分析を伴う	消費者の分析を伴う

異なる目的から出発する二側面

最も基本的なレベルでは、UIデザインは、ユーザーまたはそれぞれの人がウェブサイト、プロダクト、またはサービスを操作するためのすべての異なる要素で構成されています。

一方、UXは、そのプロダクトやサービスに接するユーザーや個人が、その体験全体から何を感じ取るかということです。

UXデザインがユーザーの問題解決までの道のりを重視するのに対し、UIデザインはプロダクトの外見や機能に焦点を当てます。

UXデザインはユーザーの問題を特定し解決することを目的とし、UIデザインは直感的で美しい、インタラクティブなインターフェイスを作成することを目的としています。

開発においてUXデザインはUIデザインに先立つ

プロダクトの開発が始まると、通常はUXデザインが最初に、そしてUIデザインがそれに続くという流れになります。

UXデザイナーはユーザー・ジャーニーの全体像を描き出し、UIデザイナーはそのフレームにビジュアルやインタラクティブな要素を加えていきます。

これは、建築の仕組みに似ています。もし基礎がしっかりしておらず、外側の骨格が十分でなく、その間にある材料を支えることができなければ、構築されたモデルは壊れてしまうかもしれません。

UXデザインは、プロダクト開発プロセスにおける建築家であり、UIデザインは大工であると言えるかもしれません。

両者はまったく異なるものであり、両極端かもしれませんが、しかし同じ空間にいる必要があるのです。

2つのデザイン側面は、どこでも一緒に適用できるわけではない

UIとUXデザインは、同義語として一緒に語られることがあっても、適用されるケースが異なり、常に一緒に適用されたり必要とされたりするわけではありません。

UXデザインは、あらゆる種類のプロダクト、サービス、体験に適用されます。これは、サービス、ウェブサイト、店舗、あるいは消費者プロダクトであり、対面、物理、デジタルのいずれにも当てはまります。

しかし、UIデザインはデジタルプロダクトや体験に特化したものであり、物理的な現実にあるものには適用できないのです。

とはいえ、UIとUXの両デザインは、与えられたプロダクトの成功のために極めて重要であり、両者は密接に連携しています。

といっても、この2つの間にはまとまった構造と要件があるにもかかわらず、その役割はかなり異なっています。

2つの側面による作業と労力の違い

UIデザイナーとUXデザイナーの最も重要な違いは、ユーザーの好みを理解するために両者が行うプロセスであるプロトタイピングの使い方が異なるということです。

多くのUIデザイナーは、プロトタイプは高忠実度モデルであるべき、つまり、ユーザーの選択に最も近く、最も同一のリファレンスであるべきと考えています。

しかし、UXデザイナーにとっては、忠実度は後回しで、インターフェースのフロー、ナビゲーション、機能の背後にあるロジックに重きを置いているのです。

UXデザインは、リサーチ、テスト、開発、コンテンツ、プロトタイピングを扱います。

UIデザインは、あらゆるプラットフォームにおいて、インタラクティブな要素を用いて、プロダクトのインターフェースを通じてユーザーを視覚的に誘導するためのプロセスです。

プロダクトの強みを生かした2つのデザイン

UXデザインは、ユーザーと企業のあらゆる要素とのインタラクションを開発し、その質を向上させることを目的としています。

一方、UIデザインは、ブランド力やビジュアル資産をプロダクトのインターフェイスに反映させるものです。

UXデザインは、ユーザーが問題を解決するまでの道のりに影響を与えるすべてのものに焦点を当てます。

一方、UIデザインは、主に特定のプロダクトの表面の見え方と機能に焦点を当てるプロセスです。

技術的側面について

「UXは、美観が伴って初めて良いものになります。素晴らしいプロダクトやサービスを作っても、読みにくいタイポグラフィ、小さいボタンや超大きいボタン、信用できないと思われるカラーパレット、特定の文化に失礼な画像で表示することを想像してください。これらは考慮しなければならない本質的な側面であり、これらをすべて釘付けにしなければ、プロダクトやサービスの繁栄はありません。」 - イベントブライト社プロダクトデザインマネージャー Adriano Trenahi氏

UXとUIという2つのコンセプトは、デザイン思考において密接な関係を持っているため、互いに無関係に存在することはほとんどありません。

UIデザインが直接的、間接的、あるいは共感的にユーザーを巻き込んだ場合、それはUXの範囲に触れることになります。ユーザーを理解しなければ、UIはプロダクトに大きな価値を与えず、単純なインターフェースに留まってしまいます。
標準的なUIデザインパターンを使用することで、（サインインページや日付選択ページのような）一般的なインターフェースの問題に対応でき、時間とコストを節約することができます。しかし、プロダクトやユーザーの状況に合うように、パターンを適応させることが重要です。さもなければ、ユーザーエクスペリエンスにマイナスの影響を与えかねません。
UIのインタラクションやビジュアル要素がユーザーを念頭に置いてよく考えられていれば、そのプロダクトは優れたユーザーエクスペリエンスを提供するはずです。例えば、買い物をするとき、現金を持っておらず、急いでいるとします。オンライン決済のアプリを開くと、新規決済のアイコンが親指に一番近いところにあり、見やすく、クリックしやすい。こういったインターフェースは、アプリの目的を解決し、素晴らしいユーザーエクスペリエンスを手助けしてくれまますよね？