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

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

Как важен и прибылен сегмент онлайн-ритейла в 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 Вольт»‎. Иконка «К сравнению»‎ — в правом верхнем углу. На превью товара в каталоге её нет.

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

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

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

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

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

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

Сравниваем два разных компрессора и пульверизатор в магазине «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-секундные ролики на купленные товары, и это уже практически инфлюенс-маркетинг, о котором мы поговорим в другой статье.

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

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

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

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

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

Заключение

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