Прототипирование интерфейса цифровых продуктов
Про то зачем и как разрабатывать прототипы уже написано тысячи статей. Любой дизайнер рано или поздно сам поймет, что нужна некая драфтовая версия продукта которую не жалко будет исправлять после обсуждения, или отправить в корзину и начать заново. Правда, может встретиться какой нибудь менеджер который сам накидает мокап и потребует от дизайнера сделать все начисто (в таких случаях приходится долго разбираться а потом все переделывать). Я же хочу коротко рассказать о той работе которую я, как правило, выполняю перед тем как начать прорабатывать прототип.
Подготовительная работа
Для начала нужно описать концепцию продукта прочитав которую любому члену команды становится понятно как разрабатываемый продукт должен будет работать. Для описаний концепции лучше всего подходят пользовательские сценарии в виде простых историй. Простого технического описания набора возможностей мне лично не достаточно, они не дают понимания полной картины.
Еще лучше понять принципы работы продукта помогают диаграммы и логические схемы, они прекрасно дополняют сценарии и отображают общую логику, или по каждому отдельному сценарию.
Объединяя логические схемы и сценарии получаем четкое видение основных принципов работы продукта, понимаем зачем тот или иной сценарий нужен, каких целей он помогает достичь.
Итак, обща я концепция и логика понятны, но для детальной проработки прототипа лично мне нужно детально описать какой контент и какой функционал будет на каждом экране, прояснить предварительную версию структуры. Для этого хорошо подходит Метод скоростной фиксации сценариев. Подход простой и продуктивный: читая пользовательские сценарии выписывает сначала все микро-сценарии, группируем их в сценарии и разбиваем по экранам, прописываем какой должен быть контент и в каком формате. Работа очень трудоемкая но дает полную картину.
Для удобства я прописываю отдельно контент и действия, иногда выделяю ключевые действия для экрана. Для мобильных приложений можно отдельно описывать содержание меню.
Вся эта работа дает возможность на этапе проработки прототипа не думать о содержании экранов а полностью сосредоточиться на проработке удобства взаимодействия и понятной подаче информации.
Прототипирование
Собственно, когда предварительная работа проведена и в голове есть четкая картина того, что нужно сделать, можно прорабатывать прототип. Перед тем как открыть программу для прототипирования полезно взять карандаш и сделать наброски на бумаге. Как правило, программы очень ограничивают мышление, а вот рисование руками наоборот стимулирует фантазию.
Я делаю высоко детализированные прототипы, которые можно обсуждать с клиентом и тестировать.
Когда все экраны проработаны, обсуждены и утверждены их объединяют в карту навигации, которая детально отображает логику работы продукта.
Все, после согласования с командой и клиентом передаем прототип дизайнеру или наводим красоту самостоятельно.
Инструменты
Для прототипирования используются два типа инструментов: с библиотеками элементов интерфейса и без элементов (графические примитивы).
Инструменты с библиотеками элементов, как правило, используют менеджеры проектов и дизайнеры-проектировщики (UX), которые передают прототип для финальной проработки дизайнерам. С их помощью экраны прорабатываются достаточно быстро, плюс можно сделать интерактивный прототип готовый для тестирования. Можно так же собирать свои библиотеки более сложных паттернов из стандартных элементов.
Инструменты без библиотек чаще используют дизайнеры которые прорабатывают не только прототип но и финальный дизайн (проще делать все с помощью одного инструмента). Элементы интерфейса прорисовываются с помощью графических примитивов (квадраты, круги и пр.), что замедляет работу если нужно проработать большой и сложный сервис.
Экраны, проработанные с помощью таких инструментов, сохраняются в виде набора изображений и чтобы сделать из них интерактивный прототип импортируются в специальные программы, например InVision.
Отдельно хочу отметить инструменты которые дают возможность сразу прорабатывать экраны и устанавливать связи, тем самым дизайнер может сделать с помощью одного инструмента полностью интерактивный прототип без написания кода, что очень удобно. Таким инструментом является Experience Design от Adobe.
Недавно появился glide — инструмент от Гугла, который позволяет сделать приложение на основе таблиц, таким образом можно создать прототип максимально приближенный к реальному результату.
В общем, для того чтобы сделать хороший прототип нужно провести предварительную работу, иначе ты будешь тыкать пальцем в небо и редко попадать в цель. Успехов!
