第4章
改善 — テストで見つかった課題を直し、なぜ直したかを説明できるようにする
レッスン 4-3 プロトタイピングと検証 ⏱ 所要時間:約90分
GOAL
このレッスンのゴール
⏱ 約90分
  • テストで見つかった課題を重要度で並べ、どこから直すかを決められる
  • 表面の不満でなく原因まで掘って改善案を考え、改善版UIに反映できる
  • なぜそう直したかを意図シートに言語化し、根拠を説明できる
通し課題

前回(4-2)では、コーチに被験者役になってもらいプロトタイプを触ってもらうユーザビリティテストを行い、どこで迷い、どこで手が止まったかをテスト記録にまとめました。今回はその記録をもとに、リフトの予約UIを直して改善版UIを作り、なぜそう直したかを意図シートに言語化します。仕上げる成果物は、改善版UI意図シートの2点です。

前回(4-2)のユーザビリティテストでは、コーチに実際にプロトタイプを触ってもらい、どこで迷い、どこで手が止まったかを記録しました。このレッスンでやるのは、その記録をもとに改善版のUIを作ることです。第1章で学んだUXデザインの7ステップでいえば、ここは⑥の「試して直す」にあたります。ただし、ただ直すだけでは終わりません。実務では、なぜそう直したかを説明できることが同じくらい大切です。センスで直したのではなく、テストで分かった事実、第2章で定義した価値と要件、第3章で学んだUIの原則にもとづいて直した——そう言葉にできると、クライアントやチームの合意が取れます。そこでこのレッスンでは、改善案を考えてUIに反映し、その判断の根拠を意図シートに書き出すところまでを、リフトの予約サービスを題材に進めます。

テスト結果を「直す材料」に変える

改善の第一歩は、テストで起きたことを「直す材料」の形に整理することです。テスト記録には、迷った・つまずいた・手が止まったという場面がいくつも出てきます。それを一つずつ、直すべき課題として書き出します。

ここで大事なのは、全部を一度に直そうとしないことです。時間もかぎられていますし、あれもこれもと手を入れると、かえって画面全体がちぐはぐになります。そこで、書き出した課題を重要度で並べ、影響の大きいものから直していきます。下の表は、リフトのテストで見つかった課題を重要度で並べた例です。

テストで見つかった課題価値・目的への影響起きた頻度優先度
予約を確定するボタンで手が止まった(押した後どうなるか不安)大(予約の完了に直結)3人中3人
選んだ日時が画面上で分かりにくく、合っているか何度も確認した中(迷うが完了はできる)3人中2人
トップの説明文が長く、読み飛ばされた小(操作には支障が出にくい)3人中1人

重要度は、困りごとの大きさ(価値や目的にどれだけ響くか)と、起きた頻度(何人に起きたか)の掛け合わせで見ます。予約を最後まで完了できないような課題は、真っ先に直す対象です。逆に、操作には支障が出にくい細かな点は、後回しにしてかまいません。

✓ Point !
重要度は「大きさ×頻度」で決める

どこから直すかは、好みや直しやすさで決めません。その課題が価値や目的にどれだけ響くか(大きさ)と、何人に起きたか(頻度)で決めます。多くの人が予約の完了でつまずく課題は、最優先で直します。基準をそろえておくと、限られた時間を効果の高い改善に使えます。

Q
確認クイズ 1/3
ユーザビリティテストの記録を、改善につなげる最初のステップとして最も適切なのはどれでしょう?
正解です!
まず課題を書き出し、重要度で並べます。全部を一度に直すと画面がちぐはぐになり、何が効いたかも分からなくなります。好みや思いつきではなく、影響と頻度で優先順位をつけるのが起点でした。
惜しい!
一度に作り直す(A)、好みで変える(C)、機能を足す(D)は、いずれも根拠のない改善です。まず迷った場面を課題として書き出し、重要度で並べるB が正解。順番を決めてから手を動かします。

表面の不満でなく原因を直す

課題が並んだら、次は改善案を考えます。ここでよくあるのが、表面の不満をそのまま直そうとすることです。「ボタンが分かりにくい」と言われたからボタンを赤くする、では、なぜ分かりにくかったのかが置き去りになり、色を変えても迷いが消えないことがあります。

改善案は、課題 → 原因 → 改善案の順で考えます。まず、なぜその課題が起きたのか、原因を見立てます。原因に手を当てれば、同じ理由で起きていた別の問題もまとめて解けることがあります。下の表は、リフトの課題を原因までさかのぼって改善案にした例です。

課題(テストの事実)原因の見立て改善案
確定ボタンで手が止まるラベルが「送信」で結果が想像できず、色も薄くて押せると感じないラベルを「この内容で予約する」に変え、深緑 #2F5D50 でしっかり押せる見た目にする
選んだ日時が分かりにくい選択中と未選択が同じ見た目で、今どれを選んだか区別できない選択中を深緑 #2F5D50 の枠とチェックで目立たせ、ひと目で分かるようにする

