Дизайн IT -Agency
7 545

Поднять конверсии на лендинге для привлечения сбережений с помощью дизайна

Разбираем первый экран.

В закладки
Аудио

Мы в IT-Agency много лет помогаем финансовым организациям привлекать сбережения.

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

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

Самое главное — первый экран

Оказавшись на первом экране, человек принимает решение: изучать условия дальше или уйти. На этом этапе надо его зацепить.

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

Что должно быть на первом экране

Вот из каких элементов состоит первый экран лендинга «Сберкома»:

  • логотип компании;
  • дескриптор, если непонятно, чем занимается компания;
  • телефон;
  • панель навигации в шапке, если лендинг длинный;
  • заголовок и УТП;
  • калькулятор;
  • понятная обратная связь в интерфейсе;
  • кнопка с призывом к действию — заявка или звонок;
  • время работы;
  • фоновая картинка.

Мы делим элементы на первом экране на две группы: информативные и конверсионные. Информативные объясняют, куда человек попал и что мы ему предлагаем. Конверсионные мотивируют оставить заявку: форма заявки, калькулятор, кнопки. Им мы уделяем основное внимание, потому что KPI лендинга — конверсии.

Разберём подробнее, как сделать так, чтобы конверсионные элементы конвертировали.

Заголовок объясняет, куда человек попал. Главное тут — чётко сформулировать посыл. В заголовке хорошо работает конкретика: тип услуги, условия, выгода, которую получит клиент. Например, хороший заголовок: «Сбережения в Москве до 22%».

Завуалированные названия вроде «Делаем выгодным ваше будущее» работают хуже, потому что читателю непонятно, что это. Возможно, он искал «Вклады в Туле», а получил «Выгодное будущее». Он, скорее всего, уйдёт с такого лендинга.

УТП нужны, чтобы сразу отстроиться от конкурентов и показать свои сильные стороны. Обычно их бывает сразу две–три штуки.

Один из вариантов — дать гарантии надёжности, но это выделит банк только на фоне недобросовестных конкурентов. Все добросовестные банки тоже покажут гарантии.

Чтобы выделиться и среди них, нужно показать какое-то преимущество, которого нет больше ни у кого. Например, один из наших клиентов сделал такое предложение: «Если вы решите сделать вклад у нас, мы пришлём за вами такси, чтобы вы с большими деньгами не ходили по городу».

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

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

Мы следим, чтобы текст и иконка хорошо считывались и не перебивали заголовок на разных экранах. Для этого размещаем их на чистом фоне.

Мы выбираем не больше трёх основных преимуществ, следим за длиной заголовка и убираем подзаголовки, чтобы не допустить визуальной каши.

Калькулятор

Сразу показывает, сколько клиент заработает со своей суммы на условиях банка. Например, вложил 3 млн рублей, получил 3,7 млн рублей — это должно быть видно сразу. Клиенту нужна конкретика.

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

Если клиенту сходу понятно, как пользоваться калькулятором, значит он хороший. В идеале нужно обратить внимание на такие детали.

  • Поле ввода с обратной связью. Обратная связь даёт понять, что одно действие можно сделать по-разному, как кому удобней. Можно подвигать ползунок или кликнуть в поле и вводить цифры с клавиатуры.
  • Понятная переключалка условий вклада. Она не выглядит, как кнопка, работает интуитивно понятно, в ней ничего не заедает.
  • Чистота. Всю техническую информацию, которая не важна для принятия решения, мы убираем с первого экрана в самый низ блока.
  • Понятный итоговый расчёт. Должно быть сразу понятно, когда и сколько денег получит человек за свои инвестиции. Здесь тоже нужна обратная связь — пользователь что-то двигает на калькуляторе, расчёт меняется сам.

Тест на взаимодействие с калькулятором показал, что конверсия из кликов в целевое действие выросла с 12% до 16%, цель 60 секунд — с 22% до 34% .

Кнопка «Оставить заявку»

Мы предлагаем человеку подтвердить своё желание стать клиентом или узнать больше о нашем продукте, поэтому предлагаем ему «Купить», «Скачать прайс», «Заказать звонок оператора». Одно из целевых действий лендинга — чтобы посетитель нажал на кнопку.

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

Сбережения — сложный продукт, поэтому в каждом отдельном случае мы смотрим на условия вклада, целевую аудиторию и задачи, а уже потом решаем, куда ставить кнопку.

Фоновая картинка

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

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

Тогда мы попробовали третий вариант — нашли на стоке картинку с пожилыми людьми, потому что большой сегмент целевой аудитории Горсберкассы — пенсионеры. Результаты подскочили. Картинка сработала лучше, чем деревья, и гораздо лучше, чем девушка за кассой.

