Какие элементы дизайна повышают конверсию сайта: примеры и советы экспертов

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

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

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

Денис Константинович Гроза — UX-специалист, digital-маркетолог Grozaproject,

Анна Пономарева — руководитель студии по разработке и продвижению сайтов AdelfoStudio,

Рената Абайдуллина — руководитель группы маркетинга и лид-менеджмента компании ICL Services.

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

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

Анна Пономарева, руководитель «AdelfoStudio», отталкивается от своего опыта: «Конверсия зависит от ниши в бизнесе, конкуренции в этой сфере, сезонности продукта. Например, на сайтах по продаже шин в январе-феврале конверсия составляет 0,5-0,8%, а к сезону она может достигать 5%. Это относится и к подарочным и праздничным товарам. На сайтах цветочных салонов в праздники конверсия достигает 8%, тогда как в обычные дни она составляет 2-3%».

Рената Абайдуллина из компании «ICL Services» считает, что конверсия интернет-магазина и конверсия корпоративного сайта будут отличаться: «Цели у данных сайтов разные: то, что для одних успех, для других будет провалом. Не стоит рассчитывать на среднюю температуру по больнице. Стоит оценивать конверсию и, соответственно, ставить цели, которые основываются на вашей целевой аудитории, покупательской способности, средней продолжительности цикла сделки, сложности процесса продажи и так далее.»

Комментирует Денис Гроза из «Grozaproject»:

«Хорошей можно считать конверсию, которая возвращает инвестиции в сайт. А в идеале отдельные типы страниц способны давать конверсию 30-70%. Они называются multi-quiz. Это не просто квиз (онлайн-опрос), это сайт квиз, с проработанной анимацией и картинками. Своего рода геймификация. Если проработать семантику и точечно под запрос выдать нужную страницу с точным оффером, то процент отклика становится высоким. Чтобы достичь конверсии в 70%, должны сложиться «звезды», тренд, температура аудитории (обычно горячая аудитория) и точность оффера.»

Получить конверсию 30-34% более реально: ниже на скринах покажем примеры таких сайтов.

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

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

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

К мнению коллеги присоединяется Денис Гроза: «Если брать элементы дизайна, то важными являются фон и кнопка. А самый главный элемент сайта — это оффер. Для некоторых аудиторий может быть ужасным дизайн, но хороший оффер даст хорошую конверсию.»

«Например, на скрине ниже ужасный дизайн, но оффер сделал своё дело. Потому что целевой аудитории пофиг, что там за дизайн, она увидела решение своей проблемы в оффере. И тут красивый трактор её скорее отпугнул бы. Но это гипотеза, которая сработала.»

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

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

Анна Пономарева важными элементами считает наличие контактов на видном месте, фотографий и видео товаров: «Для хорошей конверсии должны быть хорошо видны удобные способы связи: телефоны, WhatsApp, социальные сети. Также доступно и понятно показан товар, фотографии товара, видеообзор продукта. Чем больше информации, тем больше доверия у пользователя.»

Большую роль, по мнению Анны, играют полезные сервисы: «На конверсию хорошо влияют калькуляторы расчета/подбора продукта. После расчета пользователю предлагается заполнить форму контакта. Главное, чтобы дальше менеджер оперативно связался.»

Цветовая схема способна вызвать у пользователя нужные эмоции: доверие, радость, энергию или расслабление.

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

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

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

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

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

Фон сайта должен контрастировать с текстом, заголовками и другими важными элементами. Выделите цветом кнопки и призывы к действию на странице.

Для определения контрастных друг другу цветов используйте цветовые круги. Их можно подобрать на сайтах: Adobe Color и ColorSheme.

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

Adobe Color удобно использовать и для извлечения цветовой темы или градиента из любой картинки. Просто перетащите или загрузите её в нужной вкладке и вы получите названия цветов.

На сайте не должно быть большого количества цветов, чтобы не раздражать людей. Комментирует Денис Гроза: «Цветовая гамма зависит от цели сайта и целевой аудитории. Для обозначения акцентов достаточно 3-5 цветов.»

Что касается шрифтов, эксперты советуют использовать не больше трёх: 1-2 для заголовков, другой для основного текста.

Шрифт должен быть гармоничен по отношению к общему дизайну сайта. Не используйте декоративные и рукописные шрифты: главное правило — удобство для клиента.

Денис Гроза отмечает, что шрифты зависят от продукта и услуги, но читаемость на первом месте всегда: «Заезженные шрифты, в который скоро превратится Roboto, хотя сейчас он работает как нативный, скорее отторгают. Какие альтернативы ему можно рассмотреть? Мне нравится Mont, но посоветую Montserrat. Там огромное количество начертаний для кириллицы и смотрится классически. Второй, из "на попробовать", я бы выбрал PT Root UI, выглядит со вкусом.»

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

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

Исследования Baymard показали, что 56% посетителей при переходе на страницу продукта сначала обращают внимание на фотографии.

Если необходимо, берите качественные фото с бесплатных стоков:

• Pexels
• Unsplash
• StockSnap
• Little Visuals
• Gratisography
• Kaboompics
• Picjumbo

