ТОП-45 обязательных элементов интернет-магазина

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

В сегодняшней статье мы расскажем о 45 обязательных элементах интернет-магазина и объясним их важность. Поехали!

1. Домен верхнего уровня с подключенным https. Домен верхнего уровня это адреса вида: site.ru или site.com. Люди привыкли к подобного вида адресам и магазины размещенные на поддоменах, к примеру, могут вызвать недоверие.
   
   Протокол https же является и вовсе обязательным в сфере электронной коммерции. Без него некоторые браузеры вообще не пустят посетителя на сайт или будут активно предостерегать от передачи вам любых персональных данных.

2. Логотип. Выполняет функцию идентификации и отвечает на вопрос “А туда ли я попал?”. Представим ситуацию. Вы желаете попасть на сайт строительного магазина “Три гвоздя”. Вы находите сайт в поисковой выдаче, но при переходе на ресурс вы не видите логотипа. Согласитесь, что это вызовет некое замешательство.

3. Понятная навигация. Навигация относится к разделу UX дизайна. Немало в этой сфере заблуждений и мифов. К примеру, правило трех кликов и другие. Можно сказать точно, что на 2020 год ситуация такая: ценится простота и понятность (пусть пользователь сделает 5 кликов, но эти клики будут однозначны и пользователь четко понимает, что находится на правильном пути).
   
   Еще одним трендом является вывод навигации интернет-магазина в контур “Смотри” — все возможные категории навигации видны на экране. До последнего времени компания wildberries пользовалась именно этим принципом.
   
   В крайнем случае можно использовать контур “Наведи”, когда для того, чтобы показалась навигация необходимо навести мышь на соответствующую область экрана. И уж точно не стоит делать открытие навигации по клику (контур “Кликни”).

4. Избранное. Интернет-магазин предполагает возможность добавить товар в избранное для последующей покупки во время скидок или просто по мере наличия средств.

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

6. Поиск. Примерно 90% пользователей на больших сайтах-магазинах пользуются поиском, а не навигацией. Добавьте возможность поиска как по товарам, так и по категориям товаров.

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

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

9. Номер телефона. На них должен быть в первую очередь сделан акцент. Часто любые возникающие проблемы на сайте пользователи привыкли  решать по телефону или в переписке. Обязательно сделайте пометки относительно режима работы телефона и бесплатности звонка.

10. УТП. Уникальное торговое предложение должен содержать в себе первый экран вашего магазина. Разместите там информацию о скидках, акциях и другие элементы маркетинговых стратегий. Сделать это можно в формате слайдера или системы баннеров.

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

12. Программа лояльности. Это очень хороших инструмент для формирования пула преданных вашему бренду покупателей. Чем больше покупают участники программы лояльности, тем больше у них преференций.

13. Призывы к действию. Попросите людей сделать определенное действие (подписаться на рассылку, купить или перейти на страницу) и, в большинстве случаев, они это сделают.

14. Разделы “Новинки”, “Лучшие продукты” и другие. Упростите жизнь вашим клиентам. Покажите на видном месте (обычно на главной странице) подборки по категориям, популярности или просто ваши товары - “локомотивы”.

15. Персональная подборка. Если вы уже имеете базу клиентов, то знаете, что они чаще всего покупают. К примеру, если в истории покупок субъекта “А” много товаров для малышей, то предложив ему персональную подборку товаров для детей, можно побудить его к покупке. Хороши такие активности вместе с предложением скидок или иных выгод.

16. Тексты. По большому счету, весь веб это работа с текстом. Проследите за тем, чтобы любой текст на сайте был читаемый и, самое важное, полезный для аудитории.

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

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

19. Подписка на рассылку. Так вы можете постепенно подогревать холодную аудиторию или регулярно осуществлять ваших лояльным подписчикам допродажи.

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

21. Ссылки на соцсети. Люди охотно следят и подписываются на аккаунты компаний, если они публикуют интересный и качественный контент. Кроме того, ссылки на соцсети, размещенные на сайте служат социальным доказательством.

22. Страница “О компании”. Это еще одна страница, которая работает в качестве социального доказательства. На таких страницах размещают историю компании, данные о людях, которые работают в компании. Страница играет большую роль при поисковом продвижении в Гугле. Ее считают частью формирования личного бренда компании, поэтому тщательно следят за ее содержанием.

23. Оферта, политика конфиденциальности, пользовательское соглашение, карта сайта и другие важные мелочи. Все это приводит сайт в соответствие с законодательными нормами той страны, где действует магазин.
    
    Отдельно стоит отметить, что более не нужны уведомления о том, что сайт собирает “куки”. Ряд европейских специалистов добились признания того, что принудительное согласие на сбор и работу с “куками” делает сайт “не юзер френдли” и более уведомление пользователей  не требуется.

24. Живой чат. Обязательно используйте виджеты для создания онлайн-чата с клиентами. Это станет еще одним каналом коммуникации с клиентами. Позаботьтесь и о том, чтобы всегда был онлайн хотя бы один оператор.

25. Изображения одинакового размера в листинге. Это выглядит визуально красиво и не рушит верстку. Достичь этого эффекта можно разными способами: кадрированием фото в случае, если вы используете качественные цветные фото товаров. Если вы используете стандартные фото на белом фоне, то сделаете обязательную еле заметную серую подложку, чтобы обозначить границу картинки.

26. Добавьте “хлебные крошки”. Это еще один элемент навигации, который всегда дает представление пользователю о том, где он на данный момент находится. Крошки участвуют в SEO - продвижении сайта, т.к являются источником ссылок на  другие страницы ресурса и по ним удобно двигаться роботам-краулерам.

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

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

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

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

