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

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

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

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

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

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

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

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

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

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

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

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

Организация

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

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

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

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

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

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

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

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

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

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

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

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

Тональность

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

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

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

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

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

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

Что ещё

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

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

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

Максим, спасибо за статью. Однако я ничего не понимаю.
В статье говорится "как избавиться от штампов и повысить информативность промостраницы сайта", но не приведено ни одной цифры/метрики/исследования, которое вообще подтверждает такой подход.

Все выводы я сейчас читаю из статьи так: "Максим считает, что если вместо иконок будут фотки - будет лучше"

Ответить
Развернуть ветку
Александр Басун

Какашкин дело говорит :)

Ответить
Развернуть ветку
Ilyuza Kurbanova
но не приведено ни одной цифры/метрики/исследования, которое вообще подтверждает такой подход.

"Главное, что изменилось в голове — я перестал кому-то что-то доказывать и обличать."

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

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Maxim Ilyahov
Автор

Вы правильно читаете.

Ответить
Развернуть ветку
Alexey Malkin

Да кстати...

Ответить
Развернуть ветку
Евгений Яровой

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

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

Это именно поучающее и однобокое занудство. Которое к тому же подается как знание претендующее на открытие. При чем тут вообще вектор как таковой?

Любое графическое исполнение зависит от возможностей и наличия материала у заказчика, контекста, сути контента, целей, задач, стилистики и множества других вещей. Хороший дизайнер просто применяет необходимые решения. Где-то более применимы иконки или другие иллюстрации, а где-то -- нет. Чего тут целую статью калякать, и забивать людям головы вредными рамками.

Начитаются потом всякие, будут свои пять копеек вставлять где взудмается, со словами "а вот я на VC прочитал, а там Ильяхов сказал..." Нам этих кривущих транслитераций по типу "Гмейлов" с "Виндовс Икспи" хватило.

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

Кстати говоря, опыт может и интересный, но уверен, что на такое количество читателей можно делать более полезные выборки, а то ведь такими темпами каждая вторая статья будет о очередной рефлексии Максима.

А вот про корпоративную культуру соглашусь, пожалуй.

Ответить
Развернуть ветку
Plekhanov Roman

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

Ответить
Развернуть ветку
Евгений Яровой

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

Ответить
Развернуть ветку
Евгений Яровой

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

Ответить
Развернуть ветку
Сергей Сергеев

Точно такой же набор иконок. Очевидные вещи оформлены так же, как сложные и неясные.

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

Ответить
Развернуть ветку
Евгений Яровой

так это плохой пример, я же не спорю с этим

Ответить
Развернуть ветку
Михаил Нихаев

Я слишком глубоко закопал сарказм в своем предыдущем комментарии. Спасибо, что вытащили!

Ответить
Развернуть ветку
Михаил Нихаев

История о том, как Ильяхов из высокомерного поучающего зануды из «Бюро» (там все такие, сильна корпоративная культура :) эволюционировал в нормального чувака рассказывающего о своем опыте. Браво!

Ответить
Развернуть ветку
Евгений Ефимов

Сколько видел видео с участием Максима, ни разу не замечал в нем высокомерности. Скорее педантичность, а высокомерность - это к Лебедеву. Помнится на критику Главреда моментально вышел пояснящий пост в блоге об особенностях применениях этого инструмента (в который раз!). Но то что на промостраницах теперь появятся большие видео и фотки - это радует)

Ответить
Развернуть ветку
Игорь Селезнёв

Это классный материал. А теперь попробуйте заценить лендинг школы редакторов, ректор которой Максим Ильяхов: http://artgorbunov.ru/school/editors/1feb2016/
Является ли он фотогалереей? Всё ли всем понятно из него или надо поодгадывать ребусы?)

Ответить
Развернуть ветку
Maxim Ilyahov
Автор

Спасибо за замечание! Переделка этой страницы еще впереди.

Ответить
Развернуть ветку
Евгений Мартьянов

Москва не сразу строилась, говорят

