Прототипирование

Что такое прототипирование простыми словами

Прототипирование можно сравнить с пробной попыткой перед тем, как сделать что-то серьезное. Например, вы хотите испечь пирог, но не уверены, что он получится правильным. Поэтому сначала вы замешиваете совсем немного теста и выпекаете небольшой вариант будущего пирога, чтобы проверить, достаточно ли он хорош. Если он окажется невкусным, вы измените рецепт, например добавите меньше соли или больше разрыхлителя. 

Прототипирование — это то же самое, но только в области дизайна различных IT-продуктов. К примеру, перед тем как мобильное приложение для покупки авиабилетов станет доступно на Google Play и App Store, оно обязательно пройдет стадию прототипирования.

Задолго до того, как программисты создадут готовое для установки приложение, оно будет выглядеть просто как последовательность картинок, изображающих контент и разные функции сервиса. Нарисовать такие картинки в графическом редакторе и потом при необходимости поправить их гораздо проще, чем верстать готовый сервис. Таким образом, прототипирование — это способ избежать ошибок и получить продукт, который понравится людям.

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

1. Визуализация и проверка идеи

Прототипирование — это визуализация концепции будущего продукта с минимальными затратами. Например, прототип приложения-переводчика поможет всей команде разработки и заказчику увидеть его интерфейс и функции: где находится окно перевода, как пользоваться переключениями языков, как перейти к дополнительным разделам и т.д. Также он позволит найти и исправить потенциальные проблемы, прежде чем вложить большие ресурсы в разработку. К примеру, на этапе прототипа можно выяснить, что полезно было бы добавить под основное текстовое окно недавние переводы пользователя для быстрого возврата к ним. 

2. Тестирование пользовательского опыта (User Experience, UX)

Прототипы — неотъемлемая часть Agile, гибкой методологии разработки в IT, при которой каждая итерация завершается подготовкой прототипа целого сервиса или какого-то его блока. Здесь прототипы помогают собирать обратную связь от пользователей, чтобы продукт был максимально функциональным для целевой аудитории, а не только нравился команде и заказчику. Например, прототип сайта помогает проверить пользовательский путь и найти проблемные места на нем, которые впоследствии могут приводить к отказу от использования сайта и снижению конверсии.

3. Экономия средств

Прототип — это статичная или интерактивная картинка. Она только изображает будущий продукт, в нее еще не вложены основные силы разработчиков, к ней не подключены полнофункциональные интеграции, она не взаимодействует с IT-инфраструктурой компании в полном объеме. На такой пробной версии гораздо дешевле искать и исправлять ошибки: нужно значительно меньше рабочих часов и специалистов. Внесение изменений в уже работающий сайт или онлайн-сервис будет намного сложнее и затратнее.

4. Согласование требований

Прототип IT-продукта необходим для того, чтобы все, кто участвует в разработке, имели общее понимание продукта: разработчики, дизайнеры, клиенты и пользователи. Прототип показывает основные блоки контента, навигацию, интерфейс, а часто также и ключевые элементы дизайна (цвета, шрифты, иллюстрации и пр.).

Прототип и вайрфрейм: в чем отличия

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

Вайрфрейм — это схематичный набросок структуры и содержания интерфейса, который показывает основные элементы, области контента и навигацию. Вайрфрейм обычно не содержит деталей визуального дизайна, картинок и текстов. Вайрфрейм также иногда называют низкодетализированным (Lo-fi) прототипом.

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

Виды прототипирования

По глубине проработки различают прототипы с низкой, средней и высокой детализацией. 

Прототипы низкой детализации

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

Низкодетализированные прототипы используются для передачи самой первой, основной концепции или структуры продукта. Они часто создаются вручную на бумаге или с помощью простейших программ для прототипирования, таких как Moqups.

Плюсы

• Их можно создавать и изменять легко и очень быстро.
• Они полезны для изучения различных идей и получения первых отзывов от пользователей или участников команды.
• Для их создания не нужно изучать сложные программы.

Минусы

• Они не отражают реальный внешний вид и функциональность приложения.
• Они не позволяют проверить удобство интерфейса, так как его еще нет.
• Их можно толковать максимально широко, что приведет к расхождению в понимании продукта.

Прототипы средней детализации

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

Плюсы

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

Минусы

• На их создание и обновление требуется больше времени и усилий, чем на создание прототипов с низкой детализацией.
• Они могут не охватывать все аспекты или сценарии использования продукта.

Читайте также:

Как сделать прототип сайта

Прототипы высокой детализации

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

Плюсы

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

Минусы

• Создание таких прототипов требует больших затрат времени и средств (над ними работают дизайнеры, копирайтеры, иллюстраторы, разработчики, юзабилити-специалисты и другие участники, как над полноценным проектом).
• Они могут ограничивать возможности внесения изменений и улучшений в продукт (из-за дороговизны доработки и уже использованных технических решений).

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