Мы проверили три варианта фона. Победили пенсионеры — не тот вариант, на который мы ставили.

Мы сделали два вывода:

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

Как тестировать свои идеи

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

В идеальном мире надо тестировать значимые элементы по одному. Но в реальности у нас нет такого объёма трафика, чтобы сделать много достоверных тестов. Поэтому мы меняем сразу несколько главных элементов в комплексе, тестируем и — если работает лучше — выкатываем новую версию.

Возьмём проект для cr911.ru. Мы делали редизайн первого экрана. Перед переделкой мы выдвинули гипотезу: если поднять калькулятор и форму заявки на первый экран лендинга, то увеличится количество взаимодействий с калькулятором, а это увеличит конечную конверсию в коммуникацию.

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

До редизайна
После редизайна. Конверсии во взаимодействие с калькулятором выросли

Результаты теста:

  • когда калькулятор находится на первом экране, с ним взаимодействуют больше — конверсия выросла с 16,2% до 18,9%;
  • коммуникация в заявки выросла с 0,32% до 0,45% на новой версии лендинга.

Вывод

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

Мы тестируем свои решения, потому что верим цифрам, а не своему дизайнерскому вкусу.

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

С опытом мы набрали элементы, которые почти всегда нужны на первом экране, и поняли, как делать их правильно.

Вкратце:

  • В заголовке мы сразу показываем выгоду. Чем конкретнее предложение в заголовке, тем лучше для пользователя.
  • В шапке размещаем логотип, панель навигации, телефон и часы работы, кнопку с обратным звонком.
  • Внимательно работаем с конверсионными элементами. Посетителю должно быть сразу понятно, что с ними делать.
  • Убираем с лендинга всё лишнее — информации должно быть столько, чтобы её было просто воспринять и не отвлечься.
  • Фоновая картинка помогает пользователю понять, что это предложение для него. Подбираем её так, чтобы человек узнал на ней себя, свою жизнь или своё окружение.
  • Убеждаемся, что все элементы не перебивают друг друга и хорошо читаются на любых экранах.
  • Проверяем свои идеи A/B-тестами.

Рассказал Георгий Шевченко, записала Маша Терминасова, отредактировала Наташа Ганецкая, иллюстрации подготовил Георгий Шевченко.

Ещё по теме:

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "IT -Agency", "author_type": "self", "tags": [], "comments": 13, "likes": 38, "favorites": 133, "is_advertisement": false, "subsite_label": "design", "id": 60901, "is_wide": false, "is_ugc": true, "date": "Tue, 12 Mar 2019 14:57:38 +0300" }
{ "id": 60901, "author_id": 206046, "diff_limit": 1000, "urls": {"diff":"\/comments\/60901\/get","add":"\/comments\/60901\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/60901"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

13 комментариев 13 комм.

Популярные

По порядку

Написать комментарий...
3

У меня одного ещё на превьюшке зацепился глаз за "Работаем под контролем Центробанка Банка"?

Ответить
0

Спасибо, поправили

Ответить
3

"Мы тестируем свои решения, потому что верим цифрам, а не своему дизайнерскому вкусу."
Как часто было на vc: Мы подняли конверсию в 2 раза, а потом выходит что вместо одно заявки получили 2 заявки, и рекламный бюджет был 1000 рублей.

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

Ответить
2

А за счет чего платятся такие проценты, на чем вы зарабатываете?

Ответить
1

Так вопрос не им. Они всего лишь делают лендинги.

Ответить
0

Гуглите КПК

Ответить
0

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

Ответить
1

Полезно и годно, спасибо! Насчет ассоциаций с фото и т.д. - не совсем согласен. Подозреваю, что все проще, и дело в эмоции. Картинка, вызывающая положительную эмоцию, создает настроение и благодарность сайту за него. А возраст персонажей, да и их наличие - не главное, ИМХО.

Ответить
0

«Если вы решите сделать вклад у нас, мы пришлем за вами такси, чтобы вы с большими деньгами не ходили по городу»
Зачем напрягать вообще человека возить деньги?
Спросить адрес и место где хранятся деньги а ключ он положит под коврик и спокойно пойдет по своим делам ))

Ответить
0

Вот и настало время рекламы пирамид на vc...

Ответить
0

Анализ сайтов пирамид это конечно забавно!

Ответить
0

Да, посмотрел бы на конверсию, если бы ставка была 7-8% годовых, как в среднем по банковскому рынку. У МММ и без калькуляторов конверсия бешенная была.

Ответить
0

Посетители сайтов МФО на 80% - мобайл.
А вы сделали только десктоп версию...

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления
{ "page_type": "default" }