Чек-лист для проверки интернет-магазина перед запуском

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

Маркетинг и позиционирование интернет-магазина

Позиционирование проекта и УТП

• Шапка (хедер) вашего интернет-магазина выглядит запоминающейся. Если пользователь вернется на ваш сайт через какое-то время, он вспомнит его

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

• Возле логотипа вы указали слоган или направление деятельности, которое описывает ваш магазин или предоставляет уникальное торговое предложение

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

Социальные доказательства

• Вы настроили функционал стимулирования написания отзывов пользователями сайта после совершения покупки

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

• Вы используете видеообзоры и видеоотзывы на карточках ваших товаров

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

• На странице присутствуют оценки независимых рейтингов (профильных организаций или онлайн-ресурсов), например, таких как Google Поиск или Яндекс.Бизнес (при условии, конечно, что у вас хорошие оценки)

• На главной странице сайта выведен блок с отзывами или благодарностями от клиентов, при этом на сайте есть отдельная страница с отзывами

• Если ваш проект выигрывал какие-то региональные награды, эта информация выводится на сайте

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

• На сайт подключены ленты ваших социальных сетей

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

• На сайте используется рейтинг товаров (в виде звезд или оценок), при этом нулевые рейтинги (без оценки) вы не показываете

• Вы используете экспертные отзывы и эффект авторитета

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

Структура проекта

• Вы используете турбо-меню (расширенное меню в 3-4 уровня), где пользователь находит нужную категорию максимум в два-три клика

  Старайтесь показать пользователю полную структуру вашего каталога, не прячьте разделы категорий вглубь сайта ради более аккуратного дизайна

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

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

• На всех внутренних страницах сайта реализован вывод «хлебных крошек» в области под хедером сайта

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

  Например, крошки вида «Главная->Каталог» можно не выводить, а вот крошки вида «Главная->Каталог->Перчатки защитные» — должны выводиться

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

Дизайн и типографика

• Все кликабельные элементы страниц имеют состояние ховера (наведения)

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

• Все кликабельные элементы в мобильной версии сайта достаточного размера для комфортного нажатия

  Средний размер для прикосновения подушечками пальцев составляет 10-14 мм, а для кончиков пальцев — от 8 до 10 мм, при этом наиболее оптимальный минимальный размер зоны прикосновения будет 10Х10 мм.

• Ссылки на вашем сайте имеют четко выраженный характер и выделяются на фоне статичного текста

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

• Ссылки в мобильной версии сайта должны быть удобными для тапа по ним, размером шрифта не менее 14-16px

  Если вы будете использовать для кликабельных элементов шрифт менее 14px, сервис Google pagespeed insight будет снимать баллы за то, что ваш сайт плохо адаптирован к мобильным устройствам

• Важные конверсионные кнопки имеют максимальный акцент. Они заметны на странице и располагаются на самом видном месте

• Кнопки удобны для нажатия на мобильной версии сайта

  Размер кнопок на мобильных устройствах должен находиться в диапазоне от 42 до 72 px. Кнопки с максимальным приоритетом делать крупнее остальных

• В текстовых полях отрисованы плейсхолдеры

  Подсказывайте пользователям, как именно им нужно вносить данные. Используйте маски для полей email, телефон

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

  Не эксперементируйте с размещением уже привычных пользователю элементов. UX «интернет-магазина» — вещь достаточно устоявшаяся среди активных пользователей интернета

• Вы не используете серый цвет для значимых и важных элементов текста

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

Изображения

• Вы используете на сайте современные форматы изображений, такие как webp или avif

  Фотографии в таком формате не потеряют качество, но будут весить в 5-10 раз меньше, чем классические png или jpeg. Вам не нужно конвертировать фото в указанные форматы вручную, используйте автоматическую конвертацию фото при их загрузке. В SLAM мы делаем это на каждом проекте по умолчанию за счет собственного модуля конвертации

• Вы используете ресайз изображений (автоматическое уменьшение размера фото)

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

