Прототип сайта: зачем он нужен, сколько стоит и как его проверить

Прототип — это схема страниц сайта без цветов и картинок: какие блоки, в каком порядке, что написано на кнопках и куда они ведут. Он нужен, чтобы согласовать структуру и сценарии до дизайна, когда исправление стоит час, а не неделю. Прототип лендинга делается за 1–2 дня и стоит 5–15 тысяч рублей, прототип сайта на 10–15 страниц — 3–7 дней и 20–60 тысяч, прототип веб-сервиса с личным кабинетом — 2–4 недели. Если подрядчик предлагает сразу рисовать дизайн без прототипа, спросите, как вы будете согласовывать структуру.

Прототип, макет и дизайн — в чём разница

Эти слова часто путают, и из-за этого в КП одно и то же называют по-разному.

Ошибка, найденная на прототипе, — это передвинуть блок в редакторе. Та же ошибка на вёрстке — переделать дизайн, вёрстку и иногда логику формы.

Что должно быть в прототипе

• Все страницы из карты сайта или хотя бы все уникальные шаблоны: главная, услуга, карточка товара, корзина, контакты.
• Реальные заголовки и тексты кнопок, а не «Lorem ipsum». От формулировки зависит, понятно ли посетителю, что делать.
• Формы с полями, обязательными отметками, галочкой согласия на обработку персональных данных и тем, что происходит после отправки.
• Мобильная версия. Больше половины посетителей коммерческих сайтов приходит с телефонов, и порядок блоков там часто другой.
• Состояния: что видит пользователь, если товара нет, поиск ничего не нашёл, оплата не прошла.
• Для личного кабинета — роли: что видит клиент, менеджер, администратор.

Как проверить прототип до дизайна

Кликабельный прототип в Figma или похожем редакторе можно показать людям, похожим на ваших клиентов. Не коллегам и не родственникам, а тем, кто реально мог бы купить.

1. Сформулируйте 3–4 задачи: «найдите цену на монтаж», «запишитесь на субботу», «узнайте, сколько стоит доставка в ваш город».
2. Покажите прототип 5 людям по отдельности. Попросите выполнять задачи и вслух говорить, что они думают.
3. Не подсказывайте. Записывайте, где человек остановился, что искал, куда нажал по ошибке.
4. Соберите проблемы, которые повторились у двух и больше человек. Обычно их 3–7.
5. Исправьте прототип и при необходимости покажите ещё 2–3 людям.

Пяти участников обычно хватает, чтобы найти большую часть проблем навигации: исследования юзабилити показывают, что каждый следующий участник находит в основном то же самое (Nielsen Norman Group). Подробнее о проведении теста — в статье о юзабилити-тесте на пяти пользователях.

Какие ошибки ловит прототип

Цена спрятана. Посетитель листает до конца и не находит стоимость. Если цены нет вообще, хотя бы «от» и что на неё влияет.

Кнопка не говорит, что будет дальше. «Отправить» хуже, чем «Получить расчёт за 15 минут».

Форма слишком длинная. Восемь полей там, где хватило бы двух.

Нет ответа на главный вопрос. Для ремонта — сроки и гарантия, для медицины — лицензия и врачи, для доставки — зона и время.

Сценарий не доходит до конца. В прототипе личного кабинета нет страницы «что делать, если забыл пароль» или «как отменить запись».

Кто должен участвовать в согласовании

Прототип согласуют те, кто потом будет жить с сайтом. Руководитель отвечает за цель и предложение. Менеджер по продажам знает, какие вопросы задают клиенты и что мешает им оставить заявку. Если есть онлайн-оплата или доставка — человек, который отвечает за заказы. Соберите замечания всех в одном документе до отправки подрядчику. Худший сценарий — когда каждый присылает правки отдельно, и они противоречат друг другу: один просит убрать цены, другой — сделать их крупнее.

Когда прототип можно пропустить

• Лендинг по готовому шаблону, где структура уже проверена и вы меняете только тексты.
• Небольшой сайт-визитка из 3–4 страниц без форм сложнее «имя и телефон».
• Редизайн, где структура остаётся прежней, а меняется только внешний вид.

Во всех остальных случаях прототип окупается: правка на этапе дизайна обходится в 3–5 раз дороже, а на этапе вёрстки — в 10 раз.

Сколько стоит и сколько длится

Часто прототип входит в стоимость разработки отдельной строкой. Если его нет в смете, спросите, когда и как будет согласовываться структура.

Что делать после согласования

Утверждённый прототип становится частью ТЗ. Дизайнер рисует по нему, а не придумывает структуру заново. Если на этапе дизайна вы хотите поменять порядок блоков, это изменение объёма — его нужно оценить отдельно. Зафиксируйте в переписке, какую версию прототипа вы согласовали, и храните ссылку на неё до конца проекта.