Тестирование макетов страниц сайта

Тестирование макетов страниц сайта

Знать то как ведет себя человек на сайте очень важно, наблюдение за поведением человека на вашем сайте дает ответы на многие вопросы. В отчете размещенном ниже содержится информация которую нужно знать каждому оптимизатору и веб-технологу, иначе сайт вы сделаете, а какой он будет покажет время, для того что бы уменьшить риск желательно изначально исключить некоторые баги, в этом и поможет статистика показанная ниже.

Информация очень актуальна для разработчиков сайтов, по той причине что именно они должны составляя структуру сайта учитывать все моменты правильного расположения блоков и тонкости дизайна.

Источник статьи http://habrahabr.ru/blogs/web_design/109936/

eye-tracker.ru

Пример отчета по изучению удобства выполнения заданий на макетах страниц сайта PITER.TV. Подобное тестирование позволяет выявить недочеты дизайна еще до верстки страниц. Как правило, результаты такого исследования позволяют с достаточной точностью обнаружить места, которые в дальнейшем могли бы вызывать сложности у посетителей и снижать уровень конверсии сайта. После выявления проблемных мест макета, дизайнеру может быть поставлена задача по их исправлению в рамках уже согласованного дизайна.

Данный отчет публикуется с разрешения заказчика.

Условия тестирования

Тестирование проводилось компанией Ай-тракер eye-tracker.ru 13 сентября 2010 года.
В качестве респондентов выступали сотрудники бизнес-центра Гранд в количестве 10 человек, из них трое мужчин и семь женщин.
В качестве заданий для тестирования респондентам предлагались следующие задачи:

  1. Общая оценка дизайна (в качестве стимула использовались картинки, респондентам предлагалось сказать о чем будет сайт)
  2. Поиск раздела веб-камер
  3. Поиск раздела видео-новостей и просмотр последней новости
  4. Просмотр новостей на карте
  5. Добавление собственного видео на сайт
  6. Просмотр основных рубрик сайта

 

Дополнительные материалы

К данному отчету прилагаются видеозаписи сеансов тестирования и карты внимания в оригинальном разрешении.

Краткая сводка результатов и рекомендаций

 

  • При первом знакомстве с сайтом респонденты отмечают, что это новостной сайт, но не ассоциируют его с темами «Видео» и «Петербург». Возможно, стоит это как-то акцентировать.
  • Неоправданно много внимания при первом заходе отбирает информер с погодой, так как расположен на месте меню. Возможно, его стоит перенести в другое место.
  • Кнопка «смотреть выпуск новостей», несмотря на свой размер и цвет не замечается респондентами, как при первоначальном просмотре макета, так и при выполнении соответствующей задачи.
  • При поиске видеоновостей респонденты выбирают разные разделы, что говорит о неинтуитивности интерфейса для данной задачи. Никто из респондентов не выбрал плеер для просмотра новостей, также практически не была замечена кнопка «смотреть выпуск новостей».
  • Так как интерактивная карта с привязкой к сюжетам новостей может стать «фишкой» сайта, имеет смысл рассмотреть возможность добавления соответствующей ссылки в главное меню сайта.
  • Во втором варианте дизайна (с добавленной рекламой) верхний баннер привлекает заметное внимание, а его содержание ассоциируется с сайтом, меняя восприятие сайта. Кроме того, из-за этого баннера сдвигается вниз основное содержимое страницы и важные блоки выпадают из поля зрения посетителя.

Задание 1: Общее восприятие дизайна

Респондентам в случайном порядке демонстрировались два варианта макета главной страницы сайта и предлагалось описать о чем этот сайт. Все респонденты, кроме одного, отметили «новости», но только по одному респонденту упомянули про «видео» и «Петербург».

Карты внимания при выполнении первого задания
Макет 1 Макет 2
image
Карта внимания по количеству взглядов за первые 8 секунд
image
Карта внимания по количеству взглядов за первые 8 секунд
image
Карта внимания по относительному времени (процент времени, затраченный на просмотр) за первые 8 секунд просмотра.
image
Карта внимания по относительному времени (процент времени, затраченный на просмотр) за первые 8 секунд просмотра.
image
Карта внимания по количеству взглядов за все время просмотра
image
Карта внимания по количеству взглядов за все время просмотра
image
Карта внимания по относительному времени за все время просмотра
image
Карта внимания по относительному времени за все время просмотра

В первом варианте дизайна реклама отсутствует и все внимание посетителей направляется на элементы сайта – меню и информационные блоки. Во втором варианте, значительная часть внимания перераспределяется на рекламу, причем внешний вид рекламных блоков, особенно верхнего, оказывает существенное влияние на восприятие сайта в целом, так как воспринимается, в какой-то мере, как шапка сайта. Кроме того, во втором варианте дизайна рекламные блоки сдвигают за пределы первого экрана информационные блоки с картой и тематическими новостями, в результате чего часть посетителей может просто не обратить на них внимания.

Также стоит отметить, что неоправданно большое внимание привлекает информер с погодой и курсами валют. Возможно, стоит подумать об изменении его дизайна (чтобы он не воспринимался как дополнительное меню) или переносе в другое место.

