SEO для Чайников

Прототип нуждается в пояснениях

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

Покажите образец

Хороший способ объяснить принципы работы прототипа — показать, как работает конкретная модель, аналогичная вашей. Образец можно использовать для пояснения предлагаемой степени проработки, демонстрации того, как выглядят стандартные заглушки, и того, что не все функции работают. Здесь можно указать, на какие аспекты дизайна надо обратить особое внимание, а какие — пропустить. Объяснять на словах было бы гораздо труднее. Работа с образцом позволяет разрешить все возможные вопросы и недопонимания и не отвлекаться на них во время тестирования.

Опишите предполагаемую реакцию системы

Даже в самых точных прототипах бывают доступны не все функции. Отсутствие определённой функции или ошибку можно использовать для изучения представлений пользователей о предполагаемом пути развития. Например, спросить, куда может вести конкретная ссылка. В других случаях важно объяснить, что должно было произойти в ответ на действия тестера. Без этих пояснений пользователи могут прийти к неверному заключению и ошибиться в дальнейшем.

Остерегайтесь тупиков

Создавая прототип и прорабатывая целевые действия, вы выстраиваете пути, по которым пойдут пользователи. Найдутся и те, кто захочет сойти с дороги и попадёт в тупик — исследуя функции, которые в прототипе пока не доступны. Единственное, что можно сделать в этом случае — направить их обратно и дать продолжить задание с места, где они сбились.

Используйте прототип для демонстрации решения клиентам

Кроме юзабилити-тестирования, прототипы играют важную роль в демонстрации дизайна клиентам. Заказчикам бывает сложно понять работу сайта или приложения на основе одних только статичных изображений. Я помню много случаев, когда клиенты вроде бы разбирались в блок-схемах, но в действительности не понимали ничего, пока им не удавалось испытать работающую модель. Интерактивные прототипы имитируют взаимодействие и позволяют быть уверенным, что у всех сложилось верное представление о работе сервиса. Объяснение того, как система работает, и демонстрация её работы — не одно и то же.

11 Юзабилити тестирование

12.1 Подходы по улучшению юзабилити

Подготовка к юзабилити-тестированию состоит из 4 основных этапов:

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

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

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

выбор респондентов. Подбирается группа людей, которые максимально схожи с персонажем по описанию.

Существуют разные подходы по улучшению юзабилити сайта:

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

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

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

Юзабилити-тестирование с респондентом в среднем длится от 20 минут до часа.

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

В группе важно разнообразие. Как правило, количество участников в фокусной группе варьируется от 6 до 12 человек.

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

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

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

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

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

Проведение экспертизы сайта направлено на достижение следующих целей:

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

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

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

Сплит-тестирование означает одновременное тестирование нескольких вариантов продающих страниц, отличающихся текстом и/или оформлением. Сплит-тест также называют дробным тестированием.

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

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

В сплит-тесте может испытываться все – от цветовой палитры и скина сайта, до мельчайших нюансов текста страницы; от цены до скидки; и даже причины скидки и ее срока.

Удивительно, но простое изменение слов '50% скидки' на 'Два товара по цене одного' приводило к увеличению продаж, хотя по сути говорило об одном и том же. Поэтому неудивительно, что сплит-тестирование является неотъемлемым этапом успешного продвижения товара.

3.1 Основы сплит-тестирования

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

Другим важным аспектом при проведении сплит-теста является идентичность посетителей.

Например, если Вы тестируете первый вариант веб-страницы с 8:00 до 20:00, а второй- с 20:00 до 8:00, то на показатели их эффективности может оказать влияние тот факт, что днем в Интернет выходит преимущественно средний класс общества, "белые воротнички" и т.п., а вечером и ночью- подростки. Понятно, что интересы и покупательская способность этих аудиторий совершенно разная. Тот же эффект может дать и тестирование в различные дни, скажем, в воскресенье и понедельник.

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

3.2 Технический аспект

Существует много платных инструментов веб-аналитики, которые позволяют проводить сплит-тестирование. Рассмотрим бесплатную платформу для тестирования от Google –Website Optimizer, которая с лёгкостью позволяла создавать тесты и анализировать полученные результаты. В 2012 году инструмент был интегрирован в Google Analytics и стал назваться Content Experiments. К сожалению, сделав шаг вперед в интеграции, Google совершил два шага назад по функциональности Google Website Optimizer.

