Конверсионный лендинг (3 часть)
Senat_28
Уверен, что ты уже написал шикарный продажник и готов дизайнить свой блестящий ленд. Если не углубляться в подробности и детали, то задачу можно обозначить глобально — должна быть нажата кнопка. «Купить», «Подписаться», «Заказать звонок» или что-то подобное. Как же подтолкнуть свою аудиторию поскорее совершить нужное тебе действие?
5 усиливающих рекомендаций:
Правильно подписывай кнопки: Название кнопки должно быть естественным свершением фразы «Я хочу ___».
Например: я хочу «КУПИТЬ» «ПОДПИСАТЬСЯ» «СКАЧАТЬ» и так далее. Вообще по поводу кнопок достаточно разных тонкостей, но в большинстве случаев этого решения достаточно.
Преодоление препятствий: Препятствие — это прекращение действия пользователем. Когда юзер хочет совершить действие, но его останавливает например заполнение паспорта или не хочет давать номер своей кредитки.
Например: ты хочешь взять мыло у своего юзера для регистрации. Чего он может испугаться? Ага, что ты будешь задалбывать его спамом и вообще ты хакер и продашь его мыло злодеям. Объясни ему, что спам ты рассылать не будешь и закрепи ссылкой на политику конфиденциальности. Читать ее он все равно не пойдет, но успокоится точно.
Взаимосвязь: Убедись, что кнопка является логичным продолжением заголовка. Если в заголовке у тебя написано «О продукте», то кнопка «заказать звонок» будет неуместна. Назови кнопку «Купить».
Дизайн: Кнопка должна быть похожа на кнопку. Это достигается разными способами, от деталей до общей композиции. Идея в том, что с первого взгляда юзер должен понять, что сюда можно клацнуть. Еще важный момент. Кнопка должна выделяться визуально. Ни в коем случае не размещай коричневую кнопку на темном фоне. Не загромождай ее отвлекающими элементами. Но и не делай ее слишком яркой, чтобы она не отвлекала от контента. Соблюдай визуальный баланс.
Формы: Не делай огромное количества форм. Если нужно дохрена данных, для сложной продажи, например, лучше уточни по телефону. Лишние формы создают преграду. И чем больше полей нужно заполнить, тем толще преграда.
Ясный дизайн
С кнопками, понятно, теперь давай творить шедевр дизайна. Вообще, дизайн и контент это две силы, которые дополняют, поддерживают и усиливают друг друга. Как Инь и Ян, как добро и зло, как мужское и женское. Любой, даже самый незначительный, дисбаланс полностью нарушает энергию лендинга.
Если хочешь выжать как можно больше из своей страницы, соблюдай эти правила и будет тебе счастье:
ДИССОНАНС: Это самый важный пункт. Перекос — это когда дизайн и контент плохо (или вообще) не соответствуют друг-другу по качеству. Это не так очевидно для начинающего мастера влияния, но на конверсию влияет очень сильно.
Обрати внимание, в магазинах с деловым продуктом, на полках творится полный хаос, хрен че разберешь. А в магаза с качественным продуктом, все разложено по полочкам и имеет достаточное количество пространства. Это касается практически всех отраслей. Продуктовые магазины. Интернет магазины. Вспоминай примеры, вспоминай. Даже автопром. Либо стоковый рынок барахла, где ты ходишь между рядами, пытаясь найти дерьмицо получше. Либо ты заходишь в салон феррари. Чувствуешь разницу?
А теперь представь сайт феррари с мигающими баннерами, простынями бесполезного текста, мутными картинками с налепленным полупрозрачным названием магаза, всплывающими с разной переодичностью окнами и прочим мусором. Согласись, ты быстро оттуда свалишь и цена за тачку покажется неоправданной. Пример конечно гиперболизирован для ясности, но суть ты прочувствовал.
Двигаемся дальше:
Иерархия: Используй дизайнерские фишки. Шрифты, композиция, цвет, геометрия и образы помогут тебе выделить наиболее важные элементы. Если не знаешь как это применять, тебе повезло, я подробно тебе обо всем расскажу. Простым языком и доступно для легкого усвоения.
Скролл: Постоянно побуждай аудиторию скролить страницу до конца. Даже если юзер споткнется где-то, у него будет мотив смотреть лендос дальше.
Читабельность: Читать текст должно быть удобно и просто. Даже если это оскорбит тебя как творца и художника. Поэтому позаботься о начертаниях, размерах шрифта и его типе в целом. Не гоже продавать коляски готическим шрифтом. Используй короткие строки. Чтобы юзеру не пришлось вертеть башкой.
Параграфы: Не пугай людей простынями текста. Это раньше у них было оправдание, мол, поисковики так лучше воспринимают сайт и двигают его в топ. Алгоритмы поисковых роботов изменились и теперь у простыней текста нет оправдания. Абзацы должны быть Емкими, короткими и конкретными. Разумеется, если это не блог-пост.
И вообще, о типографике в вебе скоро будет отдельный пост.
Пространство: Насколько ты комфортно себя чувствуешь в магазе где между товарными полками приходится протискиваться бочком? Думаю, не самое комфортное ощущение. С лендингом тоже самое. Оставляй достаточно пустого пространства. Дай пользователю «вздохнуть». И ему хорошо и тебе, потому что сосредоточенность будет именно на контенте.
Визуалы: Изображения, фотки, рисунки, крайне важны. Они дополняют, подчеркивают, дополняют текст. Это часть позиционирования. Не переборщи с картинками. И если можно обойтись без них, то не надо лепить их везде, потому что «так красивее».
Опыт пользователя: Это отдельное направление дизайна, которое на английском звучит как User eXperience. В профессиональной среде, мы это направление называем UX. Каждого пользователя в интернете есть свой опыт взаимодействия с сайтами. У подавляющего большинства он очень схож. Это позволяет интуитивно юзать сайты и клацая по разным кнопкам получать предсказуемый результат. Например: когда у тебя открыто дополнительное (модальное) окно на сайте и ты хочешь его закрыть, ты автоматически тянешься в верхний правый угол, предполагая, что там крестик которые это окно закроет. Поэтому даже в самых сильных творческих порывах не ставь этот крестив противоположный угол. Иначе возникнет диссонанс и неприятная фоновая эмоция. Тема очень обширная, если хочешь подробностей следи за постами.
Цвет: У каждого цвета есть своя эмоция которую он поддерживает. Насыщенность, объем, области применения, предыдущий опыт ЦА и многое другое влияет на восприятие цвета. Тема тоже очень объемная, для начала вполне хватит правила использовать не больше 3х цветов на своем сайте.
Анимация: Важно чтобы анимация была ненавязчива и вызывалась действием юзера. Например, кнопка меняет цвет когда юзер на нее наводит. Что касаемо скорости анимации, я использую 0.3 секунды. Ты наверняка видел скачущие, плавающие и нервно-дерганые кнопки. Так делать нельзя ни в коем случае, это отвлекает от контента. И более того, служит пресуппозицией, что ты яростно хочешь что-то втюхать.
Подытожим
Ты делаешь ленд для людей. Поэтому, выкладывая в сеть свое гениальное творение, ты четко понимаешь кто его увидит и как отреагирует. Какие боли, страхи, хотелки и мечты у твоей ЦА.
И если ты не только прислушался, но и применил все советы на практике, твой продукт обязательно полюбят. Главное донеси до них почему они должны его полюбить.
Конверсионный лендинг (часть 1)
Конверсионный лендинг (часть 2)