アイトラッカーを使用したWebサイト開発:ステージ1-レイアウトテスト

eye-tracker.ru

アイトラッカーを使用するための最も成功した便利なオプションの1つは、開発中にサイトをテストすることです。 さらに、初期段階でより多くのテストが実行されるほど、あらゆる意味で安価になります。単純なテストは安価であり、特定された欠点を修正するには最小限の労力が必要です。



しかし、当社は非常に定期的に、Webスタジオが「デバイスに問題がある場合はどうなるか」を恐れて作業をテストすることを恐れているという事実に直面しています。 私たちの意見では、これはかなり奇妙です-建築者が家を建てるときにレベルの使用を拒否したのと同じように、床の凹凸を示すことを恐れて...



この記事では、デザインスタジオの1つが注文した実際のページレイアウトテストについて説明します。 レイアウトはJPEG形式で送信され、「サイトの内容を理解する」、「パートナーボタンを見つける」、「オンラインストアへのリンクを見つける」という質問が提起されました。



eye-tracker.ru:光テスト用のページレイアウト



テストはランダム回答者に対して実施されました。 テストの構造は次のとおりです:最初に、回答者にサイトの内容を理解するタスクが与えられ、その後10秒間レイアウトが表示されました(平均して、訪問者は8秒後にページを離れるので、10秒が最初の知覚を評価するのに便利な時間間隔ですサイト); 次に、回答者はパートナーのセクションへのリンクを見つけるように求められました(回答者がこのボタンを見つけるか、「降伏」するまでテストを続けました)。 同様に、ストアへのリンクを見つけることが提案されました。



テスト結果に基づいて、次のレターが顧客に送信されました(顧客はスタジオであるため、特に要求しない限り「美しいレポート」は作成しませんが、作業に必要な実際のデータを転送します-これはすべて個別に合意されます):



ファイルをテスト結果で囲みます。 一般的な写真は、回答者が単にサイトの内容を理解しようとしたときです。 レイアウトは10秒間表示されました。 これは、最初のクリックが行われ、訪問者がサイトをさらに進んだ時間とほぼ同じです。 パートナーは、したがって、パートナー、ショップ-ストアの検索です。



画像の名前に数え、相対的な、これらは凝視の数と相対的な視聴時間(このエリアの視聴に費やされた時間の割合)によって構築されたカードです。 特定の情報を検索するタスクを完了するとき、写真を検索した場所が表示されるため、写真のカウントには特別な注意を払う必要があります。



ビデオは、回答者が課題中に見た場所を示しています。 ビデオの各フレームには、前の秒のビューのマップが表示されます。



パートナーとストアのボタンは視覚的に広告ユニットと非常に似ているため、訪問者がボタンをナビゲーションの要素としてすぐに認識しないことに注意することをお勧めします。



ボタンの検索に費やした時間(秒単位)
回答者 パートナー
1 5 10
2 36 10
3 8 28
4 3 29日
5 2 18
6 10 22
平均的 10.6 19.5






テスト結果は手紙に添付されました:

サイトの目的の検討(3つの写真とビデオ)
eye-tracker.ru:ページレイアウトのテスト、ビュー数による10秒の表示でのヒートマップ

hm_general_count_10sec.jpg

eye-tracker.ru:ページレイアウトのテスト、費やした時間の割合による表示の10秒でのヒートマップ

hm_general_relative_10sec.jpg

eye-tracker.ru:ページレイアウトのテスト、10秒の表示で地図を表示

gz_general_10sec.jpg







ここで、予想どおり、すべてのユーザーがテキストブロックの先頭を正常に読み取ったことがわかります。 このブロックの最初の行では、会社が配管の卸売に従事しているという情報が正しく送信されます。 つまり、ターゲットユーザーは、必要な場所に正確に到着したことをすぐに確認します。すぐに何かを見つけられなくても、このサイトで検索するのに余分な時間を費やし、すぐに競合他社に逃げることはありません。



パートナーボタン検索(3つの写真とビデオ)
eye-tracker.ru:ボタン検索パートナーのテスト、ビュー数によるヒートマップ

hm_partner_count.jpg

eye-tracker.ru:ボタン検索パートナーのテスト、費やした時間の割合によるヒートマップ

hm_partner_relative.jpg

eye-tracker.ru:テストボタン検索パートナー、ビューのマップ

gz_partner.jpg







