UserTestingでは、Webサイト、モバイルアプリ、プロトタイプなどを操作しながらリアルタイムでフィードバックを返すユーザーの動画が提供されます。UserTestingを使用すると、Figmaプロトタイプに関するフィードバックを収集し、対象オーディエンスから得たすぐに実施可能な洞察を作り出すことができます。さらに、FigJamのUserTesting統合を使用して、UserTestingクリップとセッション動画を埋め込んで再生することができます。

UserTestingを使用して次のことを行います。

• プロトタイプテスト、ライブサイトテスト、またはナビゲーションテストを使用しでデザインを評価する
• Webサイトやモバイルアプリを構築する際にフィードバックを収集する
• ベンチマークテストを実行して、デザインやエクスペリエンスを経時的に評価する。または競合他社と比較して評価する
• デザインに対するフィードバックをA/Bテストと好みテストで比較する
• 複数のインタラクションモードにわたるオムニチャネル研究を作成する
• 最も関連性の高いコントリビューターのフィードバックのクリップやハイライトリールを共有する

クイックスタートガイドをご確認いただくか、UserTestingの開始について詳細をご確認ください→

Figmaプロトタイプのテスト

Figmaプロトタイプは、共有リンクを使ってテストできます。

Figmaでプロトタイプの共有設定を編集する

1. デザインファイルから、ツールバーの [プレゼンテーション]を選択します。

2. プレゼンテーションビューに入ったら、ツールバーの[プロトタイプを共有]をクリックします。

3. [プロトタイプを共有]モーダルから、アクセス設定を[リンクを知っているユーザー全員]に更新します。

4. 閲覧のみ [プロトタイプ閲覧可]をクリックして権限設定を更新します。

   公開リンク共有と公開セッションの管理の詳細→

5. ツールバーの[オプション]をクリックして、コントリビューターがプロトタイプを表示する方法を設定します。

   • デスクトッププロトタイプ: [幅に合わせる]を使用します
   • モバイルプロトタイプ: [画面に合わせる]を使用します

6. プロトタイプに慣れていないコントリビューターを混乱させないために、次のオプションの選択を解除します。

   • クリックでホットスポットヒントを表示
   • サイドバーを表示
   • Figma UIを表示

7. [プロトタイプを共有]モーダルから、[リンクをコピー]をクリックして、プロトタイプのURLをクリップボードにコピーします。

UserTestingでのテストのセットアップ

1. ツールバーから[テストを作成]をクリックし、ドロップダウンメニューから[テストを作成]を選択します。
2. [プロトタイプ]を選択します。
3. [オーディエンスを構築]を選択し、次に[オーディエンスを選択]を選択してオーディエンスをカスタマイズします。UserTestingコントリビューターネットワークまたは自分のコントリビューターからテストコントリビューターを選択します。
4. [テスト計画を構築]を選択して、テストシナリオに必要なコンテキストを含めます。コントリビューターがテストを開始する開始URLの設定を調整することもできます。

   メモ: モバイルの場合は、ネイティブブラウザの要件を選択します。

5. テスト計画の下で、右側の[アセット]メニューからURLタスクをドラッグアンドドロップします。
6. [URL]フィールドにFigmaプロトタイプのリンクを貼り付けます。
7. URLアセットの後に必要な数のタスクを追加することができます。各タスクにURLを指定する必要はありません。新しいURLを指定しない限り、コントリビューターはそのURLでタスクを完了します。
8. [テスト計画のプレビュー]を使って、コントリビューターの視点からタスクのフローを確認します。
9. [完了]をクリックして、[テスト開始]をクリックします。

   ヒント: シークレットウィンドウでプロトタイプをプレビューして、全員がアクセスできることを確認します。

Figmaプロトタイプのテストのベストプラクティス

• コントリビューターに期待することを明確にする: コントリビューターには、完全に機能するサイトではないプロトタイプを操作することを知らせます。すべてのリンクが機能するわけではなく、プロトタイプの読み込みが遅くなる可能性があります。これは、テスト計画の[シナリオ]セクションで設定できます。
• プロトタイプを最適化する: すべてのコントリビューターが高速インターネット環境ではないため、読み込み時間が遅くなる可能性があります。大規模で重いプロトタイプは読み込みに時間がかかり、コントリビューターがテストを放棄する可能性があります。複数のプロトタイプにテストを分割するか、ファイルのサイズを減らすことを検討してください。
• 専用テストファイルを作成する: テストするデザインを含むFigmaファイルを複製します。この新しく作成したファイルでは、テストに関係のないページ、フレーム、アセット、画像、および要素を削除して、クリーンで軽量なテストファイルを確保します。
• チェックポイントを設定する: 大規模で複雑なプロトタイプの場合、ユーザーがテストの各ステージを適切な場所で開始できるようにします。Figmaでは、これを実現するために、複数のフロー開始ポイントがサポートされています。
• 画像を圧縮する: Figmaに画像をアップロードする前に、ファイルサイズが大きくなる可能性があるPNGを圧縮することを検討してください。試してみる1つのオプションは、画像を圧縮するためのFigmaプラグインであるDownsizeです。
• スマートアニメートは慎重に使用する: 読み込み時間を短縮するために、可能な限りスマートアニメートの使用を制限します。必要とするRAMが少ない、より単純なトランジションを使用することを選択します。
• テストを安全に共有する: 追加の機密保持が必要な場合は、テストを受理する前に、会社のNDAに署名することをコントリビューターに要求することができます。

UserTestingの結果をFigJamで共有

テストを実施した後、UserTestingクリップ、セッション、ハイライトリールをFigJamボードに直接埋め込んで、結果を活用します。

最初にUserTestingとFigJamの統合、およびUserTestingのFigJamテンプレートを確認します。

Figmaでのプロトタイプ作成の詳細→