はじめに
こんにちは。タクシです。 最近は新機能のデザインもしつつ、既存機能・画面のUI/UX改善を行うことも増えてきました。 機能によっては、より複雑で多様な操作フローが発生する中で、使いやすいUIにするために検討・リサーチを続けています。
使いやすいUIを作りたい！と一言で言っても、使いやすいとはどう測ればいいのでしょうか？ ユーザビリティの専門家であるJakob Nielsenは、Usability（使いやすさ）を大きく5つの要素に分解できるとしています（Nielsen, "Usability 101: An Introduction to Usability"）。
- Learnability：初めて使うときに、どれだけスムーズに使い方を理解できるか
- Efficiency：使い方を覚えた後、どれだけ効率的にタスクをこなせるか
- Memorability：しばらく使わなかった後、どれだけ早く使い方を思い出せるか
- Errors：どれだけエラーが少なく、起きた際にどれだけ回復しやすいか
- Satisfaction：使っていてどれだけ快適か、満足感があるか
この中でも、新機能や複雑な操作フローを設計するときに特に重要になるのが Learnability です。どれだけ効率的で洗練されたUIでも、「初見のユーザーが最初の一歩でつまずく」ようでは、その先の価値まで届きません。
今回は、このLearnabilityを検証するための手法である Cognitive Walkthrough（認知的ウォークスルー） を、実際に実装経験のある「都道府県・市区町村選択画面」を題材にして紹介しようと思います。
Cognitive Walkthroughとは何か
Cognitive Walkthroughは、実際のユーザーを集めることなく、レビュアーが「初めてこの画面を触るユーザー」の視点になりきってタスクを一段階ずつ検証していく手法です。ユーザーテストのように被験者を集める必要がないため、比較的低コストで実施できるのが特徴です。
似た手法に Heuristic Evaluation（ヒューリスティック評価） がありますが、両者の性質は異なります。
| Heuristic Evaluation | Cognitive Walkthrough | |
|---|---|---|
| 評価の視点 | 専門家（アナリスト） | 新規ユーザー |
| 対象 | 一般的なユーザビリティ全体 | Learnability（特定タスクの学習しやすさ） |
| 範囲 | 網羅的 | 特定のタスクフローに絞った検証 |
| 方法 | ガイドラインに照らして評価 | ユーザーの反応・行動を推測しながら評価 |
Heuristic Evaluationが「プロダクト全体をガイドラインでチェックする」のに対し、Cognitive Walkthroughは「あるタスクを、新規ユーザーが本当に迷わず完了できるか」を一歩ずつ追いかけていく手法だと考えると分かりやすいでしょう。
評価の進め方：4つの問い
Cognitive Walkthroughでは、タスクの各ステップごとに「初めて操作するユーザーの心理」を推測しながら検証を進めます。評価の基準として、本手法を体系化したWhartonら（1994）による「4つの問い」のフレームワークを用いるのが一般的です。
- Will users try to achieve the right result?（ユーザーは正しい結果を達成しようとするか。そのステップが、ユーザーの目的につながっていると理解できるか）
- Do users recognize that the necessary action is available to them?（ユーザーは正しいアクションが可能であることに気づけるか。操作できる要素が見つけやすいか）
- Can users connect the available action with the outcome they're aiming for?（ユーザーは正しいアクションと、達成したい結果を結びつけられるか。ボタンは見えていても、それが目的の操作だと理解できるか）
- Once the action is taken, do users perceive that they've moved closer to their goal?（アクションを実行した後、ユーザーは目標に向けて進捗があったことを実感できるか）
いずれかの問いで「No」という判定になった場合、そのステップは失敗と見なされます。これを各ステップで繰り返し、最後に全体の失敗ポイントを洗い出す、というのが評価の流れです。
Cognitive Walkthroughは、業務システムや専門ツールのような複雑・新規性の高いインターフェースに向いている一方、ECの決済フローのように広く浸透した定番パターンに対しては、評価コストの割に得られる発見が少なく、過剰になりやすいとされています。適用する対象は見極めが必要です。
実例：地域選択UIをウォークスルーする
ここからは、実際に実装経験のある「都道府県・市区町村選択画面」を題材に、Cognitive Walkthroughを行ってみます。 （本来はグループで複数人で行うようですが、今回は検証ということで私のみのチェックです。）
評価対象：条件検索画面の地域選択UI。左側に都道府県のリスト、右側に選択した都道府県に対応する市区町村のチェックボックス一覧が表示され、選択した項目は画面下部に「都道府県名＋市区町村名」の形式でタグとして蓄積されていく、という設計です。
実際の画面から要素を抽象化した簡易的なワイヤーフレームです。左に都道府県リスト、右に市区町村のチェックボックス、下部に選択済みタグが並びます。
評価タスク：「東京都の一部エリアを選んだ後、別の都道府県のエリアも追加で選択する」
ペルソナ：このツールを初めて使う新人担当者
タスクを2つのステップに分けて検証しました。
ステップ1：都道府県を選び、市区町村をチェックする
| 問い | 判定 | 理由 |
|---|---|---|
| 1. 正しい結果を目指せるか | Yes | 「エリアを絞り込みたい」という目的と、都道府県を選ぶ操作が自然に結びついている |
| 2. 正しいアクションに気づけるか | Yes | 都道府県名が左側にリスト表示されており、視認性が高い |
| 3. アクションと結果を結びつけられるか | Yes | 都道府県をクリックすれば市区町村が表示される、という因果関係が直感的 |
| 4. 進捗を実感できるか | Yes | クリック直後、右側に対応する市区町村一覧が即座に表示される |
このステップに関しては、4つの問いすべてでYesという判定になり、大きな課題は見つかりませんでした。
ステップ2：別の都道府県に切り替えて追加選択する
ここで、興味深い結果が得られました。
| 問い | 判定 | 理由 |
|---|---|---|
| 1. 正しい結果を目指せるか | Yes | 都道府県を切り替えて別エリアを追加する、という操作意図自体は自然 |
| 2. 正しいアクションに気づけるか | Yes | 都道府県リストは常に表示されており、切り替え自体は見つけやすい |
| 3. アクションと結果を結びつけられるか | Yes（部分的） | タグが「都道府県名＋市区町村名」の形式で表示されるため、画面下部のタグ欄まで視線が届けば、他県の選択が保持されていることを正しく理解できる |
| 4. 進捗を実感できるか | No | 都道府県を切り替えた直後、視線が集中する右側のチェックボックスエリアには選択が保持されていることを示す手がかりがなく、画面下部（空間的に離れた位置）のタグ欄まで視線を移さないと安心できない |
すべての問いが失敗したわけではなく、一部は解消され、一部は課題として残る、という粒度の結果になりました。実際にやってみると、白か黒かではなく、こうしたグラデーションのある判定が出ることもあるんだなと感じました。
タグの命名設計（都道府県名を含めて表示する）は、問い3を解消する良い工夫だと言えます。しかし、それだけでは不十分で、「都道府県を切り替えた、その瞬間に」進捗が伝わる仕掛けが欠けている、という一段深い評価が得られました。
改善の方向性
この結果を踏まえると、次のような対応で問い4を解消できると考えられます。
- 都道府県リストの各項目に、選択済み件数のバッジを追加する（選択中でない都道府県についても、件数だけは常に見える状態にする）
- 都道府県を切り替えた瞬間に、画面下部のタグ欄を一瞬ハイライトさせ、視線を誘導する
いずれも大がかりな変更ではなく、既存の設計を活かしながら小さな追加で対応できる点も、Cognitive Walkthroughで発見される課題の典型的な特徴です。
都道府県リストの右側に選択件数バッジ（東京都：2、愛知県：1）を追加し、都道府県を切り替えた瞬間にタグ欄を一瞬ハイライトさせる案のイメージです。
どんな場面で使うべきか
Cognitive Walkthroughは、開発の初期段階、特にプロトタイプの検証で使うと効果的です。ユーザーテストのように被験者を集める必要がないため、「まだ本格的なテストをするには早いが、方向性を確認したい」というタイミングに向いています。
ただし、これだけで十分というわけではありません。あくまでLearnabilityという一側面を検証する手法であり、実際のユーザーを対象としたユーザビリティテストなど、他の評価手法と組み合わせて使うことで、より確からしい評価につながります。
まとめ
Cognitive Walkthroughは、新規ユーザーの視点に立って「使い方がどれだけ伝わるか」を、4つの問いを通じて具体的に検証できる手法です。今回の実例のように、「一部は解消済み、一部はまだ課題」という粒度で結果が出ることもあり、それを踏まえて小さな改善につなげられるのが実務上の利点だと言えます。
新しい機能や画面をリリースする前は特に有用ですが、既存機能・画面でも、改善箇所を発見する良い手がかりとなりそうです。
現在弊社ではエンジニアを募集しています！ 少しでも興味を持ってくださった方は、ぜひカジュアル面談でお話ししましょう！
iimon採用サイト / Wantedly / Green
参考文献
Jakob Nielsen. "Usability 101: An Introduction to Usability." Nielsen Norman Group. https://www.nngroup.com/articles/usability-101-introduction-to-usability/
Kim Flaherty. "Evaluate Interface Learnability with Cognitive Walkthroughs." Nielsen Norman Group, 2022. https://www.nngroup.com/articles/cognitive-walkthroughs/
Kate Moran and Kelley Gordon. "How to Conduct a Heuristic Evaluation." Nielsen Norman Group. https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/
Clayton Lewis, Peter Polson, Cathleen Wharton, John Reiman. "Testing a Walkthrough Methodology for Theory-Based Design of Walk-Up-and-Use Interfaces." Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI '90), 1990. https://dl.acm.org/doi/10.1145/97243.97279
