18 Января 2019

Разбор дизайна лендинга в целях повышения конверсии

О дизайне
Рустам А
Продуманный оффер производит хорошее впечатление

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

Однако при правильной стратегии на основе UX (пользовательского опыта) значительно проще оптимизировать лендинг для успешной рекламной кампании. Мы рассмотрим четыре концепции UX, которые направлены на то, чтобы воздействовать на пользователя с максимальной пользой.

Первое впечатление имеет значение!

Наличие четкого заголовка очень важно. Мне не совсем нравится обновленная домашняя страница Slack. Почему? Потому что там слишком много всего. Расширенная навигация, смещенный текст, две кнопки CTA (calltoaction– призыв к действию) - выглядит круто, но в целом воспринимается с трудом. Молчу про вращающиеся изображения на сайте.

К примеру, Coletiv использует прямо противоположный подход. Данный оффер выглядит смело благодаря цвету и выбору шрифта, а обрезанные изображения заставляют ваши глаза - и палец мыши - прокручиваться. Сайт небольшой; смысл и обращение к пользователю явные и прямые.

 

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

 

У них есть проработанный основной CTA и дополнительный для другого сегмента целевой аудитории. Этот пример действительно достоин внимания.

Наконец, давайте посмотрим на Pyrismic. Текст и форма заявки находятся слева - коротко, красиво и в самую точку. Графика не мешает новому посетителю воспринимать текст, что облегчает понимание того, что может предложить Pyrismic.

 

Краткость текста – путь к успеху.

Большинство людей не в восторге, когда приходится читать на сайтах параграф за параграфом. Это важный момент, так как зачастую посетители уходят с сайта уже спустя 15 секунд. Это говорит о том, что вы должны завоевать внимание пользователя посредством дизайна за короткий промежуток времени! В противном случае вы упустите момент. Конверсия сайта останется низкой, а показатель отказов будет высоким.

 

Каждый раздел целевой страницы Flexbe состоит из двух компонентов. Большое изображение и немного текста. Ничего не отвлекает внимание пользователя от формы заявки (подробнее об этом в следующем разделе.) То же самое относится и к целевой странице Bitcharge.

Несмотря на то, что текст кажется немного длинным, сами заголовки короткие. После оффера каждый заголовок состоит из трех коротких слов. Это пример лаконичного дизайна.

 

То же самое мы видим и на целевой странице Finery. Шрифт больше, тоньше и в нем больше пространств между буквами. Без всякого преувеличения можно сказать, что читается достаточно легко. Здесь дизайн позволяет изображениям «говорить» при появлении, благодаря этому текста требуется немного.

 

Каков вопрос – таков и ответ.

Постановка четкого вопроса через форму заявки имеет первостепенное значение. Если вы неправильно спрашиваете, вы упускаете шанс. Чтобы показатели конверсии были высокими (и другие показатели тоже), CTA (форма заявки) должен отображаться в нужном месте и с правильным запросом.

Очень жаль, что целевая страница для humaaans имеет всего две формы захвата. В общей сложности на сайте семь разделов, два из которых имеют большую кнопку с призывом к действию. Третий раздел - «Design the humaaan body» - содержит небольшую текстовую ссылку для перехода, которая не очень хорошо видна. В остальных разделах также не хватает форм заявок. Разделы, которые объясняют преимущества использования их библиотеки, могли бы конвертировать лучше при наличии в них CTA.

 

Details, фреймворк на Sketch, демонстрирует отличный пример использования различных CTA в зависимости от контекста рядом с кнопками. В оффере присутствует два СТА - для предварительного и для полного просмотра. Далее мы видим CTA для людей, которым нравится использовать SketchCloud - «Предварительный просмотр на SketchCloud». Наконец, в футере они предлагают купить продукт и здесь же второй CTA для людей, которые еще не определились.

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

 

 

На сайт DreamSupport, приложения для обслуживания клиентов, есть фиксированный CTA  «Свяжитесь с нами» в пункте меню. Он всегда на виду; как и в оффере.

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

 

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

Очистить путь к покупке

Unbouce дает определение лендинга как «отдельной веб-страницы, созданной специально для целей маркетинговой или рекламной кампании». То есть единственная цель лендинга – это  продажа одного продукта, вебинара или услуги. Это также означает, что на пути к конверсии пользователя не должно ничего отвлекать, в том числе дополнительные акции.

 

Давайте поговорим о домашней странице YellowCard. Это подходящий пример, т.к. они продают один продукт. Тем не менее, на сайте мы видим два совершенно разных CTA. Один для подписки - неясно, какая рассылка будет приходить с сайта о карте криптовалюты - и один для поиска магазина рядом с вами. В футере три разных CTA – один из которых также для поиска ближайшего магазина (рядом с формой контакта и опцией подписки).

 

Давайте посмотрим на те лендинги, где это реализовано правильно. LunarTheory продает печатные лунные календари; на странице нет ссылок, за исключением CTA с призывом к покупке. Лендинг короткий и информативный. Он показывает фотографии календаря на стенах. Единственная цель этого лендинга - заставить людей покупать календарь. Прямое обращение без отвлекающих элементов. Они никого не просят подписаться на обновления по электронной почте или почитать их блог.

 

Лендинг Blinkist’s

То же самое относится и к лендингу Blinkist’s. Он посвящен бесплатной пробной версии продукта. Что мне больше всего нравится в этом примере, так это то, что у них есть всплывающее окно, которое просит посетителей ввести адрес электронной почты для создания учетной записи, чтобы, как вы уже догадались, получить бесплатную пробную версию. Цель очевидна, но это отличный способ получения лидов с сайта.

 

Заключение.

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

Источник: designmodo.com
Перевод студии som.media