Прототип сайта часто воспринимают как лишний этап, который студии придумали, чтобы растянуть сроки. «Нарисуйте сразу красиво, мы посмотрим и скажем, что поправить». На деле именно прототип экономит больше всего денег в проекте: он позволяет обсудить, что будет на странице и зачем, до того как дизайнер потратит неделю на оттенки и тени. Разберёмся, что это за документ, какие у него бывают формы и как с ним работать заказчику.
Что такое прототип и чем он не является
Прототип — это схема страницы, показывающая состав и порядок блоков, иерархию информации и основные элементы управления. В нём есть заголовки, кнопки, поля форм, места под изображения и примерные тексты, но нет фирменных цветов, шрифтов и фотографий. Обычно прототипы делают в оттенках серого — это сознательное ограничение, которое заставляет обсуждать смысл, а не вкус.
Прототип — не дизайн, и по нему не стоит судить, «красивый ли будет сайт». Серые прямоугольники выглядят скучно у любого дизайнера. Задача прототипа — ответить на вопросы: что посетитель видит первым, куда он может перейти, какую информацию получит на каждом шаге и как оставит заявку. Если на эти вопросы есть хорошие ответы, дизайн потом сделает их привлекательными.
И прототип — не техническое задание, хотя они тесно связаны. ТЗ описывает логику словами: как работает фильтр, какие поля обязательны, что происходит после отправки формы. Прототип показывает ту же логику визуально. Вместе они дают разработчикам и дизайнерам почти исчерпывающую картину будущего сайта.
Почему это экономит деньги
Стоимость изменения растёт с каждым этапом проекта. Добавить блок с отзывами на прототип — десять минут. Добавить его в согласованный дизайн — несколько часов: нужно отрисовать десктоп и мобильную версию, вписать в композицию, возможно, сдвинуть соседние блоки. Добавить в свёрстанный сайт — ещё больше, потому что к дизайну прибавляется вёрстка, а иногда и программирование админки.
Цифры условные, но порядок реальный. На проекте корпоративного сайта мы обычно видим на этапе прототипов 30–50 правок разного масштаба. Если бы все они всплыли после дизайна, проект вырос бы по срокам на две-три недели. Есть и менее очевидная экономия: на прототипе выявляются функции, которые никто не учёл при оценке. Калькулятор стоимости, личный кабинет дилера, сравнение товаров — лучше узнать о них сейчас и честно пересчитать бюджет, чем обнаружить в середине разработки.
Виды прототипов
Прототипы бывают разной степени проработки, и выбор зависит от задачи. Для простого лендинга хватит быстрого наброска, для интернет-магазина с нестандартным оформлением заказа нужен интерактивный прототип, по которому можно пройти путь пользователя.
Скетч
Набросок от руки или в простом редакторе. Делается за час, подходит для мозгового штурма и первых обсуждений структуры. Неудобен для согласования деталей.
Вайрфрейм
Аккуратная статичная схема с реальными блоками и примерными текстами. Основной рабочий формат для корпоративных сайтов и лендингов.
Интерактивный прототип
Связанные между собой экраны, по которым можно кликать: открыть меню, перейти в каталог, пройти оформление заказа. Нужен там, где важны сценарии.
Есть ещё высокодетализированные прототипы, которые почти не отличаются от дизайна, — с реальными текстами и сеткой. Их делают, когда структура типовая, а основные вопросы касаются контента. Но для большинства проектов золотая середина — вайрфреймы ключевых страниц и интерактивный прототип для двух-трёх главных сценариев.
Какие страницы прототипировать
Не нужно рисовать все сто страниц сайта. Прототипируются уникальные шаблоны: главная, страница услуги, раздел каталога, карточка товара, корзина, контакты, статья блога. Новость номер сорок семь будет устроена так же, как первая. Для корпоративного сайта обычно получается 6–10 шаблонов, для магазина — 10–15.
Что должно быть на хорошем прототипе
Хороший прототип отвечает на вопросы, которые иначе всплывут на дизайне или в разработке. Мы проверяем свои прототипы по нескольким критериям перед тем, как показать клиенту:
- Все блоки подписаны, понятно назначение каждого: «отзывы», «преимущества», «форма расчёта»
- Вместо «lorem ipsum» — примерные реальные тексты, хотя бы заголовки и подписи кнопок
- Показаны состояния: пустая корзина, ошибка в форме, ничего не найдено по фильтру
- Есть мобильная версия хотя бы для главной и ключевых страниц
- Обозначено, какие блоки редактируются в админке, а какие подтягиваются автоматически
- Видны точки конверсии — где и как посетитель может связаться с компанией
Отдельно про тексты. Прототип с заглушками «Здесь будет заголовок» почти бесполезен для обсуждения: невозможно понять, поместится ли смысл в отведённое место и цепляет ли он. Даже черновые формулировки сильно повышают качество обратной связи. Если реальных текстов ещё нет, мы пишем рыбу по смыслу — она потом становится основой для копирайтера.
Мобильная версия на прототипе — не формальность. Порядок блоков на телефоне часто отличается от десктопа: то, что стоит справа в колонке, на смартфоне уезжает вниз, и важная информация может оказаться на шестом экране. Подробнее о том, как продумывать отображение на разных экранах, — в статье про адаптивный дизайн.
Как заказчику читать и согласовывать прототип
Первая реакция на серый прототип часто бывает растерянной: непонятно, что тут оценивать. Мы рекомендуем смотреть на него глазами своего клиента и проходить конкретные сценарии, а не разглядывать страницы по отдельности.
Выберите три типичных клиента
Например: новый клиент, который ищет поставщика; постоянный заказчик, которому нужен прайс; соискатель, который хочет узнать о вакансиях. Для каждого пройдите путь от главной до цели.
Проверьте первый экран
Понятно ли без прокрутки, чем занимается компания и что предлагает? Есть ли путь к главному действию?
Найдите ответы на частые вопросы
Возьмите пять вопросов, которые клиенты чаще всего задают менеджерам, и проверьте, где на сайте будут ответы.
Сформулируйте правки как проблемы
Вместо «сделайте кнопку побольше» — «клиент не поймёт, что здесь можно заказать расчёт». Так дизайнер найдёт лучшее решение, чем механическое увеличение.
Соберите замечания коллег в один список
Один документ от одного ответственного, без противоречий. Это ускоряет согласование в разы.
Обсуждать цвет, шрифт и «живость» на прототипе бессмысленно — это задачи следующего этапа. Если хочется заранее показать, какой стиль нравится, лучше собрать отдельную подборку примеров и передать её дизайнеру вместе с согласованными прототипами.
Пример: как прототип изменил проект
Производитель модульных бытовок пришёл к нам с готовым видением: главная с большим слайдером, каталог моделей, страница «О компании». На прототипе мы прошли сценарий типичного клиента — прораба, которому нужно быстро понять цену бытовки с доставкой на объект. Оказалось, что в исходной структуре ответ на этот вопрос находился через четыре клика, а стоимость доставки не указывалась вовсе.
Мы предложили заменить слайдер на калькулятор: тип бытовки, комплектация, адрес объекта — и сразу ориентировочная цена. Обсуждение заняло одну встречу, переделка прототипа — полдня. Если бы эта идея появилась после вёрстки, калькулятор пришлось бы встраивать в уже готовую композицию, а бюджет вырос бы заметно. После запуска на калькулятор пришлась основная часть заявок, а менеджеры перестали отвечать на однотипные вопросы о цене.
Таких историй много: прототип выявил, что форма из девяти полей отпугнёт клиентов, что раздел с сертификатами важнее раздела с новостями, что на мобильном телефон компании оказывается в самом низу. Ни одна из этих проблем не очевидна, пока не пройдёшь путь посетителя по схеме. О том, как работать с формами отдельно, мы писали в статье о формах на сайте.
Инструменты и формат передачи
Мы делаем прототипы в той же среде, что и дизайн, — так их потом удобно превращать в макеты без перерисовки. Заказчик получает ссылку, по которой можно смотреть страницы в браузере, кликать по интерактивным элементам и оставлять комментарии прямо на схеме. Это удобнее, чем пересылать скриншоты и описывать в письме, «какой блок второй сверху».
Комментарии на самом прототипе решают ещё одну проблему — потерю контекста. Когда правки собраны в документе, через неделю уже сложно понять, к чему относилась фраза «перенести выше». Комментарий, приклеенный к конкретному элементу, однозначен. После согласования прототипы фиксируются как версия, и дизайнер работает именно с ней.
Типичные ошибки при работе с прототипами
Первая ошибка — согласовать прототип «не глядя», потому что он серый и скучный. Потом, на этапе дизайна, выясняется, что не устраивает порядок разделов, и правки возвращают проект на шаг назад. Вторая — пытаться сделать из прототипа дизайн: просить цвета, фотографии, анимации. Это размывает фокус и затягивает этап, не давая ничего взамен.
Третья ошибка — прототипировать только десктоп. Сегодня на многих корпоративных сайтах больше половины визитов приходится на смартфоны, и именно мобильная схема должна быть продумана в первую очередь. Четвёртая — забыть о служебных страницах: результатах поиска, странице благодарности после заявки, странице 404. Они кажутся мелочью, но посетитель попадает на них регулярно, и неудачная страница благодарности без следующего шага — упущенная возможность удержать человека на сайте.
Главное о прототипировании
Прототип — это разговор о смысле сайта до разговора о его внешности. Он показывает, что и в каком порядке увидит посетитель, какие сценарии ему доступны и где он оставит заявку. Изменения на этом этапе стоят в десятки раз дешевле, чем после дизайна и разработки, а неучтённые функции всплывают до того, как бюджет зафиксирован. Заказчику не нужно разбираться в дизайне, чтобы участвовать: достаточно пройти по схеме путь своего клиента и честно отметить места, где он запутается. Один-два раунда такой работы делают следующие этапы предсказуемыми, а итоговый сайт — понятным.
Нужен сайт или интернет-магазин?
Обсудим задачу, подскажем подходящую платформу и оценим сроки и бюджет — бесплатно и без обязательств.
Обсудить проект
