Как повысить конверсию сайта за счет дизайна и юзабилити

/ 30.05.2018
Час на читання: 13 хвилин
как повысить конверсию сайта за счет дизайна примеры

По данным исследования ученых Стэнфорда, 46% потенциальных клиентов составляют мнение о сайте на основании его внешнего вида и интерфейса. Если дизайн не нравится пользователю, то контент не вызывает доверия и пользователь покидает сайт.

Компания Landauer утверждает, учет юзабилити сайта с момента его создания повышает эффективность более чем на 700%. В этом материале рассмотрим, как повысить конверсию сайта за счет дизайна.

Содержание

Красивый дизайн — не значит эффективный
Используйте отрицательное пространство
Вызывайте доверие: живые фото и люди
Фокусируйтесь на конкретной аудитории
Приемы, которые повышают конверсию сайта
Проводите тесты, но правильно

что такое хороший дизайн сайта

Красивый дизайн — не значит эффективный

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

важность usability

Удобство важнее стиля

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

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

больше пустого пространства в дизайне

Используйте отрицательное пространство

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

Пространство отрицательное, но его роль крайне положительная. Оно фокусирует внимание пользователя на главном и помогает легче воспринимать нужную вам информацию.

Как использовать отрицательное пространство для управления вниманием пользователя:

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

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

как повысить доверие к сайту

Вызывайте доверие: живые фото и люди

Согласно результатам исследования Bright Local, 23% потенциальных клиентов более вероятно свяжутся с компанией, которая показывает лица своих сотрудников.

Людям интересны люди: живые фото, реальные истории и результаты. Рынок перенасыщен, клиенты избирательны. Чтобы они выбрали вас, будьте открытыми.

Поставьте себя на место потенциального клиента — это самый простой и очевидный прием, но его редко использует. Что вас цепляет, почему вы покупаете тот или иной товар, услугу? Что побуждает вас заплатить быстрее? Какие причины способствуют тому, что вы становитесь лояльным клиентом?

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

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

эмоции на фото с сайта

Покажите эмоции, которые вызывают ассоциацию с вашим брендом

В 1990-х годах итальянские ученые открыли зеркальные нейроны. Благодаря им мы автоматически переживаем те же эмоции, что и человек, на которого мы смотрим. Фактически, мы “отзеркаливаем” его.

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

Добавьте креатив

Согласно результатам исследования Skyword, контент с креативными образами в среднем получает на 94% больше просмотров.

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

Фокусируйтесь на конкретной аудитории

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

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

Применение дизайна для различной целевой аудитории

Для молодой аудитории до 25 лет создавайте яркий динамичный дизайн, добавляйте анимации, графику. Старшую аудиторию от 35 до 45 такие спецэффекты могут раздражать, избегайте их. Используйте нейтральные тона и классический консервативный стиль, если целевая аудитория привыкла к этому: сложные продукты, промышленность, специфический сегмент B2B.

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

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

Сосредоточьтесь на особенностях ваших посетителей. Создайте дизайн сайта, который максимально передает суть вашего предложенидложения и соответствует предпочтениям целевой аудитории. И помните, продуманный подход, тщательное изучение аудитории и тестирование разных вариантов позволяют нарушить привычные правила и добиться высокой конверсии. Как, например, разработчики LPGeneration заменили яркую кнопку на менее контрастную, что повысило конверсию на 10,94%.

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

Создавайте простые веб-формы

Это касается и регистрации, и заявки, и других элементов форм (заголовок, характеристики, кнопка). Разместите их далеко от других элементов на странице. Люди часто переключают внимание. Такой прием позволит быстро воспринять информацию и подтолкнет к положительному решению. Flat.io, например, отрицательным пространством обращает внимание пользователя на главном призыве к действию — войти при помощи Google-аккаунта или Facebook.

Показывайте выгоды с первого экрана

У вас есть 3 секунды, чтобы донести суть вашего предложения потенциальному покупателю. Создайте ассоциации с вашим товаром или услугой с помощью цвета, фотографий и шрифтов. Например, заголовок одного курса по продажам звучит так: “Научитесь “зажигать” свой отдел продаж на 100% отдачу  и повысьте чистую прибыль компании в 2,5 раза всего за 3 месяца”. Главная информация (“100% отдача” и “2,5 раза всего за 3 месяца”) выделена красным.

