• Июль 9, 2019

Как сделать лэндинг для продвижения необычной услуги?

Кто он - Ваш клиент?

Пора разобраться!

С Вами вновь рубрика «Анализируем Landing Page» и сегодня мы поговорим о том, как сделать лэндинг для продвижения такой необычной услуги, как приглашение зарубежного певца для участия в различных мероприятиях в России.

Как и всегда рекомендую перед чтением разбора перейти на сайт rollesmusic.ru и составить о нём своё собственное мнение. А потом уже сравнить его с моим.

И, конечно, пишите в комментариях о том, что совпало, а с чем Вы не согласны. Интересно Вам чтения, приступаем!

Общее впечатление

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

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

Из виджетов установлен онлайн-консультант от Onicon:

Онлайн-консультант от Onicon

Я с ним раньше не работал и на первый взгляд он мне показался довольно функциональным, хотя и несколько переусложнённым:

Функционал онлайн-консультанта

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

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

Из мелких замечаний — фавикон вроде бы есть… Но по факту его нет:

Фавикон на лэндинге

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

Первый экран

С первого взгляда мне первый экран понравился:

Первый экран лэндинга

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

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

А так — мероприятие присутствует (хотя, возможно, и не то, которое ищет конкретный посетитель), певец на заднем плане есть. В целом, повторюсь, мне первый экран нравится.

Давайте теперь пройдёмся по деталям. Начнем с элементов шапки:

Элементы шапки сайта

Как Вы думаете, что это за значки? Если присмотреться, то становится понятно, что это социальные сети. С первого взгляда я их вообще не заметил. Со второго — не понял, что это соцсети.

Вообще, левый верхний угол сайта — традиционное место для размещения логотипа. Поэтому и иконки я сначала воспринял как логотип. Тем более что выглядят они нестандартно и из-за этого «не читаются».

Очень важно, чтобы элементы сайта были интуитивно понятны для посетителей. Слева наверху — логотип. Иконки соцсетей — в привычном исполнении (особенно — если они расположены на непривычных местах, да ещё и такие мелкие).

Впрочем, должен оговориться, что в мобильной версии сайта шапка выглядит нормально, замечания касаются только десктопной версии:

Шапка в мобильной версии лэндинга

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

Подзаголовок «Живой коктейль стильной музыки» мне кажется не очень понятным. Некое сочетание не самых сочетаемых слов. Почему коктейль — живой? Где этот коктейль находится? Я бы поработал над текстом, сделал его более понятным.

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

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

Фотография с водяным знаком

В общем, хорошее решение, вопросов нет.

Теперь посмотрим на правый верхний угол:

Правая часть сайта

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

Оставляем в покое шапку сайта и переходим к основному содержанию первого экрана лэндинга:

Основная часть первого экрана сайта

Видим 3 основных элемента — заголовок, подзаголовок и кнопку. Давайте разбираться по порядку.

Заголовок

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

Вспомните баннеры, которыми увешаны наши улицы. Именно они чаще всего грешат словами «лучший», «первый», «№1 среди…» и так далее. Правда, после этих слов обязательно следует звёздочка и мелкий-мелкий текст внизу.

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

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

В результате у них возникает закономерный вопрос: «Если Rolles — лучший, то как быть с Ed Sheeran, Drake, Yxng Bane или Bruno Mars?». А если человек задумался и начал искать подвох, то всё, заголовок не сработал!

В общем, я понимаю, зачем использовано слово «лучший». Но считаю, что его стоит либо конкретизировать, объяснив, в чём именно Rolles — лучший, либо заменить на какое-то слово, не вызывающее внутреннего диссонанса у посетителей сайта.

Да, и перед тире пробел пропущен, нужно его вернуть.

Кстати, заголовок очень подходит для мультилэндинга — он ведь у Вас настроен в зависимости от типа мероприятия, на который ищут исполнителя, правда?

Подзаголовок

В чём задача подзаголовка? По аналогии с заголовком? Правильно, заставить посетителя двигаться по сайту дальше. Справляется ли с этой задачей подзаголовок «Latino, House, Lounge, Pop музыка в авторском исполнении»?

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

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

Это значит, что первому экрану нужно уделить максимум внимания, каждый его элемент должен преследовать одну цель — заинтересовать! А с такой ролью информационный подзаголовок вряд ли справится.

Кнопка с призывом

Следующий элемент — кнопка с призывом «Получить 3 варианта шоу-программ».

