Урок 2: Структура продающей веб-страницы

Дмитрий Слиньков
Познакомимся с перечнем самых необходимых блоков лендинга
Содержание урока
  • Отличия лендинга от вебсайта
  • Вебстратегия: случай из практики
  • Женщина как лендинг. От фавикона до подвала.
  • Посткликовые страницы
  • Основные компоненты лендинга
  • Краткий конспект урока

Лендинг vs Вебсайт

Давайте разберемся, в чем разница между ними. Лендинг — от английского landing. Приземлить. То есть мы приземляем человека, потенциального клиента на нашу веб-страницу и расхваливаем наш товар так, чтобы он уже больше никуда не улетел.
Частота поисков слов «лендинг» и «вебсайт» с 2010 по 2020 годы
Давайте разберемся, в чем разница. Лэндинг – от английского landing. Приземлить. То есть мы приземляем человека, потенциального клиента на нашу веб-страницу и расхваливаем наш товар так, чтобы он уже больше никуда не улетел.
Как видно из Google Trends, за последнее десятилетие «лендинг» всё сильнее опережает «вебсайт» по популярности. То есть, лендинг – это понятие более специализированное. По ним существуют отдельные номинации всевозможных конкурсов и, что самое для нас с вами главное, лендинги — это более структурированные сущности. Не бывает «ну очень необычных» лендингов. Потому что такой лендинг сразу же перестанет выполнять свою функцию и станет… одностраничным сайтом или… арт-объектом.
На сайте мы объясняем, рассказываем, развлекаем, информируем. На лендинге мы продаем. Причем слово «продажа» стоит трактовать в самом широком смысле. Даже если вы делаете лендинг про бесплатное мероприятие, вы все равно продаёте с помощью него регистрацию на это мероприятие.

Вебстратегия: случай из практики

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

Как известно, существует масса методик генерации творческих идей. Есть «Метод мозгового штурма» , «ТРИЗ», «Дельфи»… А еще есть та, которую «придумал» я. Она называется «Метод вебстратегии». Суть метода в том, что вам нужно спроектировать лендинг — продающую страницу своего продукта. Ох как трудно это даётся людям! Но зато мы сразу выходим на осязаемые результаты, формулируем преимущества и вскрываем неизведанные ранее противоречию и даже ошибки.

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

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

У них в конце концов всё получилось. Уверен — получится и у вас!

Женщина как лендинг. От фавикона до подвала.

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

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

Сканирование идет сверху. Прическа, волосы — это, по словам Василия, «самая безобидная» часть женского образа. На них можно «безнаказанно» смотреть почти всегда. В случае с лендингом — это верхняя плашка, содержащая меню и логотип. Иными словами, это такая деталь лендинга, которую не всегда замечают. Едва заметив, многие забывают… если забывают женщину целиком. Но! Плашка, меню и логотип врежутся в память, если сама женщина решит-таки задержаться в вашем сознании.

Идём дальше. Лицо. Это обложка. В лице на самом деле формируется само «уникальное торговое предложение». 95% ушедших с вашего лендинга посетителей уходят прямо «с шапки», не просмотрев всё остальное. Если это лицо принадлежит типажу, который вы ищите, вы на нем задержитесь подольше. Вам захочется с этой женщиной познакомиться, поговорить… В лендинге роль лица играет главный тезис продукта: «мы делаем то-то, чтобы решить вашу проблему такую-то». Как говори Василий: «Почти нельзя запасть только, исключительно на волосы. Но влюбиться, увидев только лицо, очень даже можно. Олег Митяев свою последнюю жену впервые «встретил» на афише кинотеатра. На постере было изображено прелестное лицо Актрисы Марины Есипенко».

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

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

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

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

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

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

Автор арта: Jack Vanzet

Посткликовые страницы

Если цель вашего лендинга — продать станок, продавайте станок и только станок!
Меня иногда спрашивают: «А что если лендинг — часть большого сайта? Не будет ли меню сайта вступать в противоречие с лендингом?» Короткий ответ: будет. Лендинг лучше всего делать либо вовсе без меню, либо с меню собственным, отвечающим за навигацию внутри лендинга.

Как ни странно, есть и такие вопросы: «Что такое одностраничный лендинги?» Ответ: это тавтология. Потому что все лендинги состоят только из одной страницы. Более того, эта одна страница должна быть максимально направлена на одно единственное действие, которое вы ожидаете от посетителя. Лендинги называют еще «посткликовыми страницами». Имеется в виду то, что люди «приходят» на них кликнув на рекламу или на фразу в поисковой выдаче.

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

1. Клик на логотип лендинга не должен уводить на «большой» сайт

2. Основное меню сайта не должно появляться на лендинге

3. Вместо основного меню сайта лендинг может содержать собственное меню навигации по данной странице.

4. Ссылка на «большой» сайт может быть указана единожды, в «подвале» всего лендинга.

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

