Энциклопедия маркетинга

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

В крупных корпорациях при создании любой рекламной продукции тестируется все: названия, тексты, слоганы, персонажи, аниматики. Для тестирования сайтов и POS материалов крупные компании привлекают юзабилити экспертов, заказывают пользовательские юзабилити исследования.

Представители малого и среднего бизнеса, как правило, самостоятельно оценивают успешность работы веб-студии или частного дизайнера. Оценка созданных макетов сайта почти всегда осуществляется по принципу «Нравится - Не нравится»! Заказчик или лично оценивает макеты или собирает коллег, членов семьи, друзей и задает им типичные вопрос: «Вам нравится?» Некоторые считают, что уточняющие вопросы способны обеспечить объективность: «… а, что именно не нравится?».

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

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

Примеры коммуникативных задач Интернет-магазина:

• Показать, что фирма осуществляет доставку по России,
• Показать, что есть оплата картами,
• Показать, что у фирмы низкие цены (дискаунтер),
• Показать, что у фирмы большой ассортимент и др.

Если в рамках тестирования, на вопрос «Как Вам кажется, какой уровень цен в этом Интернет-магазине» респонденты будут отвечать «Скорее высокий» или «Высокий» или даже «Средний», в то время как задача сайта показать, что Интернет-магазин торгует по сниженным ценам (дискаунтер), значит, задача не выполнена, нужно искать и исправлять причину.

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

Как тестировать макеты сайта?

Существует ряд методик, позволяющих тестировать макеты будущего сайта. Отличия в основном в стоимости, точности данных и времени необходимом для проведения исследования. Мы рассмотрим две методики: Еye tracking (айтрекинг) и его более дешевые альтернативы («Yandex Вебвизор», «Google Website Optimizer») и классический маркетинговый опрос.

Респонденты (участники опроса или исследования)

Для проведения исследования нужно набрать группу респондентов, потенциальных пользователей будущего сайта. Набор нужно проводить только среди представителей целевой аудитории сайта.

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

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

Важно при повторных тестированиях (мы что-то поправили в макете и хотим его еще раз протестировать) не использовать тех же респондентов, что и при первом тесте.  На каждом цикле исследования нужно набирать новых респондентов.

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

Еye tracking (айтрекинг)

Эта методика активно используется специалистами по исследованию удобства (usability) и эффективности интерфейсов сайтов, программ и рекламной продукции. Сегодня очень часто в раках юзабилити исследований проводится и оценка маркетинговой, коммуникативной эффективности интерфейса.

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

Рисунок 1. Исследование по методу Eye tracking

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

Рисунок 2. Тепловая карта

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

Подробно об Еye tracking исследованиях можно ознакомиться в публикациях и на семинарах Д.Сатина, руководителя компании «Usabilitylab», лидера в области услуг тестирования удобства и эффективности ПО и сайтов в России.

Пример исследования дизайн макета сайта методом Айтрекинг.

Методика Еye tracking, пожалуй, лучший способ тестировать интерфейс будущего сайта. Этот метод и точный, и научный, и показательный. Однако он попросту недоступен для большинства студий и владельцев сайтов в виду большой стоимости (от 15 000 руб. за одно небольшое исследование одной страницы) и продолжительности исследования (от одной недели).

В книге «Как сделать сайт удобным. Юзабилити по методу Стива Круга» автор рассказывает о том, как провести юзабилити исследование собственными силами. В книге представлено, по сути, пошаговое руководство. Методику вполне можно использовать и для тестирования макетов сайта. Однако это пособие совсем не про айтрекинг, а более напоминает маркетинговое исследование.

Mouse tracking (Маустрекинг)

В качестве альтернативы Айтрекингу я могу предложить методику - Mouse tracking. Методика основана на фиксировании движений мыши пользователя и анализе его действий на сайте (кликнул, заполнил форму, открыл, закрыл и др.).

Для того чтобы провести исследование с помощью Маус трекинга нужно всего-то установить на сайт «Яндекс Метрику» с приложением «Вебвизор» или воспользоваться сервисом «Google Web site optimizer», а также «Карта посещений в Google analytics».

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

Рисунок 3. Яндекс Вебвизор

Рисунок 4. Карта посещений в Google analytics

Плюсы метода очевидны – это и экономия денег, и – времени, и репрезентативность исследования (данные снимаются по всем пользователям).

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

Тем не менее, крайне рекомендую данный метод для тестирования не только дизайна, но и эффективности сайта в целом.

Опрос

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

Для его проведения необходимо:

• составить список вопросов (анкету),
• набрать респондентов (требования мы уже обсудили),
• показать респондентам макет,
• задать вопросы из анкеты,
• проанализировать результаты.

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

• Какой основной бренд представлен в ассортименте Интернет-магазина?
• В какой ценовой категории работает интернет-магазин?
• Готовы ли Вы оплатить товар с помощью банковской карты на сайте этого Интернет-магазина?
• Можно ли назвать одежду из этого Интернет-магазина модной?
• Насколько высокий уровень сервиса Вы ожидаете от этого Интернет-магазина?
• Насколько престижно делать покупки в этом Интернет-магазине?
• Насколько вероятно, что вы купили бы то-то в этом Интернет-магазине?

Важно не просто протестировать макеты создаваемого сайта, но и сравнить результаты с метриками конкурентов. Для достижения этой задачи респондентов нужно разделить на 3-5 групп по 5-10 человек в группе. Первой группе нужно показать разрабатываемый макет, а остальным макеты сайтов конкурентов. Теперь Вы не только будете знать, то насколько эффективным может быть будущий сайт, но и насколько конкурентоспособным.

Будущее за адаптивными сайтами?

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

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

Рисунок 5.

Примеры сайтов с адаптивным дизайном можно посмотреть здесь здесь. 

Адаптивный дизайн VS мобильные приложения и мобильные версии сайта

Мобильные приложения для пользователей таких популярных гаджетов как iPad, iPhone, гаджеты на ОС Андройд также решают проблему просмотра интернет-ресурса на мобильном устройстве.

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

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

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

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

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

Технология создания адаптивного дизайна

Адаптивный сайт – это один URL сайта, один дизайн, один контент и один код.

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

Рисунок 6.

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

Рисунок 7.

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

Версия для печати