Indigo.DesignのユーザビリティテストがWebデザインから推測を取り除く方法

公開: 2022-03-10
簡単なまとめ↬最近の魅力的でモダンなデザインを作るものに関しては、多くの謎はありません。 ただし、必ずしも明確ではないのは、その使いやすさの側面です。 言い換えれば、ユーザー向けに設計した経路は十分に直感的ですか? 真実は、ユーザーからのフィードバックを早い段階で取得し始めない限り、それはすべて実際には単なる推測ゲームです。 ありがたいことに、Indigo.Designには、私たちを支援するユーザビリティテストソリューションがあります。

Webサイトの成功には使いやすさが重要ですが、少しの助けがなければ、設計と開発の初期段階で特定するのは難しい場合があります。

新しいサイトのために行った調査と準備で、美しく機能的なものを構築する方法についての洞察が得られないわけではありません。 また、堅実な設計システムと設計者と開発者の引き継ぎがあれば、サイトに品質管理と一貫性をもたらすことができます。

ただし、それだけでは必ずしも十分ではありません。

訪問者があなたのウェブサイトやアプリにどのように反応するかについて研究に裏付けられた仮定を立てることはできますが、実際のユーザーの手に渡るまではすべて理論です。

今日は、ユーザビリティテストのプロセス、つまり、それが何であるか、いつ使用する必要があるか、Indigo.Designを使用してWebサイトを開発する際にデータに裏付けられた洞察を生成する方法について見ていきたいと思います。

ユーザビリティテストとは何ですか?

ユーザビリティテストは、Webサイトやアプリを移動し、特定のタスクを完了するのがいかに簡単かを評価するために使用される方法です。

デザインがどのように気に入っているかについて意見を集めるのではなく、人々が何をするかに焦点を当てています。 言い換えると、ユーザビリティテストでは、動作フィードバックを収集して、サイトが想定どおりに動作することを確認できます。

ユーザビリティテストを実施するには、サイトまたはアプリをターゲットユーザーの手に渡す必要があります。 これらのテストから収集されたデータは、サイトを合理化され、ユーザーの好みの旅に合わせて調整されたものに再形成するのに役立ちます。

モデレートと非モデレートのユーザビリティテスト

これにアプローチする方法はいくつかあります。

モデレートモデレートなし
テストの種類一対一セルフガイド
プロセスモデレーターは、ユーザーがセッションをウォークスルーするときにユーザーを引き付けますユーザーは指示に従い、分析ツールはセッションをマッピングします
テストグループのサイズ小さい小から大
ユースケース高度に専門化されたドメイン(例:医師、会計士) 地理的に分散したオーディエンス
Web開発段階プロトタイピング以降プロトタイピング以降

ウェブサイトやアプリでモデレートテストを実行することが不可能または実行可能でなくても問題ありません。 Indigo.Designを使用すると、どちらの種類のテストも実行して、ユーザーから正確で定量化可能なデータを簡単に収集し、設計から当て推量を取り除くことができます。

ユーザビリティテストを使用すると、動作フィードバックを収集して、サイトが想定どおりに動作することを確認できます。

「「

Indigo.Designによるユーザビリティテスト

プロトタイプの段階から、ユーザビリティテストの実施を開始できます。 そして、実際には、最小限の実行可能な製品は、開発中の反復処理が安価であるため、テストするのに最適な種類のWebサイトおよびアプリです。 さらに、この初期段階でのユーザーフィードバックにより、ユーザーが望まない、または必要としない機能やコンテンツを構築する時間を無駄にすることがなくなります。

明確にするために、私たちは利害関係者からの意見を求めることについて話しているのではありません。 私たちが知る必要があるのは、実際のユーザーがあなたのウェブサイトやアプリをうまく使用できるかどうかです。

実行可能なプロトタイプをテーブルに持ってくる必要があることを覚えておいてください。 つまり、次のことを意味します。

  • テストするユーザビリティタスクをサポートするのに十分な豊富なプロトタイプ。
  • ウェブサイトの空のシェルとすぐに使える状態のバランスをとる中程度の忠実度のソリューション。 きれいではないかもしれませんが、インタラクティブでなければなりません。

この時点まで製品を入手したら、ユーザビリティテストを開始できます。

1.プロトタイプをIndigo.Designに追加します

Indigo.Designにプロトタイプを追加するのは簡単です。 2つのオプションがあります。

