SLINKOV•Design

Как заказать лендинг, сэкономив деньги, время и нервы

Автор: Дмитрий Слиньков, сентябрь 2020
Photo Д. Слиньков, Unsplash
Чеклист подготовки Вашего бизнеса к созданию лендинга или сайта.
Вот уже много лет 9 из 10 потенциальных клиентов приходят к нам со словами «срочно нужен лендинг» и уходят в ужасе, бурча: «да че ш так дорого-то». Многих из них удавалось остановить и объяснить: существует список дел, которые нужно сделать перед заказом лендинга, чтобы не было «мучительно bloody expensive». Готов поделиться этой информацией со всеми бизнесменами, которым еще только предстоит окунуться в увлекательное приключение под лозунгом «наконец-то у меня есть сайт!»
Содержание статьи:
Согласно ресурсу ratingruneta.ru, «разработка корпоративного сайта в Москве в среднем стоит 563 314 Р». Думаю, что, прочитав данную статью, вы сможете уменьшить эту сумму на несколько десятков процентов.

To brief or not to brief

Составьте и заполните собственный бриф. Когда вы начнёте обращаться к студиям или фрилансерам, они завалят вас своими брифами. Разными. В принципе, сайт-брифов в свободном доступе предостаточно. Познакомьтесь с ними, сделайте и заполните свой.

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

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

AIDA

AIDA — это модель «завоевания» покупателя описанная американскими рекламщиками еще в XIX-м веке. Словно золотое сечение маркетинга, AIDA пронизывает все без исключения рекламные ролики, лендинги, слоганы и каждое (!) предложение продающих текстов.
AIDA будет определять структуру вашего лендинга. По ней же будет выстроен весь копирайтинг. Посему, дабы лучше понять природу успешного и действительно продающего копирайтинга, можете ознакомиться с презентацией на странице полезных инструментов и шаблонов нашего сайта, или с видео ниже «Как написать продающий текст».
Кратенько пробежимся по составным частям AIDA.

Attention — привлечение внимания

Это то, чем вы привлечете внимание не на лендинге, а там — в вашей рекламе или в поисковой выдаче. Здесь, на своей странице, вы просто должны эту «завлекаловку» повторить.

Вот например:
Поисковая выдача «анаплан»
Это то, что выдает поиск по слову «анаплан».

А ниже – то, как выглядит обложка лендинга Анаплана:
Обложка лендинга аналитического сервиса «Анаплан»

Interest — развитие интереса

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

Desire — желание

Desire (пробудить желание): обзоры, отзывы, сертификаты, медиа. Под медиа подразумеваются всевозможные подкасты, видео, всё то, что говорит человеку: «Ты в правильном месте! Располагайся и вкушай!» В общем, всё, как в турецких бутиках.

Action — тот самый призыв к действию

В этом самом важном блоке AIDA «холодные» лиды превращаются в «тепленькие».
CTA-блок Нила Патэля
Один из величайших SEO-маркетологов современности — Нил Пател (Neil Patel) — ради того, чтобы мы нажали на кнопку «Создать аккаунт» в его сервисе, потрудился записать огромное подробнейшее explaner видео.

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

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

А именно: AIIIIIIDDA
Слайд 1. A — Attention,
слайды со 2-го по 7-й I — Interest,
слайды 8 и 9 D — Desire,
слайд 10 A — ACTION!

Как говорится, не благодарите))

Блок лендинга «Обложка»

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

  • Логотип
  • Персонаж
  • Слоган
  • Призыв к действию.

Логотип

Как можно быстренько сделать логотип? Заказать его за 49$ вот в таком сервисе, либо сделать самостоятельно в Canva.
Скриншот Canva с готовыми темплейтами. Вписывайте своё название и логотип готов.
В идеале, логотип должен «порождать» иконки, закладывать основу фирменного стиля, согласовываться с миссией, видением и историей компании… Но… вам нужен лендинг и срочно. Так? Тогда идем по пути наименьшего сопротивления и максимальной экономии на любом гвозде.

Единственное, подумайте о том, чтобы из вашего логотипа «вытекал» какой-то значок, который вам пригодится как минимум в следующих местах:

  • Favicon. Это такой значок на закладочке браузера. По нему посетители будут ориентироваться: «Где же тут был такой лендинг классный… А, вот он!»
  • Украшение аватарки. Вы — фаундер. И вашу фотографию в любой презентации, на любом лендинге и в соцсетях можно с пользой для дела украсить этим значком.
В общем, значок этот при хорошем раскладе может стать элементом дизайна всего всего вашего лендинга.
Пример «экономного нейминга и логотипа»:

