Почему твой лендинг не конвертирует: 8 частых ошибок в UX-дизайне и как их избежать

Продающая страница — очевидно — должна продавать. Что делать, если цель свою она не выполняет? Переделывать. Или сразу следовать нашим советам и верстать правильно. Рассказываем, как сделать лендинг по правилам UX-дизайна.

Гамбургер на десктопе

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

Чтобы сделать эффективный UX-лендинг, вынесли клиенту меню наверх.

Плохой фон для меню

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

Хорошо работает контрастная подложка.

Еще один пример из наших кейсов.

Hero Section не о том

Заходишь в онлайн-магазин обуви и первое, что видишь, — огромная картинка леса. Вместо задуманного чувства прекрасного появляется вопрос «Куда я попал?». 

Hero Section — это первый экран. Человек по нему должен понять, куда попал. Правильный первый экран лендинга UX помогает с этим в первые четыре секунды.

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

Слабые CTA

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

Первый блок киношколы. Сразу понятно, зачем нажимать на кнопку. P. S. UI-дизайн лендинга с отсылками на кинопроектор и камеру оценили?

Нет ценности

И снова гипотетически мы заходим на гипотетический сайт. Видим: огромными буквами название компании и… все. Опять непонятно, что происходит и почему нам стоит здесь остаться. На примере прошлого скриншота: было бы плохо, будь там только «Пушка». А с пояснением, что это киношкола, и текстом «Стань актером! Снимайся в кино» — хорошо и понятно.

Полотна текста

Мы все обленились и читаем большие тексты по диагонали — если целенаправленно не сели за книгу или полезную статью. Так что и в UX-лендинге нужно писать по делу и использовать заголовки с подзаголовками. 

При создании UX-лендинга добавь списки, раздели блоки.

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

Нет отзывов и кейсов

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

Еще один вариант — показать клиентов и рассказать, что для них сделал. Кейсы повышают доверие к компании.

Пример с кейсами. Пользователь может кликнуть на кнопку и узнать больше.

Раздражающая анимация

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

Используй анимацию дозированно и только чтобы подчеркнуть интерфейс или поставить акцент.

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

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