プロトタイプとユーザビリティテストを備えたIndigo.Designダッシュボード
プロトタイプがアップロードされ、ユーザビリティテストが実施されるIndigo.Designの「マイプロジェクト」ダッシュボード。 (画像ソース:Indigo.Design)(大プレビュー)

最初のオプションは、コンピューターからプロトタイプをアップロードすることです。 次のファイル形式が受け入れられます。

  • PNG、
  • JPG、
  • GIF、
  • スケッチ。

2番目のオプションは、Indigo.DesignプラグインをSketchに追加し、プロトタイプをクラウドに同期することです。 このツールを使用してハンドオフを簡素化する場合、このプラグインは大幅な時間の節約になります。

プロトタイプがロードされたら、それにカーソルを合わせて「プロトタイプの編集」をクリックします。

Indigo.Designプロトタイプ編集ボタン
Indigo.Designユーザーは、ワンクリックでプロトタイプを編集できます。 (画像ソース:Indigo.Design)(大プレビュー)

すべてのインタラクションがSketch内で適切に設定されていることをまだ確認していない場合は、Indigo.Designクラウド内からそれを行い、そこでインタラクションを編集できます。

Indigo.Designプロトタイプの編集とインタラクションのセットアップ
Indigo.Designユーザーは、ユーザビリティテストの前に、中程度の忠実度のプロトタイプがインタラクティブであることを確認できます。 (画像ソース:Indigo.Design)(大プレビュー)

インタラクションが適切に設定されていない場合は、ここで対処してください。 左側のインターフェイスにホットスポットを作成し、それを右側の対応するカードにドラッグして、インタラクションを作成します。

2.新しいユーザビリティテストを作成する

プロトタイプがアップロードされているのと同じダッシュボードから、最初のユーザビリティテストを開始します。 これは、2つの場所のいずれかから実行できます。

テストするプロトタイプにカーソルを合わせて、新しいプロトタイプを作成できます。

Indigo.Designの新しいユーザビリティテストボタン
Indigo.Designユーザーは、アップロードされたプロトタイプの新しいユーザビリティテストを開始できます。 (画像ソース:Indigo.Design)(大プレビュー)

もう1つのオプションは、[ユーザビリティテスト]タブに移動して、そこでテストを開始することです。

Indigo.Designユーザビリティテストダッシュボード
Indigo.Designの「ユーザビリティテスト」ダッシュボード。ユーザビリティテストが作成および管理されます。 (画像ソース:Indigo.Design)(大プレビュー)

ここで、最終的にユーザビリティテストを管理し、テスト結果も確認します。

新しいユーザビリティテストが開始されると、これが最初に表示されます。

Indigo.Designユーザビリティテスト:タスクの作成
Indigo.Designのユーザビリティテスト。 最初のステップは、タスクを作成することです。 (画像ソース:Indigo.Design)(大プレビュー)

基本的に、このツールで行う必要があるのは次のとおりです。

テストする「タスク」を決定します。 これらは、ユーザーが目的の目標(ユーザーとあなたの目標)を達成するための重要なステップである必要があります。

たとえば、これは財務管理アプリであるため、ユーザーは主にこれを使用して新しい予算を作成することを期待しています。 だから、それは私がテストしたい最初のタスクです:

ユーザビリティテストのための新しいタスク「新しい予算の作成」
Indigo.Designのユーザビリティテストに新しいタスクを追加します。 (画像ソース:Indigo.Design)(大プレビュー)

「期待される成功パス」を作成するには、期待どおりにプロトタイプを操作し、ユーザーにライブ製品を使用してもらいたいと考える必要があります。

「新しい予算の作成」パスがどのように見えるか、およびそれを構築する方法の例を次に示します。

ユーザビリティテストで期待される成功パスを作成する
Indigo.Designで新しいタスクと成功パスを設定する方法の簡単なウォークスルー。 (画像ソース:Indigo.Design)

画面の右側にあるウェブサイトまたはアプリをウォークスルーします。

完了したら、テストに含める他のタスクを作成する前に、左側で作業を確認してください

3.テストに最後の仕上げをします

タスクを作成するだけでは、ユーザーから必要な種類のデータを収集するのに十分ではありません。

たとえば、これがMVPの場合、エクスペリエンスが少しラフに感じられる可能性があることを説明したり、ソリューション自体の背景(ソリューションを構築した理由、ソリューションで何をしようとしているのか)を提供したりすることができます。 'デザインに気を取られていません。