К чему все эти «строгости»? К тому, что ссылки «Блог», «О компании» и тому подобные не только легко уводят посетителя от целевого действия, но и в принципе расфокусируют его внимание. Если цель вашего лендинга — продать резьбонарезывательный станок, продавайте посетителю станок. Не поддержку, не другие станки, не презентацию станков, не консалтинг по пуско-наладке этих станков, не команду и не историю компании. Впрочем, если вы считаете, что «команда» — важно, тогда разместите описание команды прямо на лендинге.

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

Базовые элементы лендинга

Верхняя плашка
Логотип, меню, кнопка «Купи»
Задача верхней плашки — показать логотип или наименование продукта. Хорошим тоном считается, если плашка зафиксирована вверху окна и при скролигне страницы вниз посетитель всегда будет эту плашку видеть. Примеры верхнего меню или плашек приведены в слайдере с моими комментариями ниже:
Обложка
Блок рассказывающий о продукте / проекте / услуге
Типовой состав обложки:
- описание продукта,
- фотография,
- коллаж,
- рисунок,
- фоновое видео,
- кнопки призыва к действию,
- форма ввода данных посетителя.
Разумеется, не все эти элементы должны попасть на обложку одновременно.
Если у вас есть подходящее ситуации видео, то лучше его использовать прямо здесь.
Примеры лендингов с хорошим применением фонового видео: наш лендинг продающий Битрикс24 и головная страница разработчика данного продукта.

Описание продукта может (желательно!) содержать запоминающийся слоган. Слоган должен четко, немногословно выражать следующее:
- проблема и её решение
- кому это нужно.
Есть такое понятие, как «треугольник успешности продукта»:
1) какую проблему продукт решает,
2) каким способом он её решает,
3) для кого он её решает.
Например: Skyeng – второй язык для занятых людей. Виагра — за счет уникальной технологии, получившей Нобелевскую премию, гарантирует супружеское счастье в любом возрасте. И так далее.
Чем короче слоган, тем легче он запомнится и будет вспоминаться при следующих касаниях потенциальных клиентов с вашим брендом.

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

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

В любом случае обложка — это ваша витрина, первый взгляд на ваш бизнес. Который может оказаться и последним, если обложка исполнена как-то не адекватно ожиданиям ваших посетителей. Поэтому ещё раз советую подумать о том, как сделать в обложке фоновое видео. Это действительно завораживает и оставляет зрителя на сайте. Видео сделать трудно, недешево, но у нас с вами будет отдельный урок посвященный теме «Лэндинг и видео».
///////Насчет «видения». Знаете что это такое и чем оно отличается от миссии? Я так и думал. Ну вот смотрите примеры:

Слайд 5. История компании

«Подумайте о своей жизни как о рассказе. В принципе, уже думаете. ФМРТ-исследования показали, что способность следить за рассказом, изложением с началом, серединой и концом вызывает высвобождение мозгом кортизола и окситоцина, а они дают нам уникальную человеческую способность: налаживать связи с любым — даже незнакомцем — и сопереживать. Иными словами, рассказами мы ищем смысл жизни.»

Сериал «Восприятие»
Главный герой
Истории любят все. Как вы думаете, что на самом деле объединяет людей? Армия? Золото? Флаги? Истории! Без преувеличения хочется сказать, что в мире нет ничего более мощного, чем история. Ничто не может остановить хорошую историю: ни враги, ни конкуренты. Крутая, великая… окей, просто хорошая история способна затронуть людское нутро, взрастить доверие, вызвать симпатию и образовать неразрывную связь с позитивными эмоциями. Кстати, если вы сегодня не знаете чем наполнить веб-сайт, придумайте историю и просто напишите её на веб-странице безо всяких красот и меню. Это обязательно сработает. Есть множество подходов к созданию историй. Самый прямолинейный (я бы даже сказал «тупой», но не буду) из них – таймлайн-хронология. Она хороша только в том случае, если вашему бизнесу уже много лет и у вас действительно случались сильные достижения в течение этого периода. Однажды я попробовал превратить Таймлайн основанной мной компании в нечто творческое. Вот что из этого получилось:

Сухой остаток урока №2

Главный вопрос:
Как презентация повлияет на будущий сайт или лендинг?
Ответ:
Презентация будет содержать все необходимые текстовые описания, сформулированные собственником бизнеса. Дизайн или верстку сайта можно кому-то заказать, но тексты никто, кроме автора бизнес-идеи, не сформулирует.

Домашнее задание

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

Чтобы перейти к следующему уроку, вам необходимо выполнить домашнее задание: составьте, по аналогии с проектом «Пчелка-21», презентацию вашего собственного проекта. На следующем занятии мы с вами будем делать из нее самый настоящий «взрослый» лендинг. И без всяких там дизайнеров и программистов — только вашими предпринимательскими руками и умом!
Пример pitch-презентации Air B&B
С помощью этой презентации Air B&B получили 500 миллионов долларов инвестиций
Не все понятно?

Есть вопросы?

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

Что еще почитать/скачать на данную тему:

За основу форматов питчей взята книга «Elevator Test – Crossing the Chasm» by Geoffrey A. Moore.
Посмотрите, кстати, и мою статью на Vc.ru «Игровой питч: как подготовиться к презентации проекта»