{"id":9132,"title":"\u041f\u043e\u0447\u0435\u043c\u0443 \u043a\u0430\u043d\u0430\u0434\u0441\u043a\u0438\u0435 \u043b\u044e\u0431\u0438\u0442\u0435\u043b\u0438 \u043a\u0432\u0430\u0434\u0440\u043e\u0446\u0438\u043a\u043b\u043e\u0432 \u043f\u043e\u043a\u0443\u043f\u0430\u044e\u0442 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0432 \u0420\u043e\u0441\u0441\u0438\u0438","url":"\/redirect?component=advertising&id=9132&url=https:\/\/vc.ru\/pochta\/325041-kak-kanadskie-lyubiteli-snegohodov-i-kvadrociklov-otkryli-dlya-sebya-rossiyu&placeBit=1&hash=cd54543b13c8a6083dd50d5669dab69e3e15e40792f9ed69859d5c8934b50d3d","isPaidAndBannersEnabled":false}
Дизайн
Мария Воробьева

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

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

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

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

Денис Константинович Гроза — 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% более реально: ниже на скринах покажем примеры таких сайтов.

Тест на сайте производителя катеров помог получить конверсию 34%.
Квиз на сайте дилера завода эковаты. Конверсия сайта достигала до 30%.

Какие элементы дизайна самые важные для конверсии? На что больше всего обращает внимание пользователь?

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

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

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

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

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

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

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

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

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

Калькулятор расчета стоимости на сайте транспортной компании.

Какое количество цветов и шрифтов оптимально для хорошего сайта?

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

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

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

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

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

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

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

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

Схема контрастных цветов на сайте ColorSheme.ru

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

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

Извлечение темы из изображения на сайте Adobe Color.

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

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

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

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

Какие иконки, фото и видео должны быть на конверсионном сайте?

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

Бесплатные иконки на Flaticon

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

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

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

Добавляйте на сайт видеоролики, рассказывающие пользователю о продукте. Согласно исследованию 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. Сайт должен быть удобен для посетителя и решать его задачу.

0
26 комментариев
Популярные
По порядку
Написать комментарий...

ЗКМ аж заболели глаза от кривости происходящего на скрине 

5

Евгений, про какой именно скрин из 3-х пишете?

0

Я думаю про все 3, они одинаково ужасны с точки зрения дизайна

4

Алексей, спасибо за Ваше мнение. Однако, конверсия после доработок увеличилась в 1,4 раза. Это уже говорит о том, что пользоваться сайтом стало удобнее и понятнее. Да, и думаю, у владельца не было цели победить в конкурсе "Золотой сайт" :) 

0

А если по сетке делать и уметь в отступы, то думаю не 1,4 раза, а 1,8 могло быть) Сейчас не о вкусовщине идет речь, объективно имеются проблемы

2

Евгений, спасибо, мне стало понятнее)

0

"мне интересно мнение специалистов: дизайнеров и маркетологов" кажется вам не очень интересно 

0

Интересно, потому и задала вопросы про скрин сайта "ЗМК"

0

Мария, спасибо. Статью добавила в закладки)

2

Благодарю, Ольга!)

0

Спасибо, информация полезна, пригодится многим дизайнерам!!!

2

Пожалуйста! Я рада, что полезно)

0

Отличная информация.В закладку!И подписка

2

Благодарю!)

0
Парадный каякер

"Экспертам" самим б не помешало пользоваться этими рекомендациями :-D

2

Они и пользуются, на проектах клиентов) Главное ведь, чтобы была польза для сайтов заказчиков. А ошибки, даже если они и есть, будут всегда ;-)

0

А что именно Вас смутило, можете написать?

0

Задумалась о том, что гениальный оффер может спасти ужасный дизайн. Спасибо за статью, любопытный примеры

1

Пожалуйста)

0

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

1

Александр, благодарю за обратную связь! Сайт может оценить маркетолог, эксперт из данной статьи. Передам Ваш контакт ему.
Я могу помочь только с текстами, если необходимо)

0

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

0

а мнение других пользователей?)

0

мнение других пользователей конечно, тоже) 

0

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

0

Скрин первого сайта это работа Евгения Малова

0
Читать все 26 комментариев
Аборты и эвтаназия — убийство, а геноцид с целью сделать всех счастливыми — правильно

Какие еще моральные суждения выносит искусственный интеллект?

Почему аренда самоката стоит как каршеринг и зачем отказываться от франшиз: интервью с главой Whoosh Дмитрием Чуйко Статьи редакции

До продажи бизнеса есть ещё «как минимум» два года, а пока Whoosh подумывает о запуске в Европе и учится сам собирать электросамокаты.

Сооснователь и гендиректор Whoosh Дмитрий Чуйко
Как шеврон стал хлястиком: бывший арт-директор «Яндекса» рассказал о создании брендинга «Яндекс.Станции Мини» Статьи редакции

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

VELES BLOG Рассказываем как себя вести, чтобы заработать с Veles
Использование YOLOv5 для задачи детекции

Ликбез по нейронным сетям

Как канадские любители снегоходов и квадроциклов открыли для себя Россию

«Важно найти свою нишу и быть готовым к тому, что ничего не получится».

Модемы, роутеры и интернет-центры Yota можно приобрести на Avito, OZON и «СберМегамаркет»
«Она похожа на соль — улучшит любое блюдо, если не переборщить»: как инженер-пианист создал гитарную педаль Big Muff Статьи редакции

Майк Мэтьюс бросил работу в IBM, чтобы дарить гитарам звучание, как у Хендрикса и The Rolling Stones, и придумал «золотой стандарт» педалей с искажением: её в своих записях использовали Pink Floyd, The White Stripes и Depeche Mode.

Майк Мэтьюс Vintage Guitar
Российско-швейцарская WayRay представила свой первый прототип электромобиля с AR-остеклением Статьи редакции

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

WayRay Holograktor WayRay
null