PITER.TVサイトのページレイアウトでタスクを完了することの利便性の調査に関するレポートの例。 このようなテストにより、ページレイアウト前であっても設計上の欠陥を特定できます。 原則として、このような調査の結果により、将来的に訪問者に問題を引き起こす可能性のある場所を十分な精度で検出し、サイト変換のレベルを下げることができます。 レイアウトの問題領域を特定した後、設計者は、すでに合意した設計のフレームワーク内でそれらを修正する作業を課される場合があります。
このレポートは、お客様の許可を得て公開されています。
試験条件
テストは、2010年9月13日、Ay-tractor
eye-tracker.ru社によって実施されました。
回答者は、男性3人と女性7人を含む10人のグランドビジネスセンターの従業員でした。
テストのタスクとして、以下のタスクが回答者に提供されました。
- 全体的な設計評価(写真はインセンティブとして使用され、回答者はサイトの内容について説明するように求められました)
- ウェブカメラのセクション検索
- ビデオニュースセクションを検索し、最新のニュースを表示する
- 地図でニュースを見る
- サイトに独自のビデオを追加する
- サイトの主なカテゴリを表示する
追加資料
このレポートには、テストセッションのビデオレポートと元の解像度のアテンションカードが添付されています。
結果と推奨事項の要約
- サイトを初めて知ったとき、回答者はこれがニュースサイトであることに注意しますが、トピック「Video」および「Petersburg」に関連付けません。 おそらくそれを何とか強調する価値があるでしょう。
- 天気ウィジェットはメニューのサイトにあるため、最初の呼び出しで不当に多くの注意が払われます。 おそらく別の場所に移動する必要があります。
- 「ニュースリリースを見る」ボタンは、そのサイズと色にもかかわらず、レイアウトの最初の表示中および対応するタスクの実行中の両方で、回答者に気づかれません。
- ビデオニュースを検索する場合、回答者はさまざまなセクションを選択します。これは、このタスクの直感的でないインターフェイスを示しています。 回答者は誰もニュースを見るためにプレーヤーを選択せず、「ニュースリリースを見る」ボタンは実質的に気づかれていませんでした。
- ニュース記事を参照するインタラクティブマップは、サイトの「チップ」になる可能性があるため、サイトのメインメニューに適切なリンクを追加することを検討するのは理にかなっています。
- デザインの2番目のバージョン(広告を追加)では、トップバナーが大きな注目を集め、そのコンテンツがサイトに関連付けられ、サイトの認識が変わります。 さらに、このバナーにより、ページのメインコンテンツが下に移動し、重要なブロックが訪問者の視界から外れます。
タスク1:一般的な設計認識
回答者には、サイトのメインページのレイアウトに関する2つのオプションがランダムに表示され、このサイトの内容を説明するように求められました。 1人を除くすべての回答者が「ニュース」に言及しましたが、「ビデオ」と「ピーターズバーグ」に言及した回答者は1人だけでした。
最初のクエストの注意カードレイアウト1 | レイアウト2 |
 最初の8秒間の視聴回数による注意カード
|  最初の8秒間の視聴回数による注意カード
|
 視聴の最初の8秒間の相対時間(視聴に費やした時間の割合)別の注意のマップ。
|  視聴の最初の8秒間の相対時間(視聴に費やした時間の割合)別の注意のマップ。
|
 視聴時間全体の視聴回数別の注意マップ
|  視聴時間全体の視聴回数別の注意マップ
|
 視聴時間全体の注意の相対的な時間マップ
|  視聴時間全体の注意の相対的な時間マップ
|
設計の最初のバージョンでは、広告は表示されず、訪問者の注意はすべてサイトの要素(メニューと情報ブロック)に向けられます。 2番目のオプションでは、注意のかなりの部分が広告に再配分され、広告ブロック、特に一番上の広告の外観は、サイト全体として、ある程度はサイトの見出しとして認識されます。 さらに、デザインの2番目のバージョンでは、広告ユニットは情報ブロックを地図とテーマニュースと共に最初の画面を超えて移動させるため、一部の訪問者は単に注意を払わない場合があります。
また、天気と為替レートの情報提供者が過度に大きな注目を集めていることも注目に値します。 おそらく、デザインを変更する(追加メニューとして認識されないようにする)か、別の場所に移動することを検討する必要があります。
また、「ビデオ」と「ピーター」に重点を置くためのオプションについて考えることをお勧めします。 おそらくロゴに「ピーター」という言葉をキリル文字で書く必要があります。
さらに、「ニュースリリースを見る」ボタンは、提案されたデザインのいずれの回答者にも事実上気付かないことに注意する必要があります。
タスク2:ウェブカメラのセクションを検索します。
すべての回答者がタスクに対処しました。 これらのうち、6つはメインメニューの対応する項目をクリックし、4つはWeb Petersburgブロックをクリックしました。 ページの開始からクリックまでの時間は5〜13秒で、メニュー項目をクリックした人の中央値は7秒、「web Petersburg」ブロックをクリックした人の中央値は11秒です。 これは、回答者が適切なリンクを見つけるのに困難がないことを示しています。
2番目の課題の注意カード
 すべてのビューの注意カード
