Figmaプロトタイプを使ってテストをするときのポイント8つ

Figmaプロトタイプでテストを実施する際のTipsも溜まってきたので、公開できる範囲で公開する。どこかでデモアプリのデータも公開できたら良いのだが。。。（おもしろデータになってるので編集に時間がかかる）
※私はアラン・クーパー氏のことを大尊敬しているため、世間的に「ユーザーテスト」と呼ばれているものを「コンセプトテスト」「ユーザビリティテスト」とより細かく言う癖がある。

①Figmaプロトタイプでユーザビリティテストを実施することは、多くの場合は難しい

Figmaプロトタイプでは細かな挙動の再現が難しかったり、入力したデータを保持することはできない。そのため、ユーザビリティテストで使用するためにはかなりプロトタイプの作りを工夫したり、作り込む必要が生じてしまう。ノーコードツールを使用したり、簡単なHTML/CSSレベルで作ってしまった方が低コストなこともある。
個人的には、Figmaプロトタイプはコンセプトテストに使用することが多い。

②テストシナリオ範囲内のプロトタイプを作成する

テスト用プロトタイプとして作成する画面数はインタラクティブコンポーネント機能の登場により以前よりは格段に減ったものの、それでも真面目に作り込むと膨れ上がってしまう。
例えば「自分のプロフィール情報を変更し、その変更状態を維持したまま他の画面を操作してもらう」フローを実現するためには、プロフィール情報変更前と変更後それぞれの画面の作成が必要となる。
最低限テストシナリオを満たす画面フローを作り、余裕があったら他の画面に着手するくらいで問題ない。特に管理画面系では最低限の画面数でも余裕で100を超えることもあるので、テスト設計者と相談しつつ進めることを推奨する。

③コネクションのミスがないかダブルチェックする

どれだけ気を張っていても、必ず抜け漏れやミスが発生するのがプロトタイプのコネクションだ。自分1人だけの確認ではなく、テストシナリオに沿ってインタビュイーに確認してもらうことがおすすめ。可能であればプレテストを実施し、何も知らない被験者にも触ってもらうと良いだろう。
実査までになるべく多くの人に確認してもらうことで、ミスを最小限にすることができる。
（ただ、それでも見落としが生じてしまうことがあるのだ…）

④テストを実施する環境でプロトタイプが使えるかを確認する

ごく稀に確認不足によりテスト実施が困難になってしまうことがある。
例えば、通信環境はあるか、発話を録音できる環境か、メモをするための机はあるか、電子端末の使用は可能か、会話ができる場所か…。
可能であれば、テスト会場に足を運び、デモを実施すると安心である。

⑤プロトタイプは「紙芝居」であることを伝える

Figmaで作るプロトタイプは実際にリリースされているプロダクトと見た目がほぼ同じだ。そのため、普段被験者が触っているプロダクトと同じような操作が可能だと思われがちである。だが、実際は操作できる箇所が限られていたり、画面の動きやアニメーションが再現しきれていないものも存在するため、混乱を招いてしまうことが多い。
先に被験者に対し「これから触ってもらうプロトタイプ（試作品）は紙芝居です」と伝えておくと良い。

⑥デモ用のプロトタイプを用意する

⑤で記載した通り、プロトタイプは実際の操作性と異なるため、操作の練習が必要なことが多い。
テストと関係のないダミーのプロトタイプを用意し、事前に被験者に触ってもらい、学習してもらうと良いだろう。いきなり触ってもらうとプロトタイプの操作自体に手間取ってしまい、テストを中止せざるを得なくなってしまうこともある。

⑦最初の画面に戻る導線を全ての画面上に用意する

全ての画面に最初の画面に戻る導線を用意しておくと、何かと便利である。
例えば、途中でシナリオを中断せざるを得ない状況になってしまった場合に、もう1度最初からやり直してもらいやすくなる。
私がよくやるのは、スマートフォンのプロトタイプの場合はノッチをタップすると最初の画面に戻るようにすることと、PCのプロトタイプの場合はヘッダーかフッターのロゴを押下すると最初の画面に戻るようにすること。

⑧被験者がプロトタイプの操作で迷っていたらフォローする

⑥が実施できればそこまで頻出はしないが、被験者はプロトタイプの操作でテスト中に迷ってしまうことが多い。
例えば、PCのプロトタイプを表示する際に画面が見切れてしまい、目当てのボタンが見つからないことは割と多く見られる。
そういった場合は、なるべく早めにフォローをすることで被験者のプロトタイプに対する信頼度を下げすぎず、テストの進行も妨げない。
中にはデザイン自体の質問も含まれるので要注意。