Статичные прототипы

Они демонстрируют внешний вид и структуру продукта, но не допускают никакого взаимодействия с пользователем.

Плюсы

• Они полезны для передачи основной концепции и содержания продукта.
• Их легко и быстро создавать и изменять, так как это, по сути, картинки.

Минусы

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

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

Они имитируют поведение продукта, позволяют взаимодействовать с пользователем и получать от него обратную связь. 

Плюсы

• Они максимально реалистичны.
• Они полезны для тестирования пользовательского опыта. 

Минусы

• Их разработка требует больших трудозатрат, чем статичные прототипы.
• Они могут не охватывать все аспекты или сценарии использования продукта.
• Они могут создавать нереалистичные ожидания от продукта, так как не все дизайнерские задумки можно реализовать силами разработчиков в финале.

Читайте также:

Как сделать прототип мобильного приложения

Этапы прототипирования

Этап 1. Определение требований и задач

В основе любого проекта лежат цель, функции и видение заказчика. Специалисты собирают эту информацию воедино с помощью опросов и интервью с заказчиком, потенциальными пользователями, мозгоштурмов с заинтересованными сторонами и участниками команды. Например, чтобы разработать прототип мобильного приложения для интернет-магазина, нужно определить, кто является целевой аудиторией (пол, возраст, интересы, потребности, прошлый пользовательский опыт и пр.), и наметить основные возможности приложения, включая то, как оно будет взаимодействовать с другими сервисами и платформами (сервисами почтовых рассылок, онлайн-оплаты и пр.).

Этап 2. Вайрфрейминг — создание схематичной модели

Это создание грубого эскиза, наброска (вайрфрейма) продукта, показывающего его основную структуру и расположение блоков в виде простых фигур — квадратов, кругов и др. Такой «быстрый дизайн» не должен быть сосредоточен на визуальных деталях. В нашем примере с приложением для магазина вайрфрейм будет отображать схематичное расположение карточек товаров в каталоге, блоков контента на карточке товара, общую структуру страницы оформления заказа и т.д.

Этап 3. Доработка прототипа

Это добавление в прототип деталей и интерактивности. По итогу он должен демонстрировать главные функции продукта и его внешний вид. Если прототип хорошо детализирован и анимирован, то граница между ним и дизайн-макетом стирается: дизайн уже включен в прототип. В нашем примере финальный прототип может отображать весь внешний вид интернет-магазина с баннерами, анимированным интерфейсом, фотографиями и описаниями товаров, полным процессом заказа с вводом платежных данных и адреса доставки.

Программы и сервисы для прототипирования

Вот несколько популярных сервисов, которыми пользуются новички и профессионалы в области юзабилити и дизайна по всему миру. Wireframe.cc — это один из самых простых инструментов, лучше всего подходящий для создания прототипов низкой и средней детализации. Сервис имеет минималистичный интерфейс в формате «белой доски» и предлагает ограниченную палитру цветов и опций, чтобы избежать потери времени на ненужные детали и украшения.

Moqups — это универсальный и простой инструмент, позволяющий создавать вайрфреймы, прототипы, майнд-карты и даже готовый дизайн приложений. Сервис имеет простой и интуитивно понятный интерфейс со всеми необходимыми для большинства проектов блоками. В нем есть бесплатная и платная версии, которые отличаются количеством проектов, пользователей и функций.

Figma — это универсальный инструмент для прототипирования и дизайна практически любых IT-продуктов: сайтов, приложений, онлайн-сервисов и др. В Figma простой интерфейс, работающий методом перетаскивания элементов и позволяющий редактировать дизайн по слоям. Здесь много готовых шаблонов и блоков для прототипов, а также есть возможности для анимации интерфейсов. Необходимые дополнительные опции можно добавить с помощью сотен тысяч плагинов. 

Adobe XD — один из самых старых инструментов для UI/UX-дизайнеров. Программа позволяет создавать вайрфреймы, прототипы, дизайн сайтов и приложений и многое другое. В Adobe XD можно коллективно работать над проектом, получая комментарии от заказчиков и команды. В программе реализована векторная система элементов, за счет которой можно масштабировать их без ущерба для внешнего вида прототипа.

Sketch — одно из лучших современных приложений для разработки интерфейсов. Оно напоминает Figma, однако содержит много уникальных функций и работает только на iOS. В Sketch множество готовых шаблонов и плагинов, которые расширяют возможности дизайнера и ускоряют его работу.Webflow — это сервис для разработки сайтов без кода. Он помогает создавать детализированные и интерактивные прототипы, которые затем легко превратить в готовый работающий продукт за счет того, что за каждым блоком уже стоит код HTML, CSS и JavaScript.

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

Это лишь некоторые из инструментов прототипирования. Выбирайте подходящий именно вам исходя из типа вашего прототипа, навыков в дизайне и вашего бюджета (некоторые сервисы имеют платные подписки и дополнительные опции).