UXとUIとユーザビリティ

3つの語は範囲が違います。UI は画面の上、ユーザビリティは測れるもの、UX は画面の外まで含みます。

図を大きく見る

図の中身を文字で読む

• 言い分けの目安
• UX　体験の総体
• 知る前から使い終えた後まで。画面の外も含む　UI と言うべきとき
• 画面上の要素・操作・表示の話
• ユーザビリティ　使いやすさ
• 有効さ・効率・満足度で測れる　ユーザビリティと言うべきとき
• タスク完了率・所要時間・誤りの数
• UI　操作する接点　画面上の要素・操作・表示　UX と言うべきとき
• 待ち時間・通知・サポート・配送も含めるとき
• 「UXを改善する」だけでは何をするか
• 特定していない。具体的な問題を指すなら
• 画面が完璧でも、届くまでに1週間かかるサービスは良い体験にならない。改善すべき箇所は画面とは限らない。　より狭い語を選ぶほうが伝わる。

ひと目で#

UI

操作する接点。画面の上の要素、操作、表示

ユーザビリティ

使いやすさ。有効さ、効率、満足度で測れる

UX

体験の総体。知る前から使い終えたあとまで。画面の外も含む

ユーザー中心設計

利用者の要求から出発し、検証を繰り返す進め方

ダブルダイヤモンド

発散と収束を2回。前半で問題を、後半で解決策を決める

使い分け#

図を大きく見る

図の中身を文字で読む

• 同じ一言が、三つの層に割れる
• 層が分かれると、直す場所と確かめ方が層ごとに決まる。
• 今回の中身　確かめ方
• UI　ボタンが小さく、隣の項目を押してしまう　改修の前後を並べて見る
• 「UXを良くしたい」
• 打ち合わせで出た依頼　ユーザビリティ　予約フォームの完了率が62%で止まる　公開2週間後に再計測する
• UX　申し込んだあと、返事が来るか不安　画面の外。メールの運用まで含む
• 3つ目は画面の修正では終わらない。ここを分けずに引き受けると、直したのに評価が変わらない。

間違えやすいところ#

• ✕UX を UI の言い換えに使う範囲が違う
• ✕「UX が良い」で議論を終える何がどう良いのかを特定しないと、直せない
• ✕主観の評価だけでユーザビリティを判断する見た目が良いと使いやすいと感じられる（美的ユーザビリティ効果）
• ✕利用者の要望をそのまま実装する要望の裏にある要求を読み取る工程が要る
• ✕検証を省く繰り返しがなければ、ユーザー中心設計ではない
• ✕問題の定義を飛ばして解決策を作る間違った問題を、正しく解くことになる

ユーザビリティの3指標#

直す例#

架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

例として、リニューアルの打ち合わせで、依頼主から「UXを良くしたい」と言われました。聞き取ると、中身は3つに割れます。ボタンが小さく押し損ねる（UI）、予約フォームの完了率が62%で止まっている（ユーザビリティ）、申し込んだあと返事が来るか不安（UX。メール運用の話で、画面の外です）。語を分けたのは、言葉の整理のためではありません。層が分かれると直す人と確かめ方が別々に決まり、1つ目はきょう直せて、3つ目は画面の修正では終わらないことが見えるからです。

コピーする#

依頼の整理に使うメモの型です。層と、確かめ方と、対象外を1枚で合意します。

## スコープの合意メモ（予約サイト改修）

| 層 | 今回の対象 | 確かめ方 |
|---|---|---|
| UI | フォームの文言とボタンの大きさ | 改修前後の画面を並べて確認 |
| ユーザビリティ | 入力の完了率（現状62%） | 公開2週間後に再計測 |
| UX | 申し込み後の連絡への不安 | 完了画面に返信までの日数を明記 |

対象外: 料金体系の見直し／予約システムの乗り換え

確認する#

• 「UXが悪い」の一言を、UI・ユーザビリティ・UXのどの話かに言い直せる
• 層ごとに、効果を確かめる方法が1つずつ決まっている
• 画面の外の課題（返信・配送・サポート）を、画面の修正だけで閉じていない

この話が要る場面#

このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

この場面のほかの困り事と、そのまま貼れる部品は迷わせないにまとめてある。逆引きには全188件。

出典#

• ISO 9241-11:2018（ユーザビリティの定義）
• Nielsen Norman Group「The Definition of User Experience」

関連#

• 検証測る手法
• 情報設計探せる構造を作る
• 利用者を捉える誰のために作るか
• 認知の法則人がどう見て、どう判断するか