До начала работы нужно будет только создать аккаунт в Google, если у Вас его ещё нет. Попадав в интерфейс Website Optimizer, была возможность выбрать, каким типом эксперимента нужно воспользоваться. Вы могли выбрать «эксперимент A/B» («самый простой способ сделать быстрое тестирование») или «многовариантный эксперимент» («самый здравый способ протестировать множество идей»).

Рассмотрим классический A/B-тест.

Google Website Optimizer предлагает нам убедиться в том, что мы выполнили следующие действия.

1) Выберите страницу для проверки. В качестве примера потенциальных тестовых страниц может выступать Ваша главная страница или страница с информацией о продукте.

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

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

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

Затем выберите ту страницу, которую посетитель должен достигнуть, чтобы квалифицировать посещение как успешную конверсию. Это называется конверсионная страница. Некоторые общие конверсионные страницы включают в себя страницу заказа «спасибо», страницу «Регистрация успешна», страницу подтверждения «Свяжитесь с нами», или страницу «начало загрузки».

После введения веб-адресов для этих двух страниц Website Optimizer сгенерирует небольшой код на JavaScript (именуемый тегами-метками) для тестовой страницы и конверсионной страницы. Все, что вы или человек, отвечающий за работу сайта, должны сделать, – скопировать и вставить эти теги в HTML-код ваших страниц. Google даже проверит (утвердит) то, что эти теги помещены правильно, прежде, чем тест начнётся.

После проверки размещения вами кода, Вы сможете начать эксперимент, нажав на кнопку «Начать эксперимент»

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

Ниже будут рассмотрены недостатки нового инструмента Content Experiments и примеры тестов на его основе.

3.3 Плюсы и минусы сплит-тестирования

Преимущества сплит-тестирования со слов Якоба Нильсена:

тестирование проводится в реальных условиях

можно тестировать незначительные изменения

можно проверять уместность в конкретном случае общих рекомендаций по юзабилити

дешевизна

Недостатки и ограничения:

метод подойдет только сайтам с четкими измеряемыми целями

нужен работающий сайт с посетителями

не можем судить о поведении пользователей на сайте глобально

тестируется только то, что мы догадаемся протестировать

12. 2 Внедрение рекомендаций и оценка выводов

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

Однако, даже если вы полностью уверены в эффективности рекомендаций и ваше желание поскорее все реализовать не имеет границ, мы рекомендуем проверить отдачу от предложенных изменений с помощью любого из инструментов тестирования: Google Content Experiment, Visual Website Optimizer, Optimizely и др. Используя инструменты тестирования, мы сможем выявить наиболее эффективный из сформированных вариантов, опираясь на численные показатели.

Рассмотрим три вида тестирования

Тестирование страниц на основе разных URL;

Тестирование элементов сайта на нескольких страницах;

Тестирование двух версий дизайна сайта в A/B тесте.

12.2.1 Тестируем страницы на основе разных URL

Задача 1: Протестировать содержание страницы, на которой представлена акция.

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

Реализация эксперимента:

Для подобного тестирования подходит инструмент Google Content Experiments (бесплатный). Он позволяет проводить только тестирование на основе различных URL. Рассмотрим на примере эксперимента функции инструмента.

Шаг 1. Для реализации тестирования ставим задачу IT-поддержке ресурса: создать дополнительную страницу на сайте и разместить на ней верстку «Тестовый вариант страницы».

В итоге, от программистов Вы должны получить следующие страницы:

1) Основной URL, например www.site.ru/action/ , на который размещен «Основной вариант страницы». Весь трафик, попадающий на этот URL, участвует в тестировании.

2) Тестовый URL, например, www.site.ru/action1/, на котором размещен «Тестовый вариант страницы». На этот URL не нужно вести трафик с сайта и трафик с источников рекламы.

Пояснения

Для того чтобы избежать негативных последствий для SEO-оптимизации, вы можете использовать атрибут ссылки rel="canonical" для всех тестовых URL, показывая, что оригинальная ссылка предпочтительна. Google рекомендует использовать rel="canonical" вместо тега noindex, поскольку это лучше отражает ваши намерения в ситуации тестирования.

