Библиотека инструментов для интернет маркетинга

Как UX/UI влияет на маркетинг и конверсию сайта

2024-07-19 11:15 Аналитика поведение пользователей сайта
Реклама может привести на сайт подходящего человека, но интерфейс определяет, сможет ли он разобраться в предложении и выполнить нужное действие. Если страница не отвечает ожиданию из объявления, меню запутывает, форма выдаёт непонятную ошибку или кнопка теряется на мобильном экране, часть оплаченного трафика не превратится в обращения.
UX/UI влияет на интернет-маркетинг через путь пользователя. Эту связь нельзя оценить по красоте макета. Нужны данные о переходах, действиях, заявках и их качестве.

Чем UX отличается от UI

UX, или User Experience, — весь опыт взаимодействия человека с сайтом. Сюда относятся понятность структуры, последовательность шагов, скорость работы, удобство выбора, заполнение формы и обратная связь после совершённого действия.
UI, или User Interface, — визуальная часть взаимодействия: типографика, цвета, кнопки, поля, карточки, изображения и состояния элементов.
UX и UI связаны, но решают разные задачи. Заметная кнопка относится к UI. Понятный результат её нажатия и отсутствие лишних шагов — к UX.
Выразительный визуал не исправит неверную структуру. И наоборот: логичный сценарий может плохо работать из-за слабого контраста, мелкого текста или незаметных элементов управления.

Где UX/UI встречается с интернет-маркетингом

Путь пользователя начинается ещё до перехода на сайт. Объявление, поисковый сниппет, публикация в социальной сети или карточка компании формируют определённое ожидание.
После перехода посадочная страница должна продолжить обещание.
Если реклама предлагает конкретную услугу, а человек попадает на общую главную страницу, ему приходится заново искать нужную информацию. Если в объявлении говорится о расчёте стоимости, а на странице нет цены, условий или понятной формы, возникает разрыв между ожиданием и содержанием.
Для каждого источника трафика нужно проверить связку:
запрос или аудитория → обещание → посадочная страница → целевое действие.
Подготовка посадочной страницы к рекламе подробнее разобрана в статье «Сайт и Яндекс Директ: как подготовить страницу к запуску рекламы».

Как UX/UI влияет на конверсию

Понятность первого экрана

После открытия страницы посетитель должен быстро понять:
  • что предлагает компания;
  • кому подходит предложение;
  • какое существенное условие нужно учитывать;
  • какое действие можно выполнить;
  • что произойдёт после нажатия на кнопку.
Заголовок должен называть предмет предложения. Дополнительный текст может уточнять формат работы, аудиторию, регион или состав услуги.
Абстрактные слоганы вроде «выходим за рамки возможного» не заменяют понятного объяснения. Человек ещё не знаком с компанией и пытается определить, попал ли он на нужную страницу.
Первый экран не нужно перегружать всеми преимуществами, тарифами, отзывами и несколькими кнопками. Его задача — помочь посетителю сориентироваться и перейти к следующему шагу.

Навигация и структура

Меню должно использовать слова, знакомые клиенту. Внутренняя терминология компании может быть понятна сотрудникам, но ничего не говорить посетителю.
Если одинаковые действия в разных местах называются по-разному, человеку приходится угадывать их назначение. Например, кнопки «Начать», «Получить решение», «Подключиться» и «Оставить запрос» могут вести в одну форму, но создавать впечатление разных действий.
Nielsen Norman Group относит соответствие языку пользователя, согласованность элементов, видимость состояния системы и предотвращение ошибок к основным принципам удобства интерфейса. Эти принципы описаны в официальном перечне эвристик юзабилити.
Когда компания предлагает несколько самостоятельных услуг, отдельные страницы помогают раскрыть условия каждой из них и привести посетителя к подходящей форме. Решение зависит от задачи бизнеса. Сравнение лендинга, многостраничного сайта и каталога есть в статье «Какой сайт нужен бизнесу».

Визуальная иерархия

Размер, контраст, расположение и свободное пространство должны показывать порядок чтения.
Если заголовок, изображение, баннер, карточки и несколько кнопок одинаково привлекают внимание, человеку приходится самостоятельно искать главное. Это увеличивает количество решений, которые он должен принять до целевого действия.
Хорошая визуальная иерархия помогает увидеть:
  1. Основное предложение.
  2. Важные условия.
  3. Подтверждения.
  4. Следующий шаг.
