Интерфейс сильно влияет на конверсию и продажи. Если людям тяжело найти информацию или сделать заказ — они уйдут на более удобный сайт. Аудит коммерческих факторов и юзабилити помогает найти слабые места магазина и составить план по улучшению интерфейса.
Что изучаем?
Наша задача — выяснить, насколько удобно пользоваться интернет-магазином. Нам нужно проанализировать коммерческие факторы, информативность сайта, интерфейс, дизайн и структуру.
Для нас важно, чтобы люди легко находили нужные сведения, не возникало проблем при оформлении заказа, описания помогали выбрать товар. Чем меньше у посетителя вопросов к интерфейсу — тем лучше.
Дизайн мы тоже относим к юзабилити. Если на сайте плохо подобраны цвета и шрифты, а оформление выглядит непривлекательным, — людям тяжело воспринимать информацию.
Мы рекомендуем обращать внимание на:
- Дизайн и структуру сайта;
- Шапку сайта;
- Меню;
- Футер;
- Главную страницу;
- Информацию о компании;
- Процесс оформления заказа;
- Каталог и страницы товаров.
Зарегистрироваться в «Ровертаск» и попробовать чек-лист
Чек-лист
1) Дизайн
- Общая оценка дизайна
- Сайт запоминается, вызывает положительные эмоции, желание купить, есть акценты на основных элементах.
- Дизайн стандартный. Скорее всего это шаблонный дизайн, он не раздражает, но и не запоминается.
- Дизайн перегружен. Не ясно, что предлагается посетителям на сайте.
- Дизайн сайта выглядит устаревшим.
- Читабельность текста
- Текст воспринимается легко. Размер и тип шрифта подходящие.
- Текст тяжело читать. Не самый удачный шрифт, либо плохо подобран фон сайта.
- Размер шрифта не оптимальный. Рекомендуем придерживаться размера от 12 до 14 пикселей.
- Выделения ключевых слов по смыслу
- Смысловые акценты расставлены.
- Нет выделений вообще. Текст тяжело читать.
- Слишком много выделений. Это можно привести к наложению фильтра от поисковых систем.
- Ширина основной версии сайта
- Ширина оптимальная (от 980 до 1220 пикселей), либо шаблон сайта адаптивный.
- Сайт слишком узкий.
- Сайт слишком широкий.
- Качество фотографий товара
- Качество хорошее, контент уникальный и брендированный.
- Качество хорошее, но видно, что фотографии из интернета.
- Контент плохого качества.
2) Шапка сайта
- Высота шапки сайта
- Допустимая.
- Слишком большая.
- Логотип
- Логотип есть.
- Логотип плохого качества.
- Логотипа нет.
- Кликабельность логотипа
- Логотип кликабельный.
- При нажатии на логотип ничего не происходит.
- Информативность
- По шапке сайта понятно, какие товары продаются в магазине
- Шапка неинформативная
- Телефон в шапке сайта
- Номер заметен, сразу бросается в глаза.
- Телефон не выделен. Приходится прикладывать усилия, чтобы обнаружить его.
- Телефон отсутствует.
- Вид телефонного номера
- 8-800 или городской.
- Указан только сотовый телефон, либо отсутствует вообще.
- Форма обратной связи/обратный звонок
- Форма обратной связи есть.
- В шапке сайта нет формы обратной связи.
- Региональность
- По шапке сайта понятно, по каким регионам работает компания.
- Только по коду телефона в шапке сайта можно определить регион.
- Регион работы компании по шапке сайта определить невозможно.
- Время работы компании
- В шапке сайта указано время работы.
- Время работы в шапке сайта не указано.
- Шапка сайта одинаковая на всех страницах?
- Шапка сайта едина на всём сайте.
- На некоторых страницах шапка сайта меняется.
- Поиск по сайту
- Поиск по сайту есть.
- В шапке отсутствует возможность поиска по сайту/поле с поиском не выделено.
- Наличие ссылок на группы в соц сетях
- Ссылки есть, группы живые, в них регулярно публикуются новые материалы.
- Ссылки есть, но последнему сообщению в группах больше 3 месяцев.
- Ссылки на соцсети в шапке сайта отсутствуют.
- Перегруженность/пустота шапки сайта
- Шапка сайта гармоничная.
- Шапка сайта перегружена нерелевантной информацией.
- Шапка сайта выглядит слишком пустой.
- Наличие в шапке слогана/призыва к действию/преимуществ компании
- В шапке сайта есть короткий текст, который дополнительно описывает компанию/услуги/товары.
- Дополнительная информация в шапке сайта отсутствует.
3) Меню
- Пункта меню «Главная»
- Пункт меню «Главная» есть.
- Ссылки на главную страницу в меню нет.
- Перегруженность меню
- Слишком много пунктов меню (от 9 и больше).
- Меню не перегружено.
- Отображение меню
- Меню заметное, на контрастном фоне, сразу бросается в глаза.
- Главное меню не заметно.
- Наличие пункта меню «Контакты» или «О компании»
- Присутствует.
- Отсутствует.
- Наличие пункта меню «Акции» или «Скидки»
- Присутствует.
- Отсутствует.
- Наличие пункта меню «Каталог»
- Присутствует.
- Отсутствует.
- Наличие эффекта при наведении курсора на меню
- Эффект при наведении присутствует.
- При наведении на пункт меню ничего не происходит.
- Главное меню в одну строчку
- Да.
- Нет, главное меню многоуровневое.
- Вложенность меню
- Все в порядке. Подразделы меню умещаются в экран. Меню раскрывается только один раз.
- Слишком много подразделов, либо вложенность меню сильно усложняет удобство работы с сайтом.
- Верстка ссылок в меню
- Вся кнопка является ссылкой, либо это не требуется.
- Ссылкой является только текст внутри кнопки.
4) Футер
- Ссылка на карту сайта
- Ссылка на карту сайта есть.
- Ссылка отсутствует.
- Контактная информация в футере
- В футере есть вся основная контактная информация.
- Контактная информация отсутствует.
- Ссылки на группы в соцсетях
- Ссылки на группы в соцсетях в футере присутствуют.
- Ссылки на соцсети в футере отсутствуют.
- Перегруженность футера
- Футер выглядит органично.
- В футере есть лишняя информация, отвлекающая от основной цели сайта.
- Высота футера
- Высота футера оптимальная.
- Футер слишком большой.
- Футер слишком маленький
5) Главная страница
- Cлайдер с акциями/преимуществами/предложениями компании
- На главной странице есть слайдер.
- Слайдер есть, но он выполнен не в стиле сайта.
- Слайдер отсутствует.
- Блок с преимуществами компании
- Блок с преимуществами есть. Он выглядит привлекательно.
- Блок с преимуществами есть, но его оформление не самое удачное.
- Блок с преимуществами отсутствует.
- Хиты продаж
- Хиты продаж представлены на главной странице сайта.
- На главной странице отсутствуют хиты продаж.
- Счетчики обратного отсчёта
- Нет счётчика.
- Есть счётчик, рекомендуем его убрать.
6) О компании
- Телефон, адрес, почта, время работы
- Основные контактные данные присутствуют.
- Контактные данные отсутствуют, либо они неполные.
- Юридические данные - ИНН, ОГРН, Банковские реквизиты. Возможность скачать пример договора
- Юридические данные присутствуют в полном объеме.
- Юридических данных нет, либо они неполные.
- Схема проезда — интерактивная карта с отметками, фотографии со стрелками
- Подробная схема проезда присутствует.
- Схемы проезда нет, либо она не самая подробная.
- Сканы свидетельств, лицензий, сертификатов
- Присутствуют.
- Отсутствуют.
- Корпоративное видео
- Видео о компании есть на сайте.
- Видео отсутствует.
- История или миссия компании
- Есть.
- Нет.
- Возможность связаться с руководством/оставить жалобу через форму
- Есть возможность связаться с руководством компании напрямую.
- Обратной связи с руководством нет.
- Ссылка на страницу с вакансиями
- На сайте есть вакансии компании.
- Вакансии отсутствуют.
7) Оформление заказа
- Ссылка на корзину заметная
- Корзина сразу бросается в глаза.
- Ссылку на корзину приходится искать.
- Рядом с корзиной отображается количество товаров и сумма заказа
- Есть количество товаров и общая сумма корзины.
- Ссылка на корзину статична.
- Выбор способа оплаты
- Есть оплата нал/безнал. Возможна оплата банковскими карточками.
- Отсутствует.
- Возможность удалять товары/увеличивать их количество
- Присутствует.
- Отсутствует.
- Приблизительная дата доставки в зависимости от города
- Расчет даты доставки есть.
- Отсутствует.
- Поле для ввода промокода
- Есть возможность ввести промокод.
- Отсутствует.
- Наличие выбора видов доставки
- Есть выбор.
- Только один вид доставки.
- История заказов в личном кабинете
- Есть история заказов.
- История заказов отсутствует.
- Система лояльности, бонусы
- После покупки клиент получает бонусы/скидки.
- Система лояльности отсутствует.
- Отсылка информации на электронную почту после оформления заказа
- На почту приходит письмо с информацией о заказе.
- Отсутствует.
- Смс-уведомления после заказа
- На телефон приходит уведомление о заказе.
- Отсутствует.
- Возможность выбора физ/юр лицо
- Покупку можно оформить на физ/юр лицо.
- Отсутствует.
- Обязательная предоплата
- Предоплата не требуется.
- Предоплата обязательная.
- Проверка обязательных полей
- Обязательные только телефон и/или e-mail.
- Есть лишние обязательные поля.
8) Общее
- Наличие фавиконки
- Фавиконка есть.
- Фавиконка есть, но не привлекательная.
- Фавиконка отсутствует.
- Наличие хлебных крошек
- Присутствуют.
- Отсутствуют.
- Рубрика «Вопросы и ответы»
- Присутствует.
- Отсутствует.
- Основной email компании на домене сайта
- Почта на домене сайта.
- Почта на mail.ru, yandex.ru или аналогичных сервисах, либо почта просто отсутствует.
- Возможность регистрации на сайте/личный кабинет
- Есть.
- Отсутствует.
- Реклама сторонних ресурсов
- Есть баннеры посторонних сайтов.
- Отсутствует.
- Онлайн-консультант
- Есть.
- Отсутствует.
- Звуки на сайте
- На сайте есть звуки.
- Звуков нет.
- Всплывающие окна (включая онлайн-консультанта)
- Есть.
- Отсутствуют.
- Пустые страницы и страницы в разработке
- Есть недоработанные страницы.
- Отсутствуют.
- Ссылки подкчёркнуты, выделены ярким цветом
- Ссылки заметные.
- Ссылки слабо выделены.
- Блокировка элементов сайта плагином AdBlock
- Элементы сайта блокируются AdBlock.
- Элементы сайта не блокируются AdBlock.
9) Каталог товаров
- Боковое меню со списком категорий и подкатегорий
- Боковое меню присутствует.
- Боковое меню есть, но оно не самое удобное.
- Боковое меню отсутствует.
- Наличие в каталоге фильтров — бренд, цена, размер, наличие товара
- Фильтры присутствуют.
- Фильтры есть, но не все.
- Фильтры отсутствуют.
- Сортировка по популярности, цене, названию, дате добавления
- Сортировка присутствует.
- Сортировка есть, но она не самая удобная.
- Сортировка отсутствует.
- Информация о скидках и спецпредложениях на карточках товаров в каталоге
- Информация о скидках присутствует на карточках товаров.
- Информации нет.
- Количество показываемых товаров на странице каталога
- Пагинация присутствует, в одной строке до 5 товаров, общее количество товаров на странице до 50.
- Проблемы с количеством товаров на странице каталога.
- Возможность добавить товар в избранное из каталога
- Есть.
- Отсутствует.
- Сравнение товаров из каталога
- Есть.
- Отсутствует.
- Отображение на карточках товаров в каталоге цен, кнопки купить, основных характеристик, наличия товара
- Есть.
- Отсутствует.
- Рейтинг товара/количество отзывов
- Есть.
- Отсутствует.
- Однотипность фотографий товаров в каталоге
- Фотографии выглядят однотипно.
- Фотографии в разном стиле.
- Перегруженность карточки товара
- Карточки товаров выглядят органично.
- Есть лишняя информация на карточках товаров.
- Общее количество товаров в каталоге/подсчет товаров после применения фильтров
- Есть.
- Отсутствует.
10) Страница товара
- Фотографии товара
- Есть несколько качественный фотографий.
- Фотографии есть, но они не качественные.
- Фотография только одна, либо вообще отсутствует.
- Описание товара
- Описание есть, больше 300 символов.
- Описание слишком короткое.
- Отсутствует.
- Отображение цены товара и кнопки «Купить»
- Цена и кнопка заметные. Сразу бросаются в глаза.
- Необходимо приложить усилия, чтобы найти эти элементы.
- Информация о наличии товара
- Есть.
- Отсутствует.
- Информация о способах оплаты и доставке
- Есть.
- Отсутствует.
- Структурированные характеристики товара
- Есть.
- Отсутствуют.
- Информация о похожих/сопутствующих товарах
- Есть.
- Отсутствуют.
- Отзывы о товаре
- Отзывы есть о большинстве товаров.
- Возможность оставить отзывы есть, но самих отзывов нет.
- Возможность оставить отзывы отсутствует.
- Возможность выбора модификаций/размера товара
- Есть.
- Отсутствуют.
- Анимация при добавлении в корзину + сопутствующее сообщение
- Есть анимация + сопутствующее сообщение.
- Есть только анимация.
- Отсутствует.
- Возможность добавить в избранное
- Есть.
- Отсутствует.
- Возможность добавить в сравнение
- Есть.
- Отсутствует.
- Возможность купить в 1 клик
- Есть.
- Отсутствует.
- Видео о товаре
- Есть.
- Отсутствует.
Кейс
Проведем аудит по нашему чек-листу на примере интернет-магазина одежды Lamoda. Не будем тратить ваше время и разбирать сайт по каждому пункту — их 98 штук. Вместо этого давайте рассмотрим основные моменты.
Дизайн спокойный и приятный, это не шаблон. Шрифты подобраны удачно, изображения хорошего качества, информация структурирована — текст читать легко. Ссылки подчеркнуты, но не выделены цветом — при беглом просмотре их можно не заметить.
Удобная главная страница — на ней есть акции, спецпредложения, показаны популярные товары.
А вот меню не самое удобное — в нем 13 пунктов, которые расположены в 2 сроки. Сходу тяжело понять назначение некоторых разделов, например, «Стиль жизни» и «Красота».
Важной для пользователей информации в шапке сайта нет — нужно листать до подвала. Телефоны техподдержки закреплены внизу экрана, но не бросаются в глаза. Если не знать, что они там, пользователь может запутаться.
Хорошие страницы товаров — качественные фотографии товара с разных ракурсов, описания, отзывы и похожие предложения. Цену и кнопку «Купить» хорошо видно.
Удобный каталог товаров — много фильтров и сортировка по разным критериям. Можно не открывая страницу товара посмотреть несколько фотографий, размеры в наличии. Карточка товара открывается не на новой странице, а во всплывающем окне — можно почитать описание и добавить в корзину, не покидая каталог.
Оффер компании всегда на виду. Он есть и в шапке, и на главной, и в карточках товаров.
Итоги
Сайт Lamoda отвечает современным требованиям юзабилити, есть практически все коммерческие факторы. На нем нет серьезных ошибок, которые мешают пользователям покупать товары.
Единственный недостаток — шапка сайта. Слишком много пунктов в меню, не все пункты понятны. Важные для пользователей сведения, например, телефоны техподдержки закреплены внизу страницы. Это непривычно — люди могут не обратить внимания на черную плашку и не найти телефон при необходимости. Лучше было бы продублировать информацию в шапке.
Рекомендации
Чтобы проводить юзабилити-аудит, нужно понимать, как клиенты привыкли работать с магазинами. Например, люди ожидают увидеть корзину в правом верхнем углу экрана. Если ее там нет — посетители теряются, тратят время на поиски и могут уйти с сайта.
Исследуйте разные сайты — русско- и англоязычные. Читайте отзывы аудитории, кейсы маркетологов, веб-разработчиков и UI-дизайнеров.