К нам обратилась компания предоставляющая услуги в области бизнес-анализа. Обычно названия таких компаний представляют собой незапоминающиеся аббревиатуры (ABM, например). Приходится эти названия как-то «красиво» изображать, потом непонятно как продвигать и так далее. Поэтому в данном случае мы не стали мучить себя, клиента и его лидов, а взяли да и придумали… новое название.

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

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

Аналитика… Аналитика… Что же может её олицетворять? Ну уж точно не плохие актеры в переговорке. И ни в коем случае не экраны компьютеров с замысловатыми дэшбордами.

Заказ был срочный и почти бесплатный. Поэтому нас всех спасла маленькая капелька юмора.

Ah!Report — вот как мы назвали эту компанию. «Чем мы занимаемся? Отчетностью. Ах, какие отчеты мы делаем — просто загляденье!»

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

Персонаж

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

Можно с помощью анимации разыграть небольшой (буквально двухкадровый!) мультик: Кадр 1 — «Было [до появления вашей инновации]», Кадр 2 — «Стало [в результате применения вашего изобретения]».

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

Затрудняетесь с персонажем и боитесь переплаты за его создание? Есть самый беспроигрышный вариант — станьте персонажем сами!

Слоган

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

Иногда полезно придумать метафору. Например, у вас дешевая система автоматизации ресторанов. Так и скажите: «Наша система подойдет любому ресторану — от «Maze» до уютных рюмошных».

Самоидентификация

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

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

У вас есть портрет целевого клиента? Вот его и нужно постараться на вашем сайте изобразить.
С точки зрения психологии у каждого человека есть одна важная особенность: он ожидает увидеть ответ, начинающийся с того же слова, с которого начал поисковый запрос. Иные результаты выдачи автоматически становятся менее заметными.
— А. Петроченков
Книга "Идеальный Landing Page. Создаем продающие веб-страницы"

И меню

Меню должно обеспечивать навигацию по самому лендингу. Посетителя никуда не стоит уводить.

Есть только три страницы, на которые можно вашего посетителя уводить с лендинга:
  • Кейсы
  • О компании (или об основателе, или о проекте)
  • Блог.
Иными словами, если посетитель так и не решился нажать на СТА, изо всех сил старайтесь затащить его хоть куда-то.

Кнопки Call-To-Action на обложке

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

Тогда кнопками могут быть:
  • «узнать подробнее»
  • «скачать pdf-презентацию»
  • «получить доступ к базе знаний»…

Почему иногда лучше сделать две кнопки? У человека должна быть иллюзия выбора. Между «оплатить сейчас» и «узнать подробности» клиенты выбирают второе и это хорошо. Потому что вы уже сподвигли его предпринять какое-то действие. Вам остаётся только… не разочаровать его.

На кнопки в обложке никто не нажимает? Ничего страшного. Весь ваш лендинг должен строиться по принципу «Спасибо, что не ушел». Конечно, нормальный посетитель захочет полистать ваше творение дальше. Но он всегда будет помнить, что кнопочки-то там, наверху остались! Вы удивитесь, но мы-то смотрели тепловые карты множества лендингов: посетители доходят до конца страницы, где их подстерегают «дьявольские» кнопки действия и… возвращаются в обложку, чтобы нажать ровно такие же кнопки именно там! Такова психология человеческая. Нужно её а) знать и б) под неё подстраиваться.

Блок «Отзывы и рекомендации»

Пример блока «Отзывы» на сайте Retail Services
Обычно, это самый пугающий начинающих бизнесменов блок. 99% стартаперов отзывов не имеют, надеются без них обойтись, но при этом очень хотят, чтобы пошли продажи. «Открою» огромный секрет: отзывы можно получать не имея реализованного продукта. О чем можно получить отзыв? О вас лично. О том насколько в принципе серьёзна та проблема, которую вы решаете.

Есть такая конференция amoCONF. Её организовывает компания-производитель CRM-системы. В разное время на сцене amoCONF выступали Собчак, Познер, Лебедев, Шнур и другие известные личности. Оливер Хьюз, председатель правления банка Тинькофф, тоже выступал там. Означает ли это, что банк Тинькофф использует CRM-систему amoCRM? Нет! Означает ли это, что уважаемая компания amoCRM нас обманывает? Тоже нет. Но ассоциативное мышление приводит нас к тому, что amoCRM — это круто. Потому что на их конференции выступают по делу вот такие знаменитости.

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

Прочие блоки и элементы лендинга

Кстати, ссылка на Google Sheets с перечнем всех необходимых блоков лендинга приведена в описании к видео «Как начать делать лендинг быстро».

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

«Преимущества» — они же «отличительные признаки». Берите наглядные, понятные как «М» и «Ж» иконки и подписывайте их текстом. Люди должны визуально запомнить, что у вас есть поддержка, комьюнити, исходники, награды, уникальная методология и т п. Вспомним Interest и Desire в AIDA.

