Зачем нужен прототип сайта и нужен ли он вообще, чтобы landing page продавал

Зачем нужен прототип сайта и нужен ли он вообще

Зачем нужен прототип сайта? Давайте разбираться. Каждый второй предприниматель, который выходит на онлайн-рынок хочет себе разработать landing page. А теперь, внимание, тревожная цифра: 92,6% этих страниц не продают, после чего бизнесмен вынужден обращаться в другую студию и делать все сначала в надежде на положительный результат.

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

Пример лендинг пейджа

Настраивается рекламная кампания, клиент тратит от 10$ в день на Адвордс, Директ, ремаркетинг и другие «приблуды», но эффекта нет. Точнее, за 10 дней он получает всего 3 звонка и 2 заявки. Ни один из откликов не приводит к продаже.

Почему нет конверсии

Навскидку можно назвать несколько вариантов:

  1. Сомнительный/слабый оффер
  2. Высокий уровень конкуренции
  3. Неправильно настроенная рекламная кампания
  4. Слабая посадочная страница

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

  • У клиента хорошо отлаженный бизнес и достаточно конкурентная услуга
  • Безусловно, соперники на рынке есть, но цены у заказчика на нижнем пороге
  • Рекламная кампания настроена хорошо: объявления релевантны странице, клики и показы есть, трафик «льется»

Этапы создания сайта в RetsCorp

Лендинг пейдж RetsCorp

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

Каждый наш лендинг создается по такому алгоритму:

1. Первичная коммуникация с клиентом

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

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

3. Маркетинговый анализ и дополнительные вопросы

Прототип на основе брифа

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

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

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

4. Создание структуры и концепции будущего сайта

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

Также на данном этапе нами формулируется УТП клиента, которое помещается на первом развороте и тоненькой смысловой ниточкой тянется через весь одностраничник. Это делается либо в текстовом редакторе, либо уже в Moqups — онлайн-инструменте, который мы используем для разработки скетча будущего сайта.

Часто структура и концепция выступают в роли общего прототипа. Выглядит это так:

Пример прототипа

5. Прототипирование и копирайтинг

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

Сначала он заполняется «рыбами» — элементами интерфейса без текста, а уже потом копирайтер конкретизирует блоки:

Прототип посадочной страницы

Поток продающего текста выстроен таким образом, чтобы:

  1. Было стилистическое соответствие целевой аудитории
  2. Текст был на 100% информативным и содержал минимум «воды»
  3. Каждый следующий аргумент был сильнее предыдущего
  4. «Крючки» были спрятаны не только в заголовках, но и в теле текста, формах, дескрипторах, кнопках
  5. Аргументация была максимально полной и закрывала все возражения таргет-группы
  6. Кроме обещаний были акции, коммерческая ценность
  7. Рациональные и эмоциональные аргументы взаимодополняли друг друга

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

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

Подсказки в прототипе

6. Дизайн

После того, как прототип разработан и утвержден, он переходит в дизайн вместе с брифом и файлом анализа. Таким образом, у дизайнера есть:

  • Пожелания клиента, указанные в брифе
  • Общие исходные данные по проекту
  • Результаты маркетингового анализа, где специалист может больше узнать о целевой аудитории, рынке и конкурентах
  • Информация в прототипе (структура, элементы интерфейса, общие пожелания по визуализации)

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

Дизайн:

Дизайн от компании RetsCorp

Прототип:

Прототип для дизайна

7. Верстка

После утверждения дизайна, макет и прототип переходят в верстку. В прототипе прорисована вся архитектура сайта, все всплывающие окна, попапы, thank you page и так далее.

Также в пометках в прототипе мы стараемся указывать все пожелания к верстке. Например, «параллакс фото-коллажа», «якорь на следующий разворот», «подсказка при наведении» и так далее.

Как используется прототип

Прототип в нашей компании используется на всех стадиях работы над проектами. Вот только 5 сфер применения прототипа в RetsCorp:

  1. Общий прототип используется копирайтером для составления продающего текста
  2. И общий, и детальный прототип используются для коммуникации с клиентом, для обратной связи
  3. Прототип используется дизайнером для отрисовки дизайн-макета
  4. Прототип используется верстальщиком для создания правильной архитектуры сайта, для грамотной взаимосвязи элементов между собой
  5. Прототип сохраняется и используется для А/Б теста, доработок

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

Инструмент прототипирования

Зачем нужен прототип сайта и почему лендинг без прототипа не продает

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

Лендинг пейдж без прототипа ни за что не продаст потому, что…

Причина 1. В нем нет маркетинговой ценности

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

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

Причина 2. Он похож на старое лоскутное одеяло

прототип посадочной страницы

Почему в заголовке я упомянула лоскутное одеяло? Потому, что большая часть лендингов будто бы сшита из отдельных типовых блоков. Большой процент веб-разработчиков хаотически комбинирует сайт из разворотов с отзывами, «компании в цифрах», алгоритма работы и так далее. Есть ли в них логическая последовательность? Нет. Есть ли на сайте цепочка триггеров, которая приведет пользователя к покупке? Нет.

И, что еще хуже, блоки выглядят ОДИНАКОВО. Самый хороший пример — алгоритм работы. Если вы видите, что вырванный из контекста этот блок подходит к любой нише и любому другому продукту, то это провал 🙂 В идеале, даже закрыв ладошкой развороты выше и ниже вы поймете, какой продукт продвигается на сайте.

Причина 3. Дизайн мешает продавать тексту

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

Причина 4. В основе прототипа не заложена концепция

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

  • Что за продукт
  • Кому вы его продаете
  • Зачем вы это делаете
  • Что должен сделать клиент

Эта проблема чем-то похожа на ту же проблему «лоскутного одеяла», но разница в том, что проблема №2 касалась в большей степени формы, а проблема №4 связана с содержанием.

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

Причина 5. Сайт создан по принципу испорченного телефона

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

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

Вместо вывода

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

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

Оценок: 925 (средняя 5 из 5)

Зачем нужен прототип сайта и нужен ли он вообще, чтобы landing page продавал {descr}
Рекомендуем также