Вкусная посадочная страница: как составить правильную и эффективную структуру лендинга

Прогресс неминуем. Новые возможности практически безграничны, и пока вы читаете это предложение, где-то там успели создать уже 6 новых лендингов. Скорость — отличное преимущество с огромным минусом, состоящим в однотипности созданного. Как же всё-таки создать уникальное решение для себя?

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

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

Если кратко, то это теория маркетинга, в которой присутствуют пять ступеней для привлечения и удержания клиента:

История умалчивает, кто же всё-таки придумал модель AIDA — по одним данным, классическую продающую концепцию разработал Элайс Сент-Эльмо Льюис в 1898г., по другим данным, эта модель была создана Элмером Левинсоном в 1896г. Но сама суть её остается одинаковой везде. Итак, что же входит в аббревиатуру:A — attention (внимание)I — interest (интерес)D — desire (желание)A — action (действие)В настоящем времени добавилась еще буква — AIDA(S), где S — satisfaction (удовлетворение). Сюда входят как и положительные отзывы и обзоры, так и всем известное сарафанное радио, которое приведет новых пользователей на сайт.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

«Доверие!» — отвечаю я и говорю, какие блоки структуры на это влияют:

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

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

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

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

НО! Это не работает в том случае, если предполагается одноэкранный лендинг, цель которого перенаправить пользователя на другие площадки.

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

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

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