Прототип лендинг пейдж — как создать эффективный макет посадочной страницы

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

как создать эффективный макет посадочной страницы

Что такое прототип лендинг пейдж:

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

прототип лендинг пейдж


Какой прототип лендинг пейдж можно назвать эффективным?

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

2. С четко разделенными экранами

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

3. С хорошо структурированной информацией

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

4. С достаточной степенью детализации

Прототип бывает общий и детальный. В зависимости от целей, выбирается тот или иной вариант.

5. С универсальным языком для коммуникации с клиентом и разработчиками

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

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

Вот как поэтапно выглядит процесс его создания:

  1. Постановка задачи и определение начальных требований.
  2. Анализ: рынка, конкурентов, спроса, целевой аудитории, сезонности, бизнеса заказчика, поисковых запросов.
  3. Создание общего или детального прототипа.
  4. Презентация заказчику для получения обратной связи.
  5. Утверждение, либо доработка прототипа по требованиям заказчика.
  6. Передача в дизайн.

Виды прототипов:

прототип лендинга

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

Есть несколько разных методов создания прототипа лендинг пейдж:

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

В текстовых редакторах.
Иногда прототипы делают в Word и Excel (или в их онлайновых аналогах). Они не требуют специальных навыков и позволяют создавать редактируемые схемы. С помощью текстовых прототипов можно показать структуру и последовательность блоков, но отрисовать интерфейс физически невозможно. Хороший лайфхак — описывать функционал и расположение элементов в редакторских выносках.

В графических редакторах.
При условии, что Вы владеете навыками работы в программах типа Adobe Photoshop, The GIMP, Photoscape, Microsoft PowerPoint, Вы создавать красивые и достаточно “юзабельные” прототипы страниц.

С помощью специальных программ.
Лучше всего делать прототипы с помощью программного обеспечения, которое разработано специально для этих целей. Существует множество программ, которые позволяют быстро создавать простые, “чистые” и удобные прототипы сайтов и даже тестировать их. Полезный софт: Axure, InVision, Adobe Experience Design.

С помощью онлайн-сервисов.
Многочисленные онлайн-сервисы типа Moqups, NinjaMock, BalsamiqMockups, Omnigraffle, позволяют быть более мобильным, а по функционалу не уступают устанавливаемым программам. Такой прототип — самый доступный, поскольку его можно просмотреть и отредактировать с любого устройства в онлайн-режиме.

Преимущества прототипирования:

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

Разобравшись, что такое прототип, как он создается и каким должен быть, не лишним было бы упомянуть, зачем он вообще нужен и какие преимущества дает при разработке сайта:

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

Как сделать прототип для лендинг пейдж

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

Триггеры первого разворота

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

  1. Логотип в верхнем левом углу и дескриптор под ним — короткое описание, объясняющее назначение сайта и суть товара или услуги.
  2. Блок с контактами в правом верхнем углу, кнопка «Заказать звонок» и т.п.
  3. Большая сочная картинка, видеофон, видео презентация — визуализация товара или эмоционального эффекта от использования услуги.
  4. Короткие и емкие заголовки, содержащие уникальное торговое предложение, призывы к действию, скрытые или очевидные выгоды для клиента.
  5. Форма захвата или целевая кнопка: “Купить”, “Заказать”, “Подписаться”, “Скачать”, и так далее.

    Триггеры первого разворота

Остальные блоки

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

  • Блок, который описывает проблемы и боль целевой аудитории;
  • Блок с презентацией товара или услуги;
  • Блок с преимуществами компании;
  • Блоки с триггерами гарантий;
  • Блок с «цепляющей» акцией, скидкой. Лучше, если она будет ограниченной по времени/количеству;
  • Алгоритм работы;
  • Блоки с социальными триггерами: отзывами, логотипами партнеров, наградами, фотографиями и так далее;
  • Контакты и форма захвата с возможностью задать вопрос.

    Остальные блоки

Как подобрать нужные блоки

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

СТА (Call to Action)

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

Гарантии

Закрывают возражения ЦА и уместно смотрятся на любом лендинге.

Достижения и преимущества

Универсальный блок доказательств, необходимый для высококонкурентных ниш и известных брендов.

Почему мы

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

Акция с ограничителем (по времени действия или количеству оставшегося товара)

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

Об услугах/отделах компании

Подойдет для комплексных услуг и нескольких товаров с одной областью применения.

Характеристики продукта

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

Что входит

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

Алгоритм работы

Более всего нужен услугам по выезду, новым и сложным сервисам, или там, где товар можно использовать лишь спустя некоторое время.

Кейсы

Необходим инфо-бизнесу, сфере услуг и везде, где важен сам процесс и ноу-хау достижения результата. Убедительная форма демонстрации успеха.

Отзывы

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

Сотрудники компании

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

Партнеры

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

Контакты

Обязательный блок, без которого вообще никак.

Как найти

Карта нужна везде, где без физического присутствия не обойтись.

Калькулятор

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

Подарок с условием

При грамотном подходе работает всегда. Особенно хорош, если костяк ЦА составляют представительницы прекрасного пола.

Сравнительная таблица

Подходит для пакетов услуг, инфо-бизнеса, инноваций.

Для кого

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

FAQ (часто задаваемые вопросы)

Как подобрать нужные блоки

Необходим инновациям и там, где у ЦА возникнет много возражений. Демонстрирует заботу, компетентность и профессионализм компании.

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

Общие рекомендации

Как еще можно повысить эффективность прототипа и конверсию будущей посадочной страницы:

  • Давайте простые и понятные призывы к действию. Делайте несколько разных СТА — если не сработает один, то сработает другой. Размещайте целевые кнопки и формы захвата повторно на протяжении всей страницы, в конце каждого разворота.
  • Открытые формы захвата работают лучше закрытых. Не делайте их длинными — берите только те данные, которые реально нужны. Создавайте Thank You Page.
  • Чем проще и красивее, тем лучше. Пользователь ленив: не заставляйте его вчитываться в массивы текста, больше визуализируйте информацию, упаковывайте все в клипарты, буллеты, анимацию.
  • Продумайте свой собственный стандарт для комментариев и правок в прототипе.
  • Не ленитесь отрисовывать все кнопки, формы и попапы.
  • Закрепите свой цвет за каждым видом функционала. Маркируйте и подписывайте все элементы, чтобы избежать лишних вопросов в будущем.
  • Тренд движется в сторону мобильных пользователей. Делайте дизайн сайта адаптивным, оптимизируйте работу страницы в разных браузерах. Создавайте отдельные прототипы под мобильные устройства.

    эффективность прототипа

Быстрое прототипирование

Скорость создания прототипа — весомый фактор при разработке лендинг пейдж. Она зависит прежде всего от навыков и опыта разработчика, используемых средств и уровня детализации. У опытного исполнителя уходит от 15-20 минут на общий прототип-скетч, до 3-4 часов на детализированный интерактивный макет сайта, который будет стоить новичку нескольких дней работы.

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

Вывод:

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

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

Прототип лендинг пейдж — как создать эффективный макет посадочной страницы
Оценок: 753 (средняя 5 из 5)
Заказать звонок
Оставьте заявку
и мы свяжемся с Вами!