[Перевод] Wireframe vs. mockup vs. prototype: в чем разница?
От переводчика. Привет! Цель перевода этой статьи проста — провести четкие границы между обозначенными выше терминами. При проектировании новых сценариев для B2B CRM я столкнулся с тем, что каждый человек в команде понимал «макет» или «прототип» по-своему. Также выяснилось разное понимание, кто в команде за какие технологии прототипирования должен отвечать. Я провел исследование материалов по теме и хочу поделиться тем материалом, после которого для меня «все встало по полочкам».
Для этой статьи нужно было перевести все термины на русский, но я не встретил однозначных переводов, поэтому было два варианта: пользоваться транслитерацией: вайрфрейм, мокап и прототип или использовать наиболее подходящие уже имеющиеся термины. Я выбрал второй вариант для благозвучности. Вайрфрейм → эскиз; мокап → макет; по прототипу разночтений не было). Если меня читают спецы по точной терминологии — прошу в комменты. Итак.
Эскизы, макеты и прототипы — общие термины, используемые продуктовыми командами. Каждый из них используется для иллюстрации концепций, сбора обратной связи и достижения общего видения, чтобы команды могли проектировать и создавать именно то, что хотят клиенты. Хотя эскизы, макеты и прототипы на первый взгляд могут показаться неотличимыми, каждый из этих типов дизайна играет уникальную роль в определенные моменты жизненного цикла разработки продукта.
Эти термины часто используются как взаимозаменяемые, что может привести к путанице в отношении того, когда и как следует использовать эти технологии в процессе разработки продукта. Выбор правильного решения на правильном этапе гарантирует, что будет затрачено необходимое количество усилий, чтобы вы могли предоставить функциональность, которая удовлетворяет реальные потребности клиентов.
Как эскизы, макеты и прототипы соотносятся друг с другом?
Полезно начать с высокоуровневых определений. Эскизы — это базовые визуализации, которые фокусируются на том, что будет делать новый продукт или функция. Макеты — это статичные, но реалистичные изображения того, как будет выглядеть продукт или функция и как они будут использоваться. Прототипы — это высококачественные изображения, демонстрирующие, как пользователь будет взаимодействовать с новым продуктом или функцией.
Один из способов быстро понять разницу между эскизами, макетами и прототипами — это сравнить их визуально. Эскиз обычно имеет низкую точность — простые рамки и текст передают концепцию «в общих чертах». В макет могут быть добавлены логотипы, цвета и значки, чтобы сделать его более реалистичным. И, наконец, в прототип добавляется интерактивность.
Вам не обязательно создавать все три вида дизайна для каждого продукта или функции, над которой вы работаете. В зависимости от необходимого уровня обратной связи и наглядности, эскиза или макета может оказаться достаточно. В таблице ниже более подробно сравниваются различия между эскизами, макетами и прототипами:
Эскиз (Wireframe) | Макет (Mockup) | Прототип (Prototype) | |
Описание | Быстрый набросок, чтобы ухватить основную идею новой функциональности | Реалистичное визуальное отображение того, как будет выглядеть новый функционал | интерактивная симуляция новой функциональности |
Цель | Достичь консенсуса и собрать внутренний фидбек о том, как новая функциональность будет работать | Исследовать визуальные элементы более точечно | Собрать обратную связь от реальных пользователей |
Степень детализации | низкая | средняя | высокая |
Элементы | формат и структура контента | дополнительные визуальные элементы: логотипы, цвет, изображения | интерактивные элементы и навигация |
Необходимые временные затраты | низкие | средние | высокие |
Кто создает | продакт или UX дизайнер | UX дизайнер | UX дизайнер |
Эскиз
Эскизы — это основа дизайна, на которой строится все остальное. Это черно-белые изображения, в основном прямоугольники и текст. Такое отображение необходимо для того, чтобы получить верхнеуровневое представление о том, как будет выглядеть продукт. Они имеют низкую точность, быстро создаются и часто используются при мозговом штурме. Эскиз можно создать с помощью бумаги и карандаша, маркерной доски или инструмента управления продуктами. И не обязательно, чтобы это делал один UX-дизайнер. Менеджеры по продукту могут подключиться и помочь с идеями. Эскизы используют для достижения консенсуса относительно основной функциональности. Отсутствие визуальных элементов, таких как цвета и логотипы, является намеренным, поскольку внимание должно быть сосредоточено на том, способствуют ли предложенные элементы и их сочетание решению задач пользователя.
Макет
Макеты поднимают эскизы на новый уровень, добавляя элементы дизайна, такие как цветовые схемы, шрифты, значки и элементы навигации. Обычно под одну задачу создается более одного макета, что предоставляет лицам, принимающим решения, множество вариантов выбора. Реалистичный контент часто включается, чтобы сделать визуализацию более репрезентативной для конечного продукта. Для создания макетов требуется больше усилий, а также больше навыков. UX-дизайнер использует программное обеспечение для создания и демонстрации решений.
Реалистичные изображения и тексты позволяют легко оценить, что имеет смысл в дизайне с точки зрения пользователя. Сравнение альтернативных вариантов макетов помогает команде договориться о дальнейшем направлении проектирования. Статический характер макетов позволяет легко вносить любые изменения.
Прототип
Прототипы разрабатываются, когда необходимы юзабилити-тестирование и сеансы обратной связи с пользователями. Прототип очень похож на макет, но в него дополнительно будут добавлены элементы интерактивности с помощью UX-инструментов (не реального кода). Таким образом, прототип не будет полностью функциональным, но элементы будут достаточно отзывчивыми для проверки основных концепций. Прототипы становятся бесценным инструментом пользовательского тестирования. Возможность увидеть, как реальный пользователь взаимодействует с продуктом или функцией, дает ценную информацию всей команде разработчиков продукта. После завершения тестирования и получения отзывов, прототип передается команде разработчиков для реализации.
Эскизы, макеты и прототипы проясняют, что действительно нужно клиентам, чтобы команды могли создавать продукт, который нравится пользователям.
Habrahabr.ru прочитано 8141 раз