И вновь — вопрос. Что за шоу-программы? Откуда они взялись? Да ещё и с вариантами? Опять загадки. А ведь продающий сайт должен быть очень чётко выстроен, особенно в том, что касается призывов. Вопросы они должны вызывать только в том случае, если это специально заложено в идею призыва. Например: «Узнайте, как мы сделаем Ваше мероприятие уникальным!»

В этом же случае вопрос возникает из-за того, что в призыве использована информация, о которой посетитель сайта просто ничего не знает.

Исправить это, кстати, довольно просто. Достаточно написать про шоу-программы в подзаголовке. Тогда и призыв окажется на своём месте.

Форма сбора контактов

Представим, что призыв нас заинтересовал, и нажмём на кнопку:

Форма сбора контактов на первом экране лэндинга

Заголовок продолжает призыв на кнопке, и это правильно. А вот дальше уже не всё так хорошо.

Зачем нужно запрашивать телефон? Как Вы по его номеру отправите программы? СМСкой что ли? Опять вопрос вместо ответа. Если Вы просите указать телефонный номер, то такой запрос нужно обосновать.

Например, на него можно выслать пароль от архива с программами. Или позвонить и уточнить, какие именно варианты программы интересны. Или придумать ещё что-то.

Значительная часть активных интернет-пользователей прекрасно понимает, что по указанному номеру позвонит продавец и будет что-то продавать. А этого никому не хочется. Поэтому просто указывает некорректный номер. Чтобы получить реальный номер — необходимость его указания нужно обязательно обосновывать!

И кнопка отправить. Отправить — что? Очевидно, что телефон, указанный в поле. Но, опять же: зачем? Зачем мне его отправлять? Я же получить хотел!

В общем, между призывом, заголовком и кнопкой должна быть чёткая связь: предлагаем получить — просим сделать что-то, чтобы получить — даём возможность выполнить действие для получения. Бинго!

Корректность работы формы

Давайте проверим, как работает форма. Маски в ней явно не хватает:

В форме для ввода телефона отсутствует маска

Проверки на корректность номера — тоже:

Корректность ввода номера не проверяется

И, конечно, моё любимое «ближайшее» время… Не могу понять, почему всем так нравится эта фраза?

Преимущества

Последний элемент первого экрана — это преимущества:

Преимущества на первом экране лэндинга

В целом, неплохой блок. Если не считать большого количества ошибок… Их много. Для первого экрана — слишком много. Одни «фестивли» чего стоят… Остальные предлагаю найти самим, пусть будет некий мини-квест. Их ещё от 3 до 8 штук (в зависимости от того, кто и что считает ошибками), так что будет чем заняться!

И ещё хотелось бы видеть большую конкретику в заголовках. «Качественный», «незабываемые», «разнообразные» — это не конкретно. Да, конкретика есть в текстах. Вот только принцип здесь прежний: не заинтересовал заголовок человека — текст он читать не будет. Не забывайте об этом!

Основная часть лэндинга

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

Варианты шоу на дэсктопе

Варианты шоу на мобильной версии сайта

А вот вторая половина в дэсктопной версии оказалась сильно перекошена:

Некорректная вёрстка блока с вариантами шоу

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

В текстах есть ошибки и лишние пробелы, но в целом особых вопросов у меня не возникло. Фото кликабельные, но с первого взгляда это непонятно. Если честно, даже при подробном изучении сайта я об этом сразу не догадался. Уже разбирал следующий блок — и подумал: а можно ли увеличить фото? Вернулся — и обнаружил, что можно!

Зато кнопка смутила. Если Вы предлагаете посетителю сайта совершить заказ, то это означает, что он уже получил всю необходимую информацию. А это не так. Органичнее здесь смотрелись бы призывы «Узнать подробности», «Скачать программу» или «Узнать стоимость».

Всплывающее окно тоже вызывает вопросы:

Поп-ап в блоке с вариантами шоу

Если при запросе программ электронный адрес не спрашивали, то тут, напротив, его уточняют. А зачем? Что должно на него прийти человеку, который уже сделал заказ? Все прочие ошибки из первого поп-апа тоже никуда не делись.

Потерянная кнопка

А вот и так кнопка, которая логично смотрелась бы в блоке, речь о котором шла выше:

Кнопка, которая покинула своё место на лэндинге

Только почему-то тут она просто висит в воздухе. Заголовок (без призыва) и кнопка. Странное разделение…

Поп-ап не соответствует тексту на кнопке:

Текст на поп-апе не совпадает с текстом на кнопке

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

