Как сделать лендинг лучше?

Мы решили взять консультацию на тему: как улучшить наш лендинг. Зачем? Сейчас расскажу.

Зачем нам улучшать лендинг?

Напомню – мы сделали лендинг. Сейчас он выглядит так. Какова функция лендинга?

1. Во-первых, протестировать интерес к продукту. Мы на него привлечем AdWords трафик, анализируем конверсию. Другими словами, сколько раз наши посетители совершат какое-то из целевых действий. Это будет для нас показателем интереса потенциальной целевой аудитории к нашему продукту. Целевыми действиями (в порядке приоритета, начиная с главных) считаем следующие:

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

Хотя, если быть точным, то конверсия – это отношения количества посетителей совершивших целевое действие к количеству всех приведенных пользователей) Но суть ясна

2. Во-вторых, лендинг должен привлечь людей к взаимодействию (то есть к коммуникации) с нами. В процессе общения в рамках демонстрации программы (либо просто ответов на вопросы) мы планируем лучше узнать задачи/проблемы/потребности нашей целевой аудитории. В конечном итоге это нам позволит сузить целевую аудиторию до тех сегментов, с которыми ожидается наиболее эффективное взаимодействие. Напомню, изначальное “пристреливание” по сегментам ЦА описал здесь.

Теперь, наконец, перейдем к вопросу – а зачем нам улучшать лендинг (соответственно, зачем для этого брать консультацию).

Первая задача лендинга – тестирование интереса. На данные, которые мы получим от тестирования может влиять не только сам естественный интерес к продукту, а еще и качество сайта (внешний вид, расположение блоков и т.д.). Мы предполагаем, что в итоге, пользователи могут уйти с сайта не потому, что им не интересен продукт, а потому что увидят “говеный” сайт. Как результат – мы получим неточную информацию об интересе целевой аудитории к нашему продукту. Мы хотим минимизировать риск возникновения подобной ситуации.

Аналогично качество лендинга может повлиять на результативность по второй задаче (привлечения посетителей к взаимодействию с нами). Собственно и это нам совершенно ни к чему.

Задачи, которые ставим перед консультантом.

Задача №1.
С учетом предназначения сайта, о котором речь пойдет ниже, дать рекомендации, что улучшить. Для нас очень важно, чтобы эти рекомендации были чем-то обоснованы. То есть мы хотим получить не только ответ на вопрос ЧТО улучшить, но и ПОЧЕМУ.

Задача №2.
Привести примеры оптимальной в нашем случае реализации отдельных блоков и общего вида лендинга.

Рекомендации консультанта

Что бросается в глаза?

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

Пример

Заголовок и краткое описание

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

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

Главное целевое действие

Кнопка не выделяется на фоне страницы, а должна сразу же бросаться в глаза. Как выбрать нужный цвет? Все просто: выбирайте по спектру противоположный основному. А градиент с фона можно убрать – это не обязательно.

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

Меню для навигации по странице

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

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

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

Итак: справа размещаем главную кнопку – “заказать демонстрацию”, слева от нее кнопку “скачать”, еще левее – ссылку на прайсинг. Справа разместить более важные данные. Кнопка поиска дублируется.

Не хватает изображений продукта

В тексте описано, что это за продукт. Но у человека возникает вопрос, как он выглядит, что из себя представляет. Лендинг предоставляет только одну возможность ознакомиться с внешним видом продукта – посмотреть видео. Следует учитывать, что в большинстве случаев пользователям лень смотреть несколькоминутное видео. Потому не помешает разместить на первой странице несколько изображений продукта, можно даже скриншотов из того же видео. Пример:

Пример

Отступы

Нужно привести в порядок отступы – неряшливый визуальный дизайн портит общее впечатление о товаре. Отступы внутри контента (под заголовки) должны быть меньше, чем отступы от границы блока до конца контента.

Блок “Заказать демонстрацию”

Стоит уменьшить сам этот блок, но увеличить контраст, изменить стиль кнопки. Очень хорошо смотрится интерэкшн. Интерэкшн – отклик кнопки (когда наводишь на кнопку, видишь, что она реагирует).

Единообразие стиля элементов

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

Пример:

Пример

Пояснение целевого действия

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

Видео

Видео хорошо презентует продукт. Очень информативное, но оно не для первого экрана. Человек может сразу не настроиться на восприятие 2-3 минутного обзора. Под видео хорошо бы разместить короткое описание того, что показано. Сначала нужно заинтересовать посетителя, а уже потом показывать видео, в котором детально продемонстрировать функции продукта. Итого, видео следует разместить ниже на странице и сопроводить небольшим текстом, описывающим основные функции продукта.

Текст в рамочке (100 results for free)

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

Техническое описание

В лендинге текст с техническим описанием довольно большой, к тому же данная информация дублируется в нескольких местах. Желательно весь текстовый контент как-то стандартизировать, чтобы текст легче считывался, лучше воспринимался визуально. Для такого продукта, как наш это основное: акцентировать внимание на плюсах – это тоже хорошо, но все таки основным элементом является функционал. Посетитель в первую очередь хочет узнать, что ему даст этот продукт. Блок текста, который несет более важную информацию, нужно оформить крупнее и ярче (сделать подпункты с иконками, крупный шрифт).

Возможно, лучше будет восприниматься, если текст не разбивать на много небольших блоков, разбросанных по странице, а объединить все в один. Например, можно написать один общий текст, который будет не столько связан с функционалом, сколько описывать проблемы, которые с помощью этого продукта решаются. А в скрытом тексте написать уже о технических элементах. То есть они будут доступны тем, кто заинтересуется, при нажатии на кнопку. Такой прием позволит нам не “грузить” пользователя техническими данными.

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

Cоциальная информация и отзывы

Хорошо, чтобы на лендинге присутствовала какая-то социальная информация: например, блок “О нас пишут” со ссылками на упоминания продукта в СМИ, логотипы компаний, с которыми сотрудничает наша компания.

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

Цена

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

Форма обратной связи

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

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

Примеры сайтов “для вдохновения”

И на последок несколько примеров, как делают умные люди:
focusboosterapp.com
usabilityhub.com
dropbox.com


Слова благодарности

Ух, получили мы пинков. Теперь бегом все исправлять. Ну и конечно, огромное Данке Шон нашему консультанту Mher Hovakimyan!