Маркетолог проводит маркетинговые исследования и готовит прототип — схему, наглядную структуру будущего сайта, содержащую в себе основные блоки с подзаголовками, текстами, кнопками, формами.
Для чего нужен прототип и какие шаги нужно совершить в процессе его создания? Какие сервисы для прототипирования сайтов можно использовать? Расскажем в нашей новой статье.
Зачем нужен прототип сайта в разработке
Прототипирование сайта как отдельный этап разработки с каждым днем становится все более популярным направлением. Если раньше разработка начиналась сразу с этапа дизайна, и только потом копирайтеры писали тексты, то сейчас подход в корне изменился.
Появилась даже отдельная профессия: маркетолог-прототипировщик. Это специалист, который на основе маркетингового анализа упаковывает продукт и составляет будущую структуру проекта в виде наглядных схем блоков с кнопками, текстами и формами захвата.
В digital мире набирает обороты тренд на прототипирование сайтов на основе маркетинговых исследований: создаются отдельные группы, чаты и курсы, где прототипировщики обмениваются опытом и рассказывают о своих подходах к изучению целевой аудитории, конкурентов, компании заказчика, и как на основе всех этих исследований сделать прототип сайта.
Так что же такое прототип? Представьте себе гончара, который изготавливает глиняные вазы. Сначала мастер готовит раствор, затем придает глине нужную форму на специальном станке, обжигает изделие в печи и расписывает вазу разноцветными узорами. Если сравнивать разработку сайта с гончарным делом, то ваза — это готовый сайт, а глиняный сосуд — первичная заготовка или прототип.
Прототип — это визуальный каркас сайта, его основа, фундамент для дальнейшей разработки — дизайна, верстки и запуска проекта.
С маркетинговой точки зрения прототип является важнейшим этапом создания сайта. И вот почему:
- Сайт разрабатывается не ради галочки, а на основе маркетингового анализа продукта, целевой аудитории, конкурентов и поведенческих факторов;
- Заказчик видит каждый этап разработки и понимает ценность продукта. Маркетолог детально вникает в его бизнес-процессы, ситуацию на рынке услуг, ищет идеи для отстройки, пытается создать лучшее решение в нише. Такая работа изначально не может стоить дешево;
- Клиент понимает, какие фотографии или видеоматериалы нужно собрать и заранее планирует фотосессию команды, продукта, офиса или склада;
- Процесс согласования проекта сокращается в разы, так как маркетолог может внести правки в режиме онлайн и тут же показать их заказчику;
- В прототипе удобно оставлять комментарии по дизайну. Дизайнер заранее получает доступ к прототипу и может совместно с маркетологом работать над разработкой структуры;
- Маркетолог и дизайнер работают не параллельно, а в едином ключе: совместно обсуждают структуру, заложенный в прототипе контент, маркетинговые фишки. Обмен опытом и разносторонний взгляд на создание сайта увеличивает шансы на более высокую конверсию и удобство пользователя.
Вы можете использовать полученную схему как своеобразную гарантию. Утверждая прототип, заказчик соглашается с разработанной структурой и смыслами. Тем самым стороны минимизируют правки в текст и смыслы уже на последующих этапах разработки. А значит, сам процесс разработки будет идти быстрее и безболезненнее. Бывают конечно и исключения из практики.
Маркетинговый анализ как основной этап прототипирования сайта
Строительство дома начинается с фундамента, а прототип с маркетинговых исследований.
Мы выделяем 3 группы исследований при разработке прототипа сайта:
1. Брифование заказчика и изучение продукта и компании.
Изучаем текущий сайт и соцсети клиента, маркетинг-киты, коммерческие предложения, презентации, мессенджеры. Смотрим, как сейчас упакован продукт, какие преимущества выделяет владелец компании и менеджеры по продажам.
Узнаем информацию из личной беседы с директором и маркетологом компании, созваниваемся с исполнителями услуги, разбираем продукт и компанию на более мелкие детали:
- статистику по компании и услуге;
- этапы оказания услуги;
- гарантии;
- преимущества;
- выгоды от сотрудничества;
- результаты клиента от покупки продукта.
Индивидуальный бриф может содержать от 30 до 60 вопросов. Информация пригодится сразу для нескольких страниц — главная, о компании, контакты, FAQ. Чем больше данных собрано, тем детальнее и глубже получится прототип.
2. Анализ целевой аудитории
Изначально клиент заполняет небольшой бриф, где кратко расписывает портрет основного клиента — пол, возраст, профессию, размер дохода.
Задача маркетолога — сделать портрет живым: найти боли и страхи целевой аудитории, определить истинные мотивы и причины совершения покупки, выявить скрытые возражения и подумать, как закрыть их с помощью продукта клиента.
Изучение целевой аудитории включает:
- анализ форумов и тематических статей;
- анализ социальных сетей конкурентов — ищите комментарии и вопросы клиентов, читайте отзывы тех, кто уже купил продукт;
- анализ ключевых запросов в Яндекс Wordstat подсказок Google — так вы поймете, как потенциальный клиент ищет товар или услугу в интернете;
- Изучение записей разговоров из отдела продаж (какие вопросы задают клиенты, с какими проблемами обращаются, какие сомнения у них возникают, как быстро клиент принимает решение, из каких этапов состоит воронка продаж);
- Обзвон действующих клиентов компании: почему обратились именно сюда, какие плюсы и минусы от сотрудничества выделяют, советуют ли компанию своим знакомым и почему;
- анализ сайтов отзовиков — смотрим отзывы по товару/услуге или конкурентам.
Если продукт широко известен, посмотрите комментарии потенциальных покупателей под видео в YouTube по вашей тематике.
Конкуренты зачастую снимают видео на темы, которые волнуют вашу целевую аудиторию, а также публикуют видеоотзывы довольных клиентов.
3. Анализ конкурентов
Выберите 10−15 конкурентов из поисковой и рекламной выдачи, запросите список прямых конкурентов у заказчика и проанализируйте их сайты:
- насколько подробно и понятно расписана услуга;
- дает ли компания гарантии;
- какие целевые действия представлены на сайте, работают ли кнопки и формы;
- какие акции предлагают конкуренты.
Сведите данные анализа в единую таблицу, оцените сильные и слабые стороны вашего торгового предложения.
Если основной вид трафика будет идти из социальных сетей, ищите сайты конкурентов в ВК и Инстаграмм. Заодно оцените соцсети конкурентов (что именно они публикуют, как часто, какие посты наиболее интересны целевой аудитории).
Обсудите с заказчиком таблицу конкурентов и подумайте, как можно улучшить продукт или сервис, какие маркетинговые фишки не используют конкуренты, каких преимуществ и гарантий у них нет. Ваша цель — сделать более заманчивое и вкусное предложение на рынке.
Дополнительно проанализируйте отделы продаж конкурентов: соберите их коммерческие предложения, презентации и отследите воронку продаж. После такого анализа вы получите еще много интересной и полезной информации.
3 основных этапа создания прототипа сайта — практика от NAJES
Перед тем как приступить к самому прототипированию, нужно определиться с видом будущего сайта. Многостраничный или лендинг?
Шаг 1 — определяем вид будущего сайта
Зависит от 2 критериев: целей нашего заказчика и конкурентов.
1. Цели заказчика.
Какой конечный результат он хочет получить? Рассказать о компании? Продать отдельный товар? Запустить акцию или лид-магнит? Собрать базу для рассылки? Повысить доверие к компании?
— если у клиента много услуг под разные целевые аудитории, понимаем, что лендингом тут не обойтись, нужен многостраничный сайт. В таком случае разрабатываем прототип главной страницы сайта, каталог, страницы услуг, контактов, о компании и других.
Для получения дополнительного трафика создаем страницу под блог информационных статей, чтобы ресурс клиента находили по поисковым запросам.
— одностраничный сайт (лендинг). Используем для продажи отдельного товара/услуги для одного сегмента целевой аудитории.
Как правило, содержит короткое меню для удобной навигации по сайту. В отдельных случаях продумываем блог со статьями или кейсами.
—квиз— небольшой опросник, цель которого — взять контакты потенциальных клиентов взамен на расчет стоимости услуги/сметы, бесплатную подборку материалов.
Квиз может представлять собой отдельный блок сайта (актуально для дорогих, сложных услуг, стоимость которых зависит от многих факторов). Или создаваться как отдельная интернет-страница (нужно быстро протестировать маркетинговую идею).
2.Анализ конкурентов
Если у всех конкурентов полноценные корпоративные сайты, рассчитанные на разные сегменты и услуги, не стоит экономить и делать лендинг. В этом случае проектируем многостраничник, где создаем под каждую услугу посадочную страницу.
Шаг 2 — продумываем прототип сайта на тильде
Какие блоки нужно спроектировать, а что только отпугнет потенциального покупателя? Какие страницы нужны обязательно?
Все это сильно зависит от анализа портрета потенциального покупателя:
- стадии принятия решения
Представьте, что клиент заказывает строительство бани. Один сегмент уже определился, какую именно баню он хочет и ищет продавца. Для него делаем короткий лендинг с преимуществами строительной компании, сроками и стоимостью строительства.
Другой сегмент выбирает между несколькими видами бань (кирпичная, деревянная, из клееного бруса). В том случае мы даем сравнительную характеристику бань, показываем преимущества именно нашей бани, и только в конце говорим, почему стоит купить у нас.
- осознанности покупателей
Лендинг для нового, а также для сложного товара/услуги всегда длиннее, чем для продукта, который всем известен и понятен. При этом у нас нет четкого количества экранов под каждую услугу — все индивидуально. Часто бывает, что лучше создать корпоративный сайт и в него внедрить лендинг под услугу.
- потребностей клиента
Составив портрет целевой аудитории, мы ранжируем желания и критерии выбора продукта по важности: самые актуальные показываем на первом экране лендинга, второстепенные внизу вашего landing page. Если же мы принимаем решение, что лучше сделать многостраничный сайт, то часть страхов и критериев выбора мы можем закрывать на странице «О Компании», что-то на главной, а самые важные уже на странице услуги.
Шаг 3 — проработка отдельных блоков
Разрабатывая прототип страницы сайта, мы детально продумываем каждый блок: подзаголовок, текст, визуальное наполнение (фотография, скриншот, видеоролик).
Используем результаты сравнительного анализа конкурентов, чтобы:
- создать интересный первый экран с сильным оффером, конечными выгодами покупателя, призывом и целевым действием на кнопке;
- показать реальные преимущества компании перед конкурентами;
- отстроиться визуальным контентом (наполнить его качественными фотографиями сотрудников, показать реальные изображения с производства, офиса, отобразить рабочие процессы в компании).
Используем майнд-карту целевой аудитории, чтобы:
— ранжировать ценности предложения по важности для потенциального покупателя;
— создать блок-подстройку (описывает боли покупателей, которые решает ваш продукт/услуга);
— прописать блок с сегментами целевой аудитории (актуально, если лендинг рассчитан на несколько схожих сегментов с одинаковыми страхами, возражениями и критериями выбора продукта);
Как мы делаем прототип сайта: 5 ключевых правил от NAJES
Мы придерживаемся нешаблонного подхода к созданию сайтов. Поэтому у нас нет стандартных предложений. Каждый проект разрабатывается маркетологом исходя из целей клиента и потребностей его покупателей.
Зато у нас есть выработанные годами правила, которыми мы и хотим сегодня поделиться:
1) Лендинг — не панацея для бизнеса.
Все всегда зависит от задач, которые ставит заказчик и от ситуации на рынке, если все конкуренты продвигаются за счет лендингов, то с помощью многостраничного сайта вы можете выглядеть солиднее и вызывать больше доверия. Не стоит продавать 2,3,5,10 услуг или товаров на одном landing page, так как в конце концов вы не сможете донести ценность и потенциальные покупатели пойдут закрывать свои потребности к вашим конкурентам.
2) Одна мысль — один экран.
Наша задача — создать структуру, которая донесет для клиента ценность торгового предложения. Особенно важные для клиента критерии (стоимость, сроки, скорость доставки) выносим на отдельный экран.
Второстепенные смыслы размещаем в слайдере или во всплывающих по клику окнах, чтобы не растягивать длину лендинга и не перегружать читателя лишней информацией.
Не стоит на одном экране делать 10 раскрывающихся элементов, писать много текста, это все мешает восприятию, человек не сможет понять суть вашего предложения и уйдет, так и не оставив свои контакты.
3) Каждый подзаголовок несет пользу для клиента. Чем плохи стандартные лендинги? Их подзаголовки не несут никакого смысла:
— наши преимущества;
— команда профессионалов;
— гарантии;
— наши услуги.
Проскролльте подобный сайт и подумайте, что нового вы узнали, не читая основной текст? Интересно ли вам вчитываться, если вы не видите конечной пользы?
Мы стараемся, чтобы читатель понял основную идею сайта, даже не читая блоки, а просто пролистав его с подзаголовками. Каждый заголовок показывает выгоду клиента, побуждает его прочитать размещенный ниже текст.
Боль клиента — отсутствие финансов для участия в тендере. Снимаем боль в подзаголовке, раскрываем выгоду в текстовом содержании блока.
4) Весь сайт транслирует одну ключевую выгоду, которая заставляет читателя задуматься о покупке (зависит от продукта, который продаем).
Например:
— для юридических ниш — безопасность клиента, конфиденциальность информации;
— продажа франшизы — экономическую выгоду;
— продажа товара — его эксклюзивность, набор уникальных свойств;
— косметологические услуги — молодость и красота.
5) Каждый экран выполняет одну из маркетинговых целей:
— отзывы, кейсы (снимают возражения), как подготовить и публиковать отзывы и кейсы читайте в нашей статье;
— скриншоты документов, сертификаты, гарантийные письма (повышают доверие к компании и продукту);
— яркие фотографии товара, видеоролики, показывающие процесс оказания услуги (вызывают желание купить).
6) Целевые действия заточены под клиента:
- холодная аудитория (есть проблема, но нет денег на ее решение, критерий срочности отсутствует) — бесплатный звонок, консультация, подписаться на рассылку, узнать подробности;
- теплая аудитория (ищет решение проблемы или выбирает между продуктами, есть деньги, но нет срочности) — тестовый период, пробный набор, расчет сметы/стоимости, выезд замерщика, бесплатная консультация эксперта;
- горячая (ищет поставщика/продавца, нужно срочно, есть деньги на покупку). Призывы на кнопках: купить, заказать, забронировать, выбрать тариф, получить скидку, забрать бонус/подарок.
Основному целевому действию отдаем отдельный блок с полноэкранной формой, делаем визуальный акцент именно на этом CTA.
Виды прототипов сайта
Прототип страницы сайта может быть совершенно разными: от наброска на листе бумаги до полноценного высокодетализированного интерактивного проекта.
Основные критерии для классификации мы выбрали такие:
- Уровень детализации: низкая детализация, высокая детализация;
- Уровень взаимодействия с прототипом: статичный, интерактивный.
Статичным считается графический рисунок без возможности сделать кликабельные элементы, переходы между страницами. А интерактивный в свою очередь позволяет полностью взаимодействовать с структурой всего сайта или с отдельной его страницей, благодаря рабочим слайдерам, кликабельным ссылкам, всплывающим popup окнам и прочих активных элементов.
Выбор программы для прототипирования сайта
Для создания высокоточных прототипов не нужно обладать навыками программирования. Специальные сервисы для создания прототипов позволяют перетаскивать и компоновать графические элементы с помощью одного клика мышки.
На рынке много решений для прототипировщиков, каждый выбирает сервис, в котором удобно работать непосредственно ему.
Давайте рассмотрим самые популярные:
1) Eskone
Онлайн-сервис, позволяющий создавать кликабельные прототипы в одиночку или работать в команде. Стартовая стоимость начинается от 2 евро в месяц, для создания командных папок пригодится тариф за 5 евро в месяц.
За эти деньги вы получите безлимитное число проектов, возможность импорта прототипов и быструю техподдержку от создателей сервиса. Есть пробный период на 30 дней.
Параллельно с прототипами сайта можно создавать майнд-карты с анализом целевой аудитории и блок-схемы (актуально при разработке квизов, чат-ботов).
Прототипировщики отметили несколько преимуществ Eskone:
- Русская техподдержка;
- Множество иконок и большой функционал для создания простых прототипов.
2) Moqups
Платный сервис, самый бюджетный тариф стоит 19 долларов в месяц, для командной работы можно выбрать тариф за 49 долларов. Оплата происходит автоматически с привязанной банковской карты, на электронную почту приходит уведомление об оплате.
Сервис позволяет создать неограниченное количество проектов, распределять доступы и роли между участниками проекта, комментировать прототип в режиме реального времени.
Минусы: В одном прототипе не может быть более 3 редакторов. Увеличение проектов влечет ограничения по общему числу редакторов, приходится более точечно распределять роли и удалять права доступа в старых проектах.
Что говорят сами прототипировщики о Moqups?
Плюсы:
- можно создавать шаблоны, что экономит время при создании прототипов сайта;
- не требует обучения — можно освоить за 1−2 дня;
- быстро грузятся фотографии, сложные коллажи, сервис не виснет;
- удобно проектировать многостраничные проекты за счет удобной архитектуры; проектов (есть главные и дочерние проекты).
Минусы:
- мало функционала для создания интерактивных прототипов;
- не работает без интернета;
- нет автоматического выравнивания элементов — нужно выравнивать вручную или использовать сетку.
Наша команда использует Moqups в качестве основной программы для создания прототипов, некоторые маркетологи команды работают в Figma.
3) Figma
Стильный и современный сервис, позволяющий создавать динамичные прототипы и дизайнить их в рамках единой программы. Сервис платный, стоит от 12 долларов в месяц, командный тариф 45 долларов в месяц.
Есть бесплатный тариф, ограниченный 3 проектами, которые хранятся не более 30 дней. Редакторские права доступны только 2 специалистам команды, количество зрителей неограниченно.
В чем плюсы данного сервиса, по мнению прототипировщиков:
- много встроенных фич и плагинов (генераторы аватаров, темплейты для прототипов, фотостоки, большое количество иконок);
- более отзывчивый и гибкий сервис, чем Moqups;
- есть проверка на орфографию (автоматическое подсвечивание ошибок);
- наличие компонентов (нужны при проектировании многостраничных сайтов). При изменении общего для всех страниц элемента на главной странице (хедера, футера), изменения автоматически происходят на дочерних страницах.;
- легко создавать копии прототипов и страниц — все макеты расположены в едином поле.
Минусы:
- виснет при загрузке крупных изображений, долго грузит фотографии в облако;
- требует большого ресурса от ноутбука, виснет на старых операционных системах;
- требует специального обучения.
В целом, сервис нравится прототипировщикам, так как экономит много времени — не нужно вручную выравнивать элементы, удобно работать со слоями на 1 экране.
4) NinjaMock
Не самый популярный среди прототипировщиков сервис, хотя по своим функциям он ничем не уступает Moqups. Платные тарифы начинаются от 5 долларов в месяц. Есть пробный вариант на 1 проект, правда его нельзя экспортировать и есть ограничение по элементам — всего 200 элементов в 1 прототипе.
- удобный векторный редактор — рисуйте любые фигуры, кнопки и иконки, если не нашли подходящий элемент в меню;
- есть статусы проекта — удобно при работе с многостраничными сайтами, можно отметить какие страницы уже готовы к дизайну, а какие еще будут дорабатываться;
- вся информация по проектам хранится в облаке — работайте над прототипами с любого ноутбука;
- вместо дерева страниц (главные и дочерние страницы) группы страниц каждая со своим названием. Вы можете присваивать группам названия, перетаскивать страницы из 1 группы в другую, менять расположение страниц в группах.
Сервис позволяет вести командную работу: комментировать прототипы, распределять роли, экспортировать проекты, вносить правки.
5) Axure
Самый многофункциональный и навороченный сервис для прототипирования сайтов и приложений. Идеально подходит для создания интерактивных прототипов.
Сервис платный: 3 тарифа от 25 долларов за индивидуальную работу и 42 доллара за команду. Программа рассчитана на продвинутых прототипировщиков, которые готовы постоянно обучаться и осваивать новые фишки от создателей сервиса.
Какие плюсы отмечают сами прототипировщики:
- огромный функционал для создания интерактивных элементов — всплывающих окон, форм, переходов между страницами;
- легко рисовать векторные фигуры;
- можно вставлять любые фотографии в готовые фигуры;
- горячие клавиши для быстрой работы с виджетами;
- наличие умных привязок для выравнивания расстояния между фигурами;
- автонастройка высоты и ширины рабочей области;
- можно автоматически задать ширину и длину экрана под конкретный вид телефона или планшета и сразу посмотреть как будет выглядеть прототип в мобильной версии.
Использование Axure уместно, если вам нужны прототипы с высокой визуальной и функциональной точностью.
Заключение
Прототип — маркетинговая основа сайта. Модель конечного продукта, в которой заложен весь функционал будущего инструмента продаж.
Прототипирование сайта — это целая система. Нельзя создать маркетинговый инструмент, не зная рынок, запросы клиентов и не изучив торговые предложения конкурентов.
Не ждите множества обращений, используя стандартные решения — шаблоны, стоковые фотографии, приевшиеся глазу целевые действия, которые использует каждый второй конкурент.
Готовый прототип учитывает желания сразу нескольких сегментов целевой аудитории и содержит разные пользовательские сценарии поведения — оставить заявку, получить расчет стоимости, записаться на встречу. Качественный прототип интуитивно понятен потенциальному клиенту и вызывает доверие.
Создание прототипа сайта — важнейший этап, который позволяет сэкономить время и деньги на разработку. В нашей студии помимо готового прототипа заказчики так же получают подробные и понятные отчеты о целевой аудитории, конкурентах и список рекомендаций по улучшению своего бизнеса.
