Все новости
16:46, 31 Марта
DEW – новый российский бренд бытовой химии
16:29, 31 Марта
Завод Toyota в Петербурге стал собственностью ФГУП «НАМИ»
15:20, 31 Марта
Пользователи Яндекс Маркета теперь могут порекомендовать сервису любимые магазины
15:15, 31 Марта
Рост оборота крупных российских ритейлеров замедлился
14:02, 31 Марта
Tesla открыла продажи пива под своим брендом по €89 за набор из трёх бутылок
12:32, 31 Марта
Более трети предпринимателей не намерены маркировать рекламу
11:50, 31 Марта
Склады электроники переполнились из-за падения спроса
10:55, 31 Марта
«Лента» открывает собственные точки продажи табачной продукции
10:39, 31 Марта
Американский производитель респираторов и cкотча 3М нашел покупателя на бизнес в России
09:40, 31 Марта
Бывшие рестораны «Макдоналдс» в Беларуси и Казахстане заработали под брендом «Мы открыты!»
06 Апреля 2021, 16:57
4887 просмотров

Каким должен быть эффективный дизайн интернет-магазина

Retail _ Loyalty.jpg

Если бы любое техзадание на разработку онлайн-магазина нужно было свести к сути действий пользователя, то она звучала бы так:‎ найти и купить. А уж как это сработает, должны решить дизайнеры, разработчики и аналитики студии-подрядчика, у каждого из которых — минимальный навык психолога. Заточить страницы под поисковики, поставить кнопки правильных размеров и цветов, рассказать об акциях так, чтобы поднять продажи, сделать две-три-пять корзин, и все по-своему нужные — не в этом ли теперь кроется настоящее искусство продавать?

Как важен и прибылен сегмент онлайн-ритейла в 2021 году, эксперты ADCi Solutions рассказали в первой статье из цикла. В этом материале речь пойдет о том, как средствами веб-дизайна дать покупателям уверенность нажать на кнопку “Оплатить” и поднять продажи вашего онлайн-магазина.

Продумайте главную страницу

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

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

Хэдер

Часто также называют шапкой сайта. Включает поисковую строку, раскрывающиеся при наведении или нажатии категории товаров, выбор языка, кликабельный номер телефона, адреса магазинов, личный кабинет, раздел «Избранное»‎ и непременную корзину в правом верхнем углу, о которой мы ещё поговорим.

1.1.jpg

Магазин одежды Asos сдержан: из категорий только мужская и женская одежда. Зато поиск подсказывает, что в нём можно найти.

1.2.jpg

Его конкурент Farfetch сразу предлагает углубиться в подкатегории товаров — даже поисковой строке становится тесно.

1.3.jpg

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

1.4.jpg

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

1.5.jpg

А в шапке Wildberries можно купить авиабилеты в рамках партнёрской программы с компанией «Випсервис».‎

1.6.jpg

1.7.jpg

Пионеры онлайн-покупок eBay и Amazon предлагают выбрать в выпадающем меню интересующую категорию и искать товар только внутри неё.

Каталог с категориями товаров

Может тянуться вдоль шапки или быть вертикальным и спрятанным в бургер.

1.8.jpg

1.9.jpg

eBay и Wildberries прячут вертикальный каталог в бургер.

1.11.jpg

Магазин инструментов MyToolShed учёл возможный интерес своих покупателей к конкретному производителю, поэтому предлагает поиск по брендам с алфавитным указателем.

Промоматериалы

Адресованы как тем самым лояльным клиентам, так и новым покупателям, которые ищут, за что бы вас полюбить. К промо относятся рекламные баннеры в шапке, блоки товаров с обобщающими заголовками («Новинки»‎, «Товары месяца»‎, «Выбор редакции»‎), спецпредложения и скидки.

1.12.jpg

Типичный промоблок на примере магазина «Леруа Мерлен».

1.13.jpg

В мире много разной музыки. Редакторы магазина товаров для музыкантов и диджеев Juno сортируют её по стилям и жанрам, а самое важное, по их мнению, выносят в промоблоки на главной странице.

1.14.jpg

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