Минимализм не означает пустой экран. На странице должна остаться информация, необходимая для принятия решения. Задача дизайна — расставить приоритеты и сделать эту информацию понятной.
Анимация, 3D-элементы и нестандартные переходы могут поддерживать образ компании. Но они не должны задерживать появление содержимого, мешать прокрутке или перехватывать внимание у формы и кнопок.

Формы и сообщения об ошибках

Форма должна запрашивать только те данные, которые нужны на первом этапе общения.
Если для ответа достаточно имени и телефона, длинная анкета с должностью, городом, бюджетом и подробным описанием проекта может стать лишним препятствием. Дополнительные вопросы можно задать после первого контакта.
При этом сокращать форму до одного поля тоже нужно осторожно. Если менеджеру необходимо заранее понять выбранную услугу, добавьте короткий список или поле для комментария.
У формы должны быть:
  • понятные подписи полей;
  • указание обязательных данных;
  • подходящая клавиатура на мобильном устройстве;
  • объяснение ошибки рядом с проблемным полем;
  • сохранение уже введённых данных;
  • защита от повторной отправки;
  • подтверждение успешного действия;
  • объяснение следующего шага.
Не следует считать обычный клик по кнопке полноценной заявкой. Основную цель лучше фиксировать после успешной отправки формы, а её открытие считать промежуточным событием.
Определение целей, целевых визитов и конверсии приведено в справке Яндекс Метрики.

Мобильный интерфейс

Мобильная версия может терять заявки, даже если на компьютере сайт работает правильно.
Страницу нужно проверить на реальном телефоне, а не только в режиме предварительного просмотра конструктора.
Обратите внимание на:
  • первый экран;
  • раскрытие меню;
  • размеры кнопок;
  • поля формы;
  • номера телефонов;
  • таблицы;
  • всплывающие окна;
  • виджеты;
  • закреплённые элементы;
  • горизонтальную прокрутку;
  • сообщения об ошибках.
Экранная клавиатура не должна закрывать кнопку отправки. Всплывающий блок не должен перекрывать всё содержимое без понятной возможности его закрыть. Телефон и адрес должны оставаться доступными для нажатия.

Доступность

Доступность сайта помогает большему количеству людей прочитать содержание и выполнить действие.
Речь идёт не только о пользователях программ экранного доступа. Слабый контраст может мешать человеку на ярком солнце. Маленькая кнопка неудобна на телефоне. Форма без подписей полей сложнее для любого посетителя.
Стандарт WCAG 2.2 охватывает:
  • текстовые альтернативы изображениям;
  • контраст;
  • увеличение текста;
  • работу с клавиатуры;
  • видимый фокус;
  • понятные заголовки и подписи;
  • достаточный размер области нажатия;
  • помощь при вводе;
  • объяснение ошибок;
  • предсказуемую навигацию.
Проверочные критерии собраны в официальной памятке W3C по WCAG 2.2.

Скорость и стабильность страницы

Пользовательский опыт начинается до первого клика. Если основной блок долго появляется, интерфейс поздно реагирует или элементы смещаются во время загрузки, человек может прервать сценарий.
Google использует Core Web Vitals для оценки трёх сторон взаимодействия:
  • LCP — скорость появления основного содержимого;
  • INP — отзывчивость интерфейса;
  • CLS — визуальная стабильность страницы.
Актуальные определения и рекомендуемые показатели опубликованы в документации Google Web Vitals.
Для первичной проверки можно использовать PageSpeed Insights. При наличии данных реальных пользователей ориентируйтесь и на них: лабораторный тест не всегда повторяет реальные условия.
Начинать стоит с проблем, которые видит посетитель:
  • уменьшить вес изображений;
  • не загружать тяжёлое видео без необходимости;
  • проверить сторонние скрипты и виджеты;
  • резервировать место под изображения;
  • убрать анимацию, блокирующую взаимодействие;
  • повторно протестировать формы после оптимизации.

Как понять, что проблема находится именно в UX/UI

Низкая конверсия ещё не доказывает, что сайту нужен редизайн. Сначала разделите путь пользователя на этапы:
  1. Переход на страницу.
  2. Просмотр предложения.
  3. Переход к подробностям.
  4. Открытие формы.
  5. Успешная отправка.
  6. Получение заявки менеджером.
  7. Квалификация обращения.
  8. Продажа.
