Прототип сайта: что это и как проверить его до разработки
Прототип сайта — это модель будущих страниц и действий пользователя. Она показывает, какую информацию человек увидит, куда сможет перейти и что произойдёт после нажатия кнопки. По прототипу заказчик и команда проверяют, получится ли решить нужную задачу: подобрать товар, запросить расчёт, записаться на встречу или оформить заказ.
Для бизнеса результат этого этапа — понятный путь клиента и список решений для реализации. Например, из какой карточки открывается заявка, какие данные покупатель вводит сам и что передаётся вместе с обращением. Цвета и фотографии могут быть предварительными, но важные условия покупки, названия кнопок и полей уже должны позволять проверить этот путь.
Чем прототип отличается от макета и готового сайта
Карта сайта показывает разделы и их связи. Прототип раскрывает устройство экранов и действия на них. Дизайн-макет прорабатывает внешний вид: типографику, цвета, изображения и состояния элементов. Один файл может совмещать эти задачи — важно договориться, что именно команда проверяет и сдаёт.
Прототип бывает статичным: набор экранов с пояснениями и переходами на схеме. Или интерактивным: по кнопкам можно нажимать и проходить подготовленные сценарии. Для обсуждения состава одной страницы может хватить схемы. Для проверки подбора нескольких товаров и отправки общего запроса удобнее связать экраны переходами.
Детализация зависит от задачи проверки: для обсуждения структуры подойдут схемы, для проверки оформления запроса — связанные экраны с полями и кнопками.
В прототипе проверяют, понятен ли покупателю ответ «Заявка отправлена». На готовом сайте проверяют сохранение обращения и его получение менеджером.
Что должно входить в прототип
Рассмотрим пример: компания поставляет офисную мебель организациям. Покупателю нужно выбрать столы и кресла, указать количество и запросить предложение на поставку. Прототип должен показать весь путь — от выбора товаров до общего обращения.
Для такого этапа стоит согласовать следующие части:
| Часть прототипа | Что заказчик проверяет |
|---|---|
| Каталог и подбор | По каким признакам выбирают мебель: размер, материал, назначение. Понятны ли названия характеристик покупателю. |
| Карточка товара | Видны ли размеры, варианты исполнения и единица продажи. Понятно ли, указана точная цена или стоимость уточняется. |
| Список выбранного | Можно ли собрать разные товары, поменять количество и удалить лишнее. Сохраняется ли список после возврата в каталог. |
| Форма запроса | Передаются ли выбранные позиции вместе с обращением. Какие контакты и сведения о поставке нужно заполнить. |
| Ответ после отправки | Понятно ли, принят запрос на расчёт или уже оформлен заказ. Что покупателю делать дальше. |
| Мобильные экраны | Можно ли просмотреть характеристики, изменить количество и заполнить форму с телефона. |
Если компания продаёт готовые комплекты, путь будет короче: выбрать комплект, указать количество и отправить запрос. Состав прототипа должен отражать реальный способ покупки.
Перед оценкой работ попросите команду перечислить сценарии первого запуска: «выбрать готовый комплект», «собрать набор из нескольких товаров», «отправить свою спецификацию». Напротив каждого укажите, входит ли он в проект. Так станет понятно, какие экраны действительно нужны.
Одна задача — весь путь покупателя
Подобрать 12 столов и 12 кресел, запросить доставку в Казань.
- 01 · ВыборНайти нужные размеры и регулировки.
- 02 · СписокУвидеть оба товара и количество каждого.
- 03 · ЗапросУказать контакт и город доставки.
- 04 · ОтветПонять, что предложение подготовит менеджер.
Как проверить прототип на конкретной задаче
Предложите пройти его человеку, который занимается закупкой мебели для компании и не участвовал в обсуждении интерфейса. Сформулируйте задачу через результат:
Дайте участнику самостоятельно выбрать маршрут. Так вы увидите, находит ли он фильтры, понимает ли названия кнопок и может ли перейти к запросу.
Отметьте результат каждого шага: человек нашёл размеры, добавил оба вида товара, проверил количество и понял, какой ответ получит. Запишите, где понадобилась помощь: эти места требуют доработки.
Допустим, участник нажал «Заказать» и решил, что мебель уже зарезервирована. Но компания сначала проверяет наличие и готовит предложение. Тогда нужно изменить название действия и пояснение: например, «Запросить предложение», а рядом объяснить, что наличие и срок поставки подтвердит менеджер. После исправления повторите проверку понимания этого шага.
Для каждого замечания запишите четыре вещи: задачу, фактическое действие человека, затруднение и предлагаемое изменение. Если участник выбрал логичный переход, для которого пока отсутствует экран, добавьте его и продолжите проверку.
Приглашайте участников под конкретные роли. Закупщик проверит подбор и состав запроса, руководитель — получение информации для согласования покупки.
Как показать ошибки и возврат к выбору
Добавьте к основному пути ситуации, в которых покупателю потребуется помощь. Покажите их отдельными экранами или пояснениями рядом с элементами.
| Ситуация | Что нужно решить до разработки |
|---|---|
| По выбранным параметрам ничего нет | Какие условия можно снять и как вернуться к доступным товарам. |
| Нужного количества нет в наличии | Можно ли запросить поставку, изменить количество или выбрать замену. Ответ зависит от правил компании. |
| Не заполнен контакт | Где появится пояснение и какие уже введённые данные сохранятся. |
| Человек вернулся из формы в каталог | Сохранятся ли выбранные позиции и количество. |
| Запрос не удалось отправить | Как показать неудачу, сохранить данные и предложить повтор или другой способ связи. |
Попросите дизайнера показать эти состояния, а разработчика — определить источник данных для каждого. Например, точное количество товара берётся из учётной системы. Если компания подтверждает остаток вручную, в карточке уместна формулировка «Наличие уточнит менеджер».
Сколько работы нужно заказывать
Сравнивайте стоимость по составу работ: сценарии, экраны, мобильная версия, проверка с покупателями и правки по её результатам. Попросите включить эти позиции в предложение, чтобы было видно, что вы получите за указанную сумму.
Попросите исполнителя ответить на вопросы:
- Какие конкретно действия клиента войдут в прототип? Будет ли в примере с мебелью общий запрос на столы и кресла?
- Какие экраны будут подготовлены для телефона, а какие — только для компьютера?
- Кто подготовит названия, характеристики и тексты условий, на которых проверяют выбор?
- Входит ли проверка с представителями клиентов? Кто их приглашает и кто проводит встречи?
- Входят ли изменения после этой проверки в цену? Какие именно и когда их покажут повторно?
- Что получим в конце: исходный файл, ссылку для просмотра, описание переходов и список нерешённых вопросов?
Для небольшой правки существующей формы достаточно показать изменённый экран и его состояния. Для нового подбора с несколькими шагами нужно проверить всю последовательность.
Если задача — улучшить действующий сайт, сначала определите масштаб изменений. Этому посвящён разбор «Редизайн сайта или точечные доработки: что выбрать бизнесу».
Что принять перед переходом к разработке
На встрече откройте согласуемую версию прототипа и пройдите основные задачи от начала до конца. В примере с мебелью покупатель должен выбрать столы и кресла, указать количество, отправить общий запрос и понять, какой ответ получит. У каждого замечания должен быть статус: исправлено, отложено с объяснением или требует решения конкретного человека.
Убедитесь, что команда передаёт:
- экраны и переходы для выбранных сценариев;
- важные условия работы: например, на каком этапе компания резервирует товар;
- мобильный вариант и предусмотренные ошибки;
- исходники и доступ к согласованной версии;
- перечень зависимостей: откуда берутся цены, наличие и характеристики, какие данные уйдут менеджеру.
Вопросы, влияющие на действия покупателя, закройте на этой встрече. Например, выбор между отдельными заявками и общим запросом определяет состав формы и передаваемых данных. Финальные фотографии и описания можно подготовить к наполнению сайта, назначив ответственного и срок.
После согласования прототипа разработчики реализуют сохранение данных, интеграции, обработку ошибок и остальные технические функции. Их работоспособность проверяют отдельно. Порядок организации этапов разобран в гайде по заказу разработки сайта или сервиса.
Для первого обсуждения с командой достаточно предметного запроса: «Покупатель должен собрать несколько товаров в одно обращение. Покажите путь на компьютере и телефоне, сохранение списка при возврате в каталог и ответ после отправки. Отдельно отметьте, какие правила нам нужно подтвердить». По такому заданию можно оценить объём прототипа и проверить результат работы.