Прототипирование сайта:
зачем нужен UX-каркас до дизайна.

Пятница, 17:40: дизайн согласован, заявок нет

Лендинг по ремонту квартир согласован в трёх итерациях: шрифты, фото, анимация кнопок. Через две недели в CRM четыре обращения, а Директ израсходовал 26 000 ₽.

На разборе выясняется другое. Двадцать два знакомых прошли сайт и назвали следующее действие: одиннадцать не нашли калькулятор стоимости, семь не поняли, чем подрядчик отличается от соседей, четверо искали цену и ушли. Дизайн не остановил никого — остановил порядок экранов.

Прототип показывает этот порядок до первого макета. Правка схемы — десять минут, перенос блока в готовой вёрстке — два дня вместе с анимацией и мобильной версией.

Проверка на 40 минут: что посмотреть прямо сейчас

Возьмите телефон, отключите Wi-Fi и пройдите путь от рекламного объявления до отправленной заявки. Записывайте числа, а не впечатления.

• Первый экран. Шесть секунд на вопрос, что здесь продают и что нажать. Понятно лишь после прокрутки — каркас не проверяли.
• Касания до заявки. Пять-восемь — норма, двенадцать и больше — потеря людей на полпути.
• Поля формы. Считайте по одному. Каждое поле сверх пяти снижает отправку на 3–8 процентов.
• Цена и сроки. Вилка на первом-втором экране. Не увидев порядок цен, клиент звонит конкуренту.
• Аналитика. В Метрике: сколько визитов и заявок за 30 дней. Нет целей — правки идут наугад.

Три группы причин: структура, смыслы, техника

Причины повторяются от проекта к проекту, и почти все лежат в трёх группах.

Структура. Порядок блоков собирают так, как удобно верстать, а не как клиент принимает решение. До пятого экрана доходит 35–45 процентов посетителей: главный аргумент внизу увидят меньше половины.

Смыслы. Тексты пишут о компании, а не о задаче клиента. В заявках это видно: 60 процентов обращений начинаются с вопроса о цене, хотя прайс есть на сайте.

Техника. Мобильный трафик в услугах доходит до 65–70 процентов, а загрузка дольше трёх секунд срезает часть визитов до первого экрана. Каркас без мобильного сценария придётся переделывать.

Считаем в рублях: сколько стоит пропущенный прототип

Возьмём лендинг услуги с рекламным бюджетом 18 000 ₽ в месяц.

Клик в этой нише стоит около 45 ₽, то есть 18 000 ₽ ÷ 45 ₽ = 400 визитов в месяц. При конверсии 1,25% от 400 = 5 заявок, а цена одной заявки — 3600 ₽.

Проверенный сценарий на прототипе поднимает конверсию до 2,5% от 400 = 10 заявок. Разница — 10 − 5 = 5 заявок в месяц.

При марже 12 000 ₽ со сделки это 5 × 12 000 = 60 000 ₽ в месяц и 720 000 ₽ в год. Прототип лендинга входит в проект от 10 000 ₽.

Куда это ведёт если не действовать

Без прототипа каждая правка решает локальную задачу и добавляет странице ещё один блок.

Через полгода главная превращается в десять-двенадцать экранов, а суть продукта всё ещё на пятом. Реклама дорожает: ставки в услугах растут на 10–15 процентов в год, и та же заявка стоит уже около 4000 ₽.

Новый подрядчик начинает с нуля: зафиксированной логики нет, есть внешний вид, и цикл согласований повторяется. Объяснить, почему блоки стоят именно так, команда не может — решения нигде не записаны.

План на день: UX-каркас своими руками

Каркас собирается без дизайнера и без кода. Ниже порядок, который реально выполнить за один рабочий день.

1. 01Выпишите пять вопросов, с которыми клиент приходит: цена, сроки, гарантия, примеры работ, порядок оплаты.
2. 02Расставьте их по важности для клиента: ответ на главный вопрос, доказательства, цена, возражения, форма.
3. 03Нарисуйте пять-шесть экранов в сером цвете, без картинок и шрифтов. Задача — увидеть порядок, а не красоту.
4. 04Свяжите экраны ссылками, чтобы кнопки вели дальше, а форма открывалась: получится кликабельный макет.
5. 05Дайте пятерым людям из целевой аудитории задачу узнать стоимость и оставить заявку. Молчите и записывайте, где встают.
6. 06Посчитайте касания и время до заявки: выше 12 касаний — переставляйте блоки, а не переписывайте текст.
7. 07Зафиксируйте список экранов, порядок блоков и формулировки. Этот документ и есть задание для дизайнера.

Что требует вмешательства в код: что дальше

Своими руками разумно закрыть 60–70 процентов вопросов: порядок блоков, формулировки, число полей. Дальше начинается зона, где ошибка стоит дороже работы.

Автор смотрит на продукт своими глазами. Владелец знает, почему его решение лучше, и невольно ставит этот ответ первым, хотя клиент ещё не понял, о чём речь. Со стороны это видно за пять минут, изнутри — почти никогда.

Пять знакомых дают картину, но не показывают, что будет с конверсией при 400 визитах и разном трафике.

И главное: каркас не учитывает техническую сторону. Расчёт доставки, интеграция с CRM, личный кабинет и приём оплаты меняют структуру: где нужен вход в аккаунт, появляется отдельный экран и другой сценарий формы.

Что входит в работу и сколько это стоит

Работа идёт в четыре шага: аудит и цифры, прототип, дизайн, сборка и аналитика. Прототипирование веб-сайтов начинается с аудита: разбор текущего сайта и воронки — 0 ₽, его ведёт Максим Холмов.

Цена определяется задачей. Лендинг под задачу — от 10 000 ₽, многостраничный ресурс — от 30 000 ₽, интернет-магазин — от 80 000 ₽. Дальше по сложности: CRM от 150 000 ₽, Telegram-бот от 100 000 ₽, приложение от 150 000 ₽.

Прототип лендинга занимает 2–5 рабочих дней, каркас многостраничника — 10–20 дней, логика CRM или бота обсуждается отдельной сессией. Поддержка после запуска — 3 месяца бесплатно, далее от 5 000 ₽/мес. Код, доступы и документация остаются у заказчика.

Вывод: прототип дешевле, чем правки после запуска

Прототип — самый дешёвый этап проекта и самый дорогой для пропуска. На схеме правка стоит десять минут, в вёрстке — два дня, в запущенной рекламе — 720 000 ₽ упущенной выручки в год.

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