По-хорошему, описание продукта должно быть построено в соответствии с канонами драматургии и сторителлинга.

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

Следующем блоком может идти представление того, как вы эту проблему будете решать. Да не просто словами, а с цифрами, с инфографикой, как тут:
Пример инфографики преимуществ продукта
Затем расширенное описание вашего продукта может плавно перейти в презентацию его структуры. Он же ведь состоит из чего-то? Обязательно состоит!
Компоненты продукта. Не самые четкие иконки.

«Безопасность»

Любая покупка всегда связана с какими-то рисками и страхами.

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

«Тарифы»

Лучше все ваши тарифы нужно изобразить прямо здесь, на этом лендинге, а не на отдельной странице. Нужно, чтобы люди сразу понимали сколько что у вас стоит. Самый большой трэш — это когда есть таблица тарифов, но вместо цен там кнопочка «Свяжитесь с нашим менеджером».
Плохой пример «тарифов»
Хороший пример «тарифов» на сайте Symu.co
Уж лучше тогда не делать тарифы, а честно расписать насколько сложен ваш продукт. Но какие-то ориентиры нужно дать обязательно. Например: «Услуги такого плана на рынке стоят от 1 млн руб, но мы научились оказывать их намного дешевле».

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

«Команда»

Показать команду — еще одна «точка стеснения» настоящих инженеров-изобретателей.

Очень важно личное общение и личное же присутствие фаундеров на лендинге. Ваши фотографии могут быть неформальными, но в меру. Если вы непонятно чему смеётесь в 32 зуба, продавая решения 3d печати органов для больных раком, потеряете доверие, так и не приобретя. Взгляд в сторону от камеры дает эффект почти такой же. Простая сдержанная улыбка, открытый взгляд в камеру — вот и все, что от вас требуется.
Если вы все равно стесняетесь публиковать своё настоящее лицо или у вас нет времени/денег сделать нормально фотосессию, прогоните свою фотку через приложение Prizm. Это будет особенно к месту, если такой «шарж» станет персонажем вашего лендинга.

«Порядок работы» или «Этапы»

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

Даже если это всего три шага (договор, оплата, поставка), распишите их.
Готовый задизайненный блок «Этапы» в конструкторе лендингов Tilda Publishing
У блока «порядок работы» есть одно очень важное предназначение — устранить последние сомнения вашего потенциального клиента.

Этот блок идет перед самым важным и, практически, последним — блоком призыва к действию.

Всплывающие окна

«Свяжитесь с нами», «Я Вася, я сегодня на дежурстве»… Если ваш бот готов общаться с ЛЮБЫМИ посетителями вашего сайта связно и по делу, можете попробовать.

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

Ну и по поводу окон «не уходите» (по-английски их называют exit pop-up). Человек покидает ваш сайт и тут всплывает окно, предлагающее ему какую-то «плюшку» в обмен на Email. В принципе, это нормальная практика, но только если «плюшки» действительно хороши.
Exit pop-up на сайте Zendesk
Вот вам список сервисов для размещения на своём лендинге и «уходящих» окон, и «всплывающих»:

«Скачать»

Чтобы вы ни продавали, заставьте вашего посетителя что-нибудь оставить себе на память. Как только человек нажал кнопку «Скачать», должно СРАЗУ же произойти что-либо из следующего:
  • Скачивание начинается
  • Онлайн-доступ к файлу предоставляется
  • Письмо со ссылкой на скачивание отправляется.

Для последнего хорошо подходят автоматизированные системы, оснащённые специальными роботами (например, Битрикс24), которые без промедления отправляют письмо по указанному в форме адресу. Заодно происходит проверка на валидность введённого пользователем Email-а.

