なぜみんな混同するのか
「UI/UX」があまりに頻繁に一つの言葉として使われるため、ほとんどの人はそれを一つの仕事だと思い込んでいる。実際は違う——そしてこの混同は無害ではない。本当の問題が「UX」なのに「UI」だと考える創業者は、実際にはチェックアウトの流れにある問題を直すためにビジュアルデザイナーを雇い、予算をもっと綺麗なボタンに費やし、同じ割合のユーザーが同じステップで離脱するのを見ることになる。解決策は最初からビジュアルの問題ではなかった。構造の問題だったのだ。自分が本当にどちらの問題を抱えているのかを知ることが、お金を使うことと無駄にすることの分かれ目になる。
回りくどくない定義
UI ——ユーザーインターフェース
目に見え、実際に触れて操作できるすべてのもの：ボタン、色、タイポグラフィ、アイコン、余白、アニメーション。UIは表層——人とシステムの間にある視覚的・操作的な層だ。スクリーンショットで捉えられる職人技である。
UX ——ユーザー体験
何かを達成するためにその人がたどる旅路全体——どれだけ簡単か、何ステップ必要か、筋が通っているか、その人が自信を持てるか迷子になるか。UXは構造的なものだ——スクリーンショットでは捉えられず、完了したタスクと放棄されたタスクでしか測れない。
見分けるための8つの視点
焦点
UI
製品の見た目と感触——色、タイポグラフィ、余白、アイコン。
UX
使う人にとって製品がどう機能するか——最初から最後までの旅路全体。
答える問い
UI
「これは見た目が正しいか？」
UX
「これは筋が通っているか？」
成果物
UI
モックアップ、スタイルガイド、コンポーネントライブラリ、ピクセルパーフェクトな画面。
UX
ユーザーフロー、ワイヤーフレーム、ペルソナ、ジャーニーマップ、ユーザビリティレポート。
使う道具
UI
Figma、カラーパレット、アイコンセット、タイプスケール。
UX
ユーザーインタビュー、ジャーニーマップ、A/Bテスト、アナリティクス、カードソーティング。
成功の測り方
UI
視覚的な一貫性、ブランドとの整合性、美的な魅力。
UX
タスク完了率、タスク所要時間、離脱率、満足度スコア。
プロセスに登場するタイミング
UI
後半——フローが検証された後、UIがそれに顔を与える。
UX
前半——一つのピクセルが存在する前に、UXがそもそもフローが何なのかを決める。
「良い」とはどういうことか
UI
クリックできそうに見えるボタン。一貫した余白。首尾一貫したビジュアル言語。
UX
誰も立ち止まって考える必要がなかったから、8ステップではなく3ステップで済むチェックアウト。
それぞれの失敗の仕方
UI
誰も使い方が分からない美しいインターフェース——スタイルだけで地図がない。
UX
完璧に機能するのに2004年みたいに見えるフォーム——ロジックだけで磨きがない。
違いが分かる自信はある？試してみよう。
実際にあった6つのプロダクトの意思決定を紹介する。それぞれについて、UIを直したのかUXを直したのかを判断し、その後解説を確認してほしい。登録不要、トラッキングなし、ただ6秒間、自分が本当にこの違いをどれだけ理解しているか正直に向き合うだけだ。
チェックアウトボタンが紫色になり、角が丸くなって、ホバー時に控えめなアニメーションが加わった。
対立するものではなく、互いを必要としている
分かりにくいフローを美しいUIで包んでも、その分かりにくさが高価に見えるだけだ。優れたUXが不格好で一貫性のないインターフェースの下に埋もれていれば、実際には機能しているものを人々は信用しなくなる。実際にコンバージョンするサイトやプロダクトは、決してどちらか一方ではない——何を、どんな順序で、何ステップで作るかというUXの判断が、出来上がった時にどう見えてどう感じられるかというUIの職人技を通して表現されているのだ。どちらか一方が壊したものを、もう一方が直すことはできない。
UXとUIが本当に噛み合ったサイトが必要ですか？
相談する →About
Patrick Chen ——Sublimearts.ioの背後にいる、インディー開発者兼Webデザイナー。実際の問題がUIであることよりも、「UIを改善してほしい」と頼まれることの方が多い。たいていはフローの問題だ。これは、毎回説明する代わりに、ただ送りたいと思っている記事だ。