31. Качественное изображение. А вот изображение, напротив, является одним из составляющих маркетингового треугольника (изображение - цена - скидка). На нем делается акцент. Оно должно быть качественным, лучше если фотографий товара будет несколько. Можно добавить возможность просмотра фото непосредственно из листинга.
    
    В карточке обязательно следует добавить zoom-эффект у фото.

32. Цена (старая и новая). Новая цена обязательно больше и контрастнее старой. Старая зачеркнута и выполнена более бледным цветом или тонким начертанием.
    
    Задача этого блока — показать клиенту выгоду от приобретения.

33. Поле изменения количества товаров. Обязательный элемент при продаже товаров, которые даже чисто теоретически можно продать более одного раза. Функцию добавления можно реализовать как в карточке товаров, так и в корзине (дополнительно).

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

35. Кнопка “В корзину”. Не самый важный элемент в листинге (оттуда почти не покупают), а вот в карточке товара это самый важный элемент. Он должен быть самым заметным или вовсе прижат к какой либо части экрана (нижней чаще всего), чтобы всегда был под рукой.

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

37. Кнопки добавления “в избранное” и “к сравнению”. Как мы уже упоминали, их необходимо добавить в листинге товаров. Нельзя обойти стороной и карточку товара.

38. Возможность расшарить страницу или конкретный товар. Это облегчит вам SEO-продвижение (поисковики очень ценят тот факт, что страницами вашего сайта делятся в соцсетях) и просто облегчит процесс пересылки нужной страницы вашими пользователями между собой.

39. Описание продукта. Грамотное описание позволит продавать еще эффективнее и станет показателем релевантности контента на странице для поисковых систем.

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

41. Корзина. Идеальная корзина включает в себя: товарные позиции (с фото, ценой, названием, числом товаров в корзине), кнопки изменения количества, удаление товаров и конечную стоимость заказа.
    Кто-то добавляет в корзину блок, который осуществляет допродажи, но мы этого делать не рекомендуем. Это может размыть фокус на оформлении заказа и увести готового к покупке покупателя на просторы вашего ресурса.

42.  Оформление заказа. Данная страница может быть самостоятельной, а может объединяться с корзиной. Так вы сразу позволяете пользователю перескочить через один шаг.
    
    Страница оформления заказа, или checkout, должна содержать следующие элементы: контакты покупателя (имя, телефон, почта), адрес доставки, способ доставки, возможность ввести промокод, расчет конечной стоимости заказа ( со стоимостью доставки и промокодом).

43. Блог организации. Он служит индикатором того, что сайт не заброшен и регулярно обновляется. Кроме того, полезные статьи, которые оптимизированы под правильные запросы способны собирать трафик со всего интернета и вести на ваш сайт.
    
    Добавьте к этом возможность фильтрации записей и кнопки “поделиться”, чтобы сделать свой блог еще эффективнее.

44. Функции администратора. В этот пункт входят вещи, которые не видны покупателю. Однако, как минимум по двум причинам нам стоит раскрыть эту тему: эту статью мы пишем для тех, кто будет выполнять функцию администратора (на первых порах, к примеру) и потому, что продуманные администраторские функции облегчают работу с магазином и делают ее “в радость”. Поехали.
    
    В большинстве случаев разработка интернет-магазина ведется под какую-то CMS систему. В ней весь описанный ниже набор функций можно получить прямо “из коробки” или с помощью использования надстроек. В случае, если вы хотите получить индивидуальную разработку админки для магазина, то вам пригодятся следующие модули:
    
    - Управление базой клиентов;
    - Управление содержимым магазина;
    - Управление контент (статьи, отзывы и др);

- Управление заказами, доставкой, платежами;
- Настройки SEO и email-маркетинга;
- Управление скидками;
- Отслеживание интеграций с CRM-системами и другими сервисами.

45. Прочее важное. Для корректной работы и наибольшей эффективности работ по продвижению, мы рекомендуем уделить дополнительное время работе со следующими факторами:
    
    - Отзывчивый дизайн сайта - магазина. Сегодня просто нельзя не делать мобильной версии или адаптива сайта для мобильных. Вы потеряете примерно 50% всех возможных покупателей и, соответственно, не сможете продвигать сайт по SEO.
    
    В отдельных случая имеет смысл разработка именно мобильной версии (приложения). Этот случай подразумевает наличие бюджета на сдвоенную разработку :).
    
    - Поддержка всех используемых браузеров. Очень важно, чтобы учитывались функциональные особенности браузеров, наличие в них или отсутствие специфических панелей инструментов, которые могут занимать дополнительное пространство и перекрывать контент сайта.
    
    - Быстрая загрузка. При загрузке более 3-х секунд до 40% пользователей могут покинуть сайт. Поэтому, при разработке максимальное внимание следует уделить скорости загрузки. На худой конец использовать прелодер, который однозначно говорит о том, что сайт “жив” :).
    
    - Автоматическое создание резервных копий. Делать это следует регулярно, если вы не хотите потерять все над чем работали при неудачном обновлении или из-за атаки конкурентов.
    
    - Западный подход к трафику. Большинство предпринимателей привыкли работать в парадигме “налить трафика на сайт и продать только тем, кто заинтересовался”. Это в корне неверно. Отсюда и получается средняя конверсия сайтов в 3-5%. Это процент тех, кто готов купить прямо сейчас. Мы же рекомендуем постоянно работать с теми, кто заходил к вам на сайт, но не купил. В большинстве случаев еще не поздно превратить бывшего посетителя в клиента.

Итог

Вот такая получилась большая статья. Каждый из этих пунктов может сделать ваш сайт лучше на несколько процентов или целый порядок. Осталось применить знания на практике и получить результат в виде новых клиентов и роста прибыли компании. Удачи вам!