Шаг 2. В интерфейсе Google Content Experiments указываем Основной URL для тестирования

Рисунок 3. Начало эксперимента

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

Рисунок 4. Выбор страниц для эксперимента

Шаг 3. Выбираем цели эксперимента

Оценивать лучший результат рекомендую сразу по нескольким параметрам:

Цель 1: Конверсия в покупки для тестируемых страниц – нам важно не только количество покупок, в целом совершенное посетителями тестируемых страниц, но и сколько из них участвовали в акции. Это отслеживание можно установить в Google Analytics с помощью событий. Цель «Транзакция» является основной для принятия решения о победе или проигрыше варианта.

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

Цель 2: Просмотр 2-х и более страниц – был ли совершен дополнительный целевой переход со страницы акции к товарной группе. Т.е. фактически оценить расположение и привлекательность блоков и ссылок на странице.

Цель 3: Конверсия в зависимости от сегмента посетителя. Нам важно отдельно проанализировать конверсию пользователей в зависимости от источника посетителя. В эксперименте будут участвовать пользователи, перешедшие с рассылки и те, кто перешел к акции с сайта. Обычно эти сегменты посетителей показывают разную конверсию на одной и той же целевой странице. Наша задача - увидеть эту разницу и предложить лучший вариант страницы для каждого сегмента, т.к. мы можем этим сегментам показывать разные страницы.

К сожалению, в Google Content Experiments можно задать только одну цель. Но в дальнейшем результаты эксперимента можно проанализировать с точки зрения достижения других целей вручную.

Задаем основную цель эксперимента – «Транзакция».

Рисунок 5. Выбор целей эксперимента

Шаг 4. Размещение кодов эксперимента на основной странице эксперимента

Обратите внимание, что код необходимо размещать в начале основной страницы эксперимента, после открывающего тега

Рисунок 6. Код для проведения эксперимента

Справка

Код эксперимента обязательно должен находиться в секции . При загрузке скрипт тестирования определяет, какой вариант увидит пользователь и производит redirect пользователя на нужную страницу.

Шаг 5. Начало эксперимента, проверка работы эксперимента

Проверить, установлены ли коды на странице, поможет встроенный анализатор:

Рисунок 7. Проверка кода на страницах

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

1. Зайдите на основную страницу эксперимента: www.site.ru/action/ и посмотрите файлы cookies. Попытайтесь несколько раз удалить файлы cookies и увидеть различные варианты страницы. Удалять файлы cookies необходимо, чтобы повторно участвовать в эксперименте.

2.Зайдите на вторую страницу эксперимента www.site.ru/action1/. Поскольку страница тестовая, на ней не должно происходить редиректов и подмены содержания.

Ход эксперимента

Если вы уже проводили эксперимент с помощью Google Content Experiments, то, скорее всего, заметили, что система не делит трафик 50/50 между страницами. Показы распределяются по принципу производительности. Это позволяет снизить риск проигрыша во время проведения эксперимента.

Пояснения

После запуска эксперимента в Google Content Experiments трафик будет распределяться не пропорционально между вариантами. Принцип распределения трафика описан как Принцип Гиттинса или Multi-armed bandit problem, http://en.wikipedia.org/wiki/Multi-armed_bandit_problem http://ru.wikipedia.org/wiki/Индексы Гиттинса.

Эксперты Google Analytics до сих не могут прийти к единому мнению о том, какой принцип показов лучше: 50 на 50 или основанный на взвешенной оценке показов. Скорее всего, в обновленной версии инструмента появится возможность выбора стратегии показов.

Шаг 6. Анализ результатов

Через некоторое время в интерфейсе Google Content Experiments вы увидите результаты.

Рисунок 8. Анализ результатов. Вкладка «Конверсия»

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

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

Рисунок 9. Анализ результатов. Вкладка "Набор целей1"

Пояснения

В инструменте Content Experiments есть возможность ограничить процент пользователей, которые будут участвовать в эксперименте. Например, вы можете задать условие: «Показывать эксперимент только 50% посетителей тестируемой страницы».

