Чек-лист интернет-магазина

Что такое — качественный интернет-магазин?

Функциональность

Скорость загрузки сайта

По статистике 47% покупателей ожидают, что сайт интернет-магазина будет загружаться не дольше 2 секунд. Если загрузка продлится дольше, посетители уйдут к конкурентам. Вопрос обеспечения быстродействия сайта зависит от значительной группы факторов.

Учтите следующие из них при начале работы над интернет-магазином:

  • Технологическая платформа.
  • Особенности хостинга.
  • Нагрузка на сайт со стороны посетителей и внешних воздействий.
  • Оптимизация контента (особенно изображений).
  • Использование сторонних сервисов на сайте.

Целостность ссылок

  • Проверьте работоспособность всех ссылок на сайте.
  • Особое внимание уделите идентичности ссылок в главных меню сайта. Размещенных в его шапке и подвале, а также в карте сайта.
  • Проверьте работоспособность всех ссылок ведущих на внешние сайты, в том числе с разнообразных кнопок и значков. Эти ссылки лучше реализовать открывающимися в новом окне.
  • Отдельно проверьте все ссылки на ваши эккаунты в социальных сетях и ссылки-вызовы мессенджеров.
  • Убедитесь, что все номера телефонов на сайте реализованы как ссылки с атрибутом «tel:»

Работоспособность форм и нотификаций на сайте

  • Проверьте все формы на сайте. Убедитесь, что сообщения с них приходят на почту со всеми обязательными к заполнению полями.
  • Убедитесь, что ваши клиенты получают страницу подтверждения заполнения и отправки формы с обязательной вежливой благодарностью, а также получают подтверждение отправки формы себе на почту.
  • Проверьте все ссылки и механизмы, требующие отправки e-Mail’ов. Отправляются ли они и получаются ли, не попадают ли в спам-фильтры?
  • Что происходит после регистрации, продажи и других важных действий на сайте. Отправляются ли пользователю почтовые уведомления? Получает ли пользователь подтверждение заказа?
  • Работают ли браузерные нотификации? Не надоедайте пользователю предложениями включить уведомления в браузере на самом первом этапе. Выводите предложение о подключении такой опции только после успешного взаимодействия с пользователем, например, после оформления заказа, либо разместите на сайте на видном месте переключатель, позволяющий пользователю самостоятельно включить нотификации, когда доверие с сайтом уже установлено.
  • Выдается ли посетителю после заполнения формы страница с благодарностью и подтверждение результата выполнения формы?
  • Проверять письма приходящие от интернет-магазина, а именно с какой почты приходят эти письма. Почта должна быть актуальной, рабочей и принадлежать магазину, а не разработчикам магазина, например.

Служебные страницы и страницы ошибок

Одной из важных страниц на сайте является страница ошибки 404. Она появляется, если посетитель зашел на сайт по неправильной ссылке. Используйте страницу ошибки 404 как гид для потерявшихся пользователей, конвертируйте ошибку в продажи, разместите на «странице 404»:

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

Поиск

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

  • Умеет ли поиск эффективно искать по свободной строке. Например, не по цифровому артикулу, а по запросу «летняя рубашка в полоску». Не только по точному названию продукта такому как «бокал Прованс», но и по запросу «бокалы для шампанского».
  • Имеется ли так называемый «автокомплит»: пользователь начинает печатать поисковую фразу, поиск предлагает выбрать ее завершение. Этот механизм гарантированно улучшает пользовательский опыт и ведет к увеличению конверсии.
  • Умеет ли поиск автоматически обрабатывать описки, опечатки?

Регистрация и вход на сайт

  • Регистрация на сайте должна быть устроена так, чтобы пользователь мог единожды ввести все свои реквизиты, начиная от имени и фамилии и контактами для связи и адресами доставки.
  • Обеспечьте возможность быстрого оформления покупки в 1 клик.
  • Используйте возможности интеграции с внешними сервисами для авторизации (например, через социальные сети).
  • Не используйте в процессе регистрации устаревшие капчи, заставляющие пользователей вводить сложные буквенно-цифровые последовательности или расшифровывать мутные картинки.
  • Запоминайте географическую позицию пользователя.

Дизайн

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

  • Главной страницей
  • Страницей каталога товаров
  • Страницей категорий товаров
  • Страницей товара
  • Страницами оформления заказа
  • Контент-страницами (блоги, обзоры товаров и т.п.)

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

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