Встречаются два вида баннеров: статичные и собранные в слайдер. У слайдеров два режима пролистывания: ручной и автоматический. Хотя автоматическое пролистывание баннеров критикуют, можно найти советы, которые велят настроить в админке вашего онлайн-магазина частоту смены баннеров в 5-7 секунд.

1.15 гиф.gif

Частота смены баннеров у Amazon — около 5 секунд. Оптимально, но людям требуется разное время, чтобы ознакомиться с предложением внимательно, поэтому сделайте возможность ставить пролистывание на паузу при наведении курсора мышки на баннер.

1.16 гиф.gif

Анти-пример. У сайта женской одежды Valentina Dresses частота смены баннеров составляет 3-4 секунды. Хоть этого и хватает для прочтения заголовка, никто не любит мельтешения.

Решения для повышения лояльности

Зарабатывайте доверие потребителя к себе положительными отзывами и официальными документами. Следите за свежестью отзывов — к тем, что были сделаны от 3 месяцев назад и больше, доверие ниже.

1.17.jpg

Магазин инструментов «220 Вольт»‎ продаёт товары марки Bosch. Это не подделка? Не брак? Не украденные изделия? Нет, конечно — вот же сертификаты.

1.18.jpg

1.19.jpg

Шапки Juno и MyToolShed убеждают покупателей в качестве своего сервиса: средняя оценка на Trustpilot стремится к пятёрке, доставка в течение суток, бронь времени, всё быстро, надёжно, безопасно и отработано за годы опыта.

1.20.jpg

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

Согласно исследованиям, отзывы на ваши товары и услуги решают слишком много. Если первый отзыв будет так себе — а за негативом люди в карман не лезут, — то и последующие будут не очень, и так в течение 3 лет. 88% потребителей доверяют отзывам на товары больше, чем друзьям, а 81% сначала ищет о товаре информацию, а потом решает, покупать его или нет.

Футер

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

1.21.jpg

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

Разрешите покупать в один клик

В 2000 году покупку в один клик придумали и запатентовали в Amazon под названием 1-Click. Её смысл был в том, чтобы после нажатия покупателем кнопки Buy now with 1-Click сервис автоматически заполнял все нужные поля той информацией, которую покупатель уже указал при регистрации. В 2017 году патент истёк и функция стала появляться на других сайтах.

2.1.jpg

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

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

Лучшее решение — поместить кнопку покупки в один клик рядом с кнопкой «В корзину»‎. Ещё в 2014 году компания Webasyst отчиталась о проведённом A/B-тестировании: такое расположение кнопок повысило конверсию на сайте их клиента на 58%. Как мы видим, результаты тестирования всё ещё релевантны этому году: ими, например, пользуется магазин «220 Вольт»‎.

2.2 - 2.3.jpg

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

2.3.jpg

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

Модуль покупки в один клик есть сегодня у множества CMS. Так как мы в ADCI Solutions разрабатываем сайты на Drupal, то и быстрые покупки на сайтах наших клиентов работают на Drupal-модулях. Например, это Commerce Express Checkout и Commerce Buy One Click.

Прокачайте поиск

Один из главных инструментов в онлайн-магазине, призванный ускорить обнаружение и покупку товара. Поиском пользуются самые мотивированные покупатели. Он нуждается в пристальном внимании маркетологов магазина, больших денежных вливаниях, лучшем UX. Инвестиции времени и денег не пройдут для владельцев сайтов незамеченными: трафик, который магазину несут те покупатели, которые ищут конкретный товар, колеблется между 18 и 30%, а согласно данным компании REES46, конвертация внутренних поисковых запросов в покупки приносит магазинам до 40% дополнительной прибыли.

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

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

3.2.jpg

Сайт «М.Видео». Ищем телефон. Слева — фасеты, предлагающие сузить выдачу. Страница динамическая, и стоит поставить одну галочку в любом фасете, как результат выдачи поменяется автоматически.

3.2.jpg

