Перфекционизм – враг профессионализма

Что отличает начинающего копирайтера-прототипировщика или UX-редактора от опытного?

Способность критически воспринимать поступающие вводные.

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

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

-> … как – рраз! – привет из соседнего отдела: нужно пропиарить на вашем лендинге их лендинг с услугами, к мероприятию вообще никак не относящимися.

-> Ваша задача – создать под это дело отдельный блок с кнопкой. Отказаться нельзя: пиар согласован на вышестоящем уровне.

«Но это же ударит по конверсии! – скажете вы, – Зачем на ленде события предлагать переход ещё куда-то, кроме формы регистрации на это самое событие?»

Затем, что «устроены так люди»: другому отделу плевать: не их вебинар, не их конверсия, не их проблема. Это работает везде, всегда и во всех компаниях. Дискуссия закрыта – садись в корыто.

Итак, ваши действия?

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

Результат предсказуем: поломанная иерархия действий и потеря части лидов.

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

1. Когда матрица глючит, обычная логика не работает. Попробуйте мыслить от противного: что делать, чтобы внимание пользователя не концентрировалось на этом блоке?
2. Забудьте про инфостиль. Скорее всего вам пришлют заранее согласованные тексты, написанные девственно-канцелярским языком. Канцелярит – прирождённый убийца внимания: пусть делает своё дело.
3. Не выделяйте преимущества в красивые боксы: ограничьтесь маркированным списком.
4. Измените цвет кнопки перехода на менее броский. Например: если все кнопки действия, ведущие к регистрации, оранжевого цвета, сделайте кнопку белой или прозрачной. Так пользователь быстро поймёт, куда нажимать скорее надо, а куда – скорее нет.
5. Не размещайте блок в верхней части мэйна, в разделах с критически важной информацией. Чем ближе к футеру – тем лучше.

Короче, не старайтесь там, где не надо: перфекционизм в сочетании с глупостью в разы опаснее простого раздолбайства. Помните: вам платят не за то, чтобы вы довели до идеала отдельно взятый блок, а за конверсию ленда целиком. Поэтому и спросят именно за неё.

---

Примеры событийных лендингов с высокой конверсией можно увидеть здесь: смотреть раздел «Проекты»

Миф об «Аиде»

Есть в рекламном нарративе такая модель подачи информации – AIDA. Расшифровывается как «Attention – Interest – Desire – Action» («Внимание – Интерес – Желание – Действие»). Модель применяют почти повсеместно: от нативных статей и анонсов – до структуры лендингов. И вот с последними проблема.

Дело в том, что «Аиду» (я не про оперу Верди) придумали в стимпанке в конце XIX века, когда никаких веб-интерфейсов никто не мог представить даже в опиумном кумаре. То бишь предназначалась моделька для сугубо статичных текстовых объявлений в газетах разного уровня желтизны. Единственное возможное для вас действие при таком сценарии – вырезать купон с контактами торгового агента. Ну или... вы поняли;)

Однако главное отличие печатной рекламной статьи от лендинга заключается не в количестве вариантов для моментального взаимодействия с вами. Нет.

Главное отличие – в самой механике взаимодействия с получателем информации в режиме реального времени. Когда вы читаете газету, вам придётся получить все сведения о продукте, ибо до этого переходить к купону с контактами просто бессмысленно. Задача составителя печатной рекламы – как можно дольше удерживать ваше внимание на тексте, чтобы вы прочитали всё изложенное, плавно соскользнули к контактам и, в идеале, позвонили по указанному номеру или пришли по указанному адресу. Известный копирайтер Джозеф Шугерман называл такую механику «Скользкой горкой».

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

Конечно нет.

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

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

Смекаете, о чём я? Отлично, достаю из рукава козырь.