NB: Если вы не знаете что предложить для скачивания, сделайте pdf-версию вашего лендинга.

    Блог

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

      Номер телефона — на подумать

      Нужно ли ставить на лендинг номер вашего телефона? Зависит от ЦА. Считаете, что ваша аудитория живет в прошлом веке, не любит сохранять переписку в мессенджерах и схватывает всё, что им говорят ваши продавцы, прямо на лету... значит, номер нужен.

      Иногда я слышу такое: «хотим, мол, чтобы нам звонили, чтобы определять и сохранять номер звонящего». Задаю тогда вопрос: вам нужны номера холодных(!) лидов, чтобы что? Если ответ «чтобы клиентам было удобно, они так сами хотят», окей. Но при любом другом ответе вы ведь понимаете, что… в цивилизованном мире вы никогда сами не сможете позвонить по тому номеру, который попал в вашу CRM. Понимаете? И СМС прислать не сможете, если об этом нет четкой договоренности на берегу. И даже написать на этот номер что-то через WhatsApp вы не сможете тоже. Потому что современным Интернет-пользователям нужна омниканальность. Он к вам через Viber пришел, значит и общайтесь с ним через Viber. Это закон!

        Самый важный блочище «Call-to-Action»

        Задайтесь вопросом: зачем человек в здравом уме нажмет на вашу красивенькую кнопку?

        Что самое важное нужно сделать, чтобы действие, к которому вы призываете, свершилось? Нужно это действие продать.

        Лид-посетитель должен четко понимать: что именно он получит за очередную раздачу своих персональных данных. Не будем лукавить: вам ведь понадобится заполучить и имя, и Email, и ответы на анкетные вопросы, да? Поэтому распишите подробно и красочно: в чем именно выгода пользователя. Конверсия — это вам не лайк под котиком поставить!
          Снизив количество полей в форме заявки с 6 до 3, вы увеличивате ее конверсию в среднем на 66%
          Нил Пател
          Сооснователь Crazy Egg, Hello Bar и KISSmetrics. Помогает компаниям Amazon, NBC, GM, HP и Viacom увеличивать их доход.
          Если вы продаете онлайн-сервис и у вас есть к нему триальный доступ, вы —счастливый человек. Вам есть что продать «здесь и сейчас». Очень трудно удержать внимание поетнциального покупателя во всех остальных случаях. От момента нажатия вашей кнопки до получения товара должна пройти целая вечность. И нужно нажимающего чем-то на весь этот период зарядить.

          Зачастую, сама «продажа» нажатия на кнопку превращается в мини-лендинг.

          Чтобы сильно не задумываться, просто настройтесь на то, что вам придется снять зажигательное видео с собой в главной роли. В нем вы расскажете очень подробно: что ожидает того, кто будет эту анкету заполнять. В общем, перечислите все выгоды, которые посетитель получит, когда нажмет на кнопку призыва к действию.
            Если вы пишете слова «здесь» и «сейчас» после «заказать» или «скачать», это может увеличить вашу конверсию на 48%
            — Оли Гарднер
            Сооснователь Unbounce
            Хорошо, если посетитель, не нажав никакие CTA-кнопки, положил ваш лендинг в закладки… Хотя нет, не хорошо. Сегодня в закладки никто ничего не кладет. Подписываются на новости — да. Вступают в контакт во «Вконтакте» — да. Но не сохраняют вас ни в каких закладках потому, что закладки — это мусор.

            Примеры разных блоков призыва к действию:

            Takeaways

            Итак, давайте соберем чеклист? Чтобы сэкономить на сайте или лендинге, вам нужно заранее:
            1. Собрать и заполнить собственный бриф.
            2. Освоить методику AIDA. Она пригодится вам по жизни вообще.
            3. Логотип / персонаж.
            4. Слоган.
            5. Призыв к какому действию?
            6. Отзывы — 3 штуки минимум.
            7. «Доказательная база» того, что решаемая вами проблема существует.
            8. Преимущества продукта и его составные части.
            9. Безопасность.
            10. Тарифы.
            11. Команда.
            12. Порядок / этапы работы.
            13. Всплывающие окна (очень-очень осторожно с ними!)
            14. Что будете давать на скачивание.
            15. Политика блогинга.
            16. Телефон?
            17. Открытые линии: виджеты чатов, обратной связи, соцсетей, мессенджеров.
            После этого задача лендинга практически схлопнется до минимума. Дальше нужно будет просто сделать аккуратный сайт.

            Не бойтесь слова «дизайн» — смело полагайтесь на свой собственный вкус. В конце концов, ваш бизнес — это вы. А ваши клиенты — это ваш бизнес.

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

            Может, мы забыли что-то

            Может, ссылки на соцсети? Ну а что, тысячи людей зарабатывают миллионы рублей в инстаграмах и фейсбуках не имея лендинга! Подумайте: многие известные мне личности заходят на новый для себя сайт, видят ссылку на любимую сетку и сразу же переходят туда.

            В общем, готовьтесь к тому, что вам все равно придется A/B-тестировать предпочтения вашей аудитории: с телефоном или без, с виджетом «обратный звонок» или без, со всплывающим назойливым неубираемым окном «чем могу вам помочь»… (последнее — лучше «без»)).

            И заметьте, я не запускал вас в муки выбора платформы (конструктор/не конструктор). Это сейчас не важно от слова «почти». Но если после всего прочитанного вы вдруг решитесь открыть условную «тильду» или «викс», вы не пожалеете, что решились освоить в этой жизни новый и не самый бесполезный для бизнесмена навык!
            ***
            Мои истории в Телеграм-канале или в «рассылке для своих».

            Да! И есть еще закрытая фб-группа «Маркетинг инноваций». Стучитесь — я открою!