В инструменте нет возможности ограничить сегмент пользователей, которым будет показываться эксперимент. Например, вы не можете установить условие: «Показывать эксперимент только новым посетителям сайта». Проанализировать результаты эксперимента на сегменте посетителей сайта – возможно. С помощью стандартного инструмента «Расширенные сегменты» в Google Analytics.

Как посчитать вероятность, если цель не являлась основной?

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

Выводы:

Инструмент является бесплатным и позволяет провести наиболее популярный вид тестирования – эксперимент на основе URL. Но сложные эксперименты, описанные ниже, в нем провести невозможно.

Многие помнят Google Website Optimizer. В 2012 году инструмент был интегрирован в Google Analytics и стал назваться Content Experiments. К сожалению, сделав шаг вперед в интеграции, Google совершил два шага назад по функциональности Google Website Optimizer. Вы теперь не можете:

проводить мультивариантное тестирование (тестирование одного или нескольких элементов на нескольких страницах одновременно);

выбирать и задавать процентное распределение трафика между вариантами.

К тому же исчезла «гибкость» инструмента. Но мы уверены, что инженеры Google не оставят рекомендации и предложения по функциональности без внимания и мы в скором времени сможем пользоваться улучшенным и многофункциональным продуктом.

Рассмотрим вторую задачу по тестированию, которую пока невозможно решить с помощью Google Content Experiments. Одновременно исследуем платный инструмент Visual Website Optimizer и его специфику.

7.2.2 Тестируем повторяющиеся элементы сайта на нескольких страницах (элементы шапки, навигацию и т.д.)

Вводная информация по эксперименту: Анализ аудитории и покупок на сайте выявил конверсионный раздел. Условно назовем его «Пазлы». Товары из раздела хорошо продаются, но в раздел приходит малое количество посетителей с сайта, т.к. навигация к нему затруднена. Решено было пересмотреть навигацию к разделу.

Рисунок 10. Пример навигации на сайте

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

Пояснения

В этом эксперименте нет определенной основной страницы для эксперимента. Изменения происходят на всех страницах сайта в навигации. Поэтому инструмент Google Content Experiments не подходит.

Описанный ниже тип эксперимента можно выбрать, если вы проводите тестирование:

цвета кнопки «Купить» на всех карточках товара;

расположения телефона в шапке сайта и т.п.

Цели эксперимента:

Для эксперимента были выбраны следующие цели, отслеживание которых уже настроено в Google Analytics:

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

2) Клик по ссылке в навигации. Нам важно понимать увеличилось ли количество переходов в раздел из навигации сайта. Эту микроконверсию тоже необходимо считать.

Пояснения

Если цели, обозначенные выше, не настроены в Google Analytics, то вы можете настроить отслеживание целей в инструменте тестирования.

Большинство инструментов тестирования позволяет экспортировать данные в Google Analytics. За счет этого всю аналитику тестирования вы можете проводить в его интерфейсе.

Шаг 1. Для реализации эксперимента воспользуемся Visual Website Optimizer – платным инструментом по тестированию содержания. Выбираем A/B тест.

Шаг 2. Первый шаг. Задаем стартовый URL

Рисунок 11. Указываем стартовый URL

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

Заполненное на данном шаге поле влияет только на то, какая страница будет показана на следующем шаге.

Шаг 3. С помощью встроенного в систему визуального редактора вносим необходимые изменения в навигацию сайта.

Рисунок 12. Интерфейс визуального редактора

Шаг 4. Переходим к настройке целей эксперимента

Если Вы планируете в дальнейшем анализировать результаты эксперимента с помощью VWO, Вам необходимо настроить цели в интерфейсе.

Рисунок 13. Настройка целей

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

В нашем же эксперименте вся аналитика будет проводиться в Google Analytics, т.к. там заранее были настроены цели. В интерфейсе VWO мы указываем незначимую для нас цель: «Вовлечение», чтобы пройти на следующий этап настройки эксперимента.

Шаг 5. Настройка эксперимента

Рисунок 14. Настройка эксперимента

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

Если вы хотите запустить тест на всех страницах, которые содержат, к примеру, http://example.com/products/, то вы должны указать http://example.com/products* .

Если вы хотите запустить тест на всем сайте, скажем, на http://www.example.com, то укажите в поле http://www.example.com*