70-80% посетителей вашего лендинга не пойдут дальше первого экрана. Перейдя на сайт по ссылке в конце анонса, решение о регистрации большинство примет именно в хедере. (Информация получена из результатов сплит-теста лендингов, которые я разрабатывал в одной компании по созданию IT-курсов)

Вот о первом экране и поговорим.

Анамнез

Вы не поверите, сколько всего пространство между тегами <header> и </header> способно рассказать о своих создателях. Самая частая проблема, которую я наблюдаю, – абсолютная уверенность в массовом интересе к продукту. Из этой уверенности произрастает опасное заблуждение: «лендинг будут листать все, охотно, от начала и до конца».

Так рождаются 3 уровня хедеров-пустышек:

---

Несмотря на существующие косметические различия, тут просматриваются четыре фундаментальные сходства:

• отсутствие проблемы
• отсутствие решения
• отсутствие вознаграждения
• и чё?

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

Так вместо лаконичного синопсиса с чёткими преимуществами пользователь первым делом лицезреет великое ничто. Ведь ни модный дизайн, ни яркая кнопка, ни познания создателей в английской IT-терминологии не сподвигнут аудиторию к действию. А это значит, что сражение за внимание уже проиграно.

Хуже всего ситуация с такими экранами обстоит в мобильной версии. Если на ПК пользователя ждёт пустота в первой степени, то на мобиле – пустота в квадрате.

Диагноз

Завышенное ЧСВ.

Лечение

1. При разработке первого экрана исходите из простой установки: на ваш уникальный продукт всем плевать.
2. Задайте себе вопрос: что мне делать, чтобы плевать было чуть менее, чем всем?
3. Попробуйте чётко сформулировать проблему и решение.
4. Упакуйте проблему и решение в: а) понятный h1 с конкретным результатом; б) примерно 360-символьный блок текста под h1. Помните: текста должно быть ровно столько, чтобы сподвигнуть пользователя нажать на кнопку.
5. После таких нечеловеческих усилий большинству всё равно будет плевать. Так что предложите бесплатные бонусы: например, скидку, инструкцию, видеоурок.
6. Не устройте раскардаш: знайте меру. Даже если бонусов сильно больше двух или вы планируете какой-то розыгрыш – всё равно ограничьтесь парой боксов с предельно лаконичными формулировками.
7. У вас должно получиться что-то вроде:

Кстати, насчёт кнопки целевого действия.

Вы можете оказаться в ситуации, когда предложить вообще нечего, кроме самого вебинара, а значит и блоки с лидмагнитами на лендинг добавить не получится. Тогда вы рискуете потерять часть лидов, если пользователи всё же решат (а некоторые точно решат!) полистать лендинг.

Что ж, делюсь предельно тупым, но рабочим вариантом.

Пишем панель навигации:

Затем идём в настройки CSS, где у селектора тега nav прописываем свойство {position: fixed}. То бишь закрепляем нашу панель в абсолютной позиции относительно других элементов страницы.

Вуаля! Да, получилось схематично, но я особо и не старался: главное – донести суть. Теперь при прокрутке страницы кнопка действия всегда будет перед глазами.

Попробуйте: https://erv7.neocities.org/experiment/fixed

Чёрная дыра медиамаркетинга

Когда-то очень давно создатели разного рода соцсетей поняли: в парадигме социальной сети одной лишь «социальной» функции недостаточно: в конце концов, должна же такая социализация чему-то служить, иначе зачем оно всё?

С тех пор вконтакты, инстаграмы, фейсбуки (последние два принадлежат запрещённой в России Meta) и начали работать инструментами окучивания буратин, дабы выколачивать червонцы более изощрённо.

Поначалу все эти попытки сформировать сообщества, а значит и дискурс, вокруг тех или иных продуктов и правда работали. Но не всегда и не со всеми. Дело в том, что формирование жизнеспособного дискурса возможно только в контексте действительно серьёзной проблемы. Собственно для обсуждения общественных проблем, а вернее для централизованного анализа реакции социума на оные, социальные сети изначально и создавались.

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