Добавляйте на сайт видеоролики, рассказывающие пользователю о продукте. Согласно исследованию Wyzowl в 2020 году, 83% маркетологов сообщают, что видео помогло увеличить среднее время посетителя на странице, а 78% маркетологов отмечают, что видео напрямую повлияло на увеличение продаж.

Digital-маркетолог Денис Гроза обращает внимание, что видео должно быть подходящим: «Видеоролик может сыграть на конверсию, если он в тему. Если ролик не понятен пользователю, он может сыграть отрицательно.»

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

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

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

«Виджеты отзовиков только в плюс, больше 100 отзывов на 4.5+ могут решить больше чем скидка», — говорит Денис Гроза.

Комментирует Анна Пономарева: «Своим клиентам я рекомендую добавлять сертификаты, лицензии, отзывы. Это повышает уровень доверия не только пользователей, но и поисковых систем, и положительно сказывается на позициях сайта в Яндекс и Google.»

Да, если хотите, чтобы от сайта была хорошая отдача. К крючкам захвата относятся формы и виджеты:

• всплывающая форма с обратным звонком;

• подписка на полезную рассылку или информирование об акциях;

• предложение получить скидку в обмен на почту;

• окно онлайн-консультанта;

• онлайн-калькулятор;

• форма для заявки;
• таймер обратного отсчета.

Анна Пономарева делится: «Онлайн-консультант уже плотно вошел в нашу жизнь, он повышает конверсию на сайте, если человеку быстро ответили.»

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

Большую значимость для конверсии имеют формы обратного звонка и калькуляторы:

«Всё работает хорошо и по-своему. Плохой, воткнутый левой ногой, чат скорее всего не принесет конверсий. Таймеры обратного отсчета, которые все любили вставлять после курсов одной известной инфокомпании, стали слишком для людей. Обратные звонки отлично себя показывают, как и калькуляторы», — считает Денис Гроза.

Чтобы не раздражать нового посетителя сайта, pop-up окна должны появляться не сразу, а после того, как пользователь провел на сайте определенное время: при прокрутке страницы на 50-70% или на 2-3 минутах.

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

На вопрос «Сколько форм захвата должно быть на странице?» отвечает Денис: «Столько, сколько нужно. От 2-х до бесконечности. Оптимально по 1 форме на 2 блока. Это зависит от длины сайта и количества страниц.»

Чем меньше полей в форме, тем лучше для конверсии — пользователю не придётся тратить время на их заполнение и он не бросит на середине. Для подписки на email-рассылку вполне хватит только адреса электронной почты и имени. А для формы обратного звонка — номера телефона и имени посетителя. Работу по обработке и консультированию лида должен взять на себя менеджер по продажам.

Рассмотрим это на конкретных сайтах, над которыми работал UX-специалист и digital-маркетолог Денис Гроза вместе с командой Grozaproject.

Сайт российского завода металлической мебели — «ЗМК»

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

Что нами было сделано:

• более понятные сочные картинки по каждому направлению;

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

В итоге заполнение корзины повысилось в 2 раза. Общая конверсия интернет-магазина увеличилась в 1.4 раза. Все работы в сумме длились 2 недели.

Сайт театра-музея «Булгаковский Дом» в Москве

Стояла задача сделать сайт удобным для пользователя.

Какие работы были проделаны:

• разбили главный блок на 3 направления, с возможностью для новых посетителей сначала больше узнать о каждом направлении, прежде чем покупать билет;
• вынесли на видное место вверху календарь мероприятий и покупку билета, как самые востребованные действия;
  
• добавили дескриптор, что вообще за сайт и чему посвящен;
  
• добавили адрес, как востребованную информацию для оффлайн тематики, тем более такого уровня;
  
• расписание театра по очередности было расположено на главной странице, чтобы его не искать. Раньше тут были новости, которые были интересны 22% входящего трафика. Расписание мероприятий вызвало большую просматриваемость страницы;
  
• новости для искушенных оставили внизу;
  
• добавили на сайт элементы из самого музея-театра: кот-бегемот, партер Булгакова, обои из подъезда. Побывав в музее, человеку будет нативно находиться на сайте, и, наоборот, новый человек с сайта, зайдя в сам музей, почувствует, что он уже там был;
  
• рядом с описанием каждого спектакля добавили кнопку «купить билет».
  

Что произошло после доработок:

• почти всё количество оплат перешло в онлайн формат. Раньше это сделать было довольно проблематично, пользователю было тяжело найти, как оплатить на сайте;
• снизились очереди на одной кассе;
  
• количество продаваемых билетов поднялось на 17%.
  

1. Помните об отрицательном пространстве. Его задача — делать акцент на важных вещах: оффере и CTA-кнопке.

2. Чем больше информации о товаре (качественных фото и видео, отзывов), тем больше к нему доверия.

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

4. Меньше — лучше: используйте не больше 3-х шрифтов и до 3-5 цветов на сайте. Иконки должны быть в одном стиле.

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

6. Отслеживайте конверсию сайта с помощью инструментов аналитики: Яндекс.Метрики и Google Analytics.

7. Используйте результаты статистики для тестирования разных офферов и кнопок, шрифтов и фонов.

8. Сайт должен быть удобен для посетителя и решать его задачу.