Одним из самых важных этапов разработки любого веб-продукта является прототипирование. Прототип лендинг пейдж — это возможность превратить “кота в мешке” в прогнозируемый инструмент для продаж. Четко проработанная структура, отрисованный интерфейс и “голый” копирайтинг (не украшенный фантиком дизайна) позволяют посмотреть на посадочную страницу максимально трезво и более тонко подстроить ее под целевую аудиторию. В этой статье мы расскажем о преимуществах и особенностях этого этапа работы, а также расскажем, как можно сделать процесс более эффективным и конструктивным.
Прототип — упрощенная схема (набросок, черновик, макет, скетч, модель) сайта, которая содержит все его элементы. Она служит для того, чтобы максимально наглядно представить заказчику и(ли) дизайнеру набросок будущего сайта: его структуры, содержания, функционала, навигации и так далее.
1. Понятный даже человеку с улицы
Прототип должен быть простым и понятным, чтобы заказчик мог оценить его и прикинуть, каким будет будущий сайт. Это логично: если клиент поймет, как будет выглядеть его веб-продукт, он быстрее утвердит работу. Многие вопросы будут сняты еще на этапе скетча, и дизайнеру не придется многократно переделывать макет из-за банального недопонимания.
2. С четко разделенными экранами
Очень важно контролировать количество разворотов посадочной страницы. Кроме того, что это облегчает восприятие. И разработчик, и клиент смогут понять, какой длины будет сайт.
3. С хорошо структурированной информацией
Именно на этапе прототипа “упаковывается” весь контент лендинг пейдж. Вы решаете, где будут клипарты, где мини-история, где слайдер и так далее. Скетч позволяет оценить последовательность блоков, проверить, нет ли “полотнищ” текста и прикинуть, как информация будет смотреться в дизайне и верстке.
4. С достаточной степенью детализации
Прототип бывает общий и детальный. В зависимости от целей, выбирается тот или иной вариант.
5. С универсальным языком для коммуникации с клиентом и разработчиками
Мы уже много раз писали о том, что с помощью прототипа удобно ставить техническое задание копирайтеру (если прототип общий), дизайнеру и верстальщику, а также эффективно коммуницировать с клиентом.
Также важно не забывать, что любой прототип одноразовый: он создается под один конкретный сайт и в будущем отправится в архив.
Вот как поэтапно выглядит процесс его создания:
В зависимости от преследуемых целей, прототипы могут быть разной степени детализации и сложности. Некоторые программы позволяют делать прототип динамическим: например, нажимая на кнопку Вы сможете настроить попап или перебросить пользователя на другую страницу.
Есть несколько разных методов создания прототипа лендинг пейдж:
На бумаге или доске.
Нарисовать эскиз на бумаге — самый быстрый и легкий способ. Выглядит он чаще всего неэстетично, а чтобы внести изменения, его придется переделывать. Размеры элементов и их расположение на сетке могут передаться недостоверно, что приведет к проблемам при создании дизайна. И лучше бы Вам иметь разборчивый почерк…
В текстовых редакторах.
Иногда прототипы делают в Word и Excel (или в их онлайновых аналогах). Они не требуют специальных навыков и позволяют создавать редактируемые схемы. С помощью текстовых прототипов можно показать структуру и последовательность блоков, но отрисовать интерфейс физически невозможно. Хороший лайфхак — описывать функционал и расположение элементов в редакторских выносках.
В графических редакторах.
При условии, что Вы владеете навыками работы в программах типа Adobe Photoshop, The GIMP, Photoscape, Microsoft PowerPoint, Вы создавать красивые и достаточно “юзабельные” прототипы страниц.
С помощью специальных программ.
Лучше всего делать прототипы с помощью программного обеспечения, которое разработано специально для этих целей. Существует множество программ, которые позволяют быстро создавать простые, “чистые” и удобные прототипы сайтов и даже тестировать их. Полезный софт: Axure, InVision, Adobe Experience Design.
С помощью онлайн-сервисов.
Многочисленные онлайн-сервисы типа Moqups, NinjaMock, BalsamiqMockups, Omnigraffle, позволяют быть более мобильным, а по функционалу не уступают устанавливаемым программам. Такой прототип — самый доступный, поскольку его можно просмотреть и отредактировать с любого устройства в онлайн-режиме.
Разобравшись, что такое прототип, как он создается и каким должен быть, не лишним было бы упомянуть, зачем он вообще нужен и какие преимущества дает при разработке сайта:
При создании прототипа необходимо сфокусироваться на тех элементах страницы, которые принесут пользу Вашему бизнесу — будут продавать продукт и мотивировать посетителей совершить целевое действие.
Считается, что если первый разворот не заинтересует посетителя в первые 5 секунд, то до конца Вашу страницу и листать не станут. Именно поэтому разработке первого разворота уделяется наибольшее внимание. Какие на нем должны быть триггеры — элементы, провоцирующие посетителя на целевое действие:
Содержание следующих разворотов будет зависеть от продукта, целевой аудитории, ниши, географического положения и прочих факторов. Каждый из них необходимо учитывать в структуре, если Вы хотите получить действительно высокую конверсию. Как правило, на любом лендинге можно найти:
Для создания эффективного прототипа крайне важен этап анализа. Без достоверных данных о рынке, целевой аудитории (ЦА) и конкурентах выбор триггеров и блоков будет происходить наобум. Они будут навязчивыми, неуместными и не приведут к продажам. Развороты выстраиваются таким образом, чтобы сайт работал как большая логическая цепочка, которая с каждым следующим блоком подталкивает к покупке. О первом экране мы уже сказали выше. Теперь же разберем подробнее, где и как использовать другие блоки.
СТА (Call to Action)
Призывы к действию обязательны для любой посадочной страницы. Они уже изрядно примелькались — старайтесь быть оригинальными.
Гарантии
Закрывают возражения ЦА и уместно смотрятся на любом лендинге.
Достижения и преимущества
Универсальный блок доказательств, необходимый для высококонкурентных ниш и известных брендов.
Почему мы
Подходит высококонкурентным и оптовым нишам, а также сферам обслуживания, где нужно предоставить более выгодные условия.
Акция с ограничителем (по времени действия или количеству оставшегося товара)
Работает для ЦА с высокой заинтересованностью в товаре и для срочных услуг. Эффект спешки и жадность помогают мотивировать к целевому действию.
Об услугах/отделах компании
Подойдет для комплексных услуг и нескольких товаров с одной областью применения.
Характеристики продукта
Подходит для оптовых продаж и дорогих товаров, высокая цена которых требует определенных пояснений и формирования более четкой картинки предмета вожделения в голове клиента.
Что входит
Подойдет для комплексных услуг, сложных продуктов, организации досуга. Раскладывает блок характеристик на составные части.
Алгоритм работы
Более всего нужен услугам по выезду, новым и сложным сервисам, или там, где товар можно использовать лишь спустя некоторое время.
Кейсы
Необходим инфо-бизнесу, сфере услуг и везде, где важен сам процесс и ноу-хау достижения результата. Убедительная форма демонстрации успеха.
Отзывы
Распространенный блок социальных доказательств, который будет полезен многим посадочным страницам — стадный инстинкт никто не отменял. Лучше всего работает в формате видео.
Сотрудники компании
Подходит сфере услуг и там, где важна социальность и надо показать как именно будет достигнут нужный результат.
Партнеры
Поднимает престиж компании и помогает завоевать доверие посетителя в любых лендингах.
Контакты
Обязательный блок, без которого вообще никак.
Как найти
Карта нужна везде, где без физического присутствия не обойтись.
Калькулятор
Подходит сложным многосоставным товарам и услугам. Любые интерактивные фичи и геймификация очень положительно влияют на конверсию.
Подарок с условием
При грамотном подходе работает всегда. Особенно хорош, если костяк ЦА составляют представительницы прекрасного пола.
Сравнительная таблица
Подходит для пакетов услуг, инфо-бизнеса, инноваций.
Для кого
Нужен подписным страницам, техническим нишам, когда надо завлечь посетителя и продемонстрировать возможности продукта через потребности.
FAQ (часто задаваемые вопросы)
Необходим инновациям и там, где у ЦА возникнет много возражений. Демонстрирует заботу, компетентность и профессионализм компании.
Этот список далеко не полный и носит скорее общий характер. Помните, что каждый блок должен демонстрировать конкретную выгоду потенциальному клиенту. Анализируйте, проводите сплит-тестирование, совершенствуйтесь и думайте головой, если хотите, чтобы Ваш лендинг продавал.
Как еще можно повысить эффективность прототипа и конверсию будущей посадочной страницы:
Скорость создания прототипа — весомый фактор при разработке лендинг пейдж. Она зависит прежде всего от навыков и опыта разработчика, используемых средств и уровня детализации. У опытного исполнителя уходит от 15-20 минут на общий прототип-скетч, до 3-4 часов на детализированный интерактивный макет сайта, который будет стоить новичку нескольких дней работы.
Что касается инструментария и средств — даже создание бумажных прототипов можно оптимизировать использованием скетчпадов, штампов и лекал. Что уж говорить о профильных программах и онлайн-сервисах. В них найдется целый арсенал инструментов, ускоряющих и упрощающих работу по прототипированию. Остается выбрать самый подходящий, освоить функционал и просто «набить руку», а это долгий и тернистый путь.
Прототип лендинг пейдж — это ее рабочая схематичная модель. Он нужен для наглядности, упрощения работы, удобства правок, а также служит гарантией и для заказчика, и для разработчика. Чем тщательнее Вы проведете анализ и чем глубже проработаете нишу, тем выше будет конверсия посадочной страницы.
На сегодняшний день существует множество прекрасных инструментов для создания прототипов любой сложности. Выбирайте наиболее удобный для Вас, подходите к процессу прототипирования с умом, и обязательно добьетесь желаемого. А если Вам нужен гарантированный результат — доверьте разработку прототипа профессионалам.