Пояснения

К сожалению «*» единственный оператор, который воспринимает система. Другие операторы регулярных выражений Visual Website Optimizer не воспринимает.

Процент трафика участвующего в эксперименте: указываем 100%.

Таргетирование на сегмент аудиторий: указываем сегмент постоянных покупателей магазина. В нашем случае, постоянные покупатели имеют cookies esky_LOGIN

Рисунок 15. Эксперимент проводится на постоянных покупателях

Другие настройки:

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

Пояснения

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

Интеграция с Google Analytics: интеграция осуществляется с помощью пользовательской переменной (уровень посетителя). Посетителю, который видит один из вариантов страницы, присваивается соответствующая пользовательская переменная на уровне пользователя. В интерфейсе вы указываете слот пользовательской переменной (всего их 5).

Рисунок 16. Интеграция с GA

В Google Analytics мы видим данные в параметре «Моя переменная (значение 5)»

Рисунок 17. Анализ результатов эксперимента в Google Analytics

Автоматическое отключение неэффективного варианта: не включаем, т.к. анализировать результаты будем в интерфейсе Google Analytics.

Пояснения

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

Временной таргетинг эксперимента: используйте этот параметр для автоматического запуска или приостановки испытаний на конкретные даты. Задавайте дату или число, к которому/после которого вы хотите начать эксперимент. В нашем случае, этот параметр не указываем.

Процентное распределение показов: по умолчанию установлено 50 на 50. Не меняем этот показатель для нашего эксперимента.

Шаг 6. IT-отделу (программистам сайта) ставим задачу по размещению кода Visual Website Optimizer на всех страницах сайта. Код размещается один раз, и позволяет проводить все типы экспериментов без повторного размещения кодов и повторного привлечения IT.

Шаг 7. Начало эксперимента

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

Шаг 8. Анализ результатов

Анализ эксперимента мы проводим в интерфейсе GA. Это очень удобно, т.к. вся аналитика по проекту уже настроена в Google Analytics, и мы можем использовать «Расширенные сегменты».

Выводы:

Основным достоинством Visual Website Optimizer является возможность провести эксперимент с минимальным участием программистов сайта или IT-отдела заказчика, что значительно сокращает время на внедрение эксперимента.

Расширенная функциональность системы позволяет реализовать фактически любой сценарий тестирования.

Самым весомым недостатком Visual Website Optimizer является ценообразование. Вы можете получить бесплатную 30-дневную пробную версию, но помимо этого минимальная стоимость использования системы составляет около $ 50 в месяц.

12.2.3 Тестируем две версии дизайна сайта в A/B тесте

Задача 3: Необходимо провести A/B эксперимент между новой и старой версией сайта и проанализировать улучшение целевых показателей.

Пояснение

Мы не можем использовать предложенные ранее варианты тестирования, т.к. содержание сайта, как и основной URL может быть совершенно разными в двух версиях сайта.

Фактически задача тестирования сводится к разработке скрипта, который будет распределять трафик сайта 50/50 и записывать результат деления в cookies. Пользователю в зависимости от cookies будет показываться один или второй вариант сайта.

Задача анализа результатов решается с помощью Google Analytics. В каждом из вариантов сайта необходимо присвоить пользовательское значение, например:

Видят старую версию сайта:

_gaq.push(['_setCustomVar',

5,

'experiment',

'Old version', //вариант, который видит пользователь

1

]);

Видят новую версию сайта:

_gaq.push(['_setCustomVar',

5,

'experiment',

'NEW version', //вариант, который видит пользователь

1

]);

Задача подсчета статистически значимых результатов проводится с помощью файла Excel, вручную.

Пример скрипта php, который делит аудиторию сайта 50/50.

//Скрипт делит аудиторию на две части для нужного landing page

//Landing page

$cookieName = 'experimentVariantId';

// Проверяем установлен ли уже id варианта

if (isset($_COOKIE['experimentVariantId'])) {

//установлен, читаем из кук

$experimentVariantId = $_COOKIE[$cookieName];

} else {

$experimentVariantId = rand(1,2);

}

setcookie($cookieName, $experimentVariantId, (time() + (60*60*24*30*6)), "/");

