Как сделать популярный и эффективный интернет-магазин
Самое большое заблуждение начинающих предпринимателей, которые создают или заказывают разработку сайта интернет-магазина, — то, что главным при этом они считают эстетику и дизайн. А это не так. Нет ни одного кейса с цифрами, подтверждающего, что дизайн сайта влияет на конверсию (отношение числа посетителей сайта, выполнивших на нем какие-либо целевые действия, к общему числу посетителей сайта, выраженному в процентах. — «РБК Pro») или продажи.
В мире уже признали, что дизайна сайтов как такового нет, а есть UI- проектирование (от англ. user Interface — пользовательский интерфейс) — разработка пользовательских интерфейсов по так называемым золотым правилам юзабилити. Эти правила призваны сделать сайт удобным для пользователей.
1. CTA is a king (призыв к действию — король)
К типичным CTA относятся:
- «купить»,
- «в корзину»,
- «оформить заказ»,
- «перейти в каталог»,
- «зарегистрироваться»,
- «оставить заявку».
Призыв к действию должен быть представлен на сайте кнопкой, ссылкой и визуально отличаться от других элементов.
- На десктопной версии сайта он должен располагаться справа или по центру экрана. Это связано с тем, что российские пользователи читают слева направо.
- На мобильной версии кнопку стоит закрепить посередине.
Ошибка № 1: размещать на сайте огромные баннеры без CTA или, напротив, с множеством CTA
Лучше всего, если кнопка «купить» и другие кнопки с призывами будут крупными и яркими, но при этом будут сочетаться с цветовой палитрой сайта. При открытии страницы эти кнопки должны сразу бросаться в глаза.
Ошибка № 2: слишком много кнопок СТА
Эта ошибка особенно критична в «корзине». Посетитель сайта заходит оформить заказ и натыкается на кнопки «очистить», «применить промокод», «применить подарочный сертификат», «получить подарок».
Вместо того чтобы перегружать внимание посетителя, разместите в верхней части экрана одну CTA-кнопку. Она должна вести пользователя к покупке.
Ошибка № 3: огромные баннеры отодвигают кнопку CTA на второй план
Плохая отдача от сайта может быть связана c тем, что огромные баннеры с информацией о продукции или акциях отодвигают кнопку CTA на второй план. В результате она теряется в подвале сайта среди наименований товаров или контактных номеров.
Кнопка на баннере должна быть основной частью композиции вместе с изображением самого товара и информацией о нем.
На сайте должен быть призыв к действию независимо от того, продаете вы женское белье или производите оцинкованный профнастил. Законы человеческого восприятия никто не отменял, и правильное расположение всех элементов сайта — одна из составляющих хороших продаж.
Золотые правила конверсии в продажи
1. Правило понятного пути к CTA
Основа конверсии в продажи — организация наиболее короткого и понятного пути пользователя к CTA.
- Определите самое важное целевое действие.
Для каждой страницы сайта и этапа воронки продаж (маркетинговая модель, которая описывает предполагаемый путь будущего покупателя от первого знакомства с предложением или товаром до реальной покупки. — «РБК Pro») определите, какое действие важнее всего для конверсии (переход на карточку товара, клик в «корзину»/«избранное»).
- Создайте кнопки, которые подведут посетителя к целевому действию.
Затем задайте себе вопрос, какие кнопки (элементы интерфейса, элементы дизайна) способствуют этому целевому действию.
Уберите все, что отвлекает пользователя от целевого действия, и максимально сократите его путь к нему.
2. Правило трех секунд
Современные пользователи перегружены информацией. Согласно мировым исследованиям, в среднем в день пользователь интернета получает более 1 тыс. рекламных сообщений, большую часть из которых его мозг просто не воспринимает.
Внимание пользователя стало рассеянным, оно подвержено энтропии, то есть хаотичному переключению с предмета на предмет без долгого удержания фокуса.
Поэтому при создании лэндингов и промостраниц помните: у вас примерно три секунды, чтобы привлечь внимание пользователя к CTA. Каждая лишняя секунда будет снижать конверсию.
Восприятие современных пользователей — клиповое. Если пользователь впервые заходит на сайт и видит сообщение «блокировать/разрешить показывать уведомления», потом предложение перейти на страницу с акциями, а фон пестрит мелкими иконками, дизайнерскими изысками и баннерами, то он, скорее всего, уйдет, ничего не купив.
3. Правило The eye should travel («глаз должен путешествовать»)
Пользователи перегружены визуалом, поэтому актуальны «чистые», неперегруженные сайты с использованием минимального количества цветов. Взгляд посетителя должен цепляться за карточки с товарами и переходить от одной к другой.
Массивные рекламные фотографии с позиционированием какого-то товара, завлекалки с фотомоделями, статичные «скидочные обещания» уже не работают.
Стандартами стали «чистый» дизайн, четкие шрифты черного цвета, белый фон.
Наилучшее решение для увеличения конверсии — сайт, на котором товары и их описания представлены небольшими картинками, которые выстроены в ряды и хорошо сочетаются по цветовой гамме, имеют понятное меню и не утомляющий глаз дизайн.
4. Больше никаких длинных текстов
На смену эпохе текстового контента пришла эпоха видеоконтента. Теперь к CTA должны вести максимум две-три фразы (60–200 символов). Идеальные варианты — текстовая подводка и видеоролик.
Лонгриды «О компании», «Наша продукция», «История» и прочее «увлекательное чтиво» начала 1990-х уже никого не интересуют.
Замените текстовые «простыни» на четко сформулированные предложения ценности, описывающие суть идеи, продукт или услугу. Сопроводите видеоконтентом и покажите CTA.
5. Веб-витрина — это прежде всего витрина
Наконец, казалось бы, очевидное правило: веб-витрина — это прежде всего витрина. Как и на витрине обычного магазина, на ней должны быть заметны первым делом товары и их цены, а не креативы (только если ваш сайт не сделан специально для этого).
Российские интернет-магазины изобилуют огромными баннерами, на которые мало кто кликает. Они висят там просто потому, что «все так делают». На западных сайтах вы никогда не увидите просто баннер. Вы увидите баннер с CTA и товарное предложение, либо ссылки для перехода на товарные группы, либо меню каталога, либо все это вместе.
6. Товары должны находиться в пределах первого экрана
Представьте, что вы заходите в обычный офлайн-магазин в торговом центре. Разве вы увидите огромные растяжки с яркой рекламой на витринах, где должны стоять товары? Конечно, нет.
Зато на сайтах почему-то вполне можно увидеть креатив дизайнеров вместо товаров. Сайт — это инструмент продаж. Он должен быть сверстан так, чтобы на мониторах всех базовых разрешений товары находились в пределах первого экрана.
Следите, чтобы огромные баннеры не «сдвигали» товары за пределы первого экрана. Иногда на первом экране видны лишь куски изображений товаров.
7. Правило лишнего клика или скролла
Если вы думаете, что кому-то, кроме вас, интересно долго изучать ваш сайт, то вы не знаете еще одного закона юзабилити: каждый лишний клик или скролл, который вы заставляете делать пользователя, чтобы добраться до CTA, снижает конверсию в среднем на 17%.