Инструменты для создания прототипов с помощью ИИ следуют общим рекомендациям, но им не хватает рассудительности и внимания к деталям, присущих опытному дизайнеру. Так считают в своей статье эксперты из Nielsen Norman Group (далее по тексту NNG).

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

Об оценке

Чтобы понять, могут ли инструменты для создания прототипов на основе ИИ разрабатывать продуманные, учитывающие контекст проекты, сравнимые с проектами, созданными дизайнерами-людьми, мы провели оценку на примере реального проекта. Эта оценка касалась трёх категорий инструментов на основе ИИ:

Инструменты для проектирования с использованием ИИ, которые предназначены для создания статичных каркасов или макетов
С помощью ИИ (vibe) инструменты для кодирования, которые создают интерактивные прототипы на основе кода
Чат-боты с искусственным интеллектом общего назначения, способные создавать прототипы

Конкретные запросы приводят к лучшим результатам

Качество результатов, полученных с помощью ИИ, сильно зависит от конкретики запроса. Наша оценка показала, что более длинные запросы с четкими и подробными требованиями к дизайну неизменно дают лучшие результаты — особенно при использовании инструментов ИИ, которые генерируют прототипы на основе кода и могут создавать результаты, напоминающие работу дизайнера-человека. (Этот вывод подтверждает то, что мы уже знаем о запросах к ИИ: чем они конкретнее, тем лучше результат.)

Например, когда мы вводили подробное текстовое описание (запрос 2), инструменты ИИ генерировали результаты, похожие на дизайн, созданный человеком (хотя мы не загружали в запрос никаких визуальных ссылок). В частности, ИИ генерировал следующие результаты:

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

Напротив, при использовании подсказки высокого уровня (подсказка 1) результаты, сгенерированные ИИ, сильно различались. Это связано с тем, что общие подсказки позволяют инструментам ИИ делать предположения о требованиях к дизайну и заполнять пробелы.

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

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

Изображение (или ссылка на Figma) стоит тысячи слов

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

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

Близко, но неточно

Даже когда инструменты на основе ИИ приблизились к цели благодаря подробному текстовому запросу, такому как Prompt 2, им всё равно не хватало человеческих нюансов и внимания к деталям.

Хотя общая структура и ключевые компоненты соответствовали задуманному дизайну, при ближайшем рассмотрении были выявлены проблемы в деталях:

Отсутствие визуальной иерархии или группировки связанных элементов
Избыток цветов создаёт визуальное напряжение
Плохой цветовой контраст
Несогласованный интервал между полями

Эти нюансы могут показаться незначительными, но именно они отличают продуманный дизайн от «почти готового».

Возьмём в качестве примера вывод Bolt для подсказки 2: пароль для доступа к материалам курса и ссылка на них были разделены большим промежутком, даже когда пользователь ещё мог сдать экзамен. Сгруппировав эти два элемента, можно было бы улучшить читаемость и помочь пользователям понять, что пароль относится именно к указанным материалам.

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

ИИ отражает закономерности на основе обучающих данных

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

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

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

Общий Визуальный Стиль

Без подробных указаний по визуальному оформлению инструменты для создания прототипов на основе ИИ, как правило, выдают дизайны, которые имеют схожий, типовой вид и выполнены с использованием шрифта без засечек и минималистичного стиля. Такая однородность во многом объясняется тем, что системы ИИ отдают предпочтение распространенным шаблонам из обучающих данных и часто используют библиотеки компонентов, такие как Shadcn, и интерфейсные фреймворки, такие как Tailwind CSS, для создания дизайнов.

Из-за отсутствия уникального визуального языка многие экраны, созданные ИИ, выглядят плоскими и взаимозаменяемыми. Несмотря на интерактивность и наличие цветов, прототипы, созданные ИИ, часто напоминают неотшлифованные каркасы.

В левом дизайне, названном «Bolt», используется простая структура карточек со статистикой прогресса и списками курсов. В правом дизайне, названном «Claude», представлен аналогичный минималистичный интерфейс с мягким серым фоном и цветными тегами статуса. Оба дизайна отличаются лаконичным, сдержанным стилем с яркими акцентными цветами, но практически не отличаются визуально и не выражают индивидуальность бренда.

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

Неправильный Шаблон Проектирования

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

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

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

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

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

Неправильное использование шаблона проектирования чаще всего встречается в инструментах, обученных на небольшом количестве компонентов (например, функция «Первый черновик» в Figma) или ориентированных на создание определенных типов страниц (например, Relume ориентирован на создание маркетинговых веб-сайтов). Когда сценарий проектирования выходит за рамки обучающих данных или ограниченного сценария использования, результатом становится дизайн, который принудительно подгоняется под заданный шаблон

Использование инструментов прототипирования ИИ в реальных рабочих процессах

Когда следует использовать ИИ для прототипирования

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

Ранние идеи и творческие поиски

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

Демонстрация концепции

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

Прототипы для быстрого тестирования юзабилити

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

Прототипы ИИ — это всё ещё просто прототипы

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

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

Необходимы Сильные знания в области дизайна

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

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

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

Заключение

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

Понравилась статья? Жмите лайк или подписывайтесь на рассылку.

А также поделитесь статьей с друзьями в соцсетях.

Команда AskUsers