2021年12月23日2021年12月24日

こんにちは。横断組織サービスデザイン部のグループミッション（通称：「ぐるみ」）として活動する、「UI改善チーム」です。
今回私たちは、プログラミング教室情報サイト「コエテコ」のUI改善に取り組み、その検証として、Figmaのプロトタイプを使ったユーザーテストに初めて挑戦しました。
これがすごく意義のあるものになったと感じたので、「ユーザーテストって具体的にどう進めるの？」「やりたいけれど難しそう…！」という方に向けて、プロトタイプ作成時の留意点やユーザーテストの実施にあたって意識したいことなど、私たちが得た知見をまとめてみました。

はじめに

ユーザーテストとは

ユーザーテストとは、第三者にサービス（またはプロトタイプ）を触ってもらい、その行動や発言を観察することで、使用感や体験の質などを検証するものです。
ターゲットユーザーに近い属性の人に触ってもらうことで、開発者では想像できないような定性的な課題を見つけることができます。
また、出てきた課題の原因を明確にしてフィードバックすることによって、ユーザーにとってより使いやすいサービスへと改善することができます。

Figmaで作成したプロトタイプを使用するメリット

今回私たちは、実際のプロダクトではなく、FigmaというUIデザインツールで作成したプロトタイプを使用してユーザーテストを実施しました。
プロトタイプを利用することで、実装前に検証を行うことができるというメリットがありますが、Figmaを使用することで、より効率的に質の高いプロトタイプを作成することができたと感じました。

• プロトタイプを作成してユーザーテストを実施することで、よりそのUIを使うユーザーをリアルに想像しながらデザインのブラッシュアップをすることができる。
• Figmaを使用したプロトタイプ作成なら、AutoLayout機能などを利用した効率的な作業が可能。実際の動きに近いインタラクションを再現することもできる。

ユーザーテストの流れ

私たちが行ったような、プロトタイプを使用したユーザーテストの場合は、大まかにこのような流れで進めていきます。

1. デザインを作成（新規デザインの検証の場合）
2. ユーザーテストの目的を決める
3. テストタスクを作成する
4. 被験者の選定・スケジューリング
5. プロトタイプ作成
6. ユーザーテストを実施
7. 気づきを元に改善につなげる

この記事でも重点的にお話している「プロトタイプ作成」以降は特に重要です！
より有意義なユーザーテストを行うために、丁寧に進めていきましょう。

ユーザーテストの目的を決める

まずは、ユーザーテストを実施することで得たいもの、つまり実施の目的を決めます。
これはプロトタイプで改善したいところの言語化でもあり、テストタスクの作成にも関わってくる点なので、必ず文章として残しておきましょう！

テストタスクを作成する

ユーザーテストの基本的な流れは、「ユーザーにタスク（作業）を実行するように依頼し、ユーザーがタスクを実行する過程を観察する」というものです。

• このテストタスクを完了すると、ユーザーは何を得られるのか
• 想定したUXであるか、また想定した感情を抱いてくれるか

この2点を意識して、ユーザーに実行してもらうタスク＝テストタスクを設定します。

例：

また、1つの目的・1つの具体的なゴールを意識して、できるだけ簡潔な行動を設定することも大切です。

悪い例：
「自由にサイトを使って感想を教えてください。」

ユーザーテストの実施人数・時間配分を決める

被験者の設定

ターゲットユーザー像になるべく近い被験者を、複数名集めましょう。
5人程度が理想ですが、初めての場合は簡単な条件を満たしているだけの人でも良いと思います（スケジュールと該当者の関係で今回は2名でした）。

時間配分

想定よりも時間がかかります。余裕を見て長めに時間を確保しておきましょう。
また、実施（依頼）する側も、連続での実施は3人くらいで疲れてきてしまうので、被験者が多い場合は、日程を分けて実施すると良いと思います。

時間配分の例

プロトタイプを作成する

実装前の仮のサービスとして、テストの際に実際に触ってもらう「プロトタイプ」を作成します。
プロトタイプの作り込み具合によってユーザーテスト結果の質が変わってくる可能性もあるため、とても重要なフェーズになります！

今回私たちは、UIデザインツール「Figma」を使用し、「気になる教室を見つける」というテストタスクに合わせて、40件のユニークな教室情報と各遷移先の詳細ページを用意しました。

Auto Layout機能で効率良く！

Figmaで作成したデザインコンポーネントに「AutoLatout」の機能を活用することで、情報（テキストの長さ、データの有無など）が変化しても要素の大きさや余白などを維持できるようになります。
情報だけ異なる同じページや要素を複数作る場合に、自動できれいなレイアウトにしてくれるのでとても助かります！

インタラクションはできるだけ忠実に！

ユーザーテスト中は、想定している以上にいろんなところをタップされる場合が多いです。
ユーザーテストで使用するページの挙動に関しては、実際のサイトで反応するのと同じくらい入れてあるのが好ましいです。

「あれ？ここタップしても反応しないの？」
「あっ……プロトタイプなので動かないんです…すみません…」
といった、テスト中の悲しい会話を減らすことができます。

ユーザーテストを実施

今回私たちは、一人30分程度のユーザーテストを、社内パートナー2名を対象に実施しました。
実際のサービスのターゲットに近い、「小学生のお子様のいるお父さんお母さん」に協力してもらいました。

ユーザーテストからの気づきを元にUI調整

ユーザーテストからの気づき

新しいデザインを初めて見る被験者の行動や思考には、想像していなかったものもたくさんあり、とても多くの気づきを得ることができました。

結果を元にUI調整

実施後は、ユーザーテストからの気づきをもとに、デザインをブラッシュアップします。

家から近い教室を探しやすく

ユーザーの声：

• 「自分の住所からの検索がしたい」

改善点：

• 現在地から教室を探す導線を上部に追加

教室の雰囲気や内容をわかりやすく

ユーザーの声：

• 「教室名はわかるけどどこが運営してるかよくわからなかった」
• 「知りたい情報がぱっと見で見つけられない」
• 「カレンダーみたいに常に同じ位置に同じ曜日がないので、文字（曜日）を読み込まないといけない」

改善点：

• スクール名・教室名を太字にしてどちらも認識しやすいように変更
• 開校日をカレンダー型にして一目で何曜日がやってるかわかるように変更
• 教材やカテゴリー、教室のこだわりポイントをいっぱい見るように変更
• 口コミがない教室でも口コミのエリアを表示して口コミが見れるサービスであることを認識できるように変更

さいごに

今回は、「コエテコ」のユーザーテストを実際に行ってみて得た知見をお話ししてきました。
効果検証ができたことはもちろんですが、ユーザーテストの重要性を知るきっかけにもなり、とても意義のあるものになったと感じています。

「ぐるみ」チームでは、ユーザーテストの他にもさまざまなことにチャレンジをして、個々のスキルアップや事業への貢献に努めていますので、また他の内容も投稿できたらと思っています！