Это старая история, но настолько интересная, что мы решили поднять ее из архивов ЦП для читателей Котиков. Сооснователь и главный маркетолог «Рокетбанка» Алексей Колесников рассказывает, как делаются зажигательные лендинги. Никаких шаблонов и «трех легких шагов», никакой АИДы, которая не-опера. Все дельно, интересно и с хорошим драйвом.
(А еще мы каждый раз чуть вздрагивали при виде слова «подидеи»).
Когда мне предложили написать колонку о лендингах, я, с одной стороны, обрадовался — значит, лендинги в «Рокетбанке» не вызывают отторжения. С другой стороны, в создании лендингов нет канонов, поэтому и рассуждать о субъективном с суровыми щами очень не хотелось. В итоге я решил описать процесс, который есть у нас в «Рокетбанке», и добавить кое-где немного пояснений, чтобы было ясно, почему мы делаем именно так.
В качестве примеров для этого обзора я буду в основном ссылаться на страницу «Рокетбанка» и страницы двух наших конкурсов: «Стену любви и ненависти» и «День Луиса Литта».
Совет номер один: никогда не начинайте со спецэффектов. Даже если очень хочется
Никогда не начинайте со спецэффектов, займитесь идеей и месседжем, который вы хотите донести. Лендинг — это просто коммуникация, формат донесения информации (обычно потенциальному клиенту). Поэтому главная задача лендинга — донести информацию, в первую очередь, ваш месседж. Посетитель должен понять ровно то, что вы желаете ему сказать. Остальное неважно.
Звучит просто, даже банально, но в девяти из десяти раз работа начинается с размышлений и мечтаний о том, как сделать лендинг сногсшибательным, впечатляющим и красивым, а также с поиска котенка, который сделает его виральным. Это ошибка, которая заканчивается унылой поделкой. Начинайте с идеи и посыла, а спецэффекты — как приправы в кулинарии, добавите на последнем этапе.
Этапы работы над лендингом выглядят так:
Идея
Это фундамент лендинга, основа его успеха или неудачи. Идея — краткое описание вашей задумки. Идея обрисовывает то, чему будет посвящен лендинг, как будет построена презентация и почему ваш лендинг должен стать успешным. К идеям лендингов я добавляю посыл, который хочу донести. Я записываю идеи (в том числе для лендингов) в виде коротких заметок. Они выглядят так:
С идеями всё одновременно и сложно, и просто. Сложно — потому что я не могу вас научить их придумывать. Сесть и придумать удачную идею вряд ли получится, мне идеи по заказу вообще не идут. Для себя я уже нашел закономерность — идеи приходят, когда я занят другой информацией, обычно когда читаю книги или смотрю кино.
Так как я много времени уделяю работе, то мозг и другую информацию начинает пропускать через призму «Рокетбанка». Поэтому читая книгу на отвлеченную тему или сидя в кино, я вдруг понимаю, что вот же — любовь к балету киногероя это то, что умиляет и удивляет меня, должно удивить и наших клиентов. Тут же развиваю эту мысль до идеи. В общем, попробуйте мой или найдите свой личный способ поиска идей.
Простота работы с идеями в том, что как только появляется зерно идеи, простая смысловая зацепка, достаточно её просто записать. Тридцать секунд — и готово. Примеры выше должны вас вдохновить — записывать можно своими словами, без особых реверансов, главное — зафиксировать ту основу, которая, может быть, вырастет в целую интересную историю. После того как идея пришла, она обычно кажется просто великолепной, и хочется быстрее начать её воплощать. Не спешите, дайте любой идее «отлежаться» день-два, «переспите» с ней и подумайте снова. Если она вам по-прежнему нравится — двигайтесь дальше.
Сценарий
Итак, у вас есть сильная идея. Самое время заняться сценарием — каркасом будущего лендинга. Сценарием я называю последовательность смысловых блоков. Вам нужно разбить основной месседж на простые подидеи, каждую из которых вы раскроете в лендинге, а в сумме эти блоки соберутся подобно мозаике в сознании читателя в ваш главный посыл.
Планируя состав идей, на которые вы дробите главную, вам нужно следить за тремя факторами:
- Сутью подидей. Подидеи должны быть простыми, чтобы вы могли их доказать или продемонстрировать. При этом вместе эти подидеи должны «собираться» и доказывать вашу главную мысль или месседж.
- Количеством подидей. Подидей должно быть как можно меньше, в идеале две-три, но в любом случае не больше пяти. Если вы нарушаете это правило, то рискуете просто потерять читателя ещё до конца вашего лендинга или просто перегрузить его оперативную память, которая вряд ли удержит все ваши подидеи.
- Порядком следования. Так как редко когда подидеи имеют одинаковую важность, подавать их нужно в разной последовательности. Нужно помнить, что внимание читателя в дефиците, и в ваших интересах как можно быстрее заинтересовать его и увлечь, чтобы он досмотрел до конца страницы. А значит, выстраивайте последовательность идей так, чтобы первые его увлекали, а последние побуждали к действию (о чём ниже).
В качестве примера посмотрите, какой сценарий лендинга сделала маркетолог Анфиса, выполняя вступительное испытание:
Хорошая новость: сценарий — это отличная стадия проекта, на которой можно спокойно «убивать» лендинг и не делать его дальше, если не получается ничего путного. И это очень круто! Этот сценарий Анфисы никуда не годится, и её лендинг я убил сразу после просмотра этого сценария.3
Но я привожу его в пример, потому что то, как сделан этот сценарий — достойно подражания. Посмотрите, здесь уже ясно, какие посылы будут, сколько их и в каком порядке предлагается коммуницировать. При этом такой легкий формат позволяет легко менять блоки местами, размышлять, чего хватает, а что лишнее. Это очень ценно.
Я хочу вас предостеречь от типичной ошибки неопытных маркетологов (которым я часто даю задание «придумать лендинг») — они слишком быстро спешат заняться дизайном. Им кажется, что красивая картинка спасёт слабый сценарий или вообще сгладит его отсутствие. Например, один из таких лендингов мне был прислан маркетологом Сашей:
4
Как видите, выглядит этот вариант намного круче. Потратил Саша времени на такую версию существенно больше, чем если бы сделал, как Анфиса. Но стало только хуже — дизайн теперь мешает находить проблемы структуры, которых, кстати, больше, чем у Анфисы.
Не вдаваясь во все проблемы лендинга, кратко рассмотрим проблему сценария. Основная проблема в том, что подидеи не доказывают и не складываются в главную мысль (которую Саша поместил в шапку). Саша заявляет: «Минусы зарплатной карты превратим в плюсы»; мы (читатели) ждем разъяснения, как будем минусы превращать в плюсы, а Саша вдруг берёт и заявляет: «Выгоднее, чем…», «Удобнее, чем…», «Не отказывайтесь от…».
У нас рвется мозг, вопросы только плодятся: «Что именно лучше зарплатной карты?», «Что именно удобнее?», «О чем идет речь, какой объект сравниваем? Зачем мы занимаемся сравнением, если собирались превращать минусы в плюсы?», и в завершение Саша добивает: «Не отказывайтесь от зарплатной карты». Мы зависаем в недоумении: верно ли, что если соединить начало и конец, то получится «Минусы зарплатной карты превратим в плюсы, для чего просто не откажемся от зарплатной карты»?
Довольно странно, правда? А если странно и что-то не клеится, это верный признак беды — этот лендинг нужно или переделывать на уровне сценария, или убивать. Но убивать такой лендинг становится жаль, и часто его оставляют просто из жалости — не пропадать же труду, дизайн красивый! А между тем, красивый и непонятный лендинг — хуже, чем просто написать на белом листе ваш месседж без всякого дизайна. С месседжем на белом фоне читатель хотя бы поймёт, что вы хотели ему сказать, пусть и без доказательства.
Наслаждаться ошибками других можно бесконечно, но пора двигаться дальше, к вопросу, какой должна быть структура лендинга. Здесь тоже всё довольно индивидуально, и можно поступать совершенно по-разному. Главное — не допускать ошибок и не вводить читателя в скуку или непонимание. Если у вас нет дебютных идей для вашего сценария, возьмите проверенный вариант — известную со школы структуру «введение, основная часть, заключение». Только вместо введения у нас будет тизер, а вместо заключения — призыв к действию (известный также, как call-to-action).
Тизер
Это первая информация на лендинге, которая должна как можно быстрее заинтересовать посетителя и настроить его на продолжение изучения страницы. Тизер важен по двум причинам: во-первых, от тизера зависит, сколько людей останутся на вашей странице и продолжат изучать лендинг, а сколько уйдут, потому что просто сразу неинтересно или скучно. Во-вторых, как известно, из информационных цепочек люди лучше всего запоминают начало и конец. То есть если вам повезёт и ваш посетитель что-то запомнит о вашей странице, скорее всего, это будут тизер и заключение.
Так как тизер рассчитан на незаинтересованного зрителя, которого нужно как можно быстрее заинтересовать — делайте тизер цепляющим и, по возможности, лаконичным. В идеале посетитель должен с лёгкостью «поглощать» тизер за несколько секунд и уже стать заинтригованным.
Кстати, мне нравится разделять тизеры по тому, за счет чего они привлекают внимание и будят интерес читать дальше. Обычно это или интересный текст, или дизайн.
Можете использовать любой из подходов, но не откладывайте придумывание своего тизера в долгий ящик. Несмотря на лаконичность, придумать отличный тизер — это большая удача, а сам процесс может потребовать времени больше, чем все остальные части лендинга, вместе взятые. Впрочем, иногда ваши клиенты могут подсказать вам такой тизер, что сами и не придумаете:
Основная часть
Основная часть — это костяк лендинга, в нём будут располагаться идеи-аргументы, из которых в голове посетителя в итоге должен сложиться пазл в форме общей идеи, которую вы доносите. Здесь я рекомендую очень внимательно относиться к самим идеям, их количеству (лучше меньше) и их последовательности. Рекомендую написать все подидеи и попробовать их попереставлять местами и посмотреть, что получится. Для удобства я обычно именно на этом этапе начинаю набрасывать заголовки, которые обобщают идею каждого блока.
Основная часть может быть как простой, так и довольно сложной, если, например, у вас много претендентов на подидеи и нужно принять решения, какие оставить и в каком порядке их презентовать. Иногда может потребоваться аналитика и сбор информации.
Такой анализ потребовался для лендинга «Рокетбанк 3.0» (текущий сайт «Рокетбанка»). Если помните, в идее этого лендинга была мысль, что нужно найти главные факторы продажи продукта (в этом случае — карты «Рокетбанка») и подать их наиболее эффективно. Для анализа разных структур и сценариев я составил майндмеп, на котором анализировал наши старые структуры, структуры на сайтах других банков, и смотрел на те идеи, которые назывались в коллективе «из головы». В итоге получилась такая карта:
А ветка, которая в итоге стала «победительницей» и заложила основу сценария, выглядит так:
Все остальные ветки-сценарии лендинга были «убиты» на уровне этого анализа. Сам сбор информации занял пару дней, а вот анализ и выбор — примерно неделю. В более простых случаях (например, лендинги конкурсов) такой сложный анализ не требуется, но всё равно нужно правильно разбить информацию на составляющие (что за конкурс, какой приз, когда проходит, как участвовать и пр.) и определить эффективную последовательность.
Призыв к действию или call-to-action
Так как лендинги — это вид маркетинговой коммуникации, то любой лендинг должен заканчиваться побуждением пользователя к действиям. В противном случае ваш лендинг может быть безумно интересным, но если вы закончите его как односерийный фильм словом «конец» — вы не конвертируете интерес и любопытство посетителя в покупку, подписку или простой лайк/шер, а значит, получаете маркетинговый палмфейс. В общем, не забывайте подсказать человеку, что делать дальше — поставьте кнопку «купить».
В заключение о сценарии
Когда сценарий готов, как узнать, что он не полный отстой? Я предпочитаю каждый из блоков обобщить короткой фразой (они часто становятся заголовками на этапе копирайтинга) и записать их в порядке следования в сценарии. Затем я читаю их и наблюдаю — складывается ли рассказ, который увлекает и в итоге доносит мой месседж? Если нет, то нужно подумать, почему, и попробовать «сложить» пазл снова. Если же история вполне себе вырисовывается — можно двигаться к написанию текстов.
Если вы еще не отвыкли читать книги, то по теме могу рекомендовать « Поэтику» Аристотеля, «Кино между адом и раем» Александра Митты и «Принцип пирамиды Минто».
Тексты
Я отношусь к текстам очень серьезно. Для меня они — индикатор крутости лендинга и профессионализма автора. Поэтому настоящей бочкой меда с ложкой дегтя предстают аккуратные и красивые лендинги с посредственными текстами. Такие лендинги появляются, потому что тексты и дизайн в определенной степени взаимозаменимы. Ведь почти любую идею можно доносить как с помощью текста, так и с помощью дизайна. Но занятие дизайном обычно представляется более интересным, чем занятия текстом.
Именно поэтому маркетологи-новички в «Рокетбанке» любят перескочить этап написания текстов и побыстрее заняться дизайном. Они спешат пойти к дизайнеру и начать рисовать «крутой» лендинг, объясняя дизайнеру «Ну тут нарисуй айфон красивый с картой…», при этом бегло добавляют «А напишем что-то типа “классная карта”», «А вот здесь нарисуй красивую девушку на велосипеде», «Ну а текст что-нить про легкость…» Редко с таким подходом получается что-то стоящее, и моя обязанность — предупредить вас об этой ошибке. Кстати, лендинг Саши (выше) страдает не только на уровне сценария, но и из-за низкого качества текстов.
Тема настолько важна, что я хочу пояснить, почему пренебрегать текстом — это серьезная ошибка.
- Во-первых, пренебрегая текстом, вы пренебрегаете одним из самодостаточных каналов коммуникации, а значит, теряете возможности. Выше я приводил примеры тизеров, эффективность которых основана на удачном тексте. Без серьёзной работы с текстом такие тизеры не появятся.
- Во-вторых, вы делаете слишком большую ставку на дизайн, который может дать сбой.
- В-третьих, я заметил, что лучшим ТЗ для дизайнера будет хороший текст. Просто потому что если текст хорош, то он сам по себе хорошо передает вашу идею. Получив такой текст, дизайнер быстрее находит нужные визуальные решения, потому что, по сути, ему не нужно изобретать, как что-то объяснить, а достаточно усилить то, что уже есть в тексте. Это значительно проще и даёт лучшие результаты, потому что вы используете все каналы, и они друг друга дополняют.
В общем, я предпочитаю (и вам советую) иметь на руках «мощный» текст прежде, чем переходить к дизайну. Если я вас убедил или вы просто поверили мне на слово, то готовьтесь, что над хорошим текстом придется помучаться, потому что, как говорят, главный орган писателя — чугунная задница.
В «Рокетбанке» над текстами для лендингов в 90% случаев работаю я сам. Я считаю свои тексты далёкими от идеала, но пока я не нашел копирайтера, который бы выдавал, на мой субъективный вкус, результат лучше (и тем самым освободил бы меня от самого невеселого этапа создания лендингов).
В качестве теста крутости текстов я использую главное упражнение. Выписываю все текстовые блоки лендинга один за другим на лист и читаю. Если тексты хорошие, то лендинг уже работает: тизер будит интерес, в голове воображение «рисует» картинки, идеи складываются в одну главную и предложение call-to-action звучит очень привлекательно. Получается такой себе текст-лендинг (как HTML без CSS), и если он удачный, то уже оказывает целевое впечатление на читателя.
Есть и дополнительные критерии, которые я использую. Во-первых, тексты для лендингов должны быть максимально короткими и при этом передавать месседж и эмоции. Иногда приходится по десять раз переписывать заголовок из трёх слов или менять абзац из двух предложений. Любое сокращение текста без потери (а лучше с усилением) самого посыла — благо. Писать короткие и понятные тексты — высший уровень мастерства копирайтинга для лендингов.
Я столкнулся с несколькими книгами, которые помогли мне писать лучше: « Как писать хорошо» и «Искусство рекламных посланий».
Дизайн
Как по мне, это самый приятный этап. Если вы пойдёте путем, который я описал выше, к началу работы над дизайном у вас уже будет супернабор: идея в один абзац, сценарий-макет (см. лендинг Анфисы выше), текст, который сам по себе уже делает всю работу, — увлекает, доносит месседж и поощряет читателя на action.
Всё, что вам теперь нужно, — это найти хорошего дизайнера, передать ему супернабор, посидеть вместе минут сорок (чтобы вдохновить его своей энергетикой) и приготовиться получать первые макеты. Если у вас есть примеры дизайна, который вам нравится, — покажите их дизайнеру, это сэкономит время.
Дизайн никогда не делается с первого подхода, поэтому приготовьтесь к итерациям. Я обнаружил, что давать фидбек творческим людям (а дизайнеры — творческие натуры) лучше как можно скорее. Я люблю комментировать в фотошопе, прямо поверх дизайна, используя золотую кисть:
После комментирования я отправляю дизайнеру такие файлы:
Таких итераций бывает от трёх до десяти. Кстати, не думайте, что вы на этом этапе играете роль капризного клиента и подобно режиссеру сидите в кресле и только говорите «не верю, переделать». Это не так. Этап дизайна похож на этап сборки всех частей в механизм.
Конечно, механизм может не собираться по вине сборщика (дизайнера), а может и по вине тех, кто делал «детали» на предыдущих этапах. Именно на этапе дизайна «вылезают» все огрехи предыдущих этапов (например, нелогичность структуры, чрезмерный объем текстов или их банальная неясность).
Ваша задача — заметить эти огрехи и вовремя поправить, переписать текст или даже поменять структуру. Не нужно давить на дизайнера, чтобы он пытался затереть ваши косяки средствами дизайна. Будьте достаточно мужественны, чтобы искать и исправлять ошибки прошлого.
Кстати, об ошибках. После того, как дизайн закончен, я показываю макет корректору, чтобы устранить грамматические ошибки. Рекомендую делать это после того, как ваши тексты уже «уложены» в дизайн.
По поводу дизайнера могу сказать, что я предпочитаю иметь дело с одним дизайнером, с которым мы выработали комфортный режим работы. Это хорошо экономит время, поэтому если у вас есть время на поиски — найдите дизайнера, с которым вам будет комфортно. Впрочем, супернабор из идеи, сценария и мощных текстов позволит вам хорошо сработаться с любым квалифицированным дизайнером.
В заключение про дизайн я хочу коснуться темы визуальных материалов — фотографий, иллюстраций, паттернов, которые так или иначе требуются в процессе. Самым простым способом получения изображений являются специальные стоки (Shutterstock, Fotolia и др). Дизайнеры активно пользуются этими библиотеками. Ничего зазорного в этом нет, и часто фотографии со стоков хорошо вписываются в лендинги, но лично я нередко замечаю, что фотографии взяты со стоков: слишком карамельные «люди», неискренние улыбки или постановочные позы.
Если я замечаю, что фотография со стоков, впечатление от сайта портится, работа словно теряет душевность. Этого не происходит, если фотографии (и другие материалы) сделаны специально для лендинга. Понимаю, что не всегда есть возможность нанять фотографа или иллюстратора специально для ваших задач, но зачастую можно просто взять камеру и отснять материал самому. Результат может быть не столь профессиональным, как у наёмного фотографа, но это не повод не попробовать.
Сейчас «любительский» стиль фотографии в моде, и вполне вероятно, что дизайнер сможет использовать ваши снимки, при этом налёта «стоковости» уже точно не будет. Кстати, для главного сайта «Рокетбанка» на уровне идеи было решено использовать «живые» фотографии наших клиентов, без привлечения моделей и фотографов. Снимали и обрабатывали своими силами, результат, на мой взгляд, теплее и душевнее.
Вёрстка
В лендингах я стараюсь избегать эффектов, которые приводят к сложной вёрстке. Если есть возможность обойтись без них — это всегда лучше. Тем не менее, рекомендую найти хорошего специалиста по вёрстке, потому что это банальная экономия времени и нервов. Дело в том, что огрехи вёрстки (если они присутствуют) начинают быстро лететь вам от посетителей в форме скриншотов с некрасивым видом вашего лендинга. При том, что стоимость вёрстки обычно укладывается в 10% от стоимости всего лендинга, пытаться экономить и привлекать неопытных специалистов не стоит.
В качестве совета для этапа вёрстки я могу рекомендовать не забыть добавить в код страницы специальные meta-теги для социальных сетей — они подскажут соцсетям, как показывать ссылку на ваш лендинг в лентах, когда посетители начнут делиться лендингом в соцсетях.
Если вы не укажете, какие картинку и текст использовать, социальные сети возьмут те, что им больше понравятся, и наверняка это будет не так круто, как заранее приготовленные вами на случай репоста материалы. Подготовить материалы и напомнить верстальщику вставить на них ссылки — ваша задача и ответственность на этом этапе.
После того, как закончена верстка, лендинг можно считать готовым.
Стоимость и сроки
В «Рокетбанке» на создание лендинга требуется от 10 до 15 рабочих дней, то есть две-три недели. По этапам и ролям выглядит примерно так:
На идею в расписании я отвел один день. Это довольно условный срок, так как без идеи лучше не начинать лендинг вообще, а саму идею можно придумывать сколь угодно долго. Указанный в расписании день обычно уходит на проверку идеи на коллегах и подготовку всего проекта (проверку наличия свободного времени в расписании дизайнера, верстальщика и других участников).
Стоимость лендинга обычно на 99% состоит из зарплат участников проекта. Зная ставки специалистов, которых вы привлекаете для своих проектов, вы легко подсчитаете затраты на лендинг в вашем случае. В нашей практике лендинг обычно обходится в $3000–$4000.
Takeaways
Итак, если собрать все советы, получится такой список:
- Не начинайте делать лендинг со спецэффектов, подумайте об идее и главном месседже.
- Идеи могут приходить в самые неожиданные моменты, и в то же время редко приходят «по заказу». Записывайте все свои идеи.
- Дайте идее настояться, «переспите» с ней, затем протестируйте идею на коллегах и друзьях.
- Если у вас есть идея, приступайте к сценарию — разбейте месседж на подидеи, с помощью которых вы донесете общую мысль.
- Выстройте все подидеи в таком порядке, чтобы информация хорошо усваивалась, при этом не увлекайтесь большим количеством подидей. Если их будет много, их не усвоят.
- На этапе сценария не увлекайтесь дизайном, пользуйтесь карандашом и бумагой. Иначе потратите время и будет жалко выбрасывать.
- Если не можете выбрать структуру, используйте классическую — вступление, основная часть и заключение. Только вместо вступления будет тизер, а вместо заключения — призыв к действию.
- Когда готов сценарий, займитесь текстами, даже если это кажется неинтересным. Как бы ни хотелось пропустить этот этап или отложить его на потом, запомните: работа над текстами — решающий этап создания лендинга.
- Хороших копирайтеров меньше, чем хороших дизайнеров. Будьте готовы писать тексты сами.
- Чтобы тексты получились хорошими, будьте готовы переписывать много раз.
- Вам нужно получить такие тексты, чтобы даже без дизайна у людей в голове уже «возникала» картинка, они усваивали ваш месседж и хотели выполнить ваш призыв к действию. Если это так, у вас получились хорошие тексты.
- Вторым важным критерием хороших текстов является их краткость и ясность.
- Кроме прочего, хорошие тексты — лучшее ТЗ для дизайнера.
- На этапе дизайна не расслабляйтесь, будьте готовы ловить и решать проблемы, возникшие из-за ваших ошибок на предыдущих этапах и исправлять их. Не полагайтесь на дизайнера в плане спасения от ваших «косячков».
- На этапе вёрстки не забудьте про специальную картинку и текст для соцсетей — пусть ваш лендинг сияет в соцсетях, если кто-то решит им поделиться.
- Вся работа над лендингом обычно занимает две-три недели.
- Не существует канонов или законов создания лендингов, все материалы в этой статье носят рекомендательный характер.
Пожалуй, на этот раз достаточно. Мне будет приятно, если описанные опыт и советы будут вам полезны. Если у вас возникнут вопросы, я готов общаться в комментариях или в фейсбуке.
В заключение я поделюсь главным секретом хороших лендингов и (согласно своим советам) призову вас к действию.
Главный секрет состоит в том, что намного проще делать лендинги для замечательных продуктов, которые вам самим нравятся. Вы сможете убедить людей только в том случае, если сами верите в каждую мысль, которую несете.
Поэтому если хотите сделать удачный лендинг — разберитесь в продукте, потестируйте его на себе и по возможности полюбите его.
