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

Мобильная коммерция (M-commerce) находится на подъёме – к 2026 году ожидается, что 20% розничных покупок будут совершаться в сети. И так как смартфоны стали неотъемлемой частью повседневной жизни, то пользователи ожидают, что покупательский опыт будет успешно организован. В этой статье дам советы и рекомендации по оптимизации «мобильной витрины».

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

Базовое наполнение навигационного меню — разделы «Главная страница», «О нас», «Блог», «Контакты» и «Продукты или услуги». Этот шаблон можно использовать на начальном этапе, но спустя 2-3 месяца работы оптимизировать его. Для этого изучите, на что чаще всего кликают — это делается через аналитические сервисы или тепловые карты.

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

По данным исследования СПБГЭУ, 26,4% пользователей оценивают удобство использования сайта по каталогу, скорости выгрузки и релевантной выдаче товаров. Если сайт на телефоне прогружается медленно, то это приведёт к большому числу брошенных корзин. А ещё у быстрых сайтов лучший рейтинг в поисковых системах. Потому что один из критериев оценки сайта — его скорость загрузки. Как её можно оптимизировать?

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

Рекомендую воспользоваться тремя лайфхаками:

1. Ракурс: сфотографируйте или снимите товар сверху, сбоку и, например, в процессе использования.

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

3. Видеообзоры: мастер-класс по использованию товара — отличный инструмент для повышения лояльности клиентов. Не ленитесь потратить деньги и время на качественную съёмку — поверьте, это даст свои плоды

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

Отслеживайте несколько моментов:

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

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

3. Расположение текста: следите, чтобы он не выходил за пределы экрана и шрифт не был слишком маленьким

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

Также в поиске помогают фильтры. Они позволяют легко и быстро находить нужное среди большого ассортимента. Фильтры должны обновлять результаты поиска по мере их применения. То есть сначала клиент добавляет тип продукта (компьютер) и ценовой диапазон (кстати, для него лучшего установить ползунковый фильтр). Когда он добавляет новый параметр (например, только устройства белого цвета), поисковая выдача должна обновляться в реальном времени. Без необходимости нажимать на F5 или Ctrl+R.

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

Один из самых популярных форматов — это мультивариантное тестирование. Оно работает так: сначала определяются ключевые элементы сайта, которые влияют на пользовательский опыт. Это могут быть:

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

Потом программное обеспечение распределяет трафик так, чтобы случайным пользователям попадалась рандомная страница. А спустя 2-3 недели собирается аналитика по этим веб-страницам. И это помогает понять, какая комбинация дала наилучшие результаты.

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