Аудит юзабилити интернет-магазина: Чеклист из 170+ пунктов для проверки интерфейса

Ключевые элементы для юзабилити аудита сайта

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

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

Навигация по сайту

• Пользователь интернет-магазина знает, в каком разделе он находится.
• Структура категорий каталога хорошо продумана.

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

Главное меню

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

Структура страниц сайта

• Шапка интернет-магазина должна быть лаконичной и содержать важную информацию и ссылки (логотип, название, контакты, меню).

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

Поиск по сайту и выдача

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

Так, например, после оптимизации поиска интернет-магазина Intertop нам удалось увеличить коэффициент транзакций на 74,64%

Поисковая выдача

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

Текст и его оформление на сайте

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

Абзацы

• Кегль для основного текста, предназначенного для чтения, — в идеале 16 px.
• Выравнивание текста  сделано по левому краю.
• Длина строки должна быть не более 80 символов. Если строка слишком короткая или длинная, то это негативно влияет на восприятие текста.

Заголовки

• Заголовки дают понять пользователю «о чем дальше», а лучше «что там сказано».
• Заголовки оформляются по типу ближе к «своему» абзацу.
• Кегль для заголовков больше кегля подзаголовка в 1,5 раза, кегля подзаголовка в свою очередь в 1,5 раза больше кегля для текста.

Шрифт текста, кегль и цвет

• Верхний регистр использован по минимуму. Использование верхнего регистра должно быть оправданным, так как он затрудняет чтение и восприятие текста.
• Шрифты должны быть одни и те же для всех страниц сайта интернет-магазина. Они должны быть читабельны и контрастны.
• Цвет основного текста и ссылок должен отличаться друг от друга и быть контрастным.
• Использование разных цветов текста должно быть оправданным.
• Все длинные числа разбиты пробелом для упрощения восприятия (1 524 733, например).

Оформление ссылок и кнопок

• По тексту ссылки пользователю должно быть понятно, куда она приведет.
• Цвет и стиль ссылок должен визуально отличаться от остального текста (подчеркнутые или выделенные цветом).
• Если пользователь перешел по ссылке, она меняет свой цвет.
• Все ссылки, которые не перезагружают страницу, — выделены пунктиром.
• Длина текста ссылки достаточно длинная, чтобы пользователю было удобно и легко по ним кликнуть.
• Ссылки для скачивания файлов должны визуально отличаться от тех, которые ведут на другие страницы сайта.

Кнопки и ссылки типа «Что сделать»?

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

Анти-пример:

А в интернет-магазине косметики Mon Amiе также реализовано несколько кнопок призыва к действию, но их дизайн выполнен так, что визуальный акцент направлен только один основной call to action — купить.

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

Формы для заполнения

Оформление форм в целом

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

Элементы формы — поля и их значения

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

Валидация, ошибки и подсказки

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

Каталог и его функции

Фильтры на выдаче

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

Отправка отфильтрованного списка

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

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

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

Добавление товара в корзину из каталога

• Пользователь может добавить любой товар в корзину.

• Есть визуальное подтверждение добавления позиции из каталога в корзину.

Количество единиц товара:

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

Мини-корзина:

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

Карточка товара

• В заголовке указано название товара.
• Вся информация о товаре актуальна и выводится корректно.
• Есть ссылка для возврата в каталог или хлебные крошки.

Добавление товара корзину:

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

Вывод дополнительных блоков:

• Если предусмотрен вывод upsell и cross-sale блоков таких как «С этим товаром также покупают», «Рекомендуем», «Вы просматривали», в них выводятся правильные товары.

Например, в цветочном интернет-магазине Dicentra.ua на главной странице кросселлинг реализован в виде продажи акционных бандлов: букета и подарка к нему.

А в карточке товара различные варианты cross-sale и upsell инструментов от конфет и тортов, до похожих и просмотренных товаров.

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

Корзина

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

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

Оформление заказа

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

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

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

Благодарность за заказ

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

Личный кабинет

• При регистрации все данные о пользователе сохраняются и используются при последующих оформлениях заказа (ФИО, способы доставки, способы оплаты, и т.д.)
• Статусы заказов отслеживаются в реальном времени.
• Есть возможность оплаты заказа с личного кабинета.
• Пользователь может повторить заказ.
• В личном кабинете пользователь может изменить пароль, отписаться от рассылки, создать список «Желаний», выйти из кабинета, и т.д.

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

Адаптивная версия интернет-магазина

Существует список требований Google page speed insight по оптимизации интернет-магазина. Следуя требованиям, сайт должен быть в зеленой зоне. Так юзабилити-аудит сайта помогает найти и устранить ошибки в интерфейсе, максимально оптимизировать работу сайта, повлиять на ключевые KPI, т.е. является первым шагом к увеличению вашего дохода.

Главная страница интернет-магазина

• Для мобильной версии сайта стоит отключить все лишние блоки для оптимизации скорости загрузки страницы.
• Все маркетинговые баннеры должны быть оптимизированы под мобильные устройства и весь текст должен быть читабельный текст. Для этого стоит готовить пару баннеров разного размера для 1366-1920 и 320.
• Для проектов где доминируют пользователи мобильных устройств, то стоит в дизайне двигаться от mobile-first (320-768-1024-10280-1366-1920).

Навигация по сайту

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

Строка поиска

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

Клавиатура

• Учтена высота панели клавиатуры для всех состояний ввода и заполнения полей.
• Клавиатура не должна перекрывать поле, в которое производится ввод.

Каталог товаров

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

Карточка товара

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

Корзина

• Кнопка для оформления заказа должна быть доступна с первого экрана.

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

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