Как развивать интернет-магазин. База знаний
Всем привет!
Меня зовут Артем, более 8 лет занимаюсь диджитал маркетингом, проектным менеджментом, а также развитием продуктов (поиск точек взрывного роста).
В какой-то момент понял, что пора начать делится с коллегами по цеху практическим опытом, который получил за прошедшее время работы, считаю что только так можно понять чего именно ты достиг, а чему еще надо научиться.
Хочу показать свои наработки по развитию интернет-магазинов, которые отметил для себя.
Но перед тем как перейти к самой подборке хочется все-таки остановиться на базовом минимуме инструментов, которые обязательно должны присутствовать:
- CMS или любое no code решение;
- Система аналитики: Google Analytics, Яндекс.Метрика;
- Менеджер тегов: Google Tag Manager;
- Сервис по запуску тестов: Google Optimize;
Дальше уже можно подключать дополнительные сервисы, все зависит от потребностей и задач, но желательно наличие следующих инструментов:
- Онлайн-чат;
- Модуль персонализации;
- Модуль пушей;
- Рекомендательная система;
- CRM
- Коллтрекинг;
- Программа лояльности;
- Эквайринг;
- 1С;
- ОФД провайдер.
Структуру сайта рассматривать не будем, так как она зависит от множества факторов, например таких, как:
- кому продаем: B2B, B2C, C2C и т.д.;
- что продаем: товары, услуги;
- как проходит продажа: сайт, телефон, встреча;
- какие документы нужны: чек, договор;
- и т.д.
Но как минимум должны быть следующие разделы:
- Главная страница;
- Личный кабинет;
- Каталог;
- Карточка товара;
- Корзина.
Развитие интернет магазина, да и любого другого интернет проекта может состоять из нескольких этапов:
- технический;
- дизайнерский;
- пользовательский.
Все этапы между собой взаимосвязаны, и не могут существовать отдельно друг от друга, точнее нельзя улучшать и развивать что-то одно забыв про остальные.
Например:
- Улучшаем техническую часть: оптимизируем код, настраиваем отложенную загрузку изображений, начинаем использовать новые библиотеки и т.д., все это позволяет нам увеличить скорость загрузки сайта, вроде все отлично. Тем более если учесть исследования, которые проводились Amazon, что 0,1 секунды увеличивает выручку на 1%.
А по данным Wallmart, уменьшив скорость загрузки на 1 секунду, вы получите прирост конверсии в 2%.
Но если начнем следить за метриками, то увидим, что скорость выросла, а конверсия нет или незначительно, больше ресурсов и средств потратили на оптимизацию.
А все это связано с тем, что мы забыли обратить внимание на визуальную и пользовательскую часть, что-то съезжает, не видно или перестало работать, пользователям неудобно и не понятно что от него хотят, как оформить заказ и т.д.
- Теперь улучшаем дизайнерскую часть: добавляем новые элементы или заменяем старые, отрисовываем красивый баннер, добавляем форму т.д. Все стало заметно и понятно что делать. Но как-то все не то, а связано может быть с тем, что добавили элемент, который не работает из-за того что забыли установить библиотеку, снизилась скорость за счет добавления новых разделов и изображений, остался неиспользуемый код на странице и т.д.В общем нарисовали все красиво и новый дизайн огонь, но забыли учесть техническую часть.
- Ну и наконец остановимся только на пользовательском опыте, добавляем дополнительные уведомления, фильтры, информацию, пользователь понимает какой следующий шаг от него ждут.Но что-то все опять не то, выросли отказы, конверсия не растет, но оценка при опросах хорошая.
Все это связно с тем, что добавили новый фильтр, а он не работает, так как забыли запрограммировать. Шаг следующий ясен, но не ясно куда нажать, кнопка не отрисована, ссылка не имеет форматирования и т.д.
Учитывая все вышеизложенное хочется сказать, что надо обязательно работать с каждым этапом, тогда вы действительно будете делать качественный и удобный продукт.
Вот и дошли до части тех самых наработок и наблюдений, которые были внедрены или внедряются на проектах. Большая часть относится к e-com, но также может быть применена на любом другом сайте:
Технический этап:
- Увеличение скорости:
- использование новых технологий и библиотек
- настройка отложенной загрузки изображений
- использование современные форматы изображений WebP + JPG
- настройка кэширования статистических объектов
- подключение CDN
- оптимизация js-кода
- оптимизация структуры DOM
- удаление неиспользуемых или лишних стилей со страницы
- С ростом трафика или добавлением новых функций проводить нагрузочное тестирование сайта
- Проверка корректности работы поиска, чтобы при запросе не было изменений латиницы на кириллицу и т.д.
- Фильтры по товару или любой другой элемент должен одинаково работать на каждой странице, поиск, каталог и т.д.
На моей практике был кейс, когда вроде все отлично, но проверив количество посещений 404 страницы (несуществующей страницы), обнаружил, что пользователь туда попадает при использовании фильтра на странице поисковой выдачи.
- Все документировать.
Дизайнерский + пользовательский этапы:
Дизайн
- Адаптивная верстка. Все элементы находятся на своих местах, особенно касается мобильных устройств. Должен быть акцент на основных элементах, поиск, фильтры, кнопки, каталог.
- Реализации простого и понятного серфинга по сайту, легко перемещаться и понятно, как вернуться на шаг назад.
- Увеличить кликабельные области на сайте, особенно на мобильных устройствах. Мы делаем кликабельным только элемент, но забываем про область вокруг, палец это не мышка на экране.
Акции
- Подготовка страницы с акциями и всеми промокодами. На данной странице будет информация о всех проводимых акциях и механиках, а также промокодах. Не стоит бояться недополученной маржи, учитывая что вы эти механики запускаете, то скорей всего у вас все просчитано. Если такой страницы нет, то это риск потерять пользователя, когда он уйдет на сервис кэшбэка или купонный сайт и будет на просторах интернета искать скидку, а там его может «увести» конкурент.
Применение промокодов. Например, мы выдали промокод на бонусы, пользователь переходит в корзину и вводит его. Если пользователь не авторизован, то информируем, что этот промокод на бонусы и надо авторизоваться. Если авторизован, то начисляем бонусы на счет и говорим об успешном зачислении. Промокод на скидку срабатывает в корзине, есть уведомление и пересчет цены товаров.
- Уведомлять о том какая акция применена
- Отображать информацию обо всех примененных акциях, о доступных способах доставки и их стоимости на первом шаге корзины
Работа с сайтом
- Подготовить страницы, где будут описаны процессы взаимодействия с сайтом, покупка, оформление заказа, возврат, оплата и т.д. Помогает клиенту быстрее разобраться с сайтом в случае вопросов.
- Размещать блоки рекомендаций на сайте. Но здесь стоит обратить внимание на дизайн, подборки должны быть как карточки в каталоге, а также иметь возможность добавить товар в корзину, избранное и т.д.
- Показывать подсказки у элементов на сайте. Нажал кнопку «В корзину”, но не выбрал размер уведомить и обратить внимание, где это делается, не ввел данные на каком то из этапов оформления заказа, уведомить сразу, а не ждать когда будет нажата кнопка “Отправить заказ»
- Не переадресовывать на страницу онлайн оплаты, если пользователь не нажал соответствующих кнопок. Клиент должен убедиться и понять что заказ верный, все корректно, и мы должны дать возможность самому нажать кнопку оплаты
- Просить пользователей оставлять отзывы на сайте. UGC контент крутой драйвер для положительного принятия решения, а также хороший инструмент по сбору фидбэка и понимания над чем стоит работать.
- Реализовать возможность добавлять товар в избранное и корзину из каталога или любого места, где есть товар.
- Создание личного кабинета с максимальным и важным количеством информации. Личные данные, персональные предложения, история покупок, история бонусных баллов, срок действия постоянных и временных бонусов, подписки, любимая категория, платежные данные, подписка на email смс и т.д.
- Информация о товаре, в карточке обязательно должны присутствовать, как техническое описание, так и художественное.
- Отображение карточек в каталоге. Надо дать возможность выбора отображения карточек, по одной, две, три в ряд, так как у каждого пользователя свой размер экрана и свои предпочтения к считыванию информации. Если выбран вид отображения, то сохранять его на всем сайте в рамках текущей сессии или лучше запоминать на время жизни cookie, или записывать в профиль пользователя при авторизации.
- Информировать пользователя, когда совершено какое-то действие, добавил товар в корзину, добавил в избранное, подписался на рассылку и т.д., чтобы было понятно, что все ок.
- Реализация поэтапного прохождения корзины. Такую корзину проще заполнять, сразу можно указать, где ошибки и ясно сколько еще осталось действий, понятно что нужно и на каком этапе.
- Добавить все современные способы оплаты, которыми может пользоваться ваш клиент.
- На первом шаге в корзине разместить информацию о доступных способах доставки и их стоимости.
- Разместить в личном кабинете отдельно статус оплаты заказа и статус доставки.
- Реализовать возможность авторизации по номеру телефона и смс
- Информирование клиента о статусе заказа в смс, почте, мессенджере и т.д. Выбираем любой.
- Перевод раскладки с латиницы на кириллицу при вводе адреса доставки.
- Добавлять фильтры, которые помогут клиенту быстрее и правильнее сделать свой выбор. Например для fashion мы добавили фильтр по категориям товара.
- Логическое присутствие фильтров в каждом разделе. Например, если вы в мужском разделе, то там явно не нужен фильтр по полу. Если в разделе SALE, то фильтр «Распродажа», также будет лишним.
- Информировать пользователя о количестве товара на складе.
Перечислил только те наработки, которые доставляют больше всего «боли» и которых очень не хватает. Что-то из перечисленного списка встречается на каждом сайте, даже у крупных маркетплейсов, но гигант может позволить что-то не сделать, например отгружать товар только по предоплате, но монобренд или начинающий сайт точно нет.
Следующие статьи хочу посвятить следующим темам. Но, для того чтобы определить, что наиболее интересно, прошу отметить близкую вам.
Надеюсь, что моя подборка кому помогла и мы вместе будет делать лучший e-commerce в России.
Нет, уважаемый, такие инфоцыганские тексты здесь не зайдут, при всем уважении..
Роман, а можете указать, где именно «несёт» инфоцыганством?
В статье никого не призываю, что-то купить. Лишь обозначаю моменты, которые стоит учитывать и проверять при разработке и/или развитии сайта.
В этом чати полная анархия ?
Здесь вообще нет ответственного редактора , премодерации какой - нибудь?
Зона свободного пздбольства и постинга любой куйни?
Этот пост совсем не так плох в сравнении со многими другими, ибо содержит определенную полезную информацию
"Меня зовут Артем, более 8 лет занимаюсь диджитал маркетингом, проектным менеджментом, а также развитием продуктов (поиск точек взрывного роста).
В какой-то момент понял, что пора"..... Пора проверять текст в Ворде до публикации... Пора Артем, пора ....
Не могу назвать статью бесполезной, хоть и в ней много очевидностей.
Однако, опираясь на свой опыт и наблюдения - львиная доля e-commerce проектов малого и среднего бизнеса нуждаются даже в таких очевидных улучшениях.