• Вы используете для товаров несколько фото с разных ракурсов

  По статистике, большинство покупателей — визуалы. Чем больше фото у товаров вы выведите, тем больше времени проведет пользователь на странице товара

Контакты и обратная связь

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

• На главной странице указана основная информация о работе магазина

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

  Установите на сайт онлайн-консультанта и выставите время автоматической активации на 10% меньше средней длины одной сессии пользователя на вашем сайте. Среднее время сессии вы сможете найти в Google Analytics или Яндекс Метрика. Вы же подключили их на сайт?

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

• Ваш E-mail на своем домене

• На сайте предусмотрена юридическая информация о компании

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

• Ваш каталог логично структурирован и интуитивно понятен

  Существует убеждение, что у интернет-магазина не должно быть больше 3 вложенностей в каталоге. На самом деле, вложенность разделов не важна, если ваш каталог логично структурирован. Четырехуровневый понятный каталог лучше, чем двухуровневый каталог, в котором ничего невозможно найти

• У вас предусмотрены сортировки товаров по популярности/рейтингу и цене

• Ваш фильтр работает быстро, без перезагрузки страницы

• Вы выводите в фильтре подсказки для сложных свойств

• Свойства в фильтре взаимозависимы — если пользователь выбрал какие-то значения в одном свойстве, то другие свойства учитывают это

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

• Вы предусмотрели вывод заглушек для товаров без фото

• Вы не перегружаете пользователя избыточным количеством фильтров

  Фильтры нужны, но они не должны быть избыточны. Чем больше у пользователя вариантов для выбора, тем больше времени он потратит на выбор вашего товара (закон Хика)

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

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

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

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

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

• У вас реализована кнопка быстрого заказа

• У вас реализована связь фото с комплектацией (на фото отображается товар того цвета, который выбран в характеристиках)

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

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

• На страницу карточки товара внедрите блок кросс-продаж Просмотренные товары

• Вы добавили блок Похожие товары и настроили, чтобы он работал самостоятельно

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

• Вы добавили блок С этим товаром покупают

  Вы можете использовать кросс-сейлы не только на карточках товара, добавляйте их в корзину, на thank-you page страницу и транзакционные письма

• Если ваши товары предполагают наличие инструкций, сертификаций и др. , вы выводите эти документы в карточке товара

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

• Вы используете рич-контент на карточке товара (графику, видео, баннеры для презентации товара)

Авторизация и регистрация

• Вы используете в качестве логина email или номер телефона, не используете никнеймы или другие названия, которые пользователь легко сможет забыть

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

  Для B2B-проектов, сервисов доставки и др. иногда обязательно нужна авторизация на сайте. Но если в вашем проекте авторизация никак не влияет на складкой учет, индивидуальные цены, адреса доставки, то не заставляйте пользователя это делать. Лучше используйте следующие варинты:
  а. Предложение авторизоваться, чтобы пользоваться возможностями личного кабинета и другими фишками, которые даст авторизация;
  b. Скрытая регистрация, когда пользователю после совершения заказа приходят доступы с регистрационными данными на почту или телефон.

• Корзина пользователя не очищается после авторизации (если в корзине лежали товары до авторизации, они остаются там и после того, как пользователь авторизовался)

• Вы регистрируете пользователя автоматически после совершения заказа

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

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

• Иконка корзины размещена в привычном месте: в верхней правой части экрана

• Изменить количество товара в корзине можно кнопками или вводом нужного количества

• Вы предусмотрели поле для ввода промокода и настроили функционал промокодов

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

  До сих пор существует спор о том, надо ли выводить блок «Возможно вы забыли купить» в корзине. На самом деле здесь нет правильного ответа. Правильный ответ будет зависеть от сферы вашего бизнеса и прочих нюансов вашего проекта. Мы (SLAM), как опытные разработчики, увидели примерно следующую корреляцию: чем более дорогие товары вы продаете, тем меньше отвлекающих факторов в корзине должно быть. При этом вы всегда можете показать апсейлы на thank-you page

