Агентство комплексного интернет-маркетинга

Разработка прототипа

Актуальная информация об интернет-маркетинге и создании сайтов от специалистов Marketing Up
Здесь вы найдете подробные кейсы наших проектов, аналитику, результаты свежих исследований, разбор интересных фишек, приемов и тонкостей создания сайтов и т.д. - все, что важно для построения успешного бизнеса в Интернет.

Создание прототипа сайта — что это и зачем это нужно

Автор: Алексей Харитонов12.08.2020
Прототип сайта — это подробная схема будущего веб-ресурса. Он отражает структуру сайта. Еще нет дизайна и даже вместо картинок используются схематичные квадраты. Однако, по прототипу понятно, каково будет расположение различных информационных блоков, какие продающие триггеры будут использоваться. В общем, прототип предшествует полноцветному дизайну будущего сайта подобно тому, как первый макет современного автомобиля создается из обычного художественного пластилина.
 
 
 
Пропускать этот этап веб-разработки нельзя по двум причинам:
 
1) Именно прототипирование позволяет превратить будущий сайт в маркетинговый инструмент, где каждому блоку уготовано подталкивать пользователя к целевому действию. На этом этапе продумывается пользовательский путь — то, как потенциальный клиент будет изучать сайт, а также определяется последовательность приведения продающих аргументов.
 
2) Прототипирование позволяет исполнителю согласовать свое видение сайта с Заказчиком еще до того, как вложены деньги в дизайн, верстку и программирование. Так получается избежать дорогостоящих переделок в дальнейшем.
 
Мы создаем прототипы в Axure RP. Эта программа заслужила признание профессионалов — она используется во многих компаниях из списка Fortune 100. В ней создаются подробные кликабельные прототипы с возможностью программирования поведения кнопок, текстовых полей, панелей и т. д.
 
Теперь давайте разберем прототип реального сайта «по косточкам», на уровне отдельных блоков. В качестве примера используем прототип лендинга для центра подготовки к экзаменам «Развитие».
 
 

1. Блок «Шапка»

Мы разместили логотип и название компании сверху слева, потому что именно с этой части экрана пользователь начинает знакомство с сайтом.
 
Телефон и кнопка заказа находятся сверху справа, потому что это привычно для типичного пользователя. При создании прототипа следует учитывать пользовательский опыт.
 

2. Блок «Первый экран» + вспомогательный блок «Цифры и факты»

 
Здесь размещается: 
1) Заголовок, представляющий собой уникальное торговое предложение. Его мы окончательно сформулировали как «Интенсивные трехмесячные курсы подготовки к ЕГЭ с гарантией сдачи (или мы вернем все деньги)».
 
2) Картинка, показывающая товар в действии, либо счастливого покупателя и т. д. Здесь мы сочли логичным разместить изображение счастливой матери с детьми-старшеклассниками на фоне МГУ.
 
3) Форма обратной связи, призыв ее заполнить. Ее мы добавили позже.
 
Тут блок «Первый экран» дополнен вспомогательным блоком «Цифры и факты». Для него мы подбираем числовые показатели, выгодно характеризующие предложение. Их не должно быть больше 4 — 5, иначе макет будет перегружен, а его восприятие осложнено.
 
Согласно исследованиям, конкретика в цифрах повышает доверие пользователей. На основе приведенных числовых показателей мозг покупателя делает выгодные для продавца выводы (если эти числа реалистичные).
 
 

3. Блок «Преимущества»

Описание преимуществ

 
Тут мы предельно кратко и емко описываем ключевые сильные стороны предложения. Для того, чтобы их сформулировать, нужно:
1) осознавать, какие особенности товара наиболее значимы с точки зрения целевой аудитории;
2) заметить в своем предложении эти самые особенности — порою предприниматели не делают заслуженного акцента на какой-либо положительной характеристике своего товара, воспринимая ее как должное.
 
 

4. Блок «Призыв к действию»

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

5. Блок «Как это работает»

Схема взаимодействия с клиентом

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

6. Второй блок «Призыв к действию»

 Call to action

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

7. Блок «Отзывы»

Социальные доказательства

 
Здесь мы задействуем триггер психологического воздействия «социальное доказательство». Поскольку человек – существо социальное, при оценке каких-либо предложений он неизменно апеллирует к мнению и впечатлениям других людей. Главное, чтобы отзывы были правдоподобными. Для этого можно использовать видео-отзывы, отзывы со ссылками на профили реальных довольных клиентов в соцсетях, а также подписанные вручную рекомендательные письма.
 

8. Основной блок «Цифры и факты»

Конкретика для убедительности

Здесь мы приводим более подробно расписанные числовые показатели, выгодно характеризующие предложение. «Дожимаем» диаграммами, графиками — это выглядит научно, усиливая доверие. 

9. Третий блок «Призыв к действию»

 
 
Поскольку ЦА уже раззадорена логотипами престижных ВУЗов в предыдущем блоке, теперь предлагаем подготовку к поступлению в определенное учебное заведение.

10. Блок «О нас»

Многие покупатели приходят сюда на стадии, когда они уже склоняются к приобретению товара, но ищут для себя дополнительные аргументы в пользу покупки. Также они настроены на заочное знакомство с сотрудниками компании, которой они намерены довериться.
 
Поэтому, в этом блоке нередко указываются имена сотрудников и их фотографии (заочное знакомство). Часто сюда уместно добавить атрибуты авторитета — стаж, ученые степени и сертификаты, профессиональные награды (дополнительный аргумент в пользу покупки — «они действительно профессионалы!».
 

11. Блок «Галерея»

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

12. Блок «Цены»

 

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

13. Блок «Частые вопросы и ответы (FAQ)»

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

14. Второй блок «Отзывы»

 
Обратите внимание — здесь приводятся отзывы представителей как прямой, так и косвенной целевой аудитории. На занятия Центра ходят старшеклассники, но платят то за них родители!

15. Блок «Карта»

 
У этого блока две задачи: 
1) понятно объяснить потенциальному клиенту, где находится компания;
2) усилить его доверие за счет наличия у компании постоянного офиса, официальных реквизитов и т. д.
 
 

16. Блок «Подвал»

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