Затем сравните данные по источникам, страницам и устройствам.
Если один источник приводит много нерелевантных посетителей, сначала проверяйте рекламу и поисковые запросы.
Если люди читают страницу, но не находят следующий шаг, вероятная проблема находится в структуре или призыве к действию.
Если форму открывают, но почти не отправляют, проверьте количество полей, ошибки и мобильную версию.
Если форма отправляется, но заявка не поступает менеджеру, проблема находится в интеграции или уведомлениях.
Если обращения приходят, но большинство не подходит компании, нужно сверить рекламу, предложение, условия на странице и критерии квалификации.
Подробный порядок такой диагностики есть в обновлённой статье «Как повысить конверсию сайта».
Проблемы, возникающие уже после отправки формы, отдельно разобраны в материале «Где теряются заявки с сайта».

Как проверять UX/UI без полного редизайна

Начать можно с одной важной страницы и одного целевого сценария.
  1. Проверьте настройку основной и промежуточных целей.
  2. Выберите страницу, которая получает значимую долю трафика.
  3. Определите действие, к которому должен прийти посетитель.
  4. Пройдите этот путь на компьютере и телефоне.
  5. Изучите воронку и записи визитов.
  6. Проверьте реальные заявки и вопросы клиентов.
  7. Зафиксируйте конкретные препятствия.
  8. Исправляйте их по одному.
  9. Сравнивайте результат на сопоставимом трафике.
Для каждой проблемы желательно указать подтверждение. Например: «На мобильном экране кнопка закрыта виджетом» или «Пользователи открывают форму, но прекращают заполнение на поле с реквизитами».
Формулировка «страница выглядит устаревшей» сама по себе ничего не говорит о влиянии на маркетинг. Нужно объяснить, какое действие затруднено и чем это подтверждается.
При небольшом трафике A/B-тест может долго не набирать достаточно данных. В такой ситуации разумнее исправлять очевидные технические и интерфейсные ошибки, изучать записи визитов и последовательно проверять крупные гипотезы.
Не меняйте одновременно структуру, заголовок, форму и рекламу. Даже если результат изменится, определить причину будет сложно.
После этого раздела размещаем рекламный баннер Вайтиру.

Распространённые ошибки UX/UI

  • Первый экран не объясняет предложение.
  • Объявление и посадочная страница обещают разное.
  • Главное действие конкурирует с несколькими кнопками.
  • Меню построено на внутренней терминологии компании.
  • Важные условия скрыты до формы.
  • Ссылки и кнопки выглядят одинаково.
  • Поля не объясняют формат ввода.
  • Ошибка появляется без способа её исправить.
  • После отправки нет понятного подтверждения.
  • Мобильная версия проверена только в редакторе.
  • Всплывающее окно закрывает содержимое.
  • Анимация задерживает доступ к информации.
  • Редизайн оценивается по просмотрам, а не по заявкам.
  • В качестве доказательств используются неподтверждённые отзывы и цифры.
Реальные отзывы, кейсы и примеры работ помогают принять решение, если относятся к конкретному предложению. Как использовать такие элементы без искусственной убедительности, рассказано в статье о социальных доказательствах на сайте.

Что должен дать UX/UI-аудит

Результатом полезного аудита становится не перечень вкусовых замечаний, а связь между проблемой, сценарием пользователя и показателем бизнеса.
Для каждого пункта нужно указать:
  • страницу или элемент;
  • наблюдаемую проблему;
  • затронутый сценарий;
  • возможное последствие;
  • подтверждение;
  • приоритет;
  • предлагаемое изменение;
  • способ проверки результата.
После аудита должен появиться понятный порядок действий: что сломано, что мешает большинству посетителей, что можно исправить быстро и что требует отдельного исследования.
Если проблема находится не только в интерфейсе, дополнительно потребуется анализ целевой аудитории и конкурентов или базовый анализ бизнеса.
UX/UI помогает маркетингу, когда дизайн продолжает обещание рекламы, отвечает на вопросы посетителя и подводит его к измеримому действию. Поэтому оценивать сайт нужно вместе с источниками трафика, аналитикой, заявками и работой отдела продаж.
Вайтиру рассматривает сайт как часть общей системы продвижения. Обсудить аудит или доработку сайта можно на главной странице Вайтиру.