Автор: Дмитрий Моргун

Элементы сайта, повышающие конверсию

Сайт как бизнес инструмент должен оправдывать вложения в него, продавать и приносить прибыль. Мало обеспечить высокую посещаемость сайта, нужно, чтобы пользователи выполняли целевые действия: заказывали и оплачивали товар или услугу, регистрировались, оставляли контактные данные, подписывались на рассылку, которая поможет превратить холодный лед в горячее. Если таких действий на сайте производится мало, то, соответственно, конверсия сайта низкая.

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

Но дизайн – это не только о красоте, это также о легкости навигации, позволяющей пользователю достичь определенной цели. Поэтому в этой статье рассмотрим самые главные как UX (проектирование), так и UI (визуал) элементы.

Расчет конверсии сайта и определение ее качества

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

Формула расчета конверсии: количество целевых действий делится на общее количество посетителей ресурса. Показатель показывает, как эффективно сайт выполняет свои задачи.

Для расчета используются инструменты аналитики, в Украине это Google Analytics. Чтобы работать с ними, необходимо установить счетчики на сайт и выбрать в кабинете инструмента нужные цели из 4-х категорий. Конверсия зависит от специфики бизнеса. Процент успеха для одних сфер может оказаться провальным показателем для других.

Хорошей можно считать конверсию, возвращающую инвестиции в сайт. Часто отдельные страницы могут давать 30-34%, что является реальной конверсией, которую можно получить. Достичь отметки 70% для страницы удается гораздо реже, так как для данного результата обычно необходимо привлечь много времени на тестирование дизайна, проработку контента, работу seo-специалистов и характер, когда тренды, точность оффера и температура аудитории сходятся в одной точке.

Навигация

По результатам исследований 2020 года агентством DIGIMATIX, 54% респондентов ответили, что визуальный дизайн сайта в меньшей степени влияет на решение о покупке, чем оффер, навигация и контент. При этом критерий навигации (количество шагов, страниц и кликов по сайту, в которых пользователю нужно разобраться, чтобы пройти путь к оплате или оформлению заказа) влияет с вероятностью 94%.

Исследование агентства DIGIMATIX, ноябрь 2020 год

Навигация помогает перемещаться по сайту и его разделам, находить нужные товары или информацию. Удобная система навигации сайта позволяет пользователям:

1. Быстро понять содержание предложения сайта или предлагаемые товары/услуги.
2. Просмотреть текущее местоположение на сайте (страница или раздел).
3. Перейти на просмотренные ранее страницы и товары.
4. Получить дополнительную информацию о компании.

Советы по улучшению навигации:

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

• Размещение навигации должно соответствовать общим паттернам поведения. Например, для пользователей обычно расположение гамбургер-меню в левом верхнем углу, а корзины – в правом верхнем углу. Экспериментируя с дизайном – учитывайте опасности.
• Используйте иконки рядом с пунктами меню. Это зрительно упростит и ускорит поиск нужного товара в каталоге сайта.
• На странице “Карты товара” главным целевым действием должна быть кнопка “Купить” или “Добавить в корзину”. Все остальные кликабельные элементы должны быть второстепенными по визуальной иерархии.
• Подумайте об иерархии на мобильных устройствах. Не забывайте, что элементы, на которые чаще всего кликают, должны быть удобно расположены для пальцев руки
• В карточках товарах размещайте блоки up-sales и cross-sales продаж. А также уже просмотренных и рекомендованных.

Адаптивность сайта

Хорошо проработанный сайт с протестированной адаптивностью стоит вложенных в него сил и средств, так как гарантирует полноценный охват аудитории.

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

Поисковые системы понижают ваш сайт в рейтинге, если он не соответствует понятию “mobile-friendly”.

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

Дизайн страницы карты товара

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

Снижение процента пользователей на этапе корзины

• Наполняйте страницы карты товара только высококачественными фото и видео.