Ответить
Развернуть ветку
Alexey Sharapov

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

Короткий 40-60 секундый ролик, про то, как пекут торты и они быстро добираются до клиента, думаю, тоже бы зашел на ура.

Ответить
Развернуть ветку
Игорь Селезнёв

Зачем на лендинге программа в столбиках на 3 экрана? Кто её читать будет с лендинга?

Ответить
Развернуть ветку
Евгений Кашуба

Как всегда - отличная и полезная статья. Спасибо, Максим!

Ответить
Развернуть ветку
Сергей Хоменко

Ильяхов уже не торт. У него торты самостоятельно приезжают куда нужно, свеженькими :) Вот это редактор :)

"...я доволен, что в этот раз додумался поставить фотографии с других курсов. Это сразу добавляет доверия — «О, у них есть и другие курсы, люди к ним ходят»". Спасибо, КЭП.

Ответить
Развернуть ветку
Сергей Сергеев

Почему вы думаете, что торты не могут приехать?

Автобус тоже сам не подъезжает, однако вопросов это не вызывает.

Ответить
Развернуть ветку
Сергей Хоменко

Потому что торты и телефоны не приезжают, их КТО-ТО привозит. Да и колес у них нет своих, как у автобуса :)
Но это не суть...

Ответить
Развернуть ветку
Alina Ananchenko

Да нет здесь ошибки. Это называется метонимией. Точно также как вы не читате Достоевского, а его книги; не пьете чашки, а их содержимое и т.д.

Ответить
Развернуть ветку
Сергей Хоменко

Метонимия - это переименование, замена.
Я читаю *книги Достоевского*. Замена: Я читаю *Достоевского*.
Я съел *варенье, которое было в банке*. Замена:
Я съел *банку варенья*.

Всё логично? Да, живой человек что-то делает. Это он читает книги, он кушает варенье, он делает доставку свежих тортов вовремя, он отвечает за качество сервиса.

Конечно, можно написать, что "наковальни приезжают к нам прямо с заводов, с пылу с жару", "торты приезжают свежими, на них и муха не сидела" :) Но ПОЧЕМУ не написать нормально: *кто-то* *делает* *что-то*?) А не *что-то неживое (например: торт, молоток, молоко)* *делает* *что-то*.

Стены покрасились, обои переклеились, дом отремонтировался, коттедж построился. Нормально, пойдет, такие тексты везде :) Ошибки здесь нет, конечно)

Но я бы написал, что "строители" покрасили стены, отремонтировали дом и построили коттедж. Как вам такой вариант замены "тортоделаниятортом"?)))

И это классная тема (такой вот стиль), чтобы уйти от ответственности. Никакой конкретики: квартиры подорожали, курс доллара упал, экономика развалилась. Нет, это действия определенных людей привели к этим последствиям :) И людям было бы интересно узнать, кто это все делает, почему "подсолнечное масло подорожало"?

Ладно, что-то я ушел далеко от мысли о метонимии))) В первом абзаце моих размышлений есть примеры *замен*. Так чем же заменить *торты* в предложении "торты приезжают свежими"?

Ответить
Развернуть ветку
Алексей Трусов

Все ок, только слегка мимо сабжа, разве нет?

Возвращаясь к самой статье - протестирую.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Алексей Шепетько

пикча пробила в самую глубь.

Ответить
Развернуть ветку
Valentin Dombrovsky

Прикольно получилось - возможно, переделаем лендинг Learn Python в таком ключе.
Ещё бы нарезки видео с курсов в разных видео отзывов были бы разные, совсем бы круто было. ;)

Ответить
Развернуть ветку
Макс Романов

Статья интересная, но хочется знать, а какой подход более эффективен (например, с точки зрения лидов с лендоса ?). Было бы хорошо увидеть цифры по старому лендосу и по новому, а потом сравнить. Было бы интересно провести эксперимент на 5-10 лендосах и сравнить показатели.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
26 комментариев
Раскрывать всегда