switch ($experimentVariantId) {

case 1:

//показывает 1 вариант

echo 'Вариант 1';

break;

case 2:

//показываем 2 вариант

echo 'Вариант 2';

break;

case 0:

default:

// ничего не показываем, возникла какая-то неопределенность

echo 'Default';

break;

}

Выводы:

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

Заключение

В завершении всей лекции хотелось бы отметить, что юзабилити постоянно развивается, появляются новые подходы и идеи, но остаются и базовые моменты, которые необходимо знать и которым необходимо следовать.

Из всей этой лекции необходимо вынести следующие:

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

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

Появление национального стандарта по юзабитили ГОСТ Р ИСО 9241-210-2012 «Эргономика взаимодействия человек-система. Часть 210. Человеко-ориентированное проектирование интерактивных систем».

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

Не дизайнер, не пользователь — это должен быть третий человек, который разрушит их иллюзии. И это будет выход в новое измерение.

Цель юзабилити – повышение конверсии сайта путем повышения юзабилити сайта.

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

Подготовка к юзабилити-тестированию состоит из 4 основных этапов: формирование гипотез. определение метрик для тестирования, определение персонажа и сценария, выбор респондентов.

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

Чек лист юзабилити сайта.

(13) Содержание сайта:

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

В шапке сайта указан номер телефона с кодом города, телефон расположен в одном месте на всех страницах, его видно в первые 3 секунды.

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

Вопросы доверия к компании должны быть решены на соответствующих страницах: «О компании», «Наши клиенты», «Отзывы», «Как мы работаем», «Фото сотрудников», «Дипломы», «Публикации» и т.д.

Присутствует публикации в формате «Истории успеха клиентов»

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

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

Любая страница загружается менее, чем за 5 секунд.

На выбор посетителя предоставляется несколько вариантов доставки: самовывоз, стандартная, срочная.

Корректно используется модуль «Товарные рекомендации»: «с этим товаром покупают», «новинки», «похожие товары», «товары со скидкой».

На странице «Контакты» указаны телефоны, email-адреса, адреса офисов, карта проезда, часы работы персонала, при необходимости указывается информация о контактных лицах.

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

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

(14) Формы

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

Возможна авторизация через соц. сети, с последующим указанием контактов (email + телефон) непосредственно при оформлении заказа

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

Можно вернуться на шаг назад, чтобы откорректировать введенные ранее данные.

Для авторизованных пользователей происходит автоматическое заполнение форм.

Обязательные поля выделены; если все поля являются обязательными – выделение отсутствует.

Формы регистрации и оформления заказа содержат только обязательные поля.

Функционируют быстрые кнопки: «Tab» = «Следующее поле», и «Enter» = «Отправить форму».

В полях приведен пример текста, который необходимо туда ввести

Настроена валидация полей, проверка происходит в реальном времени, сообщения об ошибках информативны, при правильном заполнении формы выводится «зеленая галочка»

Возможность выбора дат ограничена, чтобы люди не могли ввести несуществующие значения

При заполнении многошаговых форм сообщается номер шага и количество шагов до конца

Кнопка отправки данных становится активной, когда все введенные данные проходят валидацию.

Определять автоматически регион; при выборе региона в начало списка ставить крупные города

(12) Корзина

Страница корзины не содержит ничего лишнего, только то, что нужно для оформления заказа.

При добавлении товара в корзину выводится визуальное подтверждение, указывается, какое количество единиц товара добавлено, можно увеличить это количество простым действием (+/-).

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

Поле «количество» должно иметь валидацию, не позволяющую вводить буквы и не адекватные значения, в случае ошибки подставляется значение по умолчанию, например 1.

При вводе в поле «количество» значения «0» должен появляться запрос на подтверждение удаления товара из корзины, после чего товар должен быть удален из корзины.

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

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

Разнообразие способов оплаты: наличные, карта, электронные деньги, безнал, мобильный кошелек

Наличие функции «купить в 1 клик».

Ссылка на корзину текстом + картинкой.

Наличие «миникорзины». В миникорзине отображается количество товаров, которые добавлены в корзину и сумма заказа, можно нажать кнопку «оформить заказ» без перехода на страницу корзины.

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

(4) Подтверждения

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