結果の解釈に関する説明。 ページ上の特定の何かの検索をテストするとき、ビューの数と相対時間によるヒートマップは、インターフェースの直観性を評価するための非常に優れたツールであることが判明しました。



最初に取り組むべきことは、「相対」マップ上で、ユーザーが見つける必要のあるものに関係のない領域に「トレース」ができるだけ少ないようにすることです。 このような各「トレース」は、ユーザーが必要なものではないことを理解するために、ユーザーが画像をじっと見て分析する必要があることを示しています。 理想的には、ユーザーが「ない」と思われた場合、これは自分が探しているものではないことをすぐに理解する必要があり、彼の見た目は止まることなくさらに進みます(つまり、この「 「小さくなり、ヒートマップ上の「トレース」はほとんど見えなくなります)。



2番目に注意する必要があるのは、ビューの数によるマップです。 その上で、検索中にユーザーが表示した領域を確認できます。 そのようなエリアが少ないほど良い。 「ホット」ゾーンには特に注意を払う必要があります-これらは、検索中にユーザーのビューが集中する場所です。必要なオブジェクトの検索に回答者からの時間がかかりすぎる場合は、目的のオブジェクトをそのようなゾーンの1つに転送する可能性について考えることができます。



単純なテストでは単純な数の回答者が使用されるため、ヒートマップを分析するとき、ビューマップを忘れてはなりません。 「ホット」ゾーンは、1人の回答者が混乱または気を散らし、注意深く何かを勉強し始めたという事実によっても発生する可能性があります。 したがって、ヒートマップで特定のゾーンを強調表示したので、ビューのマップを見て、このゾーンに注目した回答者の数を評価する価値があります。 この数値が大きいほど、検索の利便性を評価する上で重要です。



ビューのマップは通常、非常に「散らばっている」ため(固定が多数あるため)、特にスローモーションまたはシングルフレームモードで視聴する場合は、ビデオを使用すると非常に便利です。 このようなビデオの分析により、各回答者がレイアウトを表示するプロセス全体を確認し、一般的なパターンを特定できます。



視力の回復には特に注意を払う必要があります。 回答者が「正しい」ゾーンを見た後、別の場所を離れてから戻った場合など。 -これは、目的のオブジェクトの名前が選択に失敗したか、何らかの理由でユーザーが探しているものに関連付けられていないことを示している可能性があります。



オンラインストアを検索(3つの写真とビデオ)
eye-tracker.ru:パートナーストアの検索テスト、ビュー数によるヒートマップ

hm_shop_count.jpg

eye-tracker.ru:パートナーストアの検索テスト、費やした時間の割合によるヒートマップ

hm_shop_relative.jpg

eye-tracker.ru:ストア検索テスト、ビューマップ

gz_shop.jpg







また、すべてのテストセッションの記録を送信する準備ができていましたが、顧客は、送信されたデータで十分だと言いました。



このテストでは顧客に3,500ルーブルの費用がかかり、顧客は結果に満足しました-見つかった問題を迅速に修正することができました。 一般に、サイトが最初に計画されたとおりに正確に認識されるようにします。 そして、知覚マップを表示して、問題なくサイト所有者の設計を承認することができました。



重要なポイント:



テスト費用の大部分は、回答者の募集とテストの実施から成ります。 同時に、回答者に示される資料の数が(合理的な範囲内で)増加しても、実際にはテストのコストは増加しません。 したがって、コストを削減するには、次のトリックを使用できます。



1.テストを実施するには、「サブスクリプション」を購入します。 この場合、少なくとも月に一定数のテストを注文するという契約が締結されます。 注文数量とテストの種類に応じて、コストが削減されます。 たとえば、月に5回のレイアウトテストの場合、テストあたり3,500ルーブルになります。 10-3300ルーブル; 15〜3000ルーブルなど



2. 1つのテストで材料を組み合わせます。 たとえば、回答者の1つのグループで、メインページと内部ページのレイアウトをテストできます。 または、2つまたは3つの異なるサイトのページレイアウト。 同時に、テストの価格はまったく上昇しないか、わずかに上昇します。 1人の回答者に3〜4枚以上の写真を表示する場合、適切な結果を維持するには、グループ内の回答者の数を増やす必要があることに注意してください(テストのコストは多少増加しますが、比較的小さい)。



また、デザインの変更は、原則として、ページの認識の変更につながることに留意する必要があります。 したがって、テスト後にレイアウト設計に多少の重要な変更を加えた場合は、再度テストして要件を満たしていることを確認する必要があります。



All Articles