Сузим запрос до телефона с памятью 16 Гб самостоятельно. Видно, что фасет «Встроенная память»‎ не предлагает выбирать из телефонов с другим объёмом памяти. Хорошим тоном также является ставить количество товаров в конкретном фасете: интересующих нас телефонов всего 7 штук в наличии.

3.3.jpg

Фасетный поиск на Amazon.

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

3.4.jpg

С фасетным поиском магазина Pigu.lt внезапный результат «Найдено 0 товаров»‎ исключён — дизайнеры просто приглушили те марки велосипедов, у которых нет заданных покупателем характеристик.

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

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

Разрабатывая сайты на Drupal, мы решаем эти же задачи при помощи поисковика Solr и модулей, которые с ним интегрируются, таких как Search API Solr и Apache Solr Search. Solr — быстрая поисковая система с гибко настраиваемыми параметрами, не нагружающая сервер и упрощающая масштабирование онлайн-магазина.

Позвольте сравнивать товары

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

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

4.1.jpg

Карточка товара в магазине «220 Вольт»‎. Иконка «К сравнению»‎ — в правом верхнем углу. На превью товара в каталоге её нет.

4.2.jpg

Две модели холодильника в Яндекс.Маркете. Иконка добавления в список сравнения (как и добавления в избранное) неактивна, пока на область карточки не навести курсор, как в случае нижнего холодильника. Верхний холодильник мы добавили в список, поэтому иконка приняла активное состояние и окрашена красным.

4.3.jpg

Внутри карточки товара на Яндекс.Маркете эту функцию вынесли в правый верхний угол.

4.4.jpg

Превью миксера в каталоге на «Озоне». Функцию спрятали в раскрывающееся меню рядом с кнопкой «В корзину»‎.

4.5.jpg

Тот же миксер, но мы уже внутри карточки. Функция «Сравнить»‎ — под заголовком.

4.6.jpg

4.7.jpg

Превью карточки раковины и сама карточка в магазине Леруа Мерлен. Функция оформлена как чекбокс, обнаружить который проще.

4.8.jpg

Сайт для сравнения товаров для скалолазов WeighMyRack, который поддерживает ADCI Solutions. Как одну из основных функций сравнение долго искать не придётся.

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

4.9.jpg

Сравниваем два разных компрессора и пульверизатор в магазине «220 Вольт»‎. Какие выводы можно сделать из этого сравнения?

4.10.jpg

Если кто-то сомневается, что фарфоровая раковина и фанера — это разные вещи, то в «Леруа Мерлен»‎ снимут эти сомнения.

4.11.jpg

UX «Озона» более демократичный. Товары для сравнения разбиты по группам «Миксеры»‎ и «Холодильники»‎, но возможность сравнить все товары между собой тоже есть. Зачем?

4.12.jpg

Яндекс.Маркет также разбрасывает сравниваемые товары по разным группам, но в отличие от «Озона» не сбивает с толку возможностью сравнивать ноутбуки и холодильники.

4.13.jpg

Amazon вообще не предполагает выбора продуктов для сравнения. При нажатии на Compare with similar items под описанием товара пользователь переносится в раздел на странице, где к основной товар сравнивается с тремя другими, подобранными самой площадкой.

4.14.jpg


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

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

Продумайте корзину

Это последний рубеж, который покупатель должен преодолеть, и преодолеть легко и с благодарностью в ваш адрес — покупатели часто бросают корзины, что для eCommerce выливается в громадные потери (в 2016 году их насчитали на 4,6 трлн долларов).

5.1.jpg5.2.jpg

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

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

5.3.jpg

На мобильном сайте «Озона» кнопка «Добавить в корзину»‎ липкая: вы скроллите карточку товара как угодно далеко, а она всё на том же месте — большая, манящая и повышающая конверсию на 8%.

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

5.4.jpg

Что предлагает взять дополнительно к товарам в корзине сайт «220 Вольт».

5.5.jpg

5.6.jpg

«Озон» и «М.Видео» тоже позаботились о вас и составили дополнительные предложения.

Предлагайте несколько вариантов расчёта (картой, по QR-коду, наличными, частями) и доставки (почтой первого класса, курьером, самовывозом). Показывайте итоговую сумму — со всеми скидками и наценками за почтовые услуги.