Проверьте удовлетворяет ли дизайн вашего интернет-магазина очевидным требованиям:

  • Совместимость сайта с большинством браузеров, используемых вашей потенциальной аудиторией.
  • Валидность HTML и CSS кода.
  • Шрифт по умолчанию не менее 12px.
  • Ссылки визуально отличаются от текста. Они взаимодействуют с пользователем, например, при наведении на них курсора мыши.
  • Основной фоновый цвет белый, основной цвет текста черный или темный, в градациях серого.
  • Не забывайте про использование фавикона. Фавикон — это иконка, которая появляется в адресной строке браузера и в заголовке закладки. Броский фавикон позволит пользователю найти ваш сайт среди 23 вкладок с видео котиков, открытых в его браузере.

Уделите внимание мобильным устройствам

Mobile First или дружественность интерфейсов интернет-магазина к мобильным устройствам в диапазоне от маленьких смартфонов до iPad Pro в настоящее время приобретает ключевое значение. Более 65% пользователей интернета пользуются им с телефонов или планшетов. Выдача ключевых поисковиков напрямую зависит от реализации на сайте концепции «mobile first». Несмотря на то, что в настоящее время конверсия с настольных систем превалирует над конверсией с мобильных устройств, это уже скорее нисходящий тренд, поскольку год от года цифры конверсии с мобильных удваиваются.

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

Помимо собственно «адаптивной/responsive» верстки для сайта, учитывающей особенности представления информации как на маленьких экранах смартфонов, так и на больших экранах планшетов (которые пока рано списывать со счетов) существуют еще области, которым нужно уделить особое внимание:

  • Подготовьте изображения продуктов таким образом, чтобы их можно было детально и с высоким качеством рассматривать на экранах любых устройств.
  • Подготовьте и опубликуйте информацию о товарах так, чтобы ее было удобно просматривать на любых разрешениях. Хорошим примером плохой подготовки информации может быть сравнение товаров в табличной форме со значительной шириной никак не умещающейся на узком экране смартфона.
  • Предложите пользователям мобильных версий отдельные представления всей необходимой информации.
  • Обеспечьте возможность использования специфически мобильных платежных решений таких как Apple Pay. Между желанием покупателя что-то купить и возможностью мгновенно потратить деньги принципиально не должно быть никаких препятствий.
  • Не ограничивайтесь формальной реализацией принципа mobile first. Если необходимо, создавайте отдельные дизайны страниц и разделов, оптимизированные для разных разрешений и физических размеров экрана.

e-Commerce: собственно торговля

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

Для начала сосредоточьтесь на главной странице сайта и странице товаров. На первую, скорее всего будет падать наибольший трафик, а на второй совершаться наибольшее количество конверсий.

Что должно поместиться в первый экран главной страницы?

  • Самые популярные продукты.
  • Ясные и четкие призывы действию (all-to-action, CTA): «Купите сейчас, акция действует последний час», «Получите скидку», «Приобретите на сезонной распродаже» и т.п. Используйте конкретные побуждающие призывы к действию: «Купите сейчас!», «Выберите себе футболку», «Подберите нужный размер».
  • Захватывайте внимание. 55% посетителей обычно проводят на сайте не более 15 секунд. Вы должны успеть за это время заинтересовать их своим продуктом, его ценой, свойствами.
  • Не бойтесь громких фраз, покажите продукт в действии, возможно используйте видео.

На ординарной странице

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

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

  • Не ожидайте, что внешний проектировщик идеально спроектирует для вас каталог товаров. Торговец — вы, и лучше вас никто не может знать вашу торговую матрицу и способы предложения товаров именно вашего ассортимента покупателям на сайте.
  • Начинайте располагать товары в каталоге от популярных к менее популярным.
  • Меняйте структуру каталога в зависимости от сезона или колебаний спроса.
  • Простота поиска товаров на сайте — залог успеха.
  • Выделите бестселлеры в отдельную категорию каталога. 
  • Не полагайтесь только на поисковый механизм, у покупателей должно быть несколько способов найти товар:
    • собственно поиск;
    • интуитивно-понятное навигационное меню;
    • логичная категоризация товаров в каталоге;
    • категоризация товаров по типу и способу применения;
    • категоризация товаров для разных типов пользователей и т.п.
    • Все ли продуктовые категории организованы по популярности субкатегорий и товаров в них? Если у вас большая номенклатура продуктов, воспользуйтесь Google Analytics (Behavior → Content Drilldown) для того, чтобы понять, какие продукты наиболее популярны. В каталоге товары должны располагаться по умолчанию от самых популярных к менее популярным. При этом пользователь должен иметь в зоне постоянной видимости управляющий элемент, позволяющий быстро изменить сортировку, например, на представление товаров от самых дешевых к самым дорогим.
    • Расположены ли ссылки в навигационном меню по популярности? Посмотрите в Google Analytics, чтобы определить лидирующие страницы, на которые приземляется органический трафик (Traffic Sources → Sources → Search → Organic → Landing Page). Учтите, что самыми популярными могут оказаться не только страницы категорий или отдельных товаров, но, например, и страницы блога, используйте это.