По разным исследованиям критерий наличия качественных изображений товара является одним из самых главных при принятии решений о покупке. Для 44% пользователей этот фактор очень важен. 56% посетителей в первую очередь обращают внимание именно на фото товара и только затем дизайн страницы сайта.

Согласно исследованиям Wyzowl 2020 года, добавление видеообзора продукта помогает увеличить время пользователя на сайте и увеличивает количество продаж.

Прекрасным решением является использование 3D-обзора товара.

• Отзывы о товаре

Почти 95% покупателей читают онлайн-обзоры перед покупкой.

Товары, имевшие более 5 отзывов покупали на 270% чаще.

72% пользователей не осуществляют оформление заказа, пока не прочтут отзывы, хотя бы на сторонних ресурсах.

84% людей доверяют отзывам из Интернета.

Учитывайте в дизайне страницы наличие блока с отзывами, его видимость и наполнение.

• Кнопки CTA (Call to action)

Используйте прилипающие кнопки “Добавить в корзину” / “Купить” – так пользователь может скролить содержимое страницы и добавить товар в корзину в любой момент.

Кнопка “Купить”, прилипающая на сайте pampik.com

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

Эти идеи в дизайне взяты из nudge-маркетинга и широко используются на сайтах.

Уведомление об окончании остатков товара на сайте Rozetka.ua

Использование веб-форм на сайте

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

Рекомендации по дизайну форм:

1. Уменьшите количество полей до минимума. Оставьте только важные данные и это увеличит количество пользователей, которые дойдут до конца в несколько кликов. Идеальное количество полей – два: как обращаться к клиенту и почта или телефон.
2. Спрашивайте электронную почту – так вы сможете ненавязчиво напомнить о себе еще раз и предложить потенциальному клиенту что-нибудь действительно интересное.
3. Пообещайте клиенту, что будете посылать ему на почту только стоимостные специальные предложения, не спамя лишним и ненужным.
4. Обратите внимание, что персональные данные не будут разглашены посторонним лицам.
5. Главная цель – простота и удобство формы. Лучше запросить дополнительную информацию позже, чем не получить данные пользователя вовсе.

Подробнее о проектировании форм читайте в статье о формах регистрации на сайтах.

Негативное пространство сайта

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

Рекомендации по использованию отрицательного пространства:

1. Отделяйте отдельными блоками методы связи: телефоны, социальные сети, почту.
2. Не перегружайте дизайн. Позвольте и дизайну, и пользователю свободно дышать. Пустое пространство является важным элементом дизайна, как типография, цвет и изображение.
3. Разделяйте с помощью отрицательного пространства товар, фото и видеообзоры продукта и подробную информацию. Это обеспечит быстрый фокус и доверие к продукту и компании.

Негативное пространство группирует и разделяет отдельные блоки

CTA-кнопки

Правильная CTA-кнопка – один из важнейших элементов, влияющих на конверсию. От ее размера, расположения и содержания зависит, произойдет конверсионное действие или нет.

Чтобы найти наиболее эффективный вариант кнопки, советуем проводить A/B-тестирование и анализировать результаты. Меняйте цвет, шрифты, эффекты наведения, призывы к действию. Логичным завершением работы над CTA-кнопкой будет правильное содержание открывшейся формы: оно должно быть простым и понятным.

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

Кнопка, повысившая конверсию лендинга на 34%

Социальные доказательства

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

Исследование Data Insight и AliExpress 2020 года показало, что в 9 из 10 онлайн-покупок люди принимают решения с использованием отзывов, а для каждой 5-й покупки отзывы имеют решающее значение.

Не ленитесь собирать отзывы у своих клиентов и размещать их на сайте. Можно добавить на сайт виджет отзыва, например Google Отзывы. Демонстрируя отзывы реальных людей, вы повысите доверие компании и увеличите продажи.

Резюме

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

Хотим напомнить принцип Парето:

Чтобы достичь существенных улучшений с меньшими усилиями, определите 20% вашего сайта, которые отвечают 80% критическим показателям.

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

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