10 посадочных страниц: разбираем, выявляем плюсы и минусы, улучшаем конверсию

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

Ну что ж, начнем.

1. Orobind

Orobid – это индийский сайт, на котором существует возможность поиска персонального фитнес-тренера, практикующего поблизости от места проживания клиента.

Покажи себя с лучшей стороны

Людям редко нужна общая информация. Когда они заходят на какой-либо сайт, они ищут нечто, устраивающее именно их, и Orobind делает все, чтобы удовлетворить любопытство даже самых взыскательных посетителей. Так, помимо списка доступных тренеров, сайт содержит статьи и фотографии, наглядно иллюстрирующие преимущества занятий фитнесом. Истории успеха его клиентов, достигших совершенства, несомненно, вдохновляют новых посетителей принять правильное решение.

Устранять, а не создавать трение

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

На посадочной странице обязательно должно быть сообщение, призывающее к действию. В нашем случае, это слоган «All set to begin the good fight?», что переводится как «Ты готов начать схватку?». В нем четко отражен призыв сражаться и идти до конца к поставленной цели, что соответствующим образом настраивает пользователя. Надпись на кнопке «Lets Go» (что переводится как «Поехали») также поддерживает боевой настрой и мотивирует ее нажать.

Социальные и доверительные иконки

Людям нравится думать, что они выбирают продукт, которому доверяют другие пользователи. В данном случае под слоганом размещены следующие цифры: 1140 завершенных сессий, 292 килограмма переработаны в счастье, 31 город задействован. Такие показатели говорят о том, что продукт пользуется спросом.

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

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

2. TweetDis

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

Каковы конкретные требования, предъявляемые к его работе?

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

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

Однако не сто́ит забывать, что основной целью страницы является не просмотр видео, а установка плагина, поэтому слоган, мотивирующий пользователя установить плагин и находящийся внизу страницы, – не лучшее решение: для того чтобы его найти, требуется скроллинг страницы. Слоган лучше вынести наверх, так как в нем заключен общий смысл всего плагина: «Ты получишь трафик из Twitter, когда контент будут твитить твои пользователи, а не ты» («You get traffic from Twitter when YOUR VISITORS tweet your content, NOT YOU!»).

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

Краткость и прозрачность в битве за пользователя

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

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

Если рассматривать конкретную посадочную страницу, то главным ее недостатком, пожалуй, является излишнее количество текста под видео. В качестве рекомендации владельцам сайта мы бы предложили провести A/B тестирование (но с меньшим объемом текста на странице) и посмотреть, каков будет результат по конверсии.

3. WPD

WPD предназначен для поиска нужных плагинов. Вебмастера могут воспользоваться данной технологией, если их сайты созданы на платформе WordPress.

Будь понятным

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

Сегодня WPD решает эту задачу за своих клиентов. Их слоган, вынесенный на главный экран посадочной страницы, звучит так: «Легкий способ найти плагины для WordPress» («A smarter way to find WordPress plugins»). Для дополнительной убедительности тут же расшифровывается и сама «легкость» поиска, вернее, ее составляющие: «Ищем за вас плагины, оценивая обзоры, категории, тэги, скачивания, апдейты, рейтинги и популярность» («Find Plugins for your site by Reviews, Categories, Tags, Download Count, Last Update Date, Rating and Votes»). Поскольку слоган хорошо выделяется на основном фоне сайта, его просто невозможно не заметить, что, несомненно, также является положительным моментом.

Забудьте о своем мнении

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

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

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

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

4. Natura Petz

Natura Petz производят органические добавки к пище для животных.

Каждая страница имеет свою цель

Это уникальная посадочная страница, которая таргетирована на очень специфическую целевую аудиторию – оптовиков, посетивших стенд компании на выставке «Super Zoo».

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

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

Скромный, но мощный дизайн

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

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

5. AdSpike

Компания Odoo разработала алгоритм, позволяющий оптимизировать бюджеты на рекламу в Google AdWords.

Имиджи

Наиболее «мощным» визуальным элементом на странице является женщина, чей взгляд устремлен на движущийся график. Это правильный ход, так же, как и грамотно выверенное цветовое решение страницы: белый фон, считающийся «легким», не перегружает читателя, что облегчает положительное восприятие страницы в целом. И только оранжевая линия, по нашему мнению, выбивается из общего дизайна. Проблема в том, что она отвлекает на себя слишком много внимания. Основным ярко выраженным элементом на странице должна быть кнопка «Start Now», в данном случае просто потерявшаяся на фоне этой оранжевой линии. Хотя, в данном конкретном случае линии копируют график статистики Google AdWords (хорошо знакомый пользователям системы) и придется решать вопрос не с ликвидацией оранжевой линии, а с внешним видом кнопки. Возможно, необходимо сделать ее ярче и больше.

Цвет линий статистики

