Создание лендинговой страницы

От ужасной до прекрасной (и все, что происходит в промежутке)

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

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

Лендинговая страница должна отвечать на следующие вопросы:

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

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

Прежде, чем приступить к дизайну

Для начала надо выбрать на чем сфокусирована наша компания. Active Collab — достаточно крупное приложение и имеет несколько возможностей:

Сотрудничество команды 
Организация работы 
Оплата

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

#1.0

Первый проект был создан без особого внутреннего сотрудничества. Маркетинг продиктовал создание лендинговой страницы, и мы позвали фрилансеров; копирайтер структурировал информацию; дизайнер создал макет.

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

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

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

#2.0

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

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

Нам также нужно было разместить пункт «управление проектами» так, чтобы посетитель не решил, что Active Collab это приложение для ведения счетов.

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

Это было немного лучше, чем предыдущая, но по-прежнему не продавала. Дизайн и макеты выглядели как что из 2006 года. К тому же, там было не очень много информации. Мог бы кто-то что-то понять из такой страницы?

Но, по крайней мере, мы стали думать и работать вместе.

#2.1

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

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

Мы обсуждали, стоит ли размещать футер. Аргумент против: не стоит, потому что посетитель не должен уходить со страницы в поисках информации. У страницы только одна цель — составить впечатление.

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

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

#3.0

Мы подумали над видео еще и поняли, оно слишком сосредоточено на создании счетов — а мы хотели показать весь процесс, потому мы его выкинули.

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

(вы) + глагол + что + ощутимое преимущество

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

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

#3.1

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

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

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

#3.2

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

Мы решили сделать специальное предложение и стимулировать людей, которые пришли из-за PPC, предлагая им 90 дней бесплатно, в отличие от обычных 30. Мы убедились, что стрелка ведет пользователя по форме, и что там есть звездочка (*), которая дает понять, что это предложение ограничено, и посетитель должен воспользоваться этим, пока оно длится.

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

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

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

Заключение

Мы собрали всю визуальную составляющую для ясности:

Никакого больше градиента;
Нет изображениям, которые выглядят как кадры кинохроники — скриншоты это то, что продает продукт; это также показывает, что посещение Active Collab это приложение для управления проектами;
Нет разным фонам — шаги не являются отдельной логической единицей, а фон должен это показывать;
Нет беспорядку с элемантами справа и слева — все сейчас там, где должно быть, ваши глаза не должны искать, чтобы найти информацию;
Нет форме регистрации сверху, просто ссылку на нее;
Шаги должны помогать пользователю;
Текст должен следовать простой формуле: глагол + что;
Мы добавили информацию о ценах («начиная с менее чем $ 1 в день») более мелким шрифтом, но нам интересно, как это будет влиять на обменный курс, сделав его главным кандидатом для A / B теста.

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

Теперь мы знаем точно:

Почему каждый элемент существует,
Почему он в этом конкретном месте,
Почему его дизайн именно таков.

Визуальный дизайн это круто, но преобразования еще лучше

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