原因は、テストで被験者が言った言葉やつまずいた場所から見立てます。「これで予約が終わるのか分からない」という声なら、原因はボタンのラベルと見た目にあります。第3章で学んだアフォーダンス(押せると感じさせる見た目)やコントラスト(文字と背景の明るさの差)は、こうした原因を言葉にするときの手がかりになります。

! 注意
一度にたくさん変えすぎない

1つの課題につき、まずは1つの改善を当てるのが基本です。1画面をまとめて大きく作り変えると、次に確かめたときに、どの変更が効いたのかが分からなくなります。原因に対して的をしぼって直すほうが、効果を見きわめやすく、あとの説明もしやすくなります。

Q
確認クイズ 2/3
テストで「予約を確定するボタンが分かりにくい」という課題が見つかりました。改善案の考え方として最も適切なのはどれでしょう?
正解です!
表面の見た目をいじる前に、なぜ分かりにくいのか原因を見立てます。ラベルで結果が想像できない・色が薄くて押せると感じない、といった原因に手を当てるのが、的を射た改善です。派手にするだけでは迷いは消えません。
惜しい!
派手にする(A)や全体を作り変える(D)は、原因を確かめないままの手当てです。感覚の問題として直さない(C)のも違います。課題→原因→改善案の順で、原因に手を当てる B が正解でした。

改善をUIに反映する(前と後を見比べる)

原因と改善案が決まったら、UIに反映して改善版を作ります。このとき、改善前と改善後を見比べられる形で残すと、何をどう変えたのかが自分にもコーチにも伝わります。ここでは、テストで迷った2つの画面を例に、改善前(✗)と改善後(◯)を並べます。

① 予約を確定するボタン(テストで手が止まった画面)
✗ 改善前
予約内容の確認
3月10日(月) 10:00 / 1名
送信

ラベルが「送信」で押した後どうなるか想像できず、色も薄くて押せるのかどうか判断できません。

◯ 改善後
予約内容の確認
3月10日(月) 10:00 / 1名
この内容で予約する

何が起きるかがラベルで分かり、深緑 #2F5D50の塗りでしっかり押せると伝わります。

② 選んだ日時の見せ方(合っているか何度も確認した画面)
✗ 改善前
日時をえらぶ
10:00 11:00 12:00

どれを選んでも見た目が変わらず、今どの時間を選んだのかがひと目で分かりません。

◯ 改善後
日時をえらぶ
10:00 ✓ 11:00 12:00

選択中が深緑 #2F5D50の枠とチェックで目立ち、選んだ日時がひと目で分かります。

変えたのは、ボタンのラベルと色、そして選択中の見せ方だけです。使った深緑 #2F5D50は、第3章のスタイルガイドで決めた予約ボタンの色なので、新しく色を増やしたわけではありません。テストで迷った原因に、ピンポイントで手を当てています。支給ロゴやブランドカラー、スタイルガイドのルールは、改善のときも変えずに守ります。

✓ Point !
前と後を並べて残す

改善は、直したものだけを見せても、どこがどう良くなったのか伝わりません。改善前と改善後を並べて残すと、変えた点と、その効果を確かめやすくなります。次にもう一度テストするときも、前後があれば「この変更で迷いが減ったか」を見比べられます。

なぜ直したかを言葉にする(意図シート)

改善版UIができても、それだけでは「なんとなく良くした」ように見えてしまいます。実務で本当に問われるのは、なぜそう直したのかです。その判断の根拠を言葉にしたものが意図シートです。改善版UIとセットで作ります。

意図シートには、課題・原因・どう直したか・根拠の4つを書きます。とくに根拠が大事で、テストで分かった事実、第2章で定義した価値と要件、第3章で学んだUIの原則(アフォーダンス・コントラスト・一貫性など)に結びつけます。下の表は、確定ボタンの改善を意図シートに書いた例です。

項目書く内容(確定ボタンの例)
課題テストで3人全員が、確定ボタンの前で手を止めた
原因ラベルが「送信」で結果が想像できず、色が薄く押せると感じなかった
どう直したかラベルを「この内容で予約する」に変え、深緑 #2F5D50 の塗りにした
根拠「迷わず予約を完了できる」という定義した価値に直結。第3章のアフォーダンスとコントラストの原則にもとづく

根拠まで書けると、コーチやクライアントに「ここは好みで変えたのではなく、こういう理由で直しました」と説明できます。この説明する力は、修了制作のプレゼン(第5章)でそのまま使います。設計判断の根拠を自分の言葉で語れることは、修了評価でも見られるポイントです。