ユーザーが招待メールでこれらの詳細を誤って配置することを心配する必要はありません。 ユーザビリティテストのコンテキスト内にこれらのメモを含める場所があります。

「テスト設定」タブに移動します。

ユーザビリティテスト-ウェルカムメッセージ、サンキューメッセージ
Indigo.Designのユーザビリティテストには、ようこそとありがとうのメッセージを追加する余地があります。 (画像ソース:Indigo.Design)(大プレビュー)

「参加者に表示するメッセージ」の下で、これにより、テストにウェルカムメッセージを含めることができます。 これは包括的なウェルカムステートメントにすることも、必要と思われる場合はタスクに関するより多くのコンテキストを提供することもできます。

お礼の言葉は、テストのエンドキャップを提供するので便利です。 彼らの時間を感謝するか、製品について何を期待するかについての次のステップまたは情報を彼らに提供することができます(おそらく、今後さらに多くのユーザビリティテストがあります)。

先に進む前に、このセクションの上部にある「成功基準」トグルにすぐに注意を向けたいと思います。

Indigo.Designのユーザビリティテスト設定-成功基準
Indigo.Designのユーザビリティテスト設定により、ユーザーは厳密な成功基準を設定できます。 (画像ソース:Indigo.Design)(大プレビュー)

有効にすると、この設定では2つの結果のみが許可されます。

  • 合格
  • 失敗

このツールで代替パスを検出できるようにする場合は、このトグルを「オフ」に設定したままにしておく必要があります。 それが何を意味するのかを少しだけお見せします。

今のところ、ユーザビリティテストのリンクを取得して、参加者と共有し始めましょう。 画面の右上隅にある[テストの開始]ボタンをクリックすると、次のように表示されます。

Indigo.Designユーザビリティテストリンク
ユーザビリティテストを開始する準備ができたら、[テストの開始]をクリックしてリンクを取得します。 (画像ソース:Indigo.Design)(大プレビュー)

このリンクをコピーして、参加者との共有を開始してください。

Chromeユーザーの場合は、画面、マイク、カメラを記録するブラウザ拡張機能をインストールするように求められます。 これらのいずれかを有効または無効にできます。

次に、ユーザーはテスト内に移動します。

Indigo.Designのユーザビリティテストの例
Indigo.Designのユーザビリティテストをウォークスルーするユーザーの例。 (画像ソース:Indigo.Design)

必要なデータをすべて収集したら、画面の右上隅にある[テストの停止]ボタンをクリックして、結果の確認を開始します。

4.ユーザビリティテストの結果を確認します

テスト結果は、Indigo.Designのユーザビリティテストダッシュボードの下に常に表示されます。

Indigo.Designユーザビリティテストの概要
進行中のユーザビリティテストの結果の概要。 (画像ソース:Indigo.Design)(大プレビュー)

プラットフォームにログインしている場合は、過去と現在のすべてのテスト結果の概要が表示されます。

テストを開くと、結果をより詳細に確認できます。

Indigo.Designのユーザビリティテストの結果
Indigo.Designのユーザビリティテストの結果をタスクごとに示します。 (画像ソース:Indigo.Design)(大プレビュー)

左側には、タスクごとのテスト結果が表示されます。 それらは次のように分割されます。

  • 成功率:タスクに対して定義した正確な手順を実行したユーザーの割合。
  • 完了したタスク:タスクを完了したユーザーの数。 「成功基準」を有効にしなかった場合、この結果には、期待される成功パスと代替の成功パスを使用したすべてのユーザーが表示されます。
  • 平均タスクの時間:ユーザーがタスクを完了するのにかかった時間。

これだけで、ユーザーの前にたどった道と、それがユーザーの考え方やニーズにどれほどうまく調整されているかについて、かなりのことがわかります。

ただし、画面の右側には、問題が発生した可能性のある場所とその理由がわかります。

Indigo.Designテスト結果—成功パス
Indigo.Designは、ユーザーが被験者の経路に沿って何が起こったかを確認できるようにします。 (画像ソース:Indigo.Design)(大プレビュー)

画面の上部には、私たちが設定した元の手順が表示されます。 どこにでも赤いマークがあり、赤い数字は、被験者がそのパスから逸脱した場所です。

これは、ユーザーの焦点がどこにあるかについての一般的なアイデアを実際に提供するだけのヒートマップテストよりもはるかに効果的です。 これは、ページのレイアウトに問題があるか、コンテンツ自体のラベルが不十分で混乱している可能性があることを明確に示しています。