5.7.jpg

«М.Видео» за дополнительную плату предлагает купить услуги по ремонту или обмену.

В своём исследовании о UX-дизайне онлайн-магазинов наши коллеги из студии Ratio делятся таким явлением? как две и более корзины, которое они подсмотрели у магазина onlinetrade.ru. Кейс редкий, но если подумать, то уместный: вы можете закупаться товарами для дома или офиса, и для каждого пункта назначения можно настроить свой срок подтверждения заказа, адрес, способ оплаты. В конце концов, среди людей много фанатов составления списков.

5.8.jpg


Внедрите видео-шопинг

Реалии 2020 года требуют от онлайн-магазинов инструментов, которые позволяют изучить товар дистанционно. Видеоконтент и торговля с его помощью развивается и входит в нашу жизнь много лет — Amazon Live и покупки в инстаграм-сторис это доказывают. Но видео-шоппинг начинают предлагать как отдельный сервис. Пример — Eyezon. При его подключении в карточке товара появляется кнопка, предлагающая покупателю запросить у магазина видеосъёмку товара в реальном времени. Продавец принимает запрос с помощью специального приложения и делает всё необходимое, чтобы клиент увидел видео с желанным товаром.

6.1 - 6.2.jpg

Видео-шоппинг с помощью Eyezon на сайте Бронницкого ювелирного завода. Задача дизайнера сайта — предусмотреть на макете страницы место под элементы интерфейса этого сервиса.

6.3.jpg

6.4.jpg

Сеть «М.Видео» в 2020 году также внедрила Eyezon и отчиталась о результатах: из 50 тысяч проведённых с начала российского локдауна эфиров покупкой заканчивался каждый пятый.

Есть тип покупателей, которые любят разного рода активности, поощряемые магазином. Хотя для кого-то из них само ощущение, что их мнение и контент окажутся для другого покупателя важным и решающим — уже само по себе поощрение. На этом играет приложение Shoploop, созданное в Area 120, экспериментальном исследовательском подразделении Google. Его пользователи могут снимать 90-секундные ролики на купленные товары, и это уже практически инфлюенс-маркетинг, о котором мы поговорим в другой статье.

На этом играет приложение Shoploop, созданное в Area 120, экспериментальном исследовательском подразделении Google. Его пользователи могут снимать 90-секундные обзоры.


Помните о голосовом ассистенте

Это не совсем касается веб-дизайна, но умолчать об этом сложно. Когда нужно найти, где неподалёку купить цветы, книгу или болгарскую пилу, когда читать описание о товаре лень или некогда, когда ваш заказ где-то завис, на помощь приходят голосовые помощники. Алиса от Яндекса, Alexa от Google, Siri от Apple, Маруса от Mail.Group — роботы уже среди нас. Они разгружают call-центры в кризис, помогают найти подарки в канун праздников, возвращают покупателя к покупке, если он внезапно прервал работу на сайте, задают уточняющие вопросы и, если запрос покупателя окажется слишком сложным для ассистента, переводят устную беседу в письменную с помощью технологии распознавания речи и снабжают этой информацией живого оператора.

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

Сделайте техническую оптимизацию. В первую очередь предусмотрите адаптивный дизайн для всех стандартных размеров экранов, быструю скорость загрузки (помогут AMP-страницы), корректный файл robots.txt, и подробный сниппет товаров.

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

Заключение

Специалисты прогнозируют, что в 2021 году глобальный объём рынка eCommerce будет близок к 5 трлн долларов. Представьте размах борьбы за потребителей, особенно в условиях, когда главный трафик и основную часть названной суммы забирают компании вроде Amazon и Aliexpress. Ошибок здесь допускать нельзя: если использовать чужие практики, то только проверенные и лучшие, а если внедрять новые и оригинальные, то только опираясь на анализ поведения аудитории, специфические юзкейсы и продуманную маркетинговую поддержку. Надеемся, что наша статья дала вам понимание, каким должен быть конкурентоспособный и эффективный онлайн-магазин.


Понравился материал? Поделись.

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