Всё для рекламы
и про рекламу
Навигация по статье
Что такое юзабилити лендингаТоп-4 ошибки юзабилити сайта Примеры успешных лендингов
О сайтах

Практические советы по улучшению юзабилити лендингов

2863

Что такое юзабилити лендинга

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

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

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

Топ-4 ошибки юзабилити сайта 

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

Нет акцента на главном экране

Мы с командой всегда, когда разрабатываем сайты, делаем упор на первый экран, потому что у нас есть всего 3-5 секунд, чтобы зацепить пользователя. За это время потенциальный клиент принимает решение, остаться на лендинге, скроллить и искать дальше или уйти.

Самые распространенные ошибки – экран перегружен (очень много кнопок, есть лид-форма, много текста) или он пустой и текст не отражает сути вашей компании и продукции. 

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

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

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

Пример хорошего экрана.

хороший первый экран лендинга

Это наш первый экран, мы его сделали в темном цвете, как и просил заказчик. Здесь, конечно, есть кнопки соцсетей, но они наверху. Есть УТП, оффер, акцентная кнопка и 3 плашки с преимуществами. Здесь мы выделили основные преимущества, чтобы сразу показать клиенту, что его ждет. И дальше мы уже начинаем подробнее описывать все эти преимущества.

Пример плохого экрана.

перегруженный первый экран лендинга

Кстати, такие сайты еще существуют. Здесь первый экран сильно перегружен.

Слишком много текста

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

Важные моменты:

  • Цифры считываются быстрее, чем буквы. Добавляйте конкретику с помощью цифр, например, вместо «гарантия качества» используйте «гарантия 3 года», вместо «недорогие мангалы» – «мангалы от 2 тысяч рублей» и т.п. 
  • Инструкции к товару лучше показывать в видео, а не тексте. В видео можно добавлять субтитры. Если вы вставляете видео, я не советую вставлять его с переходом на Ютуб, потому что человек может просто уйти с сайта, лучше использовать текст.
  • Разделяйте большой текст на блоки с инфографикой.

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

правильное оформление текста на лендинге

Отсутствие мобильной адаптации лендинга

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

Обязательно:

  • Проверьте формы обратной связи. Оптимальный размер, возможность легко выйти из формы.
  • Оптимизируйте скорость загрузки изображений. Это можно делать с помощью специальных сервисов, например, уменьшать вес картинки через TinyPNG. ВЫ можете сделать классный дизайн, но фон или другие элементы долго прогружаются, а люди долго ждать не будут и уйдут. 
  • При необходимости упростите форму обратной связи на мобильной версии или создайте квиз из нескольких вопросов. Квиз можно адаптировать и под десктоп, и под мобильную версию. И как пкоазывает наша практика, если человек отвечает на несколько вопросов в простом квизе, желание оставить контакты повышается. 

Отвлекающие факторы

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

Другие отвлекающие факторы: 

  • Сложная навигация сайта. Пользователю не понятно, в каком направлении двигаться дальше, чтобы узнать о товаре или услуге больше.
  • Форма захвата или лид-форма на главном экране. Они будут эффективны только в том случае, если решение о покупке товара принимается очень быстро и легко. Я рекомендую размещать форму захвата где-то в середине сайта и дублировать ее прямо в самом конце, перед подвалом. Очень эффективный прием – давать подарки за заполнение лид-формы, например, скидку.
  • Ссылки на сторонние источники и страницы сайта. Если вам нужно сделать переход с главной страницы на другую, обязательно добавьте возможность перехода на нее по кнопке. 

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

Примеры успешных лендингов

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

пример успешного лендинга

Что здесь хорошего:

  • 1 лендинг – 1 актуальное предложение.
  • На экране фото довольных клиентов (реальные люди, а не с фотостока). Поэтому пользователь подумает, что если эти люди обучились, то и он сможет.
  • Понятный заголовок и описание. 
  • Хорошее сочетание цветов, кнопка CTA хорошо выделяется на общем фоне. 
  • Блок контактов без отвлекающих кнопок.
  • Раскрыты преимущества продукта для клиента. Сразу пишем про стоимость, количество специальностей и т.д. 
  • Указана лицензия (это очень важно для образовательной ниши, потому что вызывает доверие).

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

пример успешного лендинга

Что здесь хорошего:

  • Заголовок сразу дает понимание, какую услугу оказывает компания.
  • Под заголовком оформлены 3 главных преимущества для клиента.
  • Изображение сертификатов привлекает к себе внимание пользователей.
  • Хорошо видна кнопка CTA для расчета стоимости + есть виджет обратной связи по таймингу от Jivo, чтобы задать вопрос и получить ответ. 
Хотите тоже написать статью для читателей Yagla? Если вам есть что рассказать про маркетинг, аналитику, бизнес, управление, карьеру для новичков, маркетологов и предпринимателей. Тогда заведите себе блог на Yagla прямо сейчас и пишите статьи. Это бесплатно и просто
Наталья Лебедева
2863
-1
Написать комментарий