Оптимизация пространства лендинга или КАК уместить на одном экране сразу 3 блока

Повышаем конверсию за 4 шага

Алоха, дамы и господа! Вы же знаете, что нет предела совершенству? Поэтому сейчас я расскажу, как за 4 простых шага оптимизировать пространство посадочной страницы, и помочь потенциальным покупателям превратиться в клиентов.

Подготовительный этап: Анализ поведения пользователей на сайте

Ситуация: на первый взгляд, лендинг сделан «идеально», не к чему придраться, без сучка – без задоринки, в соответствии с логической структурой. Над копирайтингом пыхтели твои мозги и мозги твоего маркетингового отдела, чтобы получить на выходе идеальный продукт. Но вот жабка сидит и перекрывает тебе доступ кислорода, нашептывая: «Ты можешь заработать больше. Больше…» Да, можешь. И в этом тебе поможет юзабилити-аудит (более подробно о том, как повысить юзабилити своего ленда читай здесь). С чего начать:

1. Открой Метрику Яндекса (или Гугл Аналитикс);
2. Потрать часа два, попивая чаёчек-кофеёчек, просматривая Вебвизор (анализируя данные аудитории и поведения в Аналитиксе);
3. Пойми, что вызывает трудности у твоего посетителя или чему он уделяет особое внимание;
4. Составь гипотезы и принимайся вносить правки в ленд.

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

Шаг 1. Поместить триггеры на первый экран

Ситуация №1: Представим, что у тебя мега конкурентоспособный бизнес, умопомрачительное торговое предложение и вообще – ты очень заботишься о своих клиентах. И на лендинге у тебя оффер длиною в жизнь и 15 блоков, описывающих преимущества твоего товара-сервиса-компании. Всё в шоколаде. Как сделать лучше: вытащить главные выгоды Целевой Аудитории (далее - ЦА) на первый экран. Какие будут последствия:

• уменьшение длины лендинга за счет добавление блока с необходимой и важной для ЦА информацией на первый экран;
• сокращение времени обработки клиента отделом продаж за счет предоставления необходимой информации на первом экране;
• формирование у посетителя желания узнать о перечисленных выгодах детально (поэтому необходимо использовать точные цифры).

Шаг 2. Убрать отзывы под кат

Ситуация №1: твоя ниша держится на принципах «сарафанного радио», но лгать своим клиентам и писать напичканные хвалой отзывы не хочется, тем более – есть настоящие, эмоциональные. Но живые отзывы – рассказы в три дастана. Встает вопрос: как и отзывы оставить, и посетителя не спугнуть объемом блока? Ситуация №2: у тебя широкий ассортимент товаров одного вида. Очередной вопрос: как показать широту абсолютно всего спектра, но не дать пользователю уснуть на этом же блоке…? Как сделать лучше: оставить самое важное, самую вкусную и высокочастотную информацию видимой (в этом тебе поможет разобраться вордстат), остальное - убрать под кат. Какие последствия:

• сокращение объема лендинга в несколько раз, что упрощает восприятие информации посетителем, но не ограничивает его в возможности разобраться во всей красе товара. Тем более, кнопочка «Показать ещё» всегда вступает в некую интрижку с посетителем, действуя на его подсознание, и заставляет удовлетворить своё любопытство, нажав на неё;
• сокращение времени загрузки страницы ввиду расстановки приоритетности загружаемого контента лендинга.

Шаг 3. Сделать вкладки с локальной навигацией для товаров / услуг

Ситуация №1: у тебя есть широкий ассортимент товаров одного вида продукта (более 4 вариантов). Ситуация №2: критериев выбора того или иного товара слишком много, что требует более подробного описания каждого варианта товара. Как сделать лучше: вместо отдельного блока для описания каждого варианта продукта сделать блок с локальной навигацией по товарам. *сразу оговорюсь: «Так для этого же можно составить таблицу!», - скажешь ты. И я соглашусь. Одно Но: в таблице есть ограничение по описанию продукта, а в локальном меню – нет, т.е. можно использовать всю необходимую информацию, не загоняя себя в рамки (рамки разумного никто не отменял). Какие последствия:

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

 

