Прототипирование (черновик)

Оно же проектирование информационной архитектуры

Что такое прототипирование

Полная отрисовка функционала и всех ключевых состояний, в грубом, чаще в черно-белом варианте.

Пример прототипов

Зачем нужно прототипирование

Прототипирование позволяет сфокусироваться на функционале и ускорить рабочие процессы. Дизайнер может быстро нарисовать функциональные макеты, обсудить идеи по механике и взаимодействию интерфейса с клиентом или внутри команды и оперативно внести изменения.

Сервисы для отрисовки прототипов

Многие команды не пользуются сервисами для отрисовки прототипов, для этого мы применяется Figma.

Этапы

Отрисовка грубого прототипа на основе сценария взаимодействия или без него (опционально, чаще не делается) Иногда на основе структуры и CJM отрисовывается грубый интерфейс без проработки деталей. Блоки обозначаются квадратами с подписями, указывающими, какой контент предполагается внутри. Затем мы обсуждаем прототипы внутри команды и презентуем клиенту. На этом этапе необходимо убедиться, что все механики интерфейса соответствуют всем сценариям персонажей и всем бизнес-целям.
Детализация и обсуждение прототипа После обсуждения и утверждения основных механик прототип детализируется до каждой кнопки, функции и состояния. Важно, чтобы все функции сошлись. Затем страницы линкуются (в Figma есть соответствующий для этого функционал), ещё раз проверяются и правятся на логику взаимодействия. Это происходит за несколько итераций, и затем мы снова презентуем результат клиенту.
Завершение Необходимо согласовать каждую страницу прототипа со всеми лицами, принимающими решения. Только тогда работу можно передавать в дизайн. Следует показать все страницы прототипа разработчикам для повторной оценки проекта.

Интерактивные прототипы

Часто требуется создать интерактивный прототип — это все страницы прототипа, в которых кнопки делаются кликабельными. Можно передвигаться по сайту, как будто он уже сверстан.

Дизайнеры проекта создают интерактивные прототипы в Figma и дают клиенту публичную ссылку, чтобы он мог ознакомиться с функциональными макетами и протестировать их на разных видах устройств.

Карта прототипов

Иногда клиенты просят создать карту прототипов, в которой стрелками показаны переходы от одного экрана к другому. Карта можно сделать в overflow.io или miro.com