Разработаем интерактивный прототип сайта с текстами и структурой: снизим затраты на исследование и разработку
Делаете сайт? Закрываем проблему структуры и смыслов — что писать на странице, чтобы потенциальные клиенты быстрее доверяли бизнесу и сайт давал больше заявок при том же трафике
Интерактивные блоки и структура страниц с текстами
Telegram: @mrcbiz
- Маркетинговый подход: сначала исследуем бизнес — собираем семантику, прорабатываем смыслы, структуры и затем проектируем страницу
- Фишка на аналитике: исследование в несколько итераций и высокая детализация результатов анализа
- В результате: схема страницы со смыслами, которые мощно описывают товар/услугу и больше продают
Создаем логику пути пользователя в интерфейсе Посмотреть пример в масштабе ►
Что дает детальный прототип сайта для бизнеса?
Понимание логики потребителя
Веб-интерфейс делается для потребителя. Ключевое качество — экономический эффект. Потребитель должен начать доверять компании прежде, чем совершить целевое действие на странице — оставить заявку, пополнить счет, написать оператору и т.д.
Ключевые смыслы и интерактивные элементы
Мы работаем в программе Axure RP — она позволяет проработать логику каждого блока страницы и получить интерактивный прототип сайта
Снижение затрат на изготовление страницы
Руководитель проекта, дизайнер и верстальщик сразу видят как должна выглядеть страница с учетом маркетинговых смыслов. Это дает ускорение производства и минимум переделок.
Обоснованная концепция веб-интерфейса
Прототип многостраничного сайта – это схематичное отображение интерактивных элементов интерфейса. Основная цель – позиционирование продукта с целью увеличения конверсии в целевое действие: заявка, пробный звонок, консультация или продажа. Ставит точки захвата целевой аудитории, упрощает преобразование клиента по воронке продаж.
Смыслы сайта — это базис. Страница или весь сайт не должны быть произведением искусства, смысл один — конечное целевое действие в зависимости от воронки (продаем сразу или сначала прогреваем).
Основная задача: создать интерактивный интерфейс, понятный для пользователя и экономически эффективный для компании-заказчика
- Доверие потенциального клиента достигается через понятную демонстрацию ценности: прототип подчеркивает максимум смыслов бизнеса
- Сначала рассказываем, почему продукту стоит доверять: определяем смыслы, примеры и функции. Затем предлагаем модель пути, по которому пройдет клиент прежде, чем сделать покупку.
- В итоге: интерактивная схема по доказательству ценности и формированию доверия целевой аудитории к продукту организации
Давайте рассчитаем сроки и стоимость прототипа в онлайн-калькуляторе?
Ответьте на 4 вопроса и сразу получите цену работ. Все честно: расчет озвучивается до запроса контактов.
Примеры прототипирования
Многостраничный сайт:
10 целевых страниц
Услуги: бухгалтерский учет
из 15 смысловых блоков
Услуги: типография
из 10 смысловых блоков
Какие основные виды изготавливаются?
Клик на картинку для увеличения
Прототип многостраничного сайта ориентирован на оптимальное раскрытие структуры ассортимента товаров или услуг. В разработку данного типа входит сбор подробного семантического ядра и создание схем ключевых блоков для страниц.
Главная страница
Категория (второй уровень)
Категория (третий уровень)
Создаем интерактивные прототипы для верстки и дизайна — показывают как реально должна работать страница (смена экранов в квизах, анимация появления/скрытия контента, меню и т.д.). Посмотрите на интерактивный прототип по кнопке выше.
Схема квиза позволяет задать клиенту правильные вопросы. Важно не только получить ответы, а подготовить человека к звонку менеджера.
Модель текста позволяет закрепить требования по написанию и структуре текста. В итоге получается техническое задание, в котором представлены все требования по созданию качественной, подходящей к тематике статьи.
Текст оформляется в виде технического задания, которое фиксирует:
- Основные блоки;
- вхождения ключевых слов;
- рекомендации копирайтеру при написании.
Пример: Текстовый прототип сайта в виде технического задания и готовый текст, написанный копирайтером
Заказчик получает детальный план текста, по которому создается страница
Прототип лендинга – это база успешного запуска. Смыслы, структура, тексты, «зацепы» внимания и призывы к действию – все это позволяет закрыть возражения и создать короткий путь от посещения до заявки.
Лид с хорошего лендинга имеет кратно больше шансов стать квалифицированным и превратиться в покупателя.
Схема структуры бота, отображающая:
- Логику покупательского «пути» — элементы структуры через которые проходит потребитель
- Основные блоки в структуре
- Текстовое наполнение бота
Прототипирование магазина опирается на проработанную семантику и категорийную структуру. Выполняется исследование товарного ассортимента и прорабатывается максимум возможных точек контакта клиента с интернет-магазином.
Создаются прототипы важных для покупателей страниц: главная, категории, элементы фильтрации, контакты, корзина, оформление заявки и т.д.
Создаются схемы страниц, по которым покупателям будет удобнее совершать покупку.
Прототип страницы карточки товара
- Многостраничные сайты
-
Прототип многостраничного сайта ориентирован на оптимальное раскрытие структуры ассортимента товаров или услуг. В разработку данного типа входит сбор подробного семантического ядра и создание схем ключевых блоков для страниц.
Главная страница
Категория (второй уровень)
Категория (третий уровень)
Создаем интерактивные прототипы для верстки и дизайна — показывают как реально должна работать страница (смена экранов в квизах, анимация появления/скрытия контента, меню и т.д.). Посмотрите на интерактивный прототип по кнопке выше.
- Квизы и калькуляторы
-
Схема квиза позволяет задать клиенту правильные вопросы. Важно не только получить ответы, а подготовить человека к звонку менеджера.
- Тексты
-
Модель текста позволяет закрепить требования по написанию и структуре текста. В итоге получается техническое задание, в котором представлены все требования по созданию качественной, подходящей к тематике статьи.
Текст оформляется в виде технического задания, которое фиксирует:
- Основные блоки;
- вхождения ключевых слов;
- рекомендации копирайтеру при написании.
Пример: Текстовый прототип сайта в виде технического задания и готовый текст, написанный копирайтером
Заказчик получает детальный план текста, по которому создается страница
- Лендинги
-
Прототип лендинга – это база успешного запуска. Смыслы, структура, тексты, «зацепы» внимания и призывы к действию – все это позволяет закрыть возражения и создать короткий путь от посещения до заявки.
Лид с хорошего лендинга имеет кратно больше шансов стать квалифицированным и превратиться в покупателя.
- Чат-боты
-
Схема структуры бота, отображающая:
- Логику покупательского «пути» — элементы структуры через которые проходит потребитель
- Основные блоки в структуре
- Текстовое наполнение бота
Простой прототип прогревочного бота - Магазины и карточки товаров
-
Прототипирование магазина опирается на проработанную семантику и категорийную структуру. Выполняется исследование товарного ассортимента и прорабатывается максимум возможных точек контакта клиента с интернет-магазином.
Создаются прототипы важных для покупателей страниц: главная, категории, элементы фильтрации, контакты, корзина, оформление заявки и т.д.
Создаются схемы страниц, по которым покупателям будет удобнее совершать покупку.
Прототип категорийной структуры интернет-магазина
Прототип страницы карточки товара
Прототип экономит деньги и позволяет понять реальный вид страниц до старта разработки
Руководитель/Менеджмент
Получает понятный продукт, который можно оценить и обсудить. Быстро понять вектор движения и сформулировать рекомендации. Это не туманный текст, который не совсем понятно как будет выглядеть на готовой странице.
Эффект: эффективность принятия управленческого решения на основе детализированной модели
Маркетолог
Получает воплощение всех ключевых элементов продукта на веб-странице. Необходимые блоки внимания, акценты, интерактивные элементы, смыслы, и ценности. Все, что позволяет создать первые ступени включения пользователя в воронку продаж.
Эффект: правильное донесение смыслов, которые должен понять потенциальный клиент
Технические специалисты
Верстальщик, программист, дизайнер сразу оценивают объем работ, создают адекватное техническое задание и смету без внезапно появляющихся доработок. Сокращаются время на правки, разработку продукта и технической документации.
Эффект: презентация технических функций продукта, которая воплощается в дизайне и коде
Прототип сайта исключает проблемы в коммуникациях. Готовую схему страницы удобно обсуждать и превращать в продукт
О подходе к упаковке веб-страниц
Ключевой эффект от моей работы – схема страницы, вытаскивающая наружу истинные конкурентные преимущества и смыслы бизнеса. Все просто — потенциальный клиент должен просмотреть предложение и сказать: «Убедили, я вам верю и пишу/звоню». Это достигается через:
- Анализ логики поведения потребителя — что реально должен увидеть потенциальный клиент на странице
- Учет разных источников трафика — страница готова к продвижению в поиске и получению трафика через контекстную рекламу
- Формирование уникального торгового предложения, подчеркивающего реальные конкурентные преимущества.
К.э.н. по маркетингу, умею объяснять сложные мысли простыми словами. Работа со смыслами страницы позволяет создать дорожную карту между видением бизнеса своего продукта и потребностями целевой аудитории. Классика — производим то, что покупают (а не наоборот):)
Цены на прототипирование и текстовый контент
1. Многостраничный сайт
75 000 р
- Все элементы визуального прототипа
- От 3 разработанных макетов страниц — получается полноценный сайт, где детально описаны все основные страницы
- Развернутое маркетинговое исследование 1-го ключевого сегмента ЦА и окружения
- Три варианта призыва к действию на первом экране прототипа
- Внесение 2-х групп правок в течение 1-го месяца (идеальное состояние плюс)
- Помощь с разработкой уникального торгового предложения
2. Лендинг
36500 р
- Все элементы текстового прототипа + визуальное расположение блоков
- Маркетинговое исследование ТОП-20 конкурентов в выдаче Яндекс и Google
- Выявление маркетинговой информации по проекту в формате брифа
- Определение основных элементов страницы
- Написание текста и заполнение прототипа
- Внесение 1 группы правок в прототип в течение 2-х недель (доводим до идеального состояния)
Прототип — сложная услуга и на цену влияет большое количество факторов — сделайте расчет онлайн и узнать стоимость работ в вашей тематике
Первый тариф отличается от второго — числом проработанных страниц. Многостраничный сайт предполагает работу с большим объемом разнообразных по структуре, элементному составу и последующей верстке веб-страниц.
Слова не расходятся с делом — посмотрите что именно вы получите в итоге исследования
Текстовые технические задания: наша инструкция — ваше видение
клик на картинку для просмотра
Если у вас есть проект с готовой версткой и техническими элементами, но ему нужно наполнение под seo-оптимизацию или коррекцию текстов, можно работать сразу с текстовым контентом страниц. Мы предлагаем услуги разработки технических заданий (ТЗ) копирайтерам и специалистам по контенту для веб-интерфейсов, многостраничных сайтов, лендингов и т.д.
ТЗ – это подробный текстовый прототип страницы, включающий структуру с указанием основных блоков, семантическое ядро и сео-оптимизацию (заголовки и «тело страницы» включают вхождения ключей из семантического ядра).
Бесплатный пробный Мокап
Оцените силу маркетинга смыслов и получите один пробный экран (Мокап) будущего прототипа страницы. Выполним детализированный Мокап с определением основных смыслов продукта.
Входит:
Заголовок (H1)
Основное предложение ценности и/или УТП
Подзаголовок/Детализация заголовка
Детализация ценности — что именно получит клиент
Три-четыре предложения ценности
На что обратит внимание потенциальный клиент, изучая ваш бизнес
Мокап создается только при заполнении заказчиком брифа на прототипирование. Схема: запрашиваете пробный экран — получаете и заполняете бриф — получаете 1 экран интерфейса. Все честно — вы рассказываете о продукте, мы делаем один экран.
Интерактивный прототип сайта за 7-10 дней: поэтапное понимание целевой аудитории обеспечивает качество смыслового слоя страниц
Клик на картинку для увеличения
Прототип — это полноценное маркетинговое исследование. Постепенно, шаг за шагом мы получаем информацию о целевой аудитории и формируем проектируемую страницу. Процессы прозрачны, посмотрите, как исследуем бизнес и делаем прототипы
1. Заявка и сбор данных о интерфейсе
При первом контакте мы сделаем экспресс-анализ рыночной ниши, определим особенности бизнеса и цели разработки интерфейса. В результате оформится видение будущего прототипа.
Далее закрепим договоренности и проведем созвон-интервью в сервисе Яндекс.Телемост в формате кастдев-исследования (длительностью 0,5-1,5 часа). На созвоне с помощью кратких вопросов мы уточним самые ценные смыслы, которые сформируют продающую структуру страницы.
Итог этапа — однозначное видение изделия и заполненная документация по прототипу.
КастДев занимает время, но стоит того — за пару созвонов с брифом мы говорим на языке бизнеса и вашей целевой аудитории
Пример документации по брифу
2. Маркетинговое исследование и бенчмаркинг
На этом этапе происходит обработка брифа и анализ лучших элементов, которыми располагают конкуренты. Задача — не копировать, а усилить подачу информации о продукте. Как правило выполняется в три этапа:
- Проводим контент-анализ конкурентов по собранному семантическому ядру и понимаем как думают клиенты, на какой ступени теплоты находятся (продукт требует долгого принятия решения или клиент ищет здесь и сейчас)
- Проводим бенчмаркинг конкурентов — выделяем все элементы, особенности самых лучших конкурентов в тематике и соединяем с кастдев-исследованием. Получается связка: особенности клиента раскрываются через принятые на рынке способы презентации ценности.
- Разрабатываем отчетную презентацию — это интерактивная доска, которая фиксирует проведенный анализ и определяет ценные для бизнеса смыслы.
Итог этапа — подготовленная презентация исследования, фиксирует смыслы бизнеса
Пример фрагмента маркетингового исследования
3. Семантический анализ и подготовка структуры многостраничного прототипа
Включает анализ категорий потенциального спроса и характеристику точек входа целевой аудитории в формате:
- Сбор основных (маркерных) запросов семантического ядра
- Определение иерархии категорий и форматов меню прототипа
- Формирование структуры в виде схемы
- Определение и фиксация мастер-страниц для отрисовки в прототипе
Для упрощения верстки прототипируются основные страницы, которые затем выступят основой для наполнения сайта
Итог этапа — подготовленная маркетинговая структура сайта или интерфейса иного вида, определение основных страниц для отрисовки прототипа
Пример семантической структуры прототипа
В любом проекте, как правило, есть несколько мастер-страниц (пример: главная, услуга/товар, контакты, квиз/калькулятор, карточка) — из них строится веб-проект и под них в первую очередь делаются прототипы.
4. Разработка позиционирования в виде продающей структуры или технического задания
Продающая структура — это текстовый документ, в котором фиксируются все результаты маркетингового анализа в виде заголовков и подзаголовков. Структура называется продающей, потому-что каждый заголовок «подталкивает» потенциального клиента по воронке продаж к совершению сделки: посмотреть примеры, заполнить квиз, получить звонок через 30 секунд после заявки и записаться на замер.
Если проектируется сервисный элемент или определенный интерфейс (мобильное приложение, личный кабинет и т.д.) — составляется техническое задание, описывающее структурные компоненты приложения.
Итог этапа — текстовый документ (техническое задание, продающая структура), определяющий элементы прототипа в виде заголовков и макетного описания содержания
Пример продающей структуры
5. Разработка прототипа веб-сайта
Основной этап — на базис (продающую структуру или тз) накладывается сочетание блоков и разрабатываются экранные состояния, с которыми взаимодействует пользователь. Например в продающем лендинге может быть 3-12+ экранов, в личном кабинете 5-9, в мобильном приложении 7-50 и более.
Сразу отметим, что прототип оценивается комплексно, количество экранов — это инструмент для формирования пользовательского опыта с понятной для бизнеса целью. Продаем сразу — целевое действие звонок; прогреваем — цель запись на вебинар, регистрация или просьба оставить контакты; пользователь покупает товар в личном кабинете приложения — делаем путь пользователя понятным и удобным.
Итог этапа — готовый прототип, фиксирует смыслы, структуру и расположение отдельных элементов. На его основе можно верстать страницу и запускать рекламные коммуникации
Пример готового прототипа лендинга
Как заказать прототип сайта?
- Заполняйте бриф (ссылка);
- пишите по контактам;
- при возникновении вопросов с брифом, поможем заполнить в формате интервью в сервисе Яндекс.Телемост (быстро, голосом, видео включать не нужно)
Рассмотрим сферу деятельности и расскажем как сделать веб-интерфейс, подходящий для целевой аудитории вашей компании
Вопросы/Ответы по созданию прототипов веб-сайтов
Мы сделаем прототип любого интерфейса в соответствии с техническим заданием. Если интерфейс сложный, возможно потребуется больше очных обсуждений и правок. Это нормальная работа, она приведет к результату. Не беспокойтесь, мы не устраиваем созвоны, чтобы задать 1 вопрос. Действуем гибко — текучка обсуждается в чате телеграмма под проект, ключевые вехи проекта закрываются созвоном.
Вы получаете прототип, в который входит бесплатный пакет правок (чем выше тариф, тем больше пакетов правок). Детально изучаете полученный прототип и прямо в процессе созвона делаются правки. Если правок больше — доделываем дополнительно. При изменении ключевой функции или появлении дополнительных требований, работы сверх пакета правок считаются по часовой ставке.
Прототипы предполагают детальное исследование. Если вам нужно очень быстро, можем предложить текстовый прототип (продающую структуру) с заголовками и seo-оптимизацией. По нему нужно написать текст и сделать страницу.
Прототип — это готовый продукт: включает тексты и расположение блоков. Верстает страницу заказчик самостоятельно/своими специалистами. С нашей стороны возможен контроль работ.
Фиксируются основные блоки, размеры страницы и текст (шрифты вариативны). Задача — определить маркетинговые смыслы на которых строится страница.