Проектирование
Прототип сайта: как проверить структуру до визуального дизайна
Схема страниц и переходов, которая позволяет проверить расположение информации и последовательность действий до детальной визуальной проработки.
Редакция:
Прототип показывает, где посетитель найдёт нужную информацию и что сможет сделать дальше. Он может быть набором статичных экранов или интерактивной схемой. Уровень детализации выбирают под вопрос, который требуется проверить.
Для обсуждения структуры страницы может хватить блоков с рабочими заголовками. Для заявки из каталога важны переходы, выбранные позиции и возврат после ошибки. Серая схема тоже должна содержать понятный смысл: одинаковые заглушки не помогают оценить, хватает ли информации для решения.
Пример задачи прототипа
Учебный пример: на сайте компании есть несколько услуг для разных отраслей. В прототипе проверяют, может ли посетитель определить подходящую услугу, найти релевантный пример работы и отправить описание проекта. Если после чтения страницы следующий шаг непонятен, проблему можно обсудить до подготовки финальной графики.
При этом кликабельная кнопка в макете не доказывает, что заявка действительно попадёт в CRM. Прототип проверяет замысел взаимодействия; реализацию и обмен данными принимают отдельно.
Как смотреть прототип
- Выберите конкретного посетителя и его задачу, а не абстрактного «пользователя».
- Начните со страницы, на которую он может прийти из поиска или рекламы.
- Пройдите шаги без подсказок автора: где предложение, ограничения, доказательства и следующий шаг?
- Проверьте вопросы перед обращением: что входит в работу, кому подходит услуга, что нужно сообщить?
- Запишите затруднения с указанием экрана и действия.
Комментарий «не понимаю, чем отличаются эти услуги» даёт задачу на структуру и текст. «Хочется интереснее» требует уточнения и не объясняет проблему посетителя.
Что согласовать с подрядчиком
| Вопрос | Зачем это нужно |
|---|---|
| Какие страницы и состояния показаны? | Не принять один главный экран за весь сайт |
| Есть ли мобильный сценарий? | Проверить приоритет информации на узком экране |
| Где используются заглушки? | Видеть, какие решения ещё зависят от контента |
| Какие переходы рабочие? | Не путать имитацию с готовой функцией |
| Что считается согласованным? | Понимать, какие изменения затронут следующие этапы |
Прототип полезен, когда помогает принять решение. Он не заменяет исследование аудитории, визуальный дизайн, разработку или тестирование готового сайта. Его роль в проекте и состав результатов стоит включить в объём разработки сайта.
Для согласования конкретной версии используйте карточку проверки прототипа: сценарии, наблюдения, состояния и решения по открытым вопросам.