Этот чек-лист предназначен для тестирования сайта интернет-магазина, а также является памяткой, руководствуясь которой, следует начинать разработку любого сайта электронной коммерции. Каждый из элементов контрольного списка может повлиять на решение пользователя о покупке, а также на отношение к сайту со стороны поисковых систем.
Прежде всего, определимся со структурой сайта интернет-магазина. В минимальный набор страниц и разделов входит:
- Главная страница;
- Корзина;
- Личный кабинет;
- Контакты;
- О компании;
- Каталог продукции;
- Карточка товара;
- Оплата и доставка;
- Гарантии и возврат.
В зависимости от специфики магазина, этот набор может дополняться разделами на усмотрение заказчика.
Общее Юзабилити:
- Быстрая скорость загрузки сайта — 1-2 сек.;
- Автоматическая подстройка под ЦА. Сайт оптимизирован для того региона в котором находится пользователь;
- Автоматическое или удобное переключение языка, если такая функция предусмотрена;
- Удобная система основной навигации (главное меню): при использовании меню, не происходит случайный переход в другую область меню;
- В шапке сайта присутствует номер телефона. Крупно, заметно;
- Наличие интуитивно понятных иконок рядом с текстовыми пунктами;
- Скрытие не нужных полосок скрола. При разрешении экрана 1024х768 горизонтальная полоска скрола не видна;
- Единообразие интерфейса, однозначность и понятность. Предсказуемое расположение основных элементов;
- Продуманная система разделов и внутренних ссылок, интуитивно понятная пользователю;
- Сквозное главное меню сайта;
- Форма обратного звонка или онлайн консультант: если у вашей компании есть менеджер, который может консультировать клиентов онлайн или мгновенно соединяться с клиентом по телефону – это не повредит. Тут уже будет важно другое – заставить этого менеджера работать. Многие владельцы сайтов ставят этот функционал, но не держат обещания быстро перезвонить клиенту. Еще бы – лид отжат, можно идти пить кофе. Разочарование пользователя при этом никого не волнует, а зря;
- Поиск по сайту: поиск должен корректно работать, помогая найти нужный товар и динамически подгружая данные. При нажатии Enter на странице поисковой выдачи должна быть адекватная сетка товаров с изображениями. Проще говоря, страница поисковой выдачи должна выглядеть также, как каталог. Если товар не найден, на странице выводятся полезные ссылки, актуальные товары или рекомендации. Реализованы поисковые подсказки;
- Если на сайте присутствует слайдер, то изображения-слайды должны содержать в себе УТП (уникальное торговое предложение), а не просто привлекательные картинки. Это может быть распродажа, акция, новый завоз или что угодно, стимулирующее пользователя к совершению покупки или поощряющее использование сайта;
- Акции/Хиты продаж/Свежие поступления: необходимо, чтобы информация на этих страницах или блоках была актуальной, ссылки на раздел с акцией или акциями были доступны из главного меню, а баннеры не мешали восприятию остального контента страницы. Разделы со свежими поступлениями/Новым завозом и т.д. помогают продавать, ведь люди часто гонятся за самым новым, самым свежим, самым “крутым”;
- На сайте нет раздражающих всплывающих окон с “МЕГААКЦИЯМИ” или “ПЕРЕЗВОНИМ ВАМ ЧЕРЕЗ 15 СЕКУНД”, а если и есть, то работают корректно и запускаются не сразу, как только пользователь открыл сайт. Корректное время запуска всплывающего окна — на 10% меньше средней длины сеанса;
- На главной странице пользователь быстро находит ответы на вопросы: Чем занимается эта компания? Что можно купить на сайте? Почему я должен купить это именно здесь? УТП должно быть на видном месте, лучше недалеко от логотипа;
- Обязательно наличие самого слово «Цена» на странице, а не просто цифры;
- Товары, которых нет в наличии отображаются в конце каталога или вовсе скрываются от пользователя, если их поступление не ожидается в будущем;
- Фото товаров хорошего качества, чёткие и увеличиваются при наведении или клике. При клике на фото, оно открывается в сплывающем окне, без перехода на новую вкладку;
- На сайте присутствует страница «Доставка» или «Доставка и оплата». Есть информация о способах, сроках, стоимости, информация о бесплатной доставке и т.д.;
- На сайте присутствует страница «Контакты». Там есть полный адрес компании, номер телефона, электронная почта, время работы, реквизиты, графическая или динамическая карта, пункты выдачи товаров, форма обратной связи;
- Корректное отображение сайта в различных браузерах, на мобильных устройствах и планшетах;
- Любые всплывающие окна можно закрыть. Кнопка закрытия имеет форму крестика, хорошо видна и располагается в правом верхнем углу;
- На сайте присутствуют гарантия, сертификаты и знаки, подтверждающие качество товара;
- Корректные и правдивые отзывы на сайте. В идеале, реальных пользователей, не скопированные с других сайтов;
- Триггерная рассылка. Корректно настроенный функционал, напоминающий пользователям о брошенной корзине, незавершённом заказе, просмотренных товарах или подталкивающая к написанию отзыва. С этим может помочь CRM система Битрикс24: поможет вернуть клиентов бросивших корзину, превратить случайного посетителя в постоянного клиента и контролировать все аспекты и процессы продаж;
- Корректная страница 404, сообщающая о возникшей ошибке. Должна содержать ссылки на разделы сайта, на строку поиска и контакты.
Фильтр:
- ЧПУ отображает изменения в фильтре (адрес в адресной строке браузера меняется в зависимости от фильтров). Фильтр динамически изменяет URL при применении параметров фильтрации;
- После просмотра отдельного товара, кнопка «Вернуться» на панели браузера должна работать корректно и восстанавливать все параметры применённых фильтров. Почему это важно: пользователь настроил фильтры, выбрал рубрику, цвет, размер, марку, перешёл на какой-то товар, затем решил посмотреть другой товар схожих характеристик. Если фильтр не восстановится, пользователь будет вынужден заново повторять целую процедуру;
- Элементы фильтра нормально, последовательно кликаются. Страница не перезагружается сразу после установки нового параметра фильтра;
- При открытии ссылки с готовым фильтром — состояние фильтра восстанавливается именно так, как настроен фильтр по ссылке;
- Кнопка сброса фильтра корректно работает;
- Предусмотрена пейджинация (разбивка на страницы) для поисковых машин. Товары в каталоге могут подгружаться «бесконечно», благодаря JavaScript. Поисковая машина «не видит» все, что находится за JavaScript, однако необходимо, чтобы все товары были проиндексированы. Решение: если например, в шаблоне реализована пейджинация по прокрутке (или подгрузка по AJAX, по клику на кнопку «Загрузить ещё») — необходимо предусмотреть статическую ссылку, по которой поисковик сможет проиндексировать каталог. И разумеется никогда не забывайте о карте сайта;
- Списки, чек-листы, деревья и прочие поля должны содержать только те элементы, по которым могут быть найдены позиции товаров. Категории, в которых отображается ноль (0) товаров – недопустимы, они должны скрываться;
- Зависимые поля обновляются синхронно. При изменении одного из зависимых полей, остальные обновляют свои данные. Пример: Мы выбрали только 20-й размер блузки, а рядом есть фильтр цветов. Фильтры отсутствующих цветов должны стать неактивными (побледнеть и стать некликабельными, а также сменить курсор мыши на обычную стрелку при наведении на неактивные элементы фильтра), так как у этой конкретной блузки есть только белый и чёрный цвет;
- Предусмотрен и корректно работает предварительный расчёт количества найденных позиций. Пример есть у Юлмарт или Яндекс.Маркет. Когда на этих сайтах прокликиваешь фильтр, появляется сообщение «найдено 180/0/500 товаров»;
- Выбранные параметры сортировки — очевидны. Есть варианты Плитка, Список. По умолчанию, плитка. Есть основные фильтры: сортировать по цене, по отзывам, по рейтингу и т.д.;
- Кнопка применения фильтра всегда находится в зоне видимости, по крайней мере на настольных ПК и ноутбуках;
- Хлебные крошки при просмотре товара позволяют вернуться к правильно отфильтрованному списку;
- При изменении параметров фильтра рядом с полем появляется кнопка «Показать». Функция, которую можно найти на Яндекс.Маркет или Юлмарт;
- Необязательно, но хорошо: хлебные крошки при просмотре товара формируются с учётом параметров фильтрации, образуются чекбоксы. Выбираемые в фильтре параметры появляются в виде перечня с возможностью сброса любого из выбранных параметров путём снятия чекбокса;
- Есть блоги рекомендаций. Например, «Аксессуары для данного товара», «С этим товаром покупают», «Похожие товары», «Просмотренные товары» или готовые комплекты.
Каталог товаров:
- Заголовок каталога, разделов релевантен запросу пользователя и даёт представление о товарах, представленных в разделе каталога. Неплохо, если каждый раздел имеет ещё и описание под товарами. Это даёт пространство для работы с поисковой оптимизацией;
- Если в каталоге предусмотрено добавление товара в корзину, то после добавления выводится визуальное подтверждение, которое можно закрыть. Страница при этом не перезагружается;
- При добавлении товара в корзину, в мини корзине (отдельной иконке) обновляется количество и происходит перерасчёт суммы;
- Необязательно, но хорошо: есть возможность «Быстрого просмотра» товара. По клику всплывает окно с карточкой товара, без перезагрузки страницы;
- В листингах выводятся характеристики и краткое описание товаров;
- Товары, которых нет в наличии не выводятся или выводятся в самом конце списка с пометкой, что их нет в наличии.
Карточка товара:
- Заголовок страницы содержит название товара;
- Имеется возможность выбора или ручной установки количества товаров, добавляемых в корзину;
- Основной функционал карточки товара умещается на первый экран, без необходимости в прокрутке: картинка, название, количество, цвет и прочее;
- Если страница длиннее одного экрана, кнопка призыва к действие, покупке, прилипает к окну или дублируется внизу страницы;
- На карточке присутствует информация об условиях оплаты и доставки;
- Присутствует информация о наличии товара;
- Кнопка добавления товара в корзину хорошо выделяется на фоне остального содержимого страницы;
- Если предусмотрен вывод блоков «С этим товаром также покупают», «Рекомендуем», «Товары, которые вы смотрели», в них выводятся корректные товары;
- Кроме кнопки «Купить», присутствует кнопка быстрого заказа «Купить в 1 клик». Такая кнопка обязательно должна присутствовать на странице товара (в карточке товара) и по возможности в каталоге;
- Указывается наличие товара;
- Реализованы кнопка «Сообщить, когда появится в наличии», «Сообщить о снижении цены» и уведомление «Товар заканчивается, осталось … штук»;
- Товары можно сравнивать.
Корзина и оплата:
- Минимум полей для заполнения личных данных. Меньше возни – выше лояльность покупателя;
- В корзине и на всех страницах оформления заказа виден список товаров и их стоимость;
- Название и фото товаров в корзине являются кликабельными и ведут на карточку товара или всплывающее окно с подробной информацией о товаре;
- Имеется возможность удаления товаров из корзины. При этом происходит автоматический перерасчёт итоговой суммы без перезагрузки страницы;
- Имеется возможность изменения количества товаров в корзине. При этом происходит автоматический перерасчёт итоговой суммы без перезагрузки страницы;
- На странице корзины также присутствует информация об условиях доставки и оплаты;
- Присутствует альтернативная возможность быстрого оформления заказа по телефону или через форму с максимум двумя полями. Например «Купить в 1 клик»;
- Для оформления заказа не нужно проходить обязательную регистрацию;
- После выбора способа доставки итоговая сумма корректно обновляется без перезагрузки страницы. Указывается примерное время доставки в указанный регион;
- В форме заказа присутствуют только обязательные поля. Количество полей сведено к минимуму, они снабжены уточняющими пояснениями;
- При разбиении процесса оформления заказа на отдельные шаги корректно работают кнопки браузера «Вперёд» и «Назад», данные уже заполненных форм сохраняются;
- В многошаговых формах указано количество шагов и текущее месторасположение пользователя;
- Сообщения об ошибках выводятся на понятном пользователю языке и содержат подсказку, как правильно вводить данные;
- При прерывании оформления заказа товары из корзины не удаляются. Как проверить: добавьте товар в корзину и закройте сайт. Снова откройте – товары должны быть по-прежнему в корзине. На демо-сайтах эта функция может не работать, так как может быть полностью сброшена сессия, например по тайм-ауту. Неоплаченные товары в корзине должны храниться как минимум месяц;
- На странице подтверждения заказа выводятся данные, введённые пользователем, информация о товарах и сумма заказа с доставкой;
- Оформление заказа завершается страницей «Спасибо за покупку», на которой имеется полная информация о заказе и дальнейших действиях магазина и пользователя. Информация с этой страницы дублируется на e-mail пользователя;
- Сумма заказа рассчитывается с учётом купонов и скидок, стоимости доставки, комиссий и так далее. Чтобы пользователь не удивился когда в конце увидит сумму с НДС;
- Для авторизованных пользователей поля форм автоматически заполняются известными данными из профиля. Если предусмотрено сохранение адресов доставки для авторизованного пользователя, выводится поле для выбора сохранённого или создания нового адреса. При выборе сохранённого адреса поля адреса заполняются корректно;
- При сохранении в системе, заказ выводится у пользователя в личном кабинете на странице «История заказов» с корректным статусом и данными;
- При успешном оформлении заказа, по простейшей логике, товары удаляются из корзины;
- Ссылка на личный кабинет присутствует на всех страницах сайта.
Регистрация:
- Корректно работает упрощённая регистрация с помощью социальных сетей;
- Реализована автоматическая регистрация пользователя после совершения покупки, если он не зарегистрировался до этого;
- После регистрации происходит автоматическая авторизация пользователя и продолжается оформление его заказа с того места, на котором он остановился;
- После оформления или во время оформления заказа пользователю предлагается оформить подписку на новости/скидки/новые поступления.
Постоянное усовершенствование сайта интернет-магазина.
Большинство пунктов чек-листа универсальны и подходят к любому сайту, но есть и уникальные, подходящие под конкретную тематику, их тоже необходимо учитывать.
Чтобы сайт интернет-магазина оставался в топе и продолжал привлекать клиентов, необходимо его постоянное совершенствование. Как понять, что нужно изменить?
- Анализировать сайта с помощью веб-аналитики. Это позволит отследить перемещение пользователей по сайту, их действия и места, которые вызывают сложности и затруднения. Зная эту информацию, можно сделать сайт более удобным для пользователей;
- Анализировать поисковые запросы. На основе поисковых запросов можно усовершенствовать фильтры и поиск товаров на сайте, вынести самые популярные товары и категории на первый план и сделать более заметными;
- Отслеживание браузеров. Через аналитику можно посмотреть, через какие популярные браузеры клиенты чаще всего заходят на сайт и максимально улучшить отображение страниц сайта в этих браузерах.