Мудборды в UX: как и зачем их использовать

Перевод статьи Лилиан Янг из Nielsen Norman Group о мудбордах. Автор рассказывает, как мудборды могут помочь в UI и UX-дизайне, на каком этапе разработки продукта их следует создавать, как правильно их составлять и обсуждать с командой

Далее от лица автора

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

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

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

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

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

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

В дальнейшем эту коллекцию можно использовать для создания руководства по визуальному стилю.

Более того, мудборды помогают команде:

К тому же несколько человек могут совместно работать над ними как синхронно, так и асинхронно.

Дизайнеры используют мудборды на ранних стадиях процесса разработки нового продукта или на этапах существенного пересмотра существующего продукта. Например, они создают их на этапах Define* или Ideate** в цикле дизайн-мышления. Мудборды помогают достичь консенсуса в отношении визуального стиля до того, как дизайнеры начнут работу над прототипами.

*Define — объединение всех исследований, акцент на выявлении проблем пользователей и поиск возможностей для внедрения инноваций

**Ideate — мозговой штурм для создания множества безумных, креативных идей, направленных на решение неудовлетворённых потребностей пользователей, выявленных на этапе Define

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

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

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

Чтобы создать собственный мудборд, необходимо:

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

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

Выберите инструмент для создания мудборда. Сделайте физическую или цифровую доску.

Физические доски

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

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

Цифровые инструменты

По сути, всё, что вам нужно, это инструмент, с помощью которого вы будете собирать и перемещать визуальные образы. Делайте это в любом инструменте для создания визуального дизайна, UI-дизайна и прототипов. Если вы планируете создавать мудборды вместе с командой, выберите инструмент, который поддерживает совместную работу. Сервисы для создания мудбордов, такие как Miro, Mural или FigJam, хорошо подходят для того, чтобы удалённо работать над мудбордами совместно с командой.

Чтобы выбрать правильное настроение, думайте о продукте и пользователях. Какой вайб вы хотите передать продукту? Как вы хотите, чтобы люди чувствовали себя при его использовании? Если вы работаете с креативными специалистами, обсудите, как они хотят, чтобы продукт выглядел. Запишите слова, которые они при этом произнесли.

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

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

Собирая материалы, стремитесь к целостности. Хотя мудборд объединяет разнообразные форматы, подчините их одной теме, чтобы они передавали выбранное вами настроение. Не создавайте беспорядочный мудборд с противоречивыми материалами.

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

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

Большое количество скриншотов и примеров в мудборде может сместить фокус в сторону отдельных характеристик продукта, хотя его главное назначение — создать общее настроение продукта.

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

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

Если вы создавали мудборд совместно с некоторыми из коллег, поделитесь готовым мудбордом с остальными членами вашей команды или отдела. Чётко объясните, почему вы выбрали именно это настроение и именно такие визуальные образы.

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

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

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

Больше переводных статей, инструментов и вдохновения для дизайнеров — в нашем телеграм-канале.