Также мы предложили бы подумать над вариантами усиления акцентов на «видео» и «питер». Возможно, в логотипе слово «Питер» стоит написать кириллицей.

Дополнительно следует отметить, что кнопка «смотреть выпуск новостей» практически не замечается респондентами ни в одном из предложенных дизайнов.

Задание 2: поиск раздела веб-камер.

С заданием справились все респонденты. Из них шестеро кликнули по соответствующему пункту главного меню, а четверо по блоку «Web Петербург». Время от начала показа страницы до клика варьируется от 5 до 13 секунд, причем медиана для тех, кто кликнул по пункту меню, составляет 7 секунд, а для тех, кто кликнул по блоку «web Петербург» — 11 секунд. Это показывает, что респонденты не испытывают затруднений с поиском соответствующей ссылки.

Карты внимания при выполнении второго задания
image
Карта внимания по количеству взглядов за все время
image
Карта внимания по относительному времени за все время

Отсутствие посторонних «горячих зон» на приведенных картах внимания говорит о том, что интерфейс достаточно хорошо приспособлен для решения данной задачи.

Задание 3: Поиск ссылки на видеоновости и на последнюю новость.

Выполнение данного задания вызвало заметные сложности. Большинство респондентов кликнули по разделу «Ваше видео», следующими по популярности стали разделы «Новости» и информационный блок «новости по темам». По два респондента кликнули на раздел веб-камер и на кнопку «смотреть выпуск новостей». Время от начала показа страницы до клика варьировалось от трех до тридцати секунд.

Отдельно следует отметить, что респонденты практически не обращали внимания на основной плеер. Возможно, это связано с тем. что он воспринимается как рекламный блок, а не как важная часть контента страницы. Также незамеченной остается кнопка «смотреть выпуск новостей», несмотря на выделенность цветом и размером. Вероятно дело в том, что визуально она выглядит как некое нижнее отчеркивание блока веб-камеры.

Карты восприятия при выполнении третьего задания
image
Карта по количеству взглядов за первые 10 секунд тестирования
image
Карта по относительному времени за первые 10 секунд тестирования
image
Карта по количеству взглядов за все время тестирования
image
Карта по относительному времени за все время тестирования

На приведенных картах внимания отчетливо видны четыре центра внимания: разделы главного меню «Новости» и «Ваше видео», а также информационный блок «Новости по темам» и заголовок новости в плеере. Это свидетельствует о неинтуитивности интерфейса, что дополнительно подчеркивается разбросом в выбранных респондентами ссылках. Основные для данного задания блоки – плеер и кнопка «Смотреть выпуск новостей» — респондентами практически не были замечены. Мы бы рекомендовали переработать интерфейс этих элементов.

Задание 4: найти новости на карте.

При выполнении этого задания респонденты столкнулись с тем, что карта во втором варианте дизайна не попадает на первый экран браузера, т.е. не видна без прокрутки. Из-за этого часть респондентов находила карту только после напоминания оператора.

Карты внимания при выполнении четвертого задания
image
Карта по количеству взглядов за первые 10 секунд тестирования
image
Карта по относительному времени за первые 10 секунд тестирования
image
Карта по количеству взглядов за все время тестирования
image
Карта по относительному времени за все время тестирования

Из приведенных карт внимания видно, что в начале выполнения задания взгляды респондентов блуждают, в основном, по первой странице, при этом их привлекает раздел новостей. После обнаружения карты процесс проблем не вызывает, респонденты хорошо замечают и меню на карте и информационные значки.
Так как карта может стать одним из наиболее популярных блоков сайта, мы бы рекомендовали рассмотреть возможность создания соответствующего пункта главного меню или же сдвинуть карту выше, чтобы она была заметна без прокрутки на наиболее распространенных экранах.

Задание 5: добавить свой видеоролик на сайт.

С заданием справились все респонденты, при выполнении задания у них не возникло никаких сложностей. Респонденты очень быстро определились с тем, что им нужен именно раздел «Ваше видео» (в котором, впоследствии будет находиться соответствующая ссылка), а после просьбы оператора достаточно быстро нашли и ссылку «добавить видео» на главной странице.

На приведенных ниже картах внимания видно, что взгляды респондентов концентрируются именно в тех областях, которые и требуются, что говорит об удобстве интерфейса сайта для решения данной задачи.

Карты внимания при выполнении пятого задания
image
Карта по количеству взглядов за первые 10 секунд тестирования
image
Карта по относительному времени за первые 10 секунд тестирования
image
Карта по количеству взглядов за все время тестирования
image
Карта по относительному времени за все время

Задание 6: просмотр основных разделов.

При выполнении этого задания в первую очередь внимание респондентов концентрировалось на разделах главного меню, но затем были успешно зафиксированы все основные блоки страницы.

Карты внимания при выполнении шестого задания
image
Карта по количеству взглядов за первые 10 секунд тестирования
image
Карта по относительному времени за первые 10 секунд тестирования
image
Карта по количеству взглядов за все время тестирования
image
Карта по относительному времени за все время

Читай еще о юзабилити:

Как создать Landing page

Мифы о поведении пользователей на сайте

Оцени пост!

Трешак >:-(Бесполезно :-(Как вариант :-|Полезно :-)Супер 8-)
Loading...

Статьи по теме