Общество потребления, как и любое другое общество, не может существовать без своей философии. Такого рода «философией» здесь выступает позитивное мышление, строго соответствующее задачам массового человека в 21 веке. Если коротко, то задачи сводятся к обмену денег и времени на иллюзии, формирующие вакуум вокруг каждого отдельного индивидуума. И, как показывает практика, столкновений со сложной реальностью розовый вакуум не выдерживает. Однако именно суровая реальность и заставляет людей объединяться в сообщества и что-то обсуждать. У розового вакуума свойства ровно противоположные.

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

Результат такого подхода хорошо известен. Инстаграм и Фейсбук превратились в рупор идиотической гендерно-инклюзивной пропаганды, а ВК всё сильнее напоминает нежизнеспособного мутанта.

Единственным местом, которое хоть как-то соответствует той самой изначальной функции соцсети, а именно объединению людей вокруг реальных проблем, остаётся Телеграм. Однако театр Карабаса-Барабаса добрался и до Телеги.

---

Не бойся кнопок: бойся текстового болота

Среди маркетологов бытует мнение, что любые действия на лендинге, кроме условного «Купить», вредят конверсии.

Это иллюзия.

У действий пользователя есть чёткая иерархия. «Купить» или «Записаться» – главное, целевое действие. Действие первого порядка. Но на лендинге могут также быть действия второго и даже третьего порядков, мирно соседствующие с целевым.

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

Текстовые полотна. Или, как я их называю, «текстовые болота», примерно такого же уровня проходимости, как те, в которых чуть не завязли Фродо, Голлум и Сэм, когда топали с колечком к Роковой Горе.

Самые незабываемые ощущения от прогулки по таким «болотам» вы получите в мобильной версии.

Например, когда мы в OTUS готовили очередной лендинг крупной IT-конференции, я как-то открыл инструменты разработчика и посмотрел, как раздел с информацией о спикерах выглядит на мобиле.

А выглядел раздел так:

Cплошным полотном текста и картинок без конца, края и возможности перейти к регистрации.

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

Поэтому мне надо было что-то делать с раскинувшейся на несколько экранов буквенной топью. Сокращать тексты – не вариант. Для десктопа они в самый раз. Если их обрезать, получатся полупустые экраны в ПК-версии.

Двигать куда-то далеко вниз этот блок тоже не хочется:

По логике тема должна быть рядом со спикером.

Но если нельзя сократить текстовые блоки, почему бы не сократить количество экранов?

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

Вторичной информации – вторичное действие. А действие – это кнопка, вернее переключатель. Переключатель экрана.

Вуаля!

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

Кнопка переключения решила сразу несколько проблем: скрыла дополнительную информацию, позволила соединить три связанных по смыслу раздела – Спикер, Темы, Расписание – воедино. И самое главное: в результате мы смогли добавить то самое целевое действие в раздел с наибольшим количеством текста на всём лендинге. Речь о кнопке «Записаться», конечно же. При чём визуальная иерархия чётко соблюдается: переключатель сразу считывается, как вторичное действие.

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

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

Возможно именно кнопка окажется лучшим решением.

Можно ли создать удобный и, одновременно, запоминающийся сайт?

В теории – да.

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

Вам приведут примеры конкурентов или корпоративных гигантов, которые должны доказывать, что:

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

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

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

Нашёл «изумительный» креатив на официальном сайте Сбера:

Авторы, часом, не забыли, что в России действуют законы России, а не шариат? Для справки господам «эффективным менеджерам»: шариат – это именно законодательство.

Можно ж было написать, например, «по нормам ислама». Но тут решили зайти с козырей: возможность оформления ипотеки основывается сразу на законах, принятых в магометанских странах.

То есть кто-то призывает исполнять в нашей стране «нормы» чужого законодательства.
Или «вы не понимаете, это другое»?