Мы уже упоминали выше, что копия статистики Google AdWords хорошо знакома пользователям системы и что в конкретном случае ее можно оставить без изменений.

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

Еще одним плюсом является выделение цифр под графиком зеленым цветом (в данном случае – это показатель «+41,13%»). С одной стороны, зеленый цвет негласно принят для обозначения показателей положительной динамики, а с другой – как это ни парадоксально – цифры, окрашенные в «цвет денег», позитивно влияют на человеческое восприятие.

6. Odoo

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

Соответствие сайта продукту

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

Имидж на странице сайта ничего не говорит о самой платформе и слишком отвлекает внимание от основного слогана: с первого взгляда крайне сложно понять, в чем суть посадочной страницы. Для такого сайта хорошо бы подошел вариант страницы, аналогичный странице TweetDis (рассматривали выше) – со стрелочками и подписями, поясняющими суть продукта. Имидж должен быть вдохновляющим, призывающим использовать платформу. Если работа построена без учета этого момента, посадочная страница «теряется». Именно поэтому тот же WIX на первый взгляд более интересен, чем Odoo, хотя продукт Odoo нисколько не хуже.

Ключевые слова

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

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

Далее смотрим на подзаголовок «Мобильный. Открытый код. Дружественный для SEO». Означает ли это, что сайты на платформе Odoo адаптированы только для мобильных устройств, но никак не для большого веба? Или что «открытый код» предусматривает наличие специальных навыков для работы с сайтом? Возможно, тут следовало бы написать «Для веба и мобильных. Прост в использовании. Дружественен для SEO». А для неопытных пользователей отлично смотрелось бы добавление «Поддержка 24/7».

7. UP

UP – это краудфандинговая платформа.

Кликни тут

На этой посадочной странице размещена очень удачная кнопка. Удачная она и по своему размеру, и по положению, и по персонализированному предложению «стань участником сообщества №1491». Это предложение, помимо всего прочего, отражает внутреннее стремление почти каждого – стать частью чего-то целого, принять участие в чем-то интересном: посетители хотят быть членами сообщества, и именно это им и предлагают.

Призыв к действию

На странице присутствуют сразу три слогана, причем все три видны одновременно. На наш взгляд, это перебор. Лучше было бы каждый слоган разместить так, чтобы новый появлялся только при пролистывании страницы в низ. И, как вариант, кнопку «Sign UP for free» («Подпишись бесплатно») в правом верхнем углу следовало бы оформить в другом цвете, чтобы она отличалась от основной кнопки и акцентировала внимание посетителя на себе.

Продуктовое предложение

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

8. CM First

CM First трансформирует бизнес-приложения в мобильные приложения.

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

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

Зачем давать пользователю столько информации в самом начале работы? Такой объем информации рассеивает внимание, не позволяя сразу же выделить нужное, поэтому пользователь теряется и в итоге уходит со страницы.

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

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

Слайдер: быть или не быть?

На посадочных страницах слайдеры называют «убийцами конверсий», так как они «размывают» внимание пользователя. Если у вас есть сомнения по поводу целесообразности присутствия слайдера на вашей посадочной странице, предлагаем провести А/В тестирование и уже на основе полученных данных принять соответствующее решение.

Ваши пользователи – новички или уже знакомы с брендом?

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

По данной странице мы провели соответствующее тестирование, и итогом стал вот такой дизайн:

9. Bottle Scout

Bottle Scout помогает хорошим людям из Колорадо находить близлежащие коктейль-бары.

Местность

Пользователям предоставляется два варианта поиска близлежащего бара: с помощью категорий или просто выбрав местность на карте. Эти варианты визуально слишком разные, потому страница выглядит как минимум странно. Создается впечатление, что владелец сайта никак не мог определить, какой же из вариантов поиска удобнее, и потому решил разместить оба. Для того чтобы не попасть в подобную ситуацию, проведите A/B тестирование и посмотрите, какой из двух вариантов приводит к лучшей конверсии.

Перегрузка элементами

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

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

Имидж, соответствующий бренду

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

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

10. ClipperSoft

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

Последовательность

Очень важно соблюдать правильную последовательность в изложении информации о своем продукте.

Простой vs Сложный

В названии mySimpleAds есть слово «простой» (simple), и на странице под основным сообщением мы видим фразу «simple interface, fast and light, & ready to download», что переводится как «простой интерфейс, быстрый, легкий и готовый к скачиванию». Все было бы прекрасно, если бы на той же самой странице, но чуть ниже, пользователь не обнаруживал бы следующие требования: PHP5.3.3+, MySQL5.1+… и т.д. Если вы говорите о простоте, то зачем начинать с указания технических ограничений? Не лучше ли убрать эту информацию с посадочной страницы?

Купить vs Скачать

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

Цвета и чистый фон

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

В заключении

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

Удачи!

Источник: www.conversioner.com