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

Иллюстрация Симоны Тоадер

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

Переведено специально для uprock.ru

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

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

Причины создания прототипов

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

Рассмотрим несколько причин для создания прототипа:

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

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

Члены команды сидят за столом и вместе создают бумажный прототип. Изображение предоставлено Adobe

Какие бывают типы прототипирования?

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

Мобильная версия макета с низкой, средней и высокой детализацией. Изображение предоставлено Justinmind.

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

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

Преимущества

• Быстро. Бумажные прототипы создаются легко и быстро. Они отлично подходят для коллективного обсуждения различных идей и концепций. Кроме того, можно тут же вносить правки и обновлять версии.
• Недорого. Прототипы с низкой детализацией не требуют больших трудовых и материальных затрат. Ручка и бумага — это обычные офисные принадлежности, а поскольку прототипы создаются быстро, затраты на оплату труда значительно снижаются.
• Формирование сопричастности процессу. Прототипирование с низкой детализацией — это отличное мероприятие для формирования команды. У ее участников повышается уровень вовлеченности, заинтересованности и эмпатии по отношению к пользователям и продукту.
• Объективные отзывы пользователей. Во время тестирования юзабилити пользователь в большей степени расположен давать честную обратную связь, если он считает, что вы потратили не так много времени на создание прототипа. Как правило, пользователи более открыты в выражении своего мнения при рассмотрении бумажных прототипов в отличие от анализа макетов с более высокой детализацией.

Недостатки

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

Два человека вместе работают над бумажным прототипом. Изображение предоставлено Adobe.

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

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

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

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

Преимущества

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

Недостатки

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

Макет средней детализации, который представляет цифровые интерфейсы в серых оттенках. Изображение предоставлено O’Reilly.

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

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

Преимущества

• Реалистичный опыт взаимодействия. Взаимодействие пользователей с прототипом, который очень похож на конечный продукт, даст более точные и актуальные результаты. Тестирование прототипа высокой детализации — лучший способ предсказать, как его воспримут при запуске на рынок.
• Заключительный тест. Прототипы высокой детализации — это прекрасная возможность проверить ваш конечный продукт перед тем, как отдавать его в разработку. Тестирование ваших окончательных концепций позволит команде уверенно перейти в стадию разработки, поскольку они будут знать, что создают полезный и нужный продукт.
• Инструмент связи с разработкой. Интерактивные прототипы высокой детализации — отличный способ сотрудничества с разработчиками. Он дает им более четкое представление о том, как должен функционировать продукт. Это действительно помогает в процессе передачи его в разработку.

Недостатки

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

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

Что такое процесс создания прототипа веб-сайта?

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

Ниже мы рассмотрим этапы эффективного процесса создания прототипа веб-сайта.

1. Выберите функции для тестирования. Определите ключевые функции, которые вы хотите протестировать с пользователями. Невозможно эффективно протестировать все возможности вашего продукта за один сеанс. Поэтому зафиксируйте его ключевые особенности, которые вы хотите выделить в этом сеансе предварительного исследования.
2. Создайте прототип своего дизайна. Затем спроектируйте прототип своего веб-сайта, чтобы показать те ключевые функции и процессы, которые вы определили на предыдущем этапе. Демонстрация всех функций может занять много времени и оказаться лишней. Прототип нужен, чтобы выделить главные особенности, которые вы хотите протестировать. Вы можете отмечать любые неправильные клики или нажатия на пути пользователя.
3. Проверьте свое решение. Следующий шаг — представить ваш дизайн пользователям, партнерам и заинтересованным сторонам. Наблюдайте и записывайте то, как они взаимодействуют с вашим продуктом. Отмечайте любые проблемы, которые связаны с удобством использования в текущей версии дизайна. Тестирование юзабилити и прототипы неразрывно связаны друг с другом.
4. Внесите правки. После сеанса тестирования объедините все отзывы в ключевые выводы и приведите свои проекты в соответствие с ними.
5. Повторите процесс. В конечном итоге, покажите пользователям обновленный дизайн веб-сайта и повторите этот процесс снова.

Источник