«Люди лучше, чем иконки»30.03.2017 14:08

Максим Ильяхов об основных ошибках при создании лендингов.

В избранное

Основатель сервиса для проверки текстов «Главред» и автор курса «Мастерская главреда» Максим Ильяхов рассказал о том, как избавиться от штампов и повысить информативность промостраницы сайта.

То ли год, то ли два назад я вёл в «Мегапрорыве» курс «Разумный email-маркетинг», позже переименованный в «Рассылки». «Мегапрорыв» — маленькая компания, там нет отдельной дизайнерской группы, которая строгает лендинги, поэтому рассказ о своём курсе я сделал сам.

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

Иллюстрации и товар лицом

Два года назад курс проводился впервые, и никаких фотографий с него не осталось. Была куча фотографий с других курсов «Мегапрорыва», но конкретно с этого — нет.

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

Старая страница утопала в тексте и плашках. Новая — в фотографиях.

Я не догадался, что участникам курса может быть интересно поглядеть, какие на курсе будут материалы: что будет в презентациях, какие будут практические задания, каким будет результат. Как минимум я мог показать презентации, с которыми мы будем работать, пусть даже нарисовать слайды из головы. Но я уже тогда мог дать читателям что-то осязаемое.

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

Особенно круто вышла в этот раз таблица с финансовым разбором рассылки. Я так и не смог её правильно поставить (она не выравнивается, как я хотел, по ширине), но в ней куча подробностей, и есть целая история развития одной рассылки. Для многих выглядит непонятно, но убедительно:

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

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

Организация

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

Старая версия была вся из штампов: начиналась с плашки, внутри плашки была другая плашка, дальше трёхколонники с иконками, ну и всё в таком духе

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

На новом лендинге всё предельно прямолинейно: текст — картинка — текст — картинка. Рядом поставить текст и картинку можно только тогда, когда это подпись к картинке.

В том же разделе «Отзывы» теперь видео занимает 2/3 ширины, чтобы его было удобно смотреть. Цитата из видео резко сокращена, набрана уменьшенным кеглем, написана строго сбоку и не вылезает по вертикали. Теперь главный герой — видео (то есть картинка), а текст играет вспомогательную роль.

Особенно хочу отметить отсутствие многоколонников.

В начале 2010-х годов текст в многоколоннике с векторной иконкой был таким модным ходом. Если у тебя было четыре так называемых преимущества, ты набирал их в четыре колонки и рисовал сверху иконки.

Почему-то тогда мы не знали, что:

Текст в узкой колонке читать неудобно, особенно в вебе, где нет переносов. Глаз часто скачет по строкам.
Чем текст длиннее, тем хуже он читается в узкой колонке.
Читатель знакомится с многоколонником не сразу, а в какой-то последовательности — чаще всего слева направо. В этом смысле чтение абзацев сверху вниз ничем не отличается от чтения колонок слева направо.
Неинформативная векторная иконка никак не делает сам текст интереснее. Предположим, вы хотите проиллюстрировать скорость или сроки. Что вы нарисуете в иконке? Молнию или часики. Как будто читатель никогда не видел молнию и часики.

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

Чешутся руки, хочу показать принципиальную схему. Смотрите:

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

Как сделать лучше:

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

Получится что-то такое:

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

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

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

Но вернемся к исходному лендингу.

Тональность

Прошлая версия курса была написана с позиции «Мы молодцы, а вы — не очень». Это не было сказано, но чувствовалось. Вот примеры текста со старой страницы. Я выделил те фразы, которые выдают моё высокомерие:

Рассылки ужасно модные. Каждую неделю кто-нибудь просыпается с мыслью, что ему нужна рассылка. Он напрягается, начинает рассылать, но ничего не происходит… Люди тратят огромные усилия и деньги, но чуда не происходит.
Хорошая рассылка помогает собрать заинтересованную аудиторию и создать постоянный спрос. Для этого нужен план и система. Судорожный маркетинг не работает.
В хорошей рассылке виден эффект от каждого письма, плюс измеряется долгосрочный эффект от всей рассылки. Если этого нет — вы просто дарите людям деньги.
Рассылка — это способ общения, а не инструмент пропаганды. Если вы не изучаете аудиторию и не общаетесь с ней, лучше не тратьте деньги и время.

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

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

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

И в 2017 году: Это курс не для авторов статей, а для тех, кто эти статьи заказывает: руководителей и маркетологов. Мы проводили курс на ту же тему в марте 2016 года, тогда речь шла только о рассылках. К курсу в 2017 году мы, конечно, всё обновим. Нам нравится работать с предпринимателями и собственниками. На практических днях мы разбираем их проблемы. Мы все нормальные люди, поэтому с радостью общаемся с нашими участниками во время и после курса. Многие становятся друзьями, клиентами или партнерами.

Главное, что изменилось в голове — я перестал кому-то что-то доказывать и обличать. Есть такой контент-маркетинг. Он вот так-то работает. Вот такие у него последствия и проблемы. Вот такие плюсы. Всё окей, нет повода для надрыва. Никто ни с кем ничем не меряется, не доказывает, не воюет. Все сидят тихонько зарабатывают деньги.

Что ещё

Уменьшилось количество серых плашек. Правое поле стало заметно свободнее. Текста стало в несколько раз меньше.

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

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

Что из этого вынести:

Хорошая промостраница — это фотогалерея. Текст — это подписи к фотографиям. Не следует делать текст главным героем промостраницы, если в этом нет крайней необходимости.
Меньше многоколонников, больше простого текста в один столбик.
Векторные иконки неинформативные, лучше ставить вместо них фотографии.
Видеоролики нужно ставить как минимум на 2/3 ширины экрана, иначе их неудобно смотреть.
Меньше шума: серых плашек, рамочек, фонов. Черный текст на белом фоне всё еще смотрится хорошо.
Если ты относишься к клиенту высокомерно, это будет чувствоваться. Проще надо, человечнее.