Добивайтесь доверия посетителя сайта:

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

Доставка

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

Фильтры

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

Увеличение продаж

Реализуйте базовые инструменты:

  • Кросс-продажи дополняющих и сопутствующих товаров
  • Допродажи
  • Блоки «Пользователи, купившие этот товар, купили также…»

Accessibility/Доступность сайта магазина для всех категорий покупателей. Основной источник информации доступен по ссылке.

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

Уделите внимание деталям

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

Контент

  • Придется потратиться на фотографии товаров.
  • Все фотографии всех ключевых товаров должны быть готовы до того, как вы приступили к проектированию каталога.
  • Убедитесь, что фотографии демонстрируют продукт со всех возможных углов и ракурсов. Уделите внимание фотографированию мелких, но важных деталей.
  • Оптимизируйте фотографии для использования на интернете, чтобы они быстро загружались у пользователей с каналами низкой пропускной способностью.
  • Используйте видео. Согласно исследованию MarketingLand 71% онлайн-торговцев отмечают, что использование видео существенно повышает конверсию, по сравнению с другими формами представления контента.
  • Не копируйте тексты с других сайтов. Это убьет ваш магазин в поисковой выдаче. Только качественный и глубокий рирайт. Сэкономить поможет найм контент-менеджера в штат.
  • Проверяйте грамматику и синтаксис.
  • Постарайтесь создать страницы о вашей компании с фотографиями и представлениями сотрудников.
  • Если чувствуете силы, ведите тематический блог. Это существенно повышает ощущение вашей экспертности у потенциальных покупателей и разгрузит вас от части вопросов о потребительских свойствах товаров.
  • Вставляйте на страницы товаров обзоры пользователей, их отзывы о товарах. Эти материалы должны, как минимум производить впечатление написанных живыми людьми.
  • Используйте внешние источники получения отзывов и обзоров.

Социальные сети

  • Сайт интернет магазина лишь один из каналов продаж.
  • Обеспечьте ваше присутствие на всех площадках социальных медиа, релевантных для вашей аудитории.
  • Считайте, что сайт объявлений типа Avito — это разновидность социальной сети.
  • Используйте мессенджеры.
  • Убедитесь, что ссылки на ваш сайт, особенно на страницы товаров качественно отображаются, будучи запощенными в социальных сетях: с правильным заголовком, неискаженной, а лучше специально подготовленной для каждой социальной сети картинкой.

SEO

Обеспечьте выполнение как минимум базового чек-листа поисковой оптимизации.

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

  • Имеет ли ваш сайт SSL-сертификат? SSL-сертификат шифрует и защищает чувствительную информацию, такую как, например, данные кредитных карт ваших покупателей. Использование SSL-шифрования важно не только по правовым или этическим соображениям, но и потому, что Google помечает сайты без SSL-сертификата как «небезопасные». Это может оттолкнуть значительное количество ваших потенциальных клиентов.

Правовые аспекты

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

Аналитика

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

  • Код используемой вами аналитической системы корректно вставлен в код сайта и работает.
  • Нужные воронки продаж и цели продаж настроены в аналитических инструментах.
  • Ваши эккаунты Google Analytics и Google Webmaster связаны.
  • Ваши эккаунты Google Analytics и Google Adwords связаны.
  • Убедитесь, что то же самое проделано для сервисов прочих аналитических и рекламных систем, используемых вами.

Продвижение

Используйте ремаркетинг/ретаргетинг.

  • Ремаркетинг — компонента Google Ads, привлекающая посетителей на ранее посещенный сайт за счет демонстрации соответствующей рекламы о том, что они ранее искали или просматривали, на сайтах, входящих в контентно-медийную сеть.
  • Ретаргетинг — сходное решение от Яндекс.Директа, показывающая рекламные объявления на сайтах РСЯ (Рекламная сеть Яндекса) либо пользователям, ранее посещавшим рекламируемый сайт, либо специально сегментированной аудитории.

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

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