- ✓テストで見つかった課題を重要度で並べ、どこから直すかを決められる
- ✓表面の不満でなく原因まで掘って改善案を考え、改善版UIに反映できる
- ✓なぜそう直したかを意図シートに言語化し、根拠を説明できる
前回(4-2)では、コーチに被験者役になってもらいプロトタイプを触ってもらうユーザビリティテストを行い、どこで迷い、どこで手が止まったかをテスト記録にまとめました。今回はその記録をもとに、リフトの予約UIを直して改善版UIを作り、なぜそう直したかを意図シートに言語化します。仕上げる成果物は、改善版UIと意図シートの2点です。
前回(4-2)のユーザビリティテストでは、コーチに実際にプロトタイプを触ってもらい、どこで迷い、どこで手が止まったかを記録しました。このレッスンでやるのは、その記録をもとに改善版のUIを作ることです。第1章で学んだUXデザインの7ステップでいえば、ここは⑥の「試して直す」にあたります。ただし、ただ直すだけでは終わりません。実務では、なぜそう直したかを説明できることが同じくらい大切です。センスで直したのではなく、テストで分かった事実、第2章で定義した価値と要件、第3章で学んだUIの原則にもとづいて直した——そう言葉にできると、クライアントやチームの合意が取れます。そこでこのレッスンでは、改善案を考えてUIに反映し、その判断の根拠を意図シートに書き出すところまでを、リフトの予約サービスを題材に進めます。
テスト結果を「直す材料」に変える
改善の第一歩は、テストで起きたことを「直す材料」の形に整理することです。テスト記録には、迷った・つまずいた・手が止まったという場面がいくつも出てきます。それを一つずつ、直すべき課題として書き出します。
ここで大事なのは、全部を一度に直そうとしないことです。時間もかぎられていますし、あれもこれもと手を入れると、かえって画面全体がちぐはぐになります。そこで、書き出した課題を重要度で並べ、影響の大きいものから直していきます。下の表は、リフトのテストで見つかった課題を重要度で並べた例です。
| テストで見つかった課題 | 価値・目的への影響 | 起きた頻度 | 優先度 |
|---|---|---|---|
| 予約を確定するボタンで手が止まった(押した後どうなるか不安) | 大(予約の完了に直結) | 3人中3人 | 高 |
| 選んだ日時が画面上で分かりにくく、合っているか何度も確認した | 中(迷うが完了はできる) | 3人中2人 | 中 |
| トップの説明文が長く、読み飛ばされた | 小(操作には支障が出にくい) | 3人中1人 | 低 |
重要度は、困りごとの大きさ(価値や目的にどれだけ響くか)と、起きた頻度(何人に起きたか)の掛け合わせで見ます。予約を最後まで完了できないような課題は、真っ先に直す対象です。逆に、操作には支障が出にくい細かな点は、後回しにしてかまいません。
どこから直すかは、好みや直しやすさで決めません。その課題が価値や目的にどれだけ響くか(大きさ)と、何人に起きたか(頻度)で決めます。多くの人が予約の完了でつまずく課題は、最優先で直します。基準をそろえておくと、限られた時間を効果の高い改善に使えます。
表面の不満でなく原因を直す
課題が並んだら、次は改善案を考えます。ここでよくあるのが、表面の不満をそのまま直そうとすることです。「ボタンが分かりにくい」と言われたからボタンを赤くする、では、なぜ分かりにくかったのかが置き去りになり、色を変えても迷いが消えないことがあります。
改善案は、課題 → 原因 → 改善案の順で考えます。まず、なぜその課題が起きたのか、原因を見立てます。原因に手を当てれば、同じ理由で起きていた別の問題もまとめて解けることがあります。下の表は、リフトの課題を原因までさかのぼって改善案にした例です。
| 課題(テストの事実) | 原因の見立て | 改善案 |
|---|---|---|
| 確定ボタンで手が止まる | ラベルが「送信」で結果が想像できず、色も薄くて押せると感じない | ラベルを「この内容で予約する」に変え、深緑 #2F5D50 でしっかり押せる見た目にする |
| 選んだ日時が分かりにくい | 選択中と未選択が同じ見た目で、今どれを選んだか区別できない | 選択中を深緑 #2F5D50 の枠とチェックで目立たせ、ひと目で分かるようにする |
原因は、テストで被験者が言った言葉やつまずいた場所から見立てます。「これで予約が終わるのか分からない」という声なら、原因はボタンのラベルと見た目にあります。第3章で学んだアフォーダンス(押せると感じさせる見た目)やコントラスト(文字と背景の明るさの差)は、こうした原因を言葉にするときの手がかりになります。
1つの課題につき、まずは1つの改善を当てるのが基本です。1画面をまとめて大きく作り変えると、次に確かめたときに、どの変更が効いたのかが分からなくなります。原因に対して的をしぼって直すほうが、効果を見きわめやすく、あとの説明もしやすくなります。
改善をUIに反映する(前と後を見比べる)
原因と改善案が決まったら、UIに反映して改善版を作ります。このとき、改善前と改善後を見比べられる形で残すと、何をどう変えたのかが自分にもコーチにも伝わります。ここでは、テストで迷った2つの画面を例に、改善前(✗)と改善後(◯)を並べます。
ラベルが「送信」で押した後どうなるか想像できず、色も薄くて押せるのかどうか判断できません。
何が起きるかがラベルで分かり、深緑 #2F5D50の塗りでしっかり押せると伝わります。
どれを選んでも見た目が変わらず、今どの時間を選んだのかがひと目で分かりません。
選択中が深緑 #2F5D50の枠とチェックで目立ち、選んだ日時がひと目で分かります。
変えたのは、ボタンのラベルと色、そして選択中の見せ方だけです。使った深緑 #2F5D50は、第3章のスタイルガイドで決めた予約ボタンの色なので、新しく色を増やしたわけではありません。テストで迷った原因に、ピンポイントで手を当てています。支給ロゴやブランドカラー、スタイルガイドのルールは、改善のときも変えずに守ります。
改善は、直したものだけを見せても、どこがどう良くなったのか伝わりません。改善前と改善後を並べて残すと、変えた点と、その効果を確かめやすくなります。次にもう一度テストするときも、前後があれば「この変更で迷いが減ったか」を見比べられます。
なぜ直したかを言葉にする(意図シート)
改善版UIができても、それだけでは「なんとなく良くした」ように見えてしまいます。実務で本当に問われるのは、なぜそう直したのかです。その判断の根拠を言葉にしたものが意図シートです。改善版UIとセットで作ります。
意図シートには、課題・原因・どう直したか・根拠の4つを書きます。とくに根拠が大事で、テストで分かった事実、第2章で定義した価値と要件、第3章で学んだUIの原則(アフォーダンス・コントラスト・一貫性など)に結びつけます。下の表は、確定ボタンの改善を意図シートに書いた例です。
| 項目 | 書く内容(確定ボタンの例) |
|---|---|
| 課題 | テストで3人全員が、確定ボタンの前で手を止めた |
| 原因 | ラベルが「送信」で結果が想像できず、色が薄く押せると感じなかった |
| どう直したか | ラベルを「この内容で予約する」に変え、深緑 #2F5D50 の塗りにした |
| 根拠 | 「迷わず予約を完了できる」という定義した価値に直結。第3章のアフォーダンスとコントラストの原則にもとづく |
根拠まで書けると、コーチやクライアントに「ここは好みで変えたのではなく、こういう理由で直しました」と説明できます。この説明する力は、修了制作のプレゼン(第5章)でそのまま使います。設計判断の根拠を自分の言葉で語れることは、修了評価でも見られるポイントです。
意図シートの根拠は、3つのどれかに結びつけると強くなります。テストで分かった事実、第2章で定義した価値や要件、第3章で学んだUIの原則です。「なんとなく」でなく、この3つに結びつけて書けば、改善が主観でないことを示せて、相手も納得しやすくなります。
演習:改善版UIと意図シートを仕上げる
ここからは実践です。前回(4-2)のテスト記録を材料に、リフトの予約UIを直して改善版を作り、なぜ直したかを意図シートにまとめます。4つのステップで進めます。
なお、今回のテストはコーチ1名に協力してもらったものですが、実際のプロジェクトでは、可能なら複数人にテストしてもらいます。複数の人に共通して起きたつまずきほど優先度が高い、という見方で、改善の優先順位をつけていきます。
- ●前回(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章)でもそのまま使います。