Правила юзабилити

Аудит первого экрана лендинга: простые методы повышения конверсии сайта

Команда ConvertMonster

Команда ConvertMonster

Самый частый вопрос, который задают интернет-маркетологам, “как увеличить конверсию сайта”? На что обратить внимание? Специалисты отдела разработки агентства Convert Monster подготовили простой пошаговый аудит, который позволит быстро проверить ваш сайт и сформулировать новую гипотезу. Статья будет полезна начинающим маркетологам и собственникам бизнеса.

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

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

Визуальный чек-лист

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

grafik.png

Простой шаблон первого экрана - ваш визуальный чек-лист

Итак, из каких элементов состоит качественный первый экран:

  • Шапка: лого, короткое описание ниши, контакты, иногда меню
  • Самый крупный текстовый элемент – заголовок
  • Затем подзаголовок или маркированный список
  • Открытая или закрытая форма захвата (кнопка)
  • Фоновое изображение

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

Теперь обсудим содержание элементов по пунктам сверху вниз. У каждого из них есть важная функция и если она не выполняется, то работа всего лендинга сбивается.

Шапка (хедер) сайта

grafik1.png

Основная функция шапки – показать пользователю, что он находится в правильном месте. Для этого мы используем 2 элемента, один визуальный, другой текстовый, – логотип и дескриптор. Дескриптором мы называем короткое, емкое описание ниши в 3-5 словах плюс (опционально) одна выгода и геолокация. Например, «эконом интернет-магазин женской одежды» или «салон красоты на Бауманской».

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

Самая частая ошибка – перенос дескриптора в заголовок. Что происходит дальше: пользователи не видят разницы между вашим предложением и конкурентным (все работают в одной нише) и покидают страницу.

Оффер в заголовке

grafik2.png

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

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

Детально изучить тему офферов и посмотреть несколько проверенных скриптов можно в этой статье «10 примеров офферов на лендинге».

Подзаголовок, маркированный список, буллеты

grafik3.png

В подзаголовке и буллетах мы также делаем акцент на выгоды. Что именно (в цифрах и фактах) получит пользователь от сотрудничества с вами? Мы можем использовать факты о продукте, так и компании в целом (например, факты, связанные с сервисом). Ограничение - не стоит расписывать на целый абзац текста, достаточно 6-8 слов в предложении. Избегайте использования Сaps Lock в подзаголовках, это снижает читаемость длинных предложений. 

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

Еще одна частая ошибка связана с формулировками в текстах. В выгодах мы говорим не о себе (мы), а о клиенты (вы получите, вы сможете, вы научитесь и др.). Это называется «вы-ориентированные» формулировки.

Призыв к действию в форме захвата

grafik4.png

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

Призыв к действию – это четкая инструкция к действию в повелительном наклонении. Если вы начинающий маркетолог, то мы рекомендуем воспользоваться готовым скриптом призыва к действию: 

Глагол + бонус + дедлайн

Пример: Забронируйте место на конференции прямо сейчас и получите vip пакет участника в подарок!

Текст на кнопке: Забронировать место!

Самые частые ошибки:

  1. На 1-м экране вообще нет формы захвата

  2. Глагол в призыве не совпадает с текстом на кнопке

  3. Сложный следующий шаг (продажа «в лоб»)

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

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

Фоновое изображение

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

Проверьте, соответствует ли изображение на вашем первом экране любому из пунктов ниже:

  1. Изображение показывает характерную особенность продукта

  2. Картинка показывает процесс оказания услуги

  3. Показывает результат

  4. Фотография реального клиента

  5. Фотография медийной персоны компании

  6. Фотография-метафора (для продвинутого уровня)

Самые частые ошибки в подборе изображения:

  • стоковые изображения «счастливых людей», которые встречаются у конкурентов через одного;
  • видео на первом экране, которое долго загружается;
  • изображение неконтрастное по отношению к текстам на первом экране и они плохо читаются;

Как исправить ошибки?

Самый простой способ протестировать новые гипотезы – настроить A/B-тестирование. Чаще всего мы тестируем различные формулировки заголовков, но на практике вы можете проверить эффективность работы любого элемента из описанных выше. Если использовать специальные сервисы, например, VWO (есть бесплатный триал), то даже не понадобится подключать верстальщиков к процессу, можно настроить тест за пару минут самостоятельно. 

Вот короткий пример, как простые изменения в формулировку оффера дали колоссальный прирост конверсии на 480% в тематике «подарки»: 

Для того, чтобы провести эффективный А/Б-тест нужно:

  1. Выдвинуть гипотезу (используйте литературу, вордстат, банки готовых идей для тестов).

  2. Проверить ее при помощи опроса на коллегах и доступной вам целевой группе.

  3. Правильно настроить тест (при помощи сервисов по тестированию) и счетчик аналитики.

  4. Протестировать идею на большом объеме трафика (от 1000 кликов и выше).

  5. Проанализировать результат.

  6. Сделать оптимизацию конверсии цикличным процессом.

Как итог

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

Закажи юзабилити-тестирование прямо сейчас
Заказать
2547
Читать также