• В корзине предусмотрена функция Скачать заказ и Распечатать заказ

  Данное правило особенно актуально для B2B-проектов, где имеет место отложенный заказ

• На странице с оформлением заказа четко указана финальная цена с учетом всех наценок, скидок и стоимости доставки

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

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

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

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

Конфиденциальность и обработка персональных данных

• У вас создана страница с описанием условий обработки персональных данных, которая соответствует требованиям местного законодательства

  Для создания текста вы можете использовать готовые сервисы, где можно сгенерировать соответствующий текст, например, https://tilda.cc/ru/privacy-generator/ . Только в обязательном порядке отредактируйте данный текст и оставьте те пункты, которые требуются вам

• У вас создана страница с описанием обработки файлов сookies. На странице у вас перечислена информация о том, какие файлы cookies вы собираете

• На сайте у вас выводится алерт-окно, в котором вы предлагаете пользователю принять, отклонить или настроить хранение cookie-файлов

Для покупателей

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

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

Поиск

• Блок «Поиск» размещен на первом экране каждой страницы. Он заметен в первые три секунды после загрузки сайта и содержит кнопку/иконку «Найти»

• Ваш поиск ищет не только по названию или артикулу, но еще и, как минимум, по популярным свойствам и словосочетаниям

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

• Ваш поиск понимает морфологию и ошибки

• Вы логируете свой поиск (сохраняете историю запросов) хотя бы в самом простом виде

Безопасность сайта

• У вас установлено встроенное антивирусное ПО на сайте

  В Битрикс CMS с различного рода атаками отлично справляется встроенный модуль «Проактивная защита». Он защищает сайт от большинства известных угроз, способных нарушить работу вашего сайта

• У вас настроены бекапы всего сайта

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

• У вас установлена фильтрация трафика от DDoS-атак

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

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

  В 1С-Битрикс есть возможность выставлять требования к сложности и длине пароля администратора и контент-редакторов. Обязательно делайте пароли сложными, а еще используйте регулярное обновлений паролей

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

  Например, если у вас есть дыра в безопасности вашего sms-сервиса и вы позволяете отправлять неограниченное количество sms при авторизации, то ваш недоброжелатель может за сутки нагенерировать огромное количество смс (особенно на зарубежные номера) — платить придется вам. Ставьте таймауты после ограниченного количества попыток авторизации

Кроссбраузерность

• Ваш сайт корректно отображается во всех популярных браузерах: Chrome, Safari, Firefox, Edge, Opera

• Ваш сайт корректно отображается в следующих операционных системах: Windows, Android, iOS, MacOS

