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

Аватар пользователя ADCI_Solutions ADCI_Solutions 14 апреля в 10:53
1

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

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

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

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

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

Хэдер

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

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

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

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

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

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


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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Футер

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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


Сеть «М.Видео» в 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. Ошибок здесь допускать нельзя: если использовать чужие практики, то только проверенные и лучшие, а если внедрять новые и оригинальные, то только опираясь на анализ поведения аудитории, специфические юзкейсы и продуманную маркетинговую поддержку. Надеемся, что наша статья дала вам понимание, каким должен быть конкурентоспособный и эффективный онлайн-магазин.