Подпишитесь

И получайте новые статьи блога на Ваш e-mail:

Мы против спама
Нет, спасибо!

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

13 мая 2015
Просмотров: 1 780

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

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

Алоха, дамы и господа!

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

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

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

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

С чего начать:

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

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

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

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

Как сделать лучше: вытащить главные выгоды Целевой Аудитории (далее — ЦА) на первый экран.

Какие будут последствия:

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

Рис. 1 Основные критерии выбора целевой аудитории

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

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

Ситуация №2: у тебя широкий ассортимент товаров одного вида. Очередной вопрос: как показать широту абсолютно всего спектра, но не дать пользователю уснуть на этом же блоке…?

Как сделать лучше: оставить самое важное, самую вкусную и высокочастотную информацию видимой (в этом тебе поможет разобраться вордстат), остальное — убрать под кат.

Какие последствия:

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

Рис. 2 Расстановка приоритетности загружаемого контента лендинга

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

Ситуация №1: у тебя есть широкий ассортимент товаров одного вида продукта (более 4 вариантов).

Ситуация №2: критериев выбора того или иного товара слишком много, что требует более подробного описания каждого варианта товара.

Как сделать лучше: вместо отдельного блока для описания каждого варианта продукта сделать блок с локальной навигацией по товарам.

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

Какие последствия:

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

 

Вкладки локального меню

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

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

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

Ситуация №2: у тебя есть блок с описанием товара, который и так уже перегружен всякой нужной информацией с характеристиками, и совершенно некуда добавлять ещё и фото-архив товара на овер 8000 фотографий.

Ситуация №3: твой товар настолько мал да велик, что прелести и утонченные нюансы превосходства, кроме как под макро-съемкой, не видать. И опять-таки осмотреть-то этот бриллиант надо со всех сторон – поэтому нужно предоставить посетителю множество фотографий.

Как сделать лучше: поставить слайдер. А лучше попап-слайдер.

Какие последствия:

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

Попап слайдер

 

Повышения юзабилити лендинга на живом примере:

Расскажу вкратце, как можно 3 блока превратить в один, сократить длину ленда в 3 раза и увеличить конверсию в 2,7 раз.

К нам обратился клиент с очень интересной нишей: летний отдых в горах в Карачаево-Черкесской республике. Клиент, вообще, молодчинка, про ЦА мне всё подробно рассказал, про потребности, критерии выбора, возражения – на таких просто молюсь.

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

Дизайн ver.1 первый экран

…с дальнейшим процессом прогрева интереса посетителей на 7 экранов:

Было ver.1 2 блока

На 8-9 экране уже шла активная демонстрация товара (вот и наглядное применение вкладок с локальным меню, если что):

Дизайн ver.1 локальное меню

 

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

Фактически, основным концептом изменения ленда стало сокращение размеров и перенос под первый экран блока с товаром.

Вот что было сделано:

1. Изменила оффер – убрала эмоции, добавила числовой конкретики;

Было-стало 1 экран

2. Убрала 2 блока с демонстрацией атмосферы отдыха и отзывами;

3. Соединила в одном блоке 3 варианта товара (3 экрана) в 1 экран;

 

Было-стало фото-блок

4. Добавила отзывы в блок с описанием каждого отдельного товара при помощи правильно подобранного дизайнерского решения. Данный блок можно рассматривать как наглядную демонстрацию применения Шага 2, 3 и 4: отзывы убраны под кат, блок сделан с применением локального меню, так же добавлен попап при отображении отзыва и слайдер для демонстрации фотографий.

 

Дизайн ver.2 локальное меню

По результатам: овчинка выделки стоила, конверсию мы увеличили за счет того, что посетители лендинга «доходили» до блока с демонстрацией товара, где максимально подробно раскрывалась суть предложения.

Выводы

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

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

Получите новые статьи блога на ваш e-mail:

Похожие статьи:

Добавить комментарий (2)

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

Наверх