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

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

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

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

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

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

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

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

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

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

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

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

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

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

Недостатки

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

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

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

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

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

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

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

Недостатки

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

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

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

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

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

Недостатки

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

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

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

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

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