Как увеличить конверсию на сайте через оптимизацию веб-витрины?

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

А это не так. Нет ни одного доказанного кейса с цифрами, что дизайн или картинка как-то влияет на конверсию или продажи.

Каковы же основные «золотые правила» создания веб-витрины?

Правило первое.

«CTA is a KING». Иными словами, «целевое действие» - король веб-витрины.

К типичным целевым действиям относятся такие как:

«Купить»

«В корзину»

«Оформить заказ»

«Перейти в каталог»

«Зарегистрироваться»

«Оставить заявку»

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

Основная ошибка - огромные баннеры без всяких целевых действий или веб-витрины с множеством целевых действий.

НЕВЕРНО: Кнопка CTA слева и визуально не выделена

ВЕРНО: Кнопка CTA справа и визуально выделена

НЕВЕРНО: Изобилие CTA, особенно в «Корзине» - это тоже плохо

ВЕРНО: Один чёткий CTA, визуально выделенный, расположенный в верхней части экрана, ведущий пользователя к конверсии в покупку

НЕВЕРНО: просто огромный баннер во весь экран

ВЕРНО: баннер и кнопка CTA, расположенная справа по ходу движения глаз пользователя по экрану

Причём золоте правило CTA едино как для B2C, так и B2B сайтов, как для товаров, так и услуг: СTA должен быть всегда!

Вывод

Золотые правила конверсии в продажи:

Правило второе

Правило 3-х секунд.

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

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

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

Это следствие «клипового восприятия информации» у современных пользователей.

НЕВЕРНО: за 3 секунды на такой странице невозможно понять что здесь CTA

ВЕРНО: чёткие товарные предложения для восприятия за 3 секунды и кнопка CTA

Из правила 3-х секунд логично вытекает другое правило.

Правило третье

The eye should travel –«глаз должен путешествовать». Пользователи перегружены визуальной информацией. Поэтому в тренде создания эффективных веб-витрин - «чистые», неперегруженные интерфейсы с минимальным цветовым миксом.

Сравните:

Вывод: «Чистый» дизайн, чёткие шрифты чёрного цвета, белый фон – это уже стандарты юзабилити веб-витрин и главный мировой тренд.

Правило четвертое

Больше никаких длинных текстов. Закончилась эпоха текстового контента. Допустимы 2-3 фразы (60-200 символов), описывающих суть идеи и ведущих к CTA. Наступила эпоха видео-контента.

Как не надо:

Как надо:

Вывод: замените «текстовые простыни» на четко сформулированные предложения. Ценности, описывающие суть идеи, ваш продукт или услугу. Сопроводите видео-контентом и покажите CTA.

И наконец, казалось бы, очевидно правило:

Правило пятое

Веб-витрина, это прежде всего ВИТРИНА.

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

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

ТОВАРЫ и ЦЕНЫ в рамках видимости первого экрана - это самое важное коммерческое золотое правило и все ведущие мировые игроки его выполняют. Представьте, что вы заходите в обычный офф-лайн магазин в торговом центре. Разве вы увидите огромные растяжки с яркой рекламой на витринах там, где должны стоять товары? Нет, конечно! А на веб-витринах почему-то допускаются такие ошибки.

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

КАК НЕ НАДО: баннер огромный «увёл» товары вниз, они не помещаются в первый экран и обрезаны

Товаров НЕТ в первом экране

Видны «КУСКИ» от изображения товаров, но сами они в первый экран не поместились

И если вы думаете, что пользователь «проскроллит» вниз и найдет товар, то вы не знаете другого закона юзабилити, который называется «Закон лишнего клика или скролла». Каждый лишний клик или скролл, который вы заставляете делать пользователя чтобы добраться до CTA, снижает конверсию в среднем на 17%.

КАК НАДО: есть баннер с чётким предложением и большой кнопкой CTA и есть товары с ценами в рамках видимости первого экрана

Также очень важно понять, что любые изменения на веб-витрине необходимо ТЕСТИРОВАТЬ перед внедрением. Для этого есть много бесплатных и платных сервисов проведения A/B тестирования, таких как Google Experiments Realroi.ru Changeagain.me

Только тест покажет, какой результат в конверсии и продажах вы получите:

Суть A/B тестирования:

- выделяем часть трафика: 50 % всех посетителей видят вариант лендинга A, 50 % — вариант лендинга B.

- замеряем показатели конверсии по каждому варианту.

Из примера выше видно, что если бы мы приняли решение оставить веб-витрину вариант А, то мы бы потеряли в месяц 1 244 430 рублей. Тест шёл 3 дня, разница в выручке составила 124 443 рублей. Значит за месяц это примерно 1 244 430 рублей.

И это только на объёме трафика, который участвовал в тесте. Если распространить это на весь бизнес, то потери могут быть многомиллионные.

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

Веб-витрина -это инструмент продаж и все решения о любых модификациях должны приниматься только на основе цифр.

Это основные, базовые "золотые" правила создания эффективных продающих веб-витрин, которые мы в школе электронной коммерции IWENGO изучаем с нашими студентами. Проработка «было»-«стало» по 84-м кейсам наших студентов дала в среднем плюс 20% к конверсии, что в денежном выражении может составить плюс несколько миллионов рублей в месяц к продажам.

БЫЛО: плохо читаемые шрифты, сильно перегружена информацией шапка сайта, первый ряд товаров «отрезан» и не поместился в первый экран

СТАЛО: более четкие шрифты, «шапка» сайта стала менее перегруженной и более структурированной, но главное - в первом экране сайта видны товары и цены. А веб-витрина для этого и предназначена

БЫЛО: огромный баннер без чётко обозначенного товарного и ценового предложения

СТАЛО: товарный баннер, кнопка CTA, входы на товарные категории по брендам в рамках видимости первого экрана, более легко воспринимаемый глазом визуал

БЫЛО: «огород цветов», витрина «вырви глаз», кричащие шрифты, баннеры, весь контент «в кучу»

СТАЛО: четкие три точки входа, лаконичный текст, кнопки целевого действия

Работа над юзабилити сайта - это постоянный, непрекращающийся процесс, направленные на борьбу за процентные пункты увеличения конверсии. Только так вы сможете не просто говорит «мы стремимся улучшать пользовательский опыт», а делать это системно, прагматически, на основе базовых правил и обязательным измерением эффективности.