全員攻撃型デザインのススメ〜Adobe XDでつくるこれからのワイヤーフレーム入門〜【第4回】Adobe XDで超簡単ユーザーテスト

Adobe XDでつくるこれからのワイヤーフレーム入門

こんにちは。ビジネス・アーキテクツ（以下BA）のクリエイティブディレクター、荒木です。

今回は少し目線を変えて、Adobe XDで作ったワイヤーフレームを使って、サクッとユーザーテストを行う方法を伝授します。Adobe XDを使ったワイヤーフレームのつくり方、使い方については、これまで3回に渡ってご紹介した記事をご覧ください。

__
Adobe XD プレビュー版 for Mac
ダウンロード

どんなテストもやらないよりやったほうがマシ？

一般にユーザーテストと言うと、準備や時間などあれやこれやで、手間も費用もかかるイメージがあります。でもご安心ください。今回Adobe XDを使って行うテストは、非常に小さな、簡易的なテストです。それでも、経験上やった価値を十分に得られるものでした。以下にその手順をご紹介します。

今回紹介するテスト手法の特徴は、「録画」を上手く使い、要点を絞ったユーザーテストを行う点です。これにより、ワイヤーフレームの完成度を一段上のレベルに引き上げたいと思います。

簡易ユーザーテストの準備

効果的な簡易ユーザーテストを行うための準備には、いくつかのコツがあります。対象とするタスクの設定、録画の準備、リクルーティングの3点について、それぞれの注意点を説明します。前提として、テストしたいワイヤーフレームは既にAdobe XDを使って作成済みの状態とします。

準備その1：タスクの設定

まずは、作成済みのワイヤーフレームを眺めて、テストしたいタスクの範囲を絞り込みましょう。

その際、できる限りそのワイヤフレームにおけるコアの機能に限定することで、改善点も見えやすく、且つ簡単にテストすることができます。例えば、ECサイトの場合は、商品をカートに入れて購入を完了するまでのフロー、情報アプリの場合は、特定の情報にたどり着けるか否か、などが候補になるでしょう。

準備その2：成功例を録画する

タスクを決めたら、まずは自分で実行してみます。その際、重要なポイントは、あなたの操作を録画しておく、ということです。

現時点でそのワイヤーフレームについて精通しているのは作成者であるあなたです。つまり、あなたが最も早くタスクをクリア出来るはずの人物であり、あなたの操作を録画した動画が、今回行うユーザーテストの指標になるというわけです。後から他のユーザーの操作と比較すれば、どこでユーザーがつまずいているのか一目瞭然となります。

録画にはAdobe XDの機能を使いますが、テストしたいワイヤーフレームが、PC画面を想定しているのか、スマホ画面を想定しているのかで、若干やり方が異なります。

【録画方法】PC想定のワイヤーフレームの場合

PC画面を想定したワイヤーフレームをテストする場合、Adobe XDの録画機能を使って録画します。使い方は第3回の「一歩踏み込んで録画機能を活用する」をご覧ください。

【録画方法】スマホ想定のワイヤーフレームの場合

スマホでの操作画面を録画するにはAdobe XDのアプリ（iOS）を使います。スマホにアプリをインストールしたらMacとUSBケーブルで接続してください。ちなみに、Adobe XDのアプリ自体はAndroid版もありますが、今回紹介する方法での録画は出来ないため、iPhoneを前提に話を進めます。

https://blog.adobe.com/media_84338677b3b625917de50d1872de69a06cec4692.gif

まず、MacとiPhoneにそれぞれでAdobe XDを立ち上げます。そうすると、iPhone上にパソコンで表示しているAdobe XDファイルのプレビューが表示されます。

続いて、MacにプリインストールされているQuickTime Playerを立ち上げます。「ファイル>新規ムービー収録」を選択すると、録画画面が表示されます。録画ボタンの横にあるプルダウンメニューを開き、「カメラの選択」エリアから、USB接続しているiPhoneの名前を選択しましょう。これでスマホの画面を録画する準備は完了です。

https://blog.adobe.com/media_3dfab5529a431e83ea21123e32908be8b928ccf2.gif

録画ボタン右のプルダウンメニューから接続しているスマートフォンを選択

あとはQuickTime Playerの録画ボタンを押して、Adobe XDのファイルを選択すると、スマホでワイヤーフレームを操作している模様を、動画として記録できます。

準備その3：リクルーティング

ユーザーテストの被験者は、実際の想定ユーザーに近ければ近いほどいいのは言うまでもありません。しかし、適当な人が周りにいないこともあります。その場合、できるだけプロジェクトに関係のない人を選びましょう。具体的には、違う職種の同僚、友人、家族などです。「5分だけでいいからちょっと付き合って」とお願いしてみましょう（ただし、案件によって守秘義務などがある場合は、社内の人に限定する必要があります）。

通常、少なくとも5人はテストするのが良い、とされていますが、そこまで集めるのは意外と負担に感じるものです。ワイヤーフレームの精度を上げるためであれば、2,3人でも十分に気づきが得られると思います。恥ずかしがらずに近くの人を捕まえましょう。

いざ、テスト本番の際の注意点

さて、これで準備が整いました。後は実際に操作をしてもらい、テストを行うだけです。ここでユーザーテストを行う際に注意する点を幾つか紹介します。

**テスト被験者には、やって欲しいタスクのみを伝え、テスト中は余計なフォローを入れないようにします。**実際に普段プライベートで行っているように操作をしてもらいましょう。
基本的にタスクを伝えた後は、こちらから声をかけずに見守りますが、しばらく手が止まってしまった場合、ヒントを教えるのではなく、「今何を考えていますか？」など、ユーザーが思ったことをそれとなく引き出すようにしましょう。
**テスト中の画面操作は「テストの準備その2」で説明した方法で、録画をしておきましょう。**後で自分が撮った動画と比べてどこに時間がかかったのか等、客観的に比較することができます。
**テストをする側は、できれば２人いた方が望ましいです。**これは単純に、複数人で見た方が偏見が少なくなる、という理由のほか、一人は進行/見守り役として、もう一人は気付いたことを適宜メモする役として分担しておくことで、見落としを少なくすることにも繋がります。

上記を守ってテストを行えば、少人数の被験者からでも多くの発見が得られることでしょう。課題が見つかったら、すぐに修正してまた別の人にテストするという工程を繰り返し行うことで、より精度の高いワイヤーフレームが出来上がります。

工夫次第でよりスムーズなテストも可能

以上が、Adobe XDを使った、ワイヤーフレームの簡単なユーザーテスト方法です。いかがでしたか？

他にも、細かいテクニックを話せばキリがないのですが、工夫次第でよりスムーズなテストが可能になります。例えば、テストに関係のない遷移先は、予め「前の画面に戻る」ボタンだけを設置したダミーページを用意して集約することで、テストしたい機能だけに絞ったテストが容易になります。

何度かユーザーテストを行えば、自然と効率のよい方法も見えてくると思います。ぜひ、ご自身にあったテスト方法を見つけてみてください。