Прототип сайта — это подробная схема будущего веб-ресурса. Он отражает структуру сайта. Еще нет дизайна и даже вместо картинок используются схематичные квадраты. Однако, по прототипу понятно, каково будет расположение различных информационных блоков, какие продающие триггеры будут использоваться. В общем, прототип предшествует полноцветному дизайну будущего сайта подобно тому, как первый макет современного автомобиля создается из обычного художественного пластилина.
Пропускать этот этап веб-разработки нельзя по двум причинам:
1) Именно прототипирование позволяет превратить будущий сайт в маркетинговый инструмент, где каждому блоку уготовано подталкивать пользователя к целевому действию. На этом этапе продумывается пользовательский путь — то, как потенциальный клиент будет изучать сайт, а также определяется последовательность приведения продающих аргументов.
2) Прототипирование позволяет исполнителю согласовать свое видение сайта с Заказчиком еще до того, как вложены деньги в дизайн, верстку и программирование. Так получается избежать дорогостоящих переделок в дальнейшем.
Мы создаем прототипы в Axure RP. Эта программа заслужила признание профессионалов — она используется во многих компаниях из списка Fortune 100. В ней создаются подробные кликабельные прототипы с возможностью программирования поведения кнопок, текстовых полей, панелей и т. д.
Теперь давайте разберем прототип реального сайта «по косточкам», на уровне отдельных блоков. В качестве примера используем прототип лендинга для центра подготовки к экзаменам «Развитие».
1. Блок «Шапка»
Мы разместили логотип и название компании сверху слева, потому что именно с этой части экрана пользователь начинает знакомство с сайтом.
Телефон и кнопка заказа находятся сверху справа, потому что это привычно для типичного пользователя. При создании прототипа следует учитывать пользовательский опыт.
2. Блок «Первый экран» + вспомогательный блок «Цифры и факты»
Здесь размещается:
1) Заголовок, представляющий собой уникальное торговое предложение. Его мы окончательно сформулировали как «Интенсивные трехмесячные курсы подготовки к ЕГЭ с гарантией сдачи (или мы вернем все деньги)».
2) Картинка, показывающая товар в действии, либо счастливого покупателя и т. д. Здесь мы сочли логичным разместить изображение счастливой матери с детьми-старшеклассниками на фоне МГУ.
3) Форма обратной связи, призыв ее заполнить. Ее мы добавили позже.
Тут блок «Первый экран» дополнен вспомогательным блоком «Цифры и факты». Для него мы подбираем числовые показатели, выгодно характеризующие предложение. Их не должно быть больше 4 — 5, иначе макет будет перегружен, а его восприятие осложнено.
Согласно исследованиям, конкретика в цифрах повышает доверие пользователей. На основе приведенных числовых показателей мозг покупателя делает выгодные для продавца выводы (если эти числа реалистичные).
3. Блок «Преимущества»
Тут мы предельно кратко и емко описываем ключевые сильные стороны предложения. Для того, чтобы их сформулировать, нужно:
1) осознавать, какие особенности товара наиболее значимы с точки зрения целевой аудитории;
2) заметить в своем предложении эти самые особенности — порою предприниматели не делают заслуженного акцента на какой-либо положительной характеристике своего товара, воспринимая ее как должное.
4. Блок «Призыв к действию»
Этот блок мы повторяем на странице несколько раз, адаптируя его к содержанию предшествующих блоков. Например, здесь пользователь уже получил общее представление о Центре в теории. Поэтому мы предлагаем ему узнать, что это такое на практике.
5. Блок «Как это работает»
С одной стороны, схема работы дает покупателю четкое понимание процесса оказания услуги, снимая напряженность и подозрительность.
С другой, тут имеется и чисто психологическая уловка — у потенциального клиента создается впечатление, что он уже взаимодействует с компанией. Соответственно, согласиться на совершение сделки становится легче. Однако, для создания такой иллюзии важно использовать глаголы в настоящем времени («вы получаете», а не «вы получите»).
6. Второй блок «Призыв к действию»
Во втором призыве к действию мы задействуем волшебное слово «бесплатно», предлагаем клиентам проверить знания их детей и получить максимально соответствующую их индивидуальным потребностям программу.
7. Блок «Отзывы»
Здесь мы задействуем триггер психологического воздействия «социальное доказательство». Поскольку человек – существо социальное, при оценке каких-либо предложений он неизменно апеллирует к мнению и впечатлениям других людей. Главное, чтобы отзывы были правдоподобными. Для этого можно использовать видео-отзывы, отзывы со ссылками на профили реальных довольных клиентов в соцсетях, а также подписанные вручную рекомендательные письма.
8. Основной блок «Цифры и факты»
Здесь мы приводим более подробно расписанные числовые показатели, выгодно характеризующие предложение. «Дожимаем» диаграммами, графиками — это выглядит научно, усиливая доверие.
9. Третий блок «Призыв к действию»
Поскольку ЦА уже раззадорена логотипами престижных ВУЗов в предыдущем блоке, теперь предлагаем подготовку к поступлению в определенное учебное заведение.
10. Блок «О нас»
Многие покупатели приходят сюда на стадии, когда они уже склоняются к приобретению товара, но ищут для себя дополнительные аргументы в пользу покупки. Также они настроены на заочное знакомство с сотрудниками компании, которой они намерены довериться.
Поэтому, в этом блоке нередко указываются имена сотрудников и их фотографии (заочное знакомство). Часто сюда уместно добавить атрибуты авторитета — стаж, ученые степени и сертификаты, профессиональные награды (дополнительный аргумент в пользу покупки — «они действительно профессионалы!».
11. Блок «Галерея»
Фото и видео позволяют дать возможность пользователю виртуально побывать в офисе компании. Зачастую они лучше всяких слов помогают передать атмосферу, вовлечь эмоционально.
12. Блок «Цены»
В этом блоке часто лучше предложить три пакета услуг на выбор вместо одной жестко зафиксированной цены.
Минимальный пакет играет завлекающую роль (именно его стоимость обычно фигурирует в рекламе с формулировкой «цены от X рублей»).
Средний пакет играет роль флагмана, основного предложения.
Самый дорогой пакет создает контраст — на его фоне флагман кажется не таким уж и дорогим. Кроме того, иногда попадаются покупатели с особенно высокими запросами и возможностями — даже редкие продажи таким клиентам существенно повышают прибыль.
13. Блок «Частые вопросы и ответы (FAQ)»
Его предназначение заключается в том, чтобы отработать возражения потенциального клиента. Важно понимать: далеко не каждый пользователь будет звонить и интересоваться. При нынешнем обилии предложений многие люди предпочтут лениво перелистнуть страницы в браузере и уйти к конкурентам, которые удосужились отработать их возражения.
Технически в этом блоке часто используется так называемый «аккордеон» — строки с подзаголовками, которые раскрываются при нажатии. Так блок занимает мало места на экране, и в то же время закрывает большое количество вопросов (сомнений, возражений).
14. Второй блок «Отзывы»
Обратите внимание — здесь приводятся отзывы представителей как прямой, так и косвенной целевой аудитории. На занятия Центра ходят старшеклассники, но платят то за них родители!
15. Блок «Карта»
У этого блока две задачи:
1) понятно объяснить потенциальному клиенту, где находится компания;
2) усилить его доверие за счет наличия у компании постоянного офиса, официальных реквизитов и т. д.
16. Блок «Подвал»
В этом блоке обычно повторяется логотип, название ключевой услуги, контактные данные. Наличие подвала у сайта — правило хорошего тона.
Итак, мы рассмотрели типичный прототип сайта. В рассмотренном лендинге использовались не все возможные блоки. Поэтому, если вы хотите более глубоко изучить эту тему, посмотрите прототипы наших сайтов в кейсах.
Прототип — «чертеж» вашего будущего сайта. От того, насколько грамотно будут расставлены в нем маркетинговые акценты, зависит коммерческий успех вашего веб-ресурса. Доверяйте прототипирование только профессионалам. Например, нам!
Комментарии