В этой статье я хочу рассказать зачем AI нужен UX/UI дизайнерам. Как его внедрение может улучшать пользовательские интерфейсы, и как AI инструменты облегчают и ускоряют работу дизайнера.

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

Зачем UX/UI‑дизайнерам нужен AI?

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

1. Улучшение процесса разработки дизайна интерфейса

Анализ информации при погружении в задачу

Первое с чего начинается работа продуктового дизайнера — это анализ задачи: изучение рынка, конкурентов, документации и статистики. Как правило, это требует прочтения большого количество разных текстов о проекте и его целях, предоставленных клиентом и написанных аналитиками и продакт‑оунером. Кроме этого нужно найти и прочитать множество материалов для погружения в индустрию и понимания рыночной ниши. Здесь дизайнерам очень сильно может помочь AI, который сам прочитает эти тексты и быстро даст короткие выжимки. Дизайнер либо сразу получит готовые ответы на свои вопросы, либо, если речь идет об анализе статьи, сможет оценить есть ли там что‑то важное для него и стоит ли прочитать целиком. Для этих целей я и мои коллеги используем Chat GPT и Yandex GPT. Ниже пример простейшего вопроса и ответа на него.

Быстрый способ узнать под какой размер экрана делать интерфейс

Анализ фидбэка пользователей и метрик

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

Генерация артефактов дизайна

В первую очередь дизайнеры интерфейсов использую AI для генерации и проверки текстов для интерфейсов, особенно если интерфейс не на родном языке. Здесь опять выручает ChatGPT. На втором месте по популярности идет генерация картинок. Чаще всего роль дизайнера интерфейсов не подразумевает рисования иллюстраций, но с помощью нейросетей они теперь могут закрывать многие потребности без привлечения иллюстраторов, или создавать для них более подробные задания. Раньше для этих целей использовали фотостоки, но с нейросетями часто можно получить более точный результат и быстрее. Правда остается открытым вопрос с авторскими правами на такие картинки, если нейросеть обучается на работах других людей и использует образы, защищенные авторским правом. Если говорить о таких генераторах, то самые популярные сейчас — midjorney, dall‑E, recraft.

Также можно попросить Chat GPT на основе текста с описанием аудитории сгенерировать профили типичных пользователей, что очень помогает в общении с коллегами в процессе проектирования. Также можно дать задание сгенерировать текстовое описание юзер‑флоу по функциональному описанию или без него. А Figma Jam может сгенерировать полноценную блок‑схему, например, логина в банковском приложении, которую можно взять за основу и настроить под ваши нужды. Еще с помощью нейросетей можно быстро генерировать контент для заполнения макетов — изображения и описание товаров, аватарки, тексты переписок и т. д.

На мой взгляд, наиболее удобный способ применения AI — это использование многочисленных AI‑плагинов Figma. Они могут генерировать и переводить тексты, создавать изображения, иконки, цветовые палитры, аватарки, и многое другое. Есть плагины работающие на базе других нейросетей — Chat GPT, Stable Diffusion, и т. д. В большинстве есть бесплатные функции или пробный период. Подробную информацию о них вы можете легко найти в многочисленных обзорах, в том числе и на ютюбе, с подробными инструкциями.

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

Тестирование прототипов дизайна без привлечения юзеров

Это довольно новая история и требует использования специализированных платных инструментов. Таких как User Zoom, Maze, EyeQuant (Некоторые инструменты также представлены в виде плагинов для Figma (EyeQuant Inspect, Clueify). Суть заключается в том, что ИИ имитирует поведение живых людей, чтобы протестировать варианты дизайна без использования реальных юзеров. Генерирует тепловые карты, воронки, проводит А/Б тесты. Например EyeQuant в своей презентации говорит о таких результатах своего ИИ, показывая насколько он близок к действиям реальных людей.

Точность имитации действий пользователя в EyeQuant

Создание дизайна экранов

Я перечислил те способы использования, которые, судя по отзывам дизайнеров, точно работают. Однако уже сейчас есть сервисы, которые могут нарисовать сами экраны приложения, например Musho, Uizard. На данный момент они, на мой взгляд, не способны генерировать дизайн вместо дизайнера. Возможно не смогут никогда, но кому‑то они могут быть полезны для генерации идей или быстрых макетов для презентации концепции приложения или генерации быстрых лендингов.

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

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

Рекомендательные движки

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

AI Чат‑боты

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

Предиктивная аналитика

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

Компьютерное зрение (CV)

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

Генерация контента

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

Глубина внедрения AI в интерфейс

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

Ограничения применения AI в дизайне интерфейсов

Инерция отрасли

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

Необходимость иметь много данных

Для работы нейросетей необходимо иметь большие объемы данных, на которых они могут обучаться. Нужны обширные базы текстов и изображений или большое количество пользователей, на чьих действиях будет обучаться алгоритм. Это не позволяет небольшим стартапам и нишевым приложениям в полной мере использовать все возможности и преимущества AI‑инструментов.

Стоимость

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

Негативные эффекты при внедрении AI в интерфейс и способы их снижения

Ошибки AI

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

Снижение негативного эффекта от неточности AI

Непредсказуемость интерфейса

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

Комбинация генерации контента и постоянных элементов

Этические проблемы

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

Взлом алгоритмов

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

Кейсы использования AI из моей практики

Предиктивная аналитика в платежном приложении

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

Распознавание изображений для прохождения KYC

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

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

Автоматизация кредитного конвейера

Следующий кейс — это пример замены интерфейса AI‑алгоритмом. Ниже показана схема работы кредитного конвейера — системы рассмотрения кредитных заявок и принятия решений о предоставлении кредита или отказе. Сначала был внедрен жесткий алгоритм, основанный на заранее заданных условиях, который рассматривал заявки и либо сам принимал решения, либо отправлял на ручную проверку в сложных случаях. В новой версии наша команда внедрила AI‑алгоритм для обработки всех заявок, который учился на решениях, принятых операторами и постепенно стал настолько точным, что получилось в несколько раз сократить объем ручных проверок. Думаю, сейчас алгоритм стал настолько совершенным, что банк полностью отказался от ручных проверок, по крайней мере для большинства типов заявок на небольшие кредиты и кредитные карты.

Будущее

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

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

И тогда, как шутят дизайнеры, самый полезный навык для дизайнера будущего будет дуговая сварка )

В заключение добавлю список полезных AI‑инструментов, многие из которых я упомянул в статье. Буду рад, если вы добавите свои соображения где еще можно использовать AI.
И спасибо за внимание.

Инструменты для создания дизайна

Изображения
Midjourney: www.midjourney.com/explore
Firefly by Adobe: firefly.adobe.com

Юзер-флоу
FigJam AI | Figma: www.figma.com/figjam/ai/

Дизайн экранов
Musho.ai: musho.ai
Uizard: uizard.io

Шрифтовые пары
FontJoy: fontjoy.com

Цветовые схемы
Colormind: colormind.io

Инструменты для аналитики UX

Сбор данных о взаимодействии пользователя с интерфейсом
Hotjar www.hotjar.com
Fullstory www.fullstory.com

AI-инструменты тестирования дизайна интерфейса
EyeQuant www.eyequant.com
Maze maze.co
Applitools applitools.com

UX/UI + AI. Как нейросети меняют работу продуктового дизайнера. Полный перечень возможностей и мой практический опыт