Прототип кликается, как настоящий сайт: можно нажать кнопку, перейти на другой экран, открыть меню. Но за этим нет ни финального дизайна, ни кода — только связанные между собой схемы страниц. Задача прототипа — показать, как человек будет двигаться по сайту, ещё до того как нарисованы кнопки и написан код.
Смысл в дешевизне ошибки. Переставить блок в прототипе — минуты, переписать свёрстанную и задизайненную страницу — дни и деньги. Поэтому сценарии гоняют на прототипе: дают людям задание «купить товар» и смотрят, где они застревают. Найденные на этом этапе провалы логики обходятся в разы дешевле, чем те же ошибки на готовом сайте.
Связанные экраны без дизайна и кода.
Гоняют сценарии и ловят ошибки сценария.
Переставить блок — вопрос минут, дни на это не уходят.
На кликабельном прототипе лендинга люди не находили кнопку заказа — её перенесли на первый экран ещё до UI-дизайна, и переделывать готовую вёрстку не пришлось.
Прототипы делят по уровню детализации. Low-fidelity — серые блоки и заглушки текста, их собирают за час прямо поверх вайрфрейма, чтобы спорить о логике, а цвет кнопки оставить на потом. High-fidelity ближе к финалу: реальные тексты, отступы, состояния полей — на таком уже гоняют юзабилити-тесты и согласуют с заказчиком. Частая ошибка — сразу лезть в high-fidelity: команда начинает обсуждать шрифты вместо того, ведёт ли сценарий пользователя к цели.
Для SEO прототип — это точка, где закладывается будущая структура и перелинковка: на схеме видно, какие страницы вообще нужны, где встанут хлебные крошки, фильтры, блок «похожие товары». Поправить иерархию URL и вложенность разделов на кликабельной схеме — минуты; переносить разделы на проиндексированном сайте — это редиректы, потеря веса страниц и просадка позиций на недели. Поэтому семантику и каркас посадочных страниц полезно проговаривать ещё на прототипе, до UX-дизайна.
Степень проработки выбирают по задаче. Схема из серых прямоугольников проверяет структуру и порядок блоков, кликабельный прототип со связями между экранами проверяет сценарий, а прототип с реальными текстами и данными проверяет понятность. Чем выше проработка, тем дороже правки, поэтому начинают с грубого варианта.
Тестируют на людях из целевой аудитории: дают задачу и молча смотрят, где человек останавливается. Пяти-восьми участников хватает, чтобы вскрыть основные препятствия. Замечания собирают в список и чинят до передачи в дизайн: правка на прототипе стоит минут, та же правка после вёрстки — дней.
Частые вопросы
Чем прототип отличается от каркаса и макета?
Каркас показывает расположение блоков, прототип добавляет переходы между экранами и даёт пройти сценарий целиком, макет задаёт окончательный вид с цветами и шрифтами. Порядок работы обычно такой же.
Сколько человек нужно для проверки?
Пять-восемь из целевой аудитории на один сценарий. Этого хватает, чтобы найти большинство заметных препятствий: серьёзные проблемы повторяются уже у первых участников.
В чём делают прототипы?
В редакторах интерфейсов со связями между экранами. Для простых задач подойдёт и схема на бумаге: главное — возможность пройти сценарий и показать его людям до начала разработки.
Нужны ли настоящие тексты в прототипе?
На поздних стадиях обязательно. Условная рыба скрывает проблемы: длинный заголовок не помещается, аргументов до кнопки не хватает, названия разделов не влезают в меню.