Не понравилась и навигация между слайдами:

Плохо исполнена навигация в блоке

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

Видео с шоу

Следующий блок вновь лучше подходит для мобильной версии, а на десктопе смотрится странно:

Блок с видео в десктопной версии выгляди недоработанным

Думаю, стоит разместить видео по 2 в ряд, чтобы не получалась вот такая «колбаса».

У блока отсутствует продающий заголовок, разный формат названий видеороликов… Ощущение такое, что его делали в спешке и просто не довели до ума. Рекомендую это исправить.

Цифры ради цифр

Достижения в цифрах:

Как сделать на лэндинге блок с достижениями

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

Например, 3,5 года — это 1.278 дней. То есть даже если выступать каждый день, то всё равно нередки случаи, когда в день выходило больше одного мероприятия. Это уже работа на износ получается…

1.500 мероприятий, более 30.000 часов спето. Да это же по 20 часов на мероприятие! Ни в какие 3,5 года не уложишься, там всего-то 30 с небольшим тысяч часов. Что-то не так, в общем.

И, традиционно, нет продающего заголовка. А ещё «более 10» — это не конкретика. Ведь 11 или 12 написать не сложно, а доверия такая формулировка вызовет больше.

Кроме того, к цифрам нужно добавить и выгоду. Рассказывайте не о себе, а о том, что получит покупатель. Чем могут быть для него ценны эти 30.000 часов? Объясните, а иначе не догадается. Да и не его это задача — догадываться.

Что-то пошло не так…

Тут опять подкачало исполнение блока. Причём как в десктопной, так и в мобильной версиях:

Не учли размер фотографий - а в итоге блок оказался кривым

Видите это огромное пустое пространство под фотографией и текстом? Судя по всему, появилось оно из-за этой вот вертикальной фотографии:

Вертикальная фотография сломала блок на лэндинге

А из-за него кнопки слайдера не поместились в экран. Приходится спускаться к кнопкам, переключать слайд, возвращаться обратно к тексту, ведь от кнопок непонятно, о чём идёт речь в блоке… Ужасно неудобно!

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

В общем, этот блок нуждается в доработке как с точки зрения юзабилити, так и с точки зрения маркетинга.

Отзывы — одна из важнейших вещей для продукта, который несёт эмоции. Поэтому блоку с ними нужно уделить особое внимание:

Блок с отзывами

Здесь же отзывов мало — только те 3, которые на картинке выше. Плюс средний скорее вызвал у меня вопросы, чем позитивные эмоции — я не сразу понял, что в нём имелось в виду. А, как я уже писал выше, вопросы не увеличивают вероятность получения заявки, так что не нужно их вызвать.

Кто же Ваша ЦА?

Большой-большой блок с перечислением клиентов:

Блок с перечислением клиентов

И вот тут у меня возник вопрос: на кого именно нацелен сайт? Кто его целевая аудитория? Клиенты, безусловно, представительные, но не отпугнут ли они обычных людей?

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

И, наконец, финальная форма захвата вызвала всё тот же вопрос: кому она адресована?

Последняя форма захвата на сайте

Видимо, крупным клиентам, судя по фото и «большому шоу». Правда, нигде нет информации о том, что же это такое: большое шоу. Думаю, это нужно как-то пояснить.

А ещё мне непонятно, что делать дошедшим до конца сайта людям, которым «большое» шоу не нужно. Каким образом им оставить заявку? Почему не предусмотрена форма захвата для них?

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

Подвал сайта:

Футер лэндинга

Давно я не встречал счётчики liveinternet’а… Неужели кто-то ими до сих пор пользуется? Других вопросов у меня не возникло.

Как сделать лэндинг и не наломать дров?

Итак, вот мы и разобрали этот лэндинг. Подведём итоги — выделю основные моменты, на которые стоит обратить внимание при его доработке:

  1. Определить, кто же основная целевая аудитория сайта. Ориентироваться при работе над сайтом именно на неё, а не на всех подряд.

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

  3. Исправить ошибки дизайна, доработать десктопную версию сайта.

  4. Выправить тексты, добавить заголовки и подзаголовки, сделать их продающими.

  5. Избавиться от мест, которые вызывают вопросы. Помните, что Ваша задача — давать ответы!

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


Пришло время попрощаться. Надеюсь, разбор Вам понравился. Задавайте вопросы, рассказывайте о своих впечатлениях в комментариях.

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

До новых встреч!



Статьи в тему