✓ Point !
根拠は「事実・価値・原則」に結びつける

意図シートの根拠は、3つのどれかに結びつけると強くなります。テストで分かった事実、第2章で定義した価値や要件、第3章で学んだUIの原則です。「なんとなく」でなく、この3つに結びつけて書けば、改善が主観でないことを示せて、相手も納得しやすくなります。

Q
確認クイズ 3/3
改善に着手するとき、テストで見つかった次の3つの課題のうち、最初に直すべきものとして最も適切なのはどれでしょう?
正解です!
予約の完了に直結し(大きさ)、3人全員に起きた(頻度)課題が最優先です。読み飛ばしは影響が小さく、自分が気になっただけの点や直しやすさで選ぶのは、優先順位の基準からずれています。
惜しい!
優先度は「大きさ×頻度」で決めるのでした。予約の完了に直結し、全員が手を止めた確定ボタン(A)が最優先です。影響の小さい説明文(B)や、好み・直しやすさ(C・D)で選ぶのは基準からずれています。

演習:改善版UIと意図シートを仕上げる

ここからは実践です。前回(4-2)のテスト記録を材料に、リフトの予約UIを直して改善版を作り、なぜ直したかを意図シートにまとめます。4つのステップで進めます。

なお、今回のテストはコーチ1名に協力してもらったものですが、実際のプロジェクトでは、可能なら複数人にテストしてもらいます。複数の人に共通して起きたつまずきほど優先度が高い、という見方で、改善の優先順位をつけていきます。

演習 4-3
📋 事前準備
  • 前回(4-2)のテスト記録(迷った・つまずいた場面のメモ)を、手元に開いておく
  • 第3章(3-5)で作ったUIデザインとスタイルガイド、支給ロゴ・ブランドカラーを、Figmaで開いておく
  • 意図シートを書き込む場所(表を作れるドキュメントやスプレッドシート)を用意する

STEP 1:課題を重要度で並べる

  • テスト記録から、迷った・つまずいた場面を課題として書き出す
  • 各課題を、価値・目的への影響(大きさ)と、起きた頻度で見て、優先度(高・中・低)をつける
  • 優先度の高いものから、この演習で直す課題を2〜3件えらぶ

STEP 2:各課題への改善案を考える

  • えらんだ課題ごとに、課題 → 原因 → 改善案の順で考える
  • 表面の不満で止めず、なぜ起きたのか原因を見立ててから改善案を出す
  • 1つの課題につき1つの改善を基本に、一度に変えすぎない

STEP 3:改善案をUIに反映する

  • 改善案を、3-5のUIデザインに反映して改善版UIを作る
  • 支給ロゴ・ブランドカラー・スタイルガイドのルールは変えずに守る(新しく色を増やさない)
  • 改善前と改善後を見比べられる形で残す(前後を並べる、または変更点に印をつける)

STEP 4:なぜ直したかを意図シートにまとめる

  • 直した課題ごとに、課題・原因・どう直したか・根拠の4項目を書く
  • 根拠は、テストの事実・定義した価値や要件・UIの原則のどれかに結びつける

完了条件(提出物)

この成果物は、章の最後でまとめてコーチに提出しましょう。

  • 改善版UI(テストで見つかった課題を反映して直したもの。改善前と後が見比べられる状態)
  • 意図シート(直した課題ごとに、課題・原因・どう直したか・根拠の4項目を記入したもの)

改善版UIと意図シートは、修了評価の「改善」の観点に直結する成果物です。凝った直しを増やすより、テストで分かった課題に的をしぼって直し、その根拠をきちんと言葉にすることを優先してください。ここで身につけた「直して、なぜ直したかを説明する」流れは、リリース後の改善提案(第5章)でもそのまま使います。

CHECK
理解度チェック
テストで見つかった課題を重要度で並べ、どこから直すか決められる
まず迷った・つまずいた場面を課題として書き出します。全部を一度に直さず、価値・目的への影響(大きさ)と起きた頻度の掛け合わせで優先度をつけ、影響の大きいものから直します。予約を完了できないような課題が最優先でした。
表面の不満でなく原因を直し、改善版UIに反映できる
課題 → 原因 → 改善案の順で考えます。「分かりにくい」で止めず、ラベルで結果が想像できない・色が薄く押せると感じない、といった原因に手を当てます。1課題1改善を基本に、支給ロゴ・ブランドカラー・スタイルガイドは変えずに反映します。改善前と後は見比べられる形で残しました。
なぜそう直したかを意図シートに言語化できる
意図シートには、課題・原因・どう直したか・根拠の4つを書きます。根拠は、テストの事実・定義した価値や要件・UIの原則のどれかに結びつけます。根拠まで書けると、好みでなく理由で直したことを説明でき、修了制作のプレゼンにもつながります。