//Скрипт делит аудиторию на две части для нужного 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 страницы.
Количество действий, которое необходимо совершить на сайте для достижения ключевой цели, меньше или соответствует среднему по тематике.
На сайте должен быть раздел «Помощь».
На сайте есть разделы «Новинки», «Популярные товары» и «Распродажа».
Спонсор книги – необычный сайт знакомств Полюблю.