Простыми словами

- Прототип это рабочая версия продукта, с которой можно взаимодействовать

- Детализация прототипа определяет степень взаимодействия с ним

- Цель прототипа это собственно то зачем он вам нужен

Сложными словами

- Прототип это итерационный процесс работы над продуктом включая тестирование и валидацию гипотез с привлечением фокус-группы

- Прототип в Agile командах может заменять дизайн-макеты и спецификации

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

Детализация прототипа

Lo-Fi (low fidelity) прототипы исключают присутствие дизайна в любом виде и фокусируют исключительно на логике, очень часто такие прототипы исполняют стилизованными под наброски от руки (sketch) а еще можно так.

Hi-Fi (high fidelity) детализированные прототипы фокусируют на проработке дизайна продукта, тактильности интерфейса, валидации графических решений.

Какую детализацию использовать и когда?

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

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

Прототип дверной ручки и UX

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

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

В конце концов, мы красим и лакируем прототип дверной ручки. Мы хотим, что бы дверь было не просто удобно открывать, но что бы ее хотелось открывать!

Мы часто забываем, что UX это не только опыт как результат, но и вовлечение как цель. Без вовлечения не будет опыта, равно как и без опыта не будет вовлечения.

Прототип как процесс

Детализация нашей дверной ручки постепенно росла, достигая максимального соответствия конечному продукту, вплоть до покраски и лакировки для тестирования на вовлечение (визуальная привлекательность).

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

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

В компьютерных интерфейсах свои «материалы» (бумага тоже кстати удобна). Промышленным стандартом прототипирования компьютерных интерфейсов является Axure, которая позволяет программировать прототипы для достижения максимального соответствия реальному продукту. Кроме программных продуктов иногда для high fidelity прототипирования используют HTML, CSS и javascript. Особой популярностью пользуется фреймворк framer.js, у которого есть интеграция с Photoshop и Sketch.

Итог

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