Шаг 4. Поставить на изображения слайдеры-попапы

*вообще применение попапа по умолчанию необходимо почти везде, где можно на что-то кликнуть. Если изображение меньше половины экрана – пользователь обязательно на него кликнет. Ситуация №1: ты имеешь огромный фото-архив, демонстрирующий твой товар по всем 360 градусам. Но выкатывать все виды на ленд – это значит, буквально, убивать скорость загрузки. Ситуация №2: у тебя есть блок с описанием товара, который и так уже перегружен всякой нужной информацией с характеристиками, и совершенно некуда добавлять ещё и фото-архив товара на овер 8000 фотографий. Ситуация №3: твой товар настолько мал да велик, что прелести и утонченные нюансы превосходства, кроме как под макро-съемкой, не видать. И опять-таки осмотреть-то этот бриллиант надо со всех сторон – поэтому нужно предоставить посетителю множество фотографий. Как сделать лучше: поставить слайдер. А лучше попап-слайдер. Какие последствия:

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

  Повышения юзабилити лендинга на живом примере: Расскажу вкратце, как можно 3 блока превратить в один, сократить длину ленда в 3 раза и увеличить конверсию в 2,7 раз. К нам обратился клиент с очень интересной нишей: летний отдых в горах в Карачаево-Черкесской республике. Клиент, вообще, молодчинка, про ЦА мне всё подробно рассказал, про потребности, критерии выбора, возражения – на таких просто молюсь. Так вот, после разработки структуры ленда и копирайта, решено было сделать такой эмоциональный дизайн с подробной демонстрацией фотографий с места отдыха (благо, 11 гигов архива помогло нам в этом). На выходе получился вот такой вот свободный, дышащий полной грудью первый экран: …с дальнейшим процессом прогрева интереса посетителей на 7 экранов: На 8-9 экране уже шла активная демонстрация товара (вот и наглядное применение вкладок с локальным меню, если что):   Но вот сидели мы, считали заявки, и как-то всё туго шло – по моим подсчетам, должно было быть гораздо больше. Поковырявшись в вебвизоре, в карте скроллинга и кликов, я обнаружила, что, собственно, ленивые пользователи не доходят до описания товара - а это как бы ключевой момент. Фактически, основным концептом изменения ленда стало сокращение размеров и перенос под первый экран блока с товаром. Вот что было сделано: 1. Изменила оффер – убрала эмоции, добавила числовой конкретики; 2. Убрала 2 блока с демонстрацией атмосферы отдыха и отзывами; 3. Соединила в одном блоке 3 варианта товара (3 экрана) в 1 экран;   4. Добавила отзывы в блок с описанием каждого отдельного товара при помощи правильно подобранного дизайнерского решения. Данный блок можно рассматривать как наглядную демонстрацию применения Шага 2, 3 и 4: отзывы убраны под кат, блок сделан с применением локального меню, так же добавлен попап при отображении отзыва и слайдер для демонстрации фотографий.   По результатам: овчинка выделки стоила, конверсию мы увеличили за счет того, что посетители лендинга «доходили» до блока с демонстрацией товара, где максимально подробно раскрывалась суть предложения.

Выводы

1. Добавь триггеры на первый экран: выноси значимые для твоих клиентов преимущества на самое видимое место по максимум.
2. Прячь под кат большие объёмы схожей информации из одного блока: сокращай длину ленда.
3. Сделай вкладки с локальной навигацией: структурируй большой объем информации по товару/услуге в один блок для более развернутого представления о твоём продукте.
4. Поставь слайдер-попап на изображения, демонстрирующие товар с разных сторон (процесс предоставления услуги) – это даст возможность посетителю узнать о твоем продукте более подробно, а заодно добавит лишний пруф.

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