Прототип — это черновик интерфейса, на котором проверяют идеи до того, как в них вложены деньги на дизайн и программирование. Он позволяет увидеть будущий сайт или приложение целиком, найти ошибки в логике и договориться всем участникам проекта. Разберем, какие бывают прототипы, как их делать и как использовать с максимальной пользой.
Что такое прототип и зачем он нужен
Прототип показывает, из каких блоков состоит страница, как они расположены, какие действия может совершить пользователь и куда эти действия ведут. В нем намеренно нет финальных цветов, шрифтов и фотографий, чтобы обсуждение шло о структуре и смысле, а не о вкусах.
Главная ценность прототипа — дешевизна изменений. Переставить блоки на схеме занимает минуты. Та же правка в готовом дизайне требует часов работы дизайнера, а в сверстанном сайте — еще и времени верстальщика и программиста. Чем раньше найдена ошибка, тем дешевле ее исправить.
Читайте также: Как оценить эффективность наружной рекламы
Прототип также служит общим языком для команды. Заказчик, маркетолог, дизайнер и разработчик смотрят на одну и ту же схему и обсуждают конкретные элементы, а не абстрактные пожелания вроде «сделайте удобно».
Виды прототипов по детализации
Прототипы различаются по степени проработки. Выбор зависит от этапа проекта и от того, что нужно проверить.
Низкая детализация
Это быстрые наброски на бумаге, доске или в простом графическом редакторе. Блоки обозначаются прямоугольниками, текст — линиями, изображения — перечеркнутыми рамками. Такие схемы подходят для самого начала работы, когда нужно быстро перебрать несколько вариантов структуры.
Плюс — скорость: несколько вариантов главной страницы можно набросать за полчаса. Минус — по ним трудно оценить реальные пропорции и объем контента.
Средняя детализация
Это вайрфреймы — аккуратные черно-белые схемы с реальными заголовками, примерными текстами, кнопками и формами. Они показывают иерархию информации и расположение элементов достаточно точно, чтобы по ним можно было рисовать дизайн. Именно этот уровень чаще всего используется для согласования с заказчиком.
Высокая детализация
Интерактивные прототипы, близкие к финальному виду: с переходами между экранами, раскрывающимися меню, работающими кнопками. Иногда в них уже есть элементы визуального стиля. Такие прототипы используют для пользовательского тестирования и для сложных интерфейсов, где важно проверить поведение, а не только расположение.
Что должно быть в прототипе сайта
Хороший прототип отвечает на вопросы о содержании и поведении каждой страницы. Минимальный набор элементов:
- шапка с навигацией, контактами и ключевыми действиями;
- порядок блоков на странице сверху вниз;
- реальные или близкие к реальным заголовки и тексты;
- кнопки и ссылки с понятными подписями;
- формы с перечнем полей;
- места для изображений с пояснением, что на них будет;
- состояния интерфейса: пустая корзина, ошибка в форме, сообщение об успешной отправке;
- мобильная версия ключевых страниц.
Особое внимание стоит уделить состояниям, которые часто забывают. Что увидит пользователь, если поиск ничего не нашел? Что произойдет после нажатия «Отправить»? Как выглядит страница, если товара нет в наличии? Эти вопросы лучше решить в прототипе, чем импровизировать на этапе верстки.
Как создать прототип: пошаговый процесс
Прототипирование — не рисование ради рисования. Это последовательная работа, которая опирается на цели проекта и знания об аудитории.
- Сформулируйте цели страницы. Какое действие должен совершить посетитель и какая информация ему для этого нужна?
- Опишите пользовательские сценарии. Например: «Человек пришел из рекламы, хочет понять цену и записаться».
- Соберите контент: перечень того, что должно быть на странице, — аргументы, цены, отзывы, вопросы и ответы.
- Расставьте приоритеты. Что пользователь должен увидеть первым, что вторым, а что может быть ниже?
- Нарисуйте несколько вариантов в низкой детализации и выберите лучший.
- Проработайте выбранный вариант до вайрфрейма с реальными текстами.
- Добавьте мобильную версию и состояния интерфейса.
- Свяжите экраны между собой, если нужен интерактивный прототип.
- Покажите прототип команде и нескольким представителям целевой аудитории.
Прототип с настоящими текстами стоит в разы больше, чем прототип с «рыбой». Именно реальные формулировки показывают, работает ли страница.
Инструменты
Для прототипов используют как специализированные программы, так и универсальные средства. На раннем этапе прекрасно работают бумага и маркер: это быстро и позволяет сосредоточиться на идее. Для вайрфреймов и интерактивных прототипов применяются графические редакторы интерфейсов, которые позволяют создавать компоненты, связывать экраны и совместно работать над макетом в браузере.
Выбор инструмента менее важен, чем подход. Удобно, если прототип можно открыть по ссылке без установки программ, оставлять комментарии к конкретным элементам и сразу видеть обновления. Тогда согласование не превращается в пересылку файлов с названиями вроде «прототип_финал_точно_финал».
Сколько стоит прототип и окупается ли он
Заказчиков иногда смущает, что за прототип приходится платить отдельно. Рассмотрим условный пример. Проработка прототипа корпоративного сайта занимает 20 часов специалиста. Если без прототипа после дизайна и верстки обнаружится, что структуру главной и страниц услуг нужно менять, переделка затронет дизайнера, верстальщика и программиста и легко займет 40–60 часов. Даже если прототип предотвратит одну такую переделку, он окупится в два-три раза. А на практике он предотвращает несколько.
Тестирование прототипа
Прототип полезен не только для согласования, но и для проверки гипотез на реальных людях. Простое юзабилити-тестирование можно провести без больших затрат.
Найдите пять-семь человек, похожих на вашу целевую аудиторию. Дайте каждому задание: например, найти стоимость услуги и записаться на удобное время. Попросите рассуждать вслух и наблюдайте, не подсказывая. Отмечайте места, где человек задумывается, ошибается или ищет нужный элемент.
Обычно уже после нескольких сессий проявляются повторяющиеся проблемы: непонятная подпись кнопки, спрятанная цена, лишний шаг в форме. Исправить их в прототипе — дело нескольких минут.
Важно тестировать именно задачи, а не мнения. Вопрос «Вам нравится?» дает мало полезной информации. Наблюдение за тем, как человек пытается выполнить задание, показывает реальные проблемы.
Типичные ошибки при прототипировании
Даже опытные команды допускают ошибки, которые снижают пользу от прототипа.
- прототип рисуется без целей и сценариев, «как у конкурентов»;
- вместо реальных текстов используется бессмысленный текст-заполнитель, и проблемы с объемом всплывают только в дизайне;
- мобильная версия не прорабатывается;
- не продуманы пустые состояния и ошибки;
- прототип слишком детализирован на раннем этапе, и команда тратит время на мелочи, не решив вопросы структуры;
- заказчик согласует прототип формально, не вникая, а затем просит переделать уже готовый дизайн;
- результаты тестирования не учитываются, потому что «и так понятно».
Как заказчику работать с прототипом
Если вы заказываете сайт, прототип — ваш главный шанс повлиять на результат с минимальными затратами. Отнеситесь к нему как к чертежу дома: после заливки фундамента переносить стены будет поздно.
Пройдите по прототипу глазами клиента. Представьте, что впервые слышите о вашей компании. Понятно ли с первого экрана, что вы предлагаете? Можно ли быстро найти цену? Есть ли ответы на главные возражения? Легко ли оставить заявку? Записывайте все вопросы и обсуждайте их с командой.
Не стесняйтесь просить объяснений. Хороший проектировщик может обосновать, почему блок стоит именно здесь и почему кнопка подписана именно так. Если обоснования нет, это повод пересмотреть решение.
Удобно согласовывать прототип по такому порядку:
- Сначала структура сайта целиком: все ли разделы на месте, нет ли лишних.
- Затем главная и ключевые посадочные страницы: порядок блоков и смысл каждого.
- После этого формы, корзина, личный кабинет и другие интерактивные элементы.
- В конце — мобильная версия и второстепенные страницы.
Такой порядок не дает утонуть в мелочах, пока не решены крупные вопросы. Если обсуждать подпись кнопки до того, как согласована структура страницы, значительная часть усилий может оказаться напрасной.
Итоги
Прототипирование — недорогой способ сделать интерфейс продуманным до того, как начнутся дорогие этапы дизайна и разработки. Начинайте с целей и сценариев, используйте реальные тексты, прорабатывайте мобильную версию и состояния интерфейса, тестируйте прототип на представителях аудитории. Время, вложенное в схему, возвращается в виде меньшего числа правок, более быстрого запуска и сайта, который понятен клиентам.
