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

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

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

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

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

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

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

«Купить»

«В корзину»

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

  • Основа конверсии в продажу – организация наиболее короткого и понятного понятного пути пользователя к CTA.
  • Для каждой страницы сайта и этапа воронки определитесь, ЧТО является первым и самым важным целевым действием для конверсии (переход на карточку товара, клик в Корзину, Избранное) на данном этапе воронки?
  • Затем задайте вопрос – КАКИЕ кнопки (элементы интерфейса, элементы дизайна) способствуют этому целевому действию.
  • Уберите всё, что отвлекает пользователя от целевого действия и максимально сократите его путь пользователя к этому целевому действию. CTA должен быть виден всегда, правильно расположен и визуально отличаться от остальных элементов интерфейса веб-витрины.

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

Правило 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, входы на товарные категории по брендам в рамках видимости первого экрана, более легко воспринимаемый глазом визуал

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

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

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

0
12 комментариев
Написать комментарий...
Del Ins Up

Горите в аду, проповедники чистого видеоконтента без текста. Есть 90% случаев, когда видео просто некогда и негде смотреть, особенно со звуком. Особенно когда там распинаются 10 минут про то, что можно было прочитать за 30 секунд.

Ответить
Развернуть ветку
Ruslan Kokin

Вы когда статейку переводили, хоть сами пытались понять о чем она? В жизни тоже так говорите: "Сколько у вас процентных пунктов конверсия"?

Ответить
Развернуть ветку
Юлиана Гордон
Автор

Добрый день. Я сама писала эту статью, а не переводила, я преподаватель школы электронной коммерции. ДА, в бизнес-школе именно так и говорим, это общепринятая лексика бизнес-диалога, все студенты это понимают. Правда, я не профессиональный журналист, и статьи я только начала писать на основе контента нашего учебного курса по Юзабилити, поэтому сожалею, если в каких-то местах вышло не очень понятно. Будем стараться улучшать, спасибо за коммент).

Ответить
Развернуть ветку
Ruslan Kokin

Мне жаль ваших студентов

Ответить
Развернуть ветку
Юлиана Гордон
Автор

Большое спасибо за ваше мнение. Особенно если оно ни о чём не основано и выражается в такой деструктивной форме. Наши студенты: IKEA, Leroy Merlin, NIKE, Unilever, Henkel, BIC, Мегафон, Lego, Nestle, Danone, Hills и еще более 100 компаний. По реализованным проектам за 2 года средний рост конверсии +23%, суммарный эффект + 97,4 млн рублей. И им всем себя точно не жаль.

Ответить
Развернуть ветку
Ruslan Kokin

Спасибо, уровень вашей экспертизы по статье уже понятен. Вангую вам низкие процентные пункты конверсии

Ответить
Развернуть ветку
Кирилл Вихарев

Токсик

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Кирилл Вихарев

Автор? Откуда догадка, что внимание пользователя двигаются с правого края?

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

Не первый раз встречаю статьи где пишут обратное: о с право на лево.

Мне уже хочется понять источник этих предположений.

Ответить
Развернуть ветку
Юлиана Гордон
Автор

Кирилл, я перечитала блок, где это написала -я написала что кнопка CTA должна на десктопной версии располагаться справа, и это потому что, как вы совершенно точно отметили, глаза движутся слева => НАПРАВО, то есть справа как бы задерживаются чуть дольше, поэтому справа CTA. А глаза идут из левого верхнего угла в правый нижний (преимущественно так, если конечно специально не вставить слева какие-то блоки особенно якорящие внимание). Так что вы правы и я ровно то же имела ввиду тоже.

Ответить
Развернуть ветку
Кирилл Вихарев

В целом общая мысль автора понятна. Интерфейс это не дизайн, интерфейс это эмпирический опыт и постоянный анализ.

Ответить
Развернуть ветку
Mikhail Tishenkov

Статья супер! Особенно не для профессионалов. Всё очень четко, ясно. Тезисно, с подкреплением конкретными кейсами каждого тезиса. Искренне Благодарю!

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
9 комментариев
Раскрывать всегда