Формируйте четкую иерархию

Разбросанные элементы путают и сбивают с толку, от чего посетитель покидает сайт. Оформляйте информацию таким образом, чтобы потенциальный клиент мог отличить важное от второстепенного. Для того, чтобы элемент был более весомым — увеличьте его размер, яркость, добавьте анимацию. Визуальная подача любой страницы должна отвечать на вопросы: Что это такое? Как я могу это использовать? Зачем мне это нужно? Например. компания Zero Block использует 3 уровня в заголовках: первый — броские с приоритетной информацией, второй — менее яркие подзаголовки, по которым пользователь находит разделы сайта, третий — не выделяющиеся тексты, описания заметки.

навигация сайта

Упростите восприятие понятной навигацией

Закрепите панель навигации вверху сайта. Не создавайте на ней большое количество ссылок. На логотипе разместите ссылку на главную страницу. Добавьте точки для определение местонахождения. Показывайте процесс загрузки и прокрутки страницы. Добавьте кнопку навигации вверх. К примеру, как это сделали Tilda Publishing.

Используйте правило третей

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

Создавайте четкие заметные призывы

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

Используйте F-модель

Специалист по юзабилити Якоб Нильсен исследовал тысячи сайтов и вычислил, что пользователь воспринимает текст по F-модели. Самую важную информацию разместите в первых двух абзацах. Начинайте строку с ключевых слов, которые привлекают внимание. Тепловая карта Webdesigntuts+ подтверждает эффективность этой модели.

Применяйте схему Z для лендингов

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

Проводите тесты, но правильно

Обязательно используйте А/В тестирование. Его суть в том, чтобы демонстрировать посетителям сайтов различные варианты страницы.

  1. Перед началом теста определите параметры: доход, транзакции, цели, длительность сеанса, отказы, просмотры страницы.
  2. Обозначьте размер выборки.
  3. Создайте гипотезу на основе тепловой карты кликов или скроллинга и проверьте её на кнопках, заголовках, изображениях и формах.
  4. Тестируйте одну гипотезу в конкретный момент времени.
  5. После окончания теста проверьте значимость полученных результатов.

как повысить конверсию за счет дизайна

Что стоит запомнить

  1. Создавайте прежде удобный и функциональный дизайн.
  2. Используйте отрицательное пространство для фокуса внимания пользователя на главном.
  3. Размещайте живые фотографии на сайте для большего доверия потенциальных клиентов.
  4. Изучите покупателей и создавайте дизайн под их предпочтения.
  5. Создавайте простые веб-формы, показывайте выгоды с первого экрана, создавайте четкую иерархию и понятную навигацию, заметные призывы.
  6. Проводите А/В тестирование — демонстрируйте посетителям сайтов различные варианты страницы.

Часто мелкие детали играют важную роль для желаемого результата. Поэтому обязательно тестируйте разные гипотезы и грамотно подходите к A/B тестированию.

А какие фишки используете вы в дизайне собственных сайтов? Поделитесь собственными приемами в комментариях!

4,83
Загрузка...

Готові до стрімкого зростання?

Для цього я підготував спеціальні чек-листи

  • Контент-план для соцмереж на 30 днів
  • Перелік важливих Hard Skills Маркетолога
  • Список питань для визначення ЦА
  • Ключові етапи воронки продажів
  • Опрацювання образу клієнта
  • Чек-лист перевірки сайту


Подписывайтесь на telegram-канал Скромного Маркетолога

[contact-form-7 id="1458" title="Контактная форма 1"]

Готовы к более
стремительному росту
вашего бизнеса?

Для этого мы подготовили специальные чек-листы.

  • Все в порядке с вашим сайтом или лендингом и что стоит улучшить;
  • Какие есть ключевые этапы воронки продаж;
  • ТОП 10 лучших инструментов аналитики;
  • Блиц-тест проработки образа клиента (за 3 минуты).