|  すべての時間の注意の相対時間マップ
|
特定のアテンションカードに無関係な「ホットゾーン」がないことは、この問題を解決するためにインターフェイスがうまく適合していることを示しています。
タスク3:ビデオニュースと最新ニュースへのリンクを検索します。
このタスクを実行すると、重大な問題が発生しました。 回答者のほとんどが「あなたの動画」セクションをクリックし、次に人気のあるのは「ニュース」セクションと「トピックに関するニュース」情報ブロックでした。 2人の回答者は、それぞれウェブカメラセクションと「ニュースリリースを見る」ボタンをクリックしました。 ページの開始からクリックまでの時間は、3〜30秒の範囲でした。
それとは別に、回答者は実質的にメインプレーヤーに注意を払っていないことに注意すべきです。 おそらくこれは事実によるものです。 ページコンテンツの重要な部分としてではなく、広告ユニットとして認識されていること。 「ニュースリリースを見る」ボタンは、色とサイズがハイライトされているにも関わらず、見過ごされています。 おそらく事実は、視覚的には一種の低い取り消し線ブロックウェブカメラのように見えるということです。
3番目のタスク中の知覚マップ テストの最初の10秒間のビュー数によるマッピング
|  テストの最初の10秒間の相対時間マップ
|
 テスト期間全体のビュー数でマップする
|  すべてのテスト時間の相対時間マップ
|
指定されたアテンションカードには、4つのアテンションセンターが明確に表示されます。メインメニューのセクション「ニュース」と「あなたのビデオ」、情報ブロック「トピック別ニュース」、プレーヤーのニュースの見出しです。 これは、インターフェイスが直感的ではないことを示しています。これは、回答者が選択したリンクの広がりによってさらに強調されています。 この割り当ての主要なブロックであるプレーヤーと「ニュースリリースを見る」ボタンは、回答者にはほとんど気付きませんでした。 これらの要素のインターフェースを再設計することをお勧めします。
タスク4:地図でニュースを見つけます。
このタスクを完了すると、回答者は、2番目のデザインオプションのマップが最初のブラウザー画面に表示されないという事実に直面しました。 スクロールしないと表示されません。 このため、一部の回答者は、オペレーターに思い出させてからカードを見つけました。
4番目のクエストの注意カード テストの最初の10秒間のビュー数によるマッピング
|  テストの最初の10秒間の相対時間マップ
|
 テスト期間全体のビュー数でマップする
|  すべてのテスト時間の相対時間マップ
|
上記の注意カードから、割り当ての開始時に、回答者の意見は主に最初のページでさまよい、ニュースセクションに引き付けられていることがわかります。 マップが検出された後、プロセスは問題を引き起こさず、回答者はマップ上のメニューと情報アイコンの両方に明確に気づきます。
マップはサイトで最も人気のあるブロックの1つになる可能性があるため、メインメニューで対応するアイテムを作成するか、最も一般的な画面でスクロールせずに表示されるようにマップを高く移動する可能性を検討することをお勧めします。
タスク5:ビデオをサイトに追加します。
すべての回答者はタスクに対処しました;タスクを完了するとき、彼らは何の困難もありませんでした。 回答者は「Your video」セクション(対応するリンクが含まれます)が必要であるとすぐに決定し、オペレーターの要求後、すぐにメインページに「add video」リンクを見つけました。
以下の注意カードは、回答者の意見が必要な領域に正確に集中していることを示しており、この問題を解決するためのサイトのインターフェースの利便性を示しています。
5番目のミッションの注意カード テストの最初の10秒間のビュー数によるマッピング
|  テストの最初の10秒間の相対時間マップ
|
 テスト期間全体のビュー数でマップする
|  すべての時間の相対時間マップ
|
タスク6:メインセクションを表示します。
このタスクを完了すると、まず、回答者の注意はメインメニューのセクションに集中しましたが、その後、ページのすべてのメインブロックが正常に記録されました。
第6ミッションの注意カード テストの最初の10秒間のビュー数によるマッピング
|  テストの最初の10秒間の相対時間マップ
|
 テスト期間全体のビュー数でマップする
|  すべての時間の相対時間マップ
|