Подготовлены шаблоны писем: «вы зарегистрировались», «вы оформили заказ», «вы оплатили заказ», «проблемы с оплатой», «вы сформировали заказ, но не оформили».

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

Страница ошибки 404 должна содержать ссылки на самые важные страницы, оформляется в дизайне сайта.

(10) Контент

Тексты основаны на достоверных источниках, в полной мере отвечают на поставленные вопросы, предлагаемые решения применимы и актуальны.

В контенте нет ничего лишнего, но объем информации достаточен для свершения ключевого действия.

Отсутствуют грамматические и орфографические ошибки.

В тексте не используется транслит, верхний регистр и спец. символы.

Максимально емкое содержание слоганов, аннотаций и анкоров ссылок.

Для наглядности текст дополняется фотографиями, видео, иллюстрации, таблицами, диаграммами и т.п.

Для картинок прописаны ALT на случай, если пользователь будет просматривать кэш страницы.

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

Фотогалерея имеет функции «вперед» и «назад», не нужно открывать каждую картинку в отдельном окне.

Самую важную информацию можно прочитать на первом экране без вертикальной прокрутки.

(8) Дизайн

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

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

Дизайн привычный для этой тематики и для сайтов такого типа (сайт услуг, интернет-магазин, портал и т.п.)

Дизайн сайта выдержан в спокойной цветовой гамме.

Текст разбит на абзацы, заголовок связаны с текстом.

Не при каких обстоятельствах на сайте не начинает играть музыка

Отсутствует навязчивая реклама: попандеры, кликандеры, редиректы родительского окна.

Тексты написаны темным цветом на светлом фоне. Цвет текста отличается от цвета ссылок.

(4) Совместимость

Сайт корректно работает при заходе с мобильных устройств. Желательно наличие мобильной версии сайта.

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

Кроссбраузерная верстка: Mozilla, Chrome, Opera, Explorer, разные разрешения экрана.

Страница отображается корректно при увеличении или уменьшении масштаба в браузере (ctrl + / ctrl -).

(5) Фильтры

Для страниц фильтров используется ЧПУ.

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

Товары корректно присваиваются фильтрам.

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

При выборе фильтра обновляется активный список: появляются новые уточняющие фильтры, не актуальные удаляются. Недоступные ссылки не исчезают с экрана, а становятся серыми и не активными.

(5) Кнопки:

Размеры кнопки очевидны, совпадают с реальной областью для клика.

Кнопки с целевым действием явно выделяются.

Наведение курсора на кнопку должно сопровождаться каким-то визуальным эффектом: изменение подсветки, изменение изображения кнопки и т.п.

Текст кнопки соответствует цели страницы: «Зарегистрироваться» вместо «Отправить» или «Завершить».

Кнопка купить на странице одна, а не «подробнее» + «купить» + «добавить в корзину».

(5) Поиск:

На странице одно поле поиска, расположенное в видном месте, которое присутствует на всех страницах.

Используется ранжированный неточный поиск.

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

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

Если результатов не нашлось, система подсказывает пользователю, как изменить настройки поиска.

(17) Навигация:

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

Главное меню размещается на всех страницах и не меняется.

Пункты меню и списки ссылок расположены в порядке убывания их значимости.

В меню максимум 2 подуровня; пункты, содержащие подменю, отличаются от остальных пунктов.

Всплывающее меню не пропадает при переводе мышкой с главного меню на пункты всплывающего.

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

На всех страницах сайта присутствует ссылка на карту сайта. Карта сайта составлена в виде вложенного рубрикатора категорий и важных страниц.

Реализована перелинковка «пагинация» на страницах списков товаров.

Реализована перелинковка «хлебные крошки» на всех страницах.

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

При наведении на ссылку изображение курсора меняется.

Ссылки подчеркнуты. Посещенные ссылки фиолетовые, не посещенные – синие.

Скриптовые ссылки (действие без перезагрузки страницы) подчеркнуты пунктирной линией.

Все ссылки ведут на существующие страницы. Отсутствуют ссылки на 404 страницы.

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

На сайте должен быть раздел «Помощь».

На сайте есть разделы «Новинки», «Популярные товары» и «Распродажа».

Спонсор книги – необычный сайт знакомств Полюблю.