画面の下部と、操作する必要のあるパスデータをもう少し詳しく見てみましょう。

  • 青い円は予想される相互作用を示し、
  • 赤いひし形は予期しない相互作用を意味し、
  • オレンジ色の四角は、参加者が助けを求めたことを示します。
ユーザビリティテストで期待される成功パス
ユーザビリティテストで期待される成功パスをたどったユーザーの数に関するデータ。 (画像ソース:Indigo.Design)(大プレビュー)

これは、期待される成功パスがどのように見えるか、および平均して完了するのにかかった時間を示しています。

「Alt」の統計をクリックできます。 他の参加者の状況を確認するには、「成功パス」と「失敗パス」を参照してください。

ユーザビリティテストの代替成功パス
ユーザビリティテストで代替の成功パスをとったユーザーの数に関するデータ。 (画像ソース:Indigo.Design)(大プレビュー)

成功基準の観点から余裕を持たせると、代替の成功パスを確認する機会が得られます。

これはいくつかの理由で役立ちます。 まず、同じルートをたどるユーザーが十分にいて、成功パスのユーザーよりも多くのユーザーがいる場合は、パスを完全に再形成する価値があるかもしれません。 代替ルートがより論理的で効率的である場合、移動の少ないパスを取り除くことは理にかなっています。

ユーザビリティテストで失敗したパス
ユーザビリティテストでタスクを完了できなかったユーザーの数に関するデータ。 (画像ソース:Indigo.Design)(大プレビュー)

第二に、失敗したパスと一緒の代替の成功パスは、摩擦が途中で発生する場所を示します。 これにより、ユーザーの限界点が実際にどこにあるかを確認できます。 ユーザーをエッジに追い込みたいというわけではありませんが、どのような種類のインタラクションが機能しないのかを理解しておくのは良いことです。

たとえば、ボタンの1つで、通常のクリックではなく右クリックが必要だとします。 これは私がいくつかのツールで遭遇したものであることを私は知っています、そしてそれはほとんどいつも予想外で直感に反するので私を狂わせます。 私はそれ以上の経験を放棄しませんが、あなたのユーザーはそうするかもしれません。

したがって、代替の成功パスと失敗したパスを比較することで、これらの種類のディールブレーカーがはるかに簡単に理解できます。

もう少し深く見てください

数字と経路のステップを確認することが非常に重要であることは知っていますが、参加者が残した他の情報を研究することを忘れないでください。

たとえば、ユーザーがブラウザの録画を有効にしている場合は、「ビデオを再生」して、実際にそれを通過するのを見ることができます。

そうでない場合でも、「パスの表示」リンクを使用して、実際に実行した手順を確認できます(予想される青い円の手順でない場合)。

Indigo.Designユーザビリティテストレビューオプション
Indigo.Designを使用すると、ユーザーは、タスクを完了するために被験者が何をしたか、何をしなかったかを把握できます。 (画像ソース:Indigo.Design)(大プレビュー)

これは、各被験者に表示されるものです。

Indigo.Design [パスとビデオの再生]をクリックして、段階的なテストをご覧ください
Indigo.Designユーザーは、「クリックパス」または「ビデオ再生」を表示することにより、被験者が行ったすべてのステップを表示できます。 (画像ソース:Indigo.Design)(大プレビュー)

この特定のビューは、各静的ページの実際のクリックを追跡できるため、ビデオよりも役立つ場合があります。 彼らがクリックしたウェブサイトのすべての部分を見るだけでなく、彼らがそれらのクリックをした順序も見ることができます。

そして、前に述べたように、これらの代替の成功パスまたは失敗パスがユーザーを導いた傾向を特定できれば、Webデザインの問題をより迅速に排除できます。 あなたが本当に問題を抱えているのは、それらのクリックがいたるところにあるか、ユーザーがタスクの完了をあきらめたときだけです。

まとめ

デザインシステムを使用しても、自動的に優れたユーザビリティを意味するわけではありません。 一貫して美しいUI以上のものをデザインできる必要があります。

それが、今見たソリューションの素晴らしいところです。 Indigo.Designに組み込まれているユーザビリティテストでは、ピクセルパーフェクトなWebサイトの出荷だけに焦点が当てられていません。 モデレートまたは非モデレートのユーザビリティテストを計画している場合でも、ユーザーの移動とユーザーが直面する困難を正確にマッピングできるツールが手に入ります。