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

Преимущества ИИ в прототипировании

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

Быстрое создание интерактивных прототипов

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

Примеры использования ИИ в прототипировании

Прототипирование редактора политики расходов

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

Прототипирование разговорного ИИ

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

Прототипирование интерфейса фильтрации для дорожных инженеров

Исследователи из Университета Пердью разработали интерфейс фильтрации для помощи дорожным инженерам в анализе сложных данных о движении. Набор данных включал 27 атрибутов для каждого события движения, несколько из которых содержали вложенные податрибуты. Команда экспериментировала с двумя подходами к прототипированию: статическими прототипами, созданными вручную, и интерактивными прототипами, сгенерированными ИИ. Это было последовательное исследование, сосредоточенное на одном проекте, а не контролируемый эксперимент. В первом этапе команда создала низкофидельные каркасные прототипы в Figma без помощи ИИ и получила обратную связь от пользователей по визуальному дизайну, но не смогла наблюдать, как люди взаимодействуют с фильтрами, поскольку прототип был статическим. Во втором этапе команда перестроила интерфейс с помощью v0 и Bolt, задав инструментам конкретные требования к дизайну и синтетический, сгенерированный ИИ набор данных. Во время тестирования пользователи взаимодействовали с интерфейсом так, как они бы это сделали с готовым продуктом.

Как прототипировать сложные интерфейсы с помощью ИИ

Получение полезных выходных данных от инструментов ИИ зависит от контекста, который вы задаете инструменту, и от проектных рекомендаций, которые вы указываете. Процесс прототипирования можно разбить на пять шагов: 1. Определите, что вам нужно от прототипа. Решите, какой уровень взаимодействия должен поддерживать прототип, чтобы ответить на ваши исследовательские вопросы. 2. Примите дизайнерские решения. Определите, как должен выглядеть и вести себя прототип, включая макет, иерархию и взаимодействия. 3. Соберите данные для использования в прототипе. Вы можете экспортировать реальные данные из вашего продукта или попросить ИИ сгенерировать синтетический набор данных. 4. Напишите запрос для ИИ. Сформулируйте детализированный запрос, который описывает интерфейс, который вы хотите создать. 5. Вводите контекст в инструмент ИИ. Используйте инструменты, такие как Cursor, v0 и Figma Make, чтобы получить работающий интерактивный прототип.

Интеграция ИИ-прототипирования в ваш процесс

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