• При проверке валидатором w3c (https://validator.w3.org/) сервис не показывает серьезных ошибок (предупреждения допускаются)

• Шрифты вашего проекта загружены на ваш сервер и вызываются при загрузке сайта с вашего сервера

  Часто неопытные разработчики подключают шрифты напрямую с сайта разработчика (например, из Google Fonts). Ваш сайт в таком случае вынужден обращаться при загрузке страницы к сервису Google, чтобы загрузить шрифты. Это совершенно необязательный, но негативно влияющий на скорость загрузки сайта вариант реализации. Шрифты можно скачать и разместить локально на сервере, где лежит ваш сайт

• В сервисе Google pagespeed insight (GPI) ваш сайт показывает цифры производительности не ниже 70 баллов для mobile, и не ниже 80 для desktop

  Сервис GPI — это универсальный инструмент для проверки сайтов по ключевым метрикам: производительности кода сайта, ответу сервера, скорости загрузки страниц, seo, html и многому другому. Сервис покажет вам основные проблемы каждого из параметров и варианты решения указанных проблем

SEO

• Вы используете человекопонятные URL, которые упрощают пользователям навигацию и повышают юзабилити

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

• У вас на сайте предусмотрен функционал тегированных страниц (возможность создавать страницы каталога с нужным URL и прописывать для них уникальные meta-данные)

• У вас настроена склейка адресов с www и без

• У вас настроен SSL-сертификат, сайт открывается с https протоколом, настроена склейка http и https

• У вас настроена микроразметка SCHEMA.ORG для поисковых систем

• У вас настроена микроразметка OpenGraph для социальных сетей

• У вас настроена автогенерация мета-тегов в карточках товаров по заданной маске

• У вас настроена автогенерация alt и title картинок

• Ваш сайт открыт для индексации (при этом служебные страницы закрыты для индексации)

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

• У вас настроен автоматический 301 редирект при смене урла товара

• При наличии одинаковых страниц с разными URL, у вас настроен Rel-canonical

• Все внешние ссылки открываются в соседней вкладке и закрыты аттрибутами noindex, nofollow, все внутренние ссылки открываются в одной вкладке

• У вас настроена генерация карты сайта sitemap.xml

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

• Вы используете http-заголовоки Last-Modified и If-Modified-Since

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

Формы

• Все поля, которые заполняет пользователь проходят клиентскую валидацию на соответствие формату и условиям ввода

• Все тексты ошибочно заполненных полей имеют четкие требования к заполнению

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

• Поля, непрошедшие валидацию, подсвечиваются цветом

• У каждой формы есть thank-you page экран, где вы благодарите пользователя за заполнение формы и поясняете дальнейшие шаги по обработке его запроса

Наполнение каталога

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

Модальные окна

• Открытое модальное окно блокирует прокрутку основной страницы сайта

• Открытое модальное окно закрывается не только на «крестик», но по клику на свободную область страницы (мисклик)

Сравнение

• Вы не даете сравнивать товары из разных товарных групп, товары разбиты рубрикатором. Согласитесь, сравнивать смартфон и принтер странно, верно?

• У пользователей есть возможность убирать и восстанавливать второстепенные для них свойства из сравнения

Мультирегиональность+мультисайтовость

Если ваш сайт работает в нескольких городах / регионах / странах:

• Вы показываете пользователю контакты его региона по умолчанию

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

• У вас настроена передача региональных переменных в почтовые шаблоны

• У вас на сайте создана отдельная страница с персональной контактной информацией по регионам для поисковиков

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

• У вас настроены индивидуальные robots и sitemap для разных доменов

• У вас настроена подстановка тега региона в поисковые запросы

Отличительные особенности мобильной версии

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

  Так как на мобайлах есть ограниченность обзора и вы просто физически не может показать в экране телефона все то, что вы показываете на десктопе, важно ограничивать или исключать из дизайна те элементы интерфейса, которые выполняют ИСКЛЮЧИТЕЛЬНО эстетическую роль

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

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

• У вас продумана логика вывода слайдера на главном экране

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

Контент

• Вы предусмотрели и используете на сайте UGC-механики (user-generated content)

  Сюда можно отнести:
  — отзывы к товарам,
  — отзывы к магазинам,
  — рейтинг товаров (дайте пользователям возможность не только ставить общую оценку, но и, например, выставлять оценки по нескольким критериям),
  — текстовые и видео-обзоры товаров от пользователей.

• Вы создаете на сайте экспертный контент

  Когда вы пишете полезные статьи про свои товары, люди больше доверяют вам и хотят покупать у вас. Это особенно важно, если вы продаете сложные или тематические товары, где требуется погружение. Это также помогает, если вы продаете дорогие и редкие товары, которые не покупают сразу — вы поддерживаете интерес к ним и напоминаете о своем магазине

• Вы дублируете контент на другие площадки

  Дублируйте ваш контент на площадки, где есть ваши потенциальные покупатели: социальные сети, YouTube, Яндекс.Дзен, Insagram и др. Так вы привлечете больше людей, посетителей на сайт и дадите известность своему бренду

• Вы предлагаете пользователям подписываться на рассылку и собираете пользовательскую базу