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

conceptualnoe-proektirovanie-saitov-opredelenie-scenariev-i-celei4514

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

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

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

 

2016-09-29_12-50-34

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

  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, позволяют быть более мобильным, а по функционалу не уступают устанавливаемым программам. Такой прототип — самый доступный, поскольку его можно просмотреть и отредактировать с любого устройства в онлайн-режиме.

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

2016-09-29_12-52-44

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

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

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

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

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

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

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

2016-09-29_12-53-30

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

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

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

2016-09-29_12-54-17

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

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

СТА (Call to Action)

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

 Гарантии

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

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

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

Почему мы

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

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

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

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

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

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

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

Что входит

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

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

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

 Кейсы

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

 Отзывы

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

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

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

 Партнеры

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

 Контакты

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

 Как найти

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

 Калькулятор

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

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

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

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

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

 Для кого

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

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

2016-09-29_12-54-56

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

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

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

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

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

2016-09-29_12-55-35

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

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

 Вот пример того, как мы “нахрапом” создаем прототипы посадочных страниц в app.moqups.com:

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

Вывод:

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

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

Оцените статью:
Не интересноБаянСреднячокБравоИдеально (голосов 3, средний: 4,67 из 5)
Загрузка...

Хотите создать landing page?

Получите доступ к серии из 8 видео уроков о том, как проверить подрядчика при создании landing page.