Лекция 1. UI/UX-дизайн в эпоху искусственного интеллекта

UIUX
Курс UIUX

Введение в профессию, продуктовый подход и новую роль дизайнера

Введение

Представьте, что вы открыли приложение банка, чтобы перевести деньги другу.

Вы находите нужного человека, вводите сумму, нажимаете кнопку — и через несколько секунд перевод выполнен.

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

Вы просто хотите отправить деньги.

Именно в этом и заключается одна из главных задач UI/UX-дизайнера: сделать сложную систему понятной для человека.

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

Когда интерфейс работает хорошо, человек говорит:

«Это было удобно».

Когда интерфейс работает плохо, человек говорит:

«Я ничего не понимаю».

На этом курсе мы будем учиться создавать цифровые продукты, в которых пользователю понятно:

  • что происходит;

  • куда нажимать;

  • какой результат он получит;

  • что делать дальше;

  • как исправить ошибку.

Но мы будем изучать не только классический UI/UX-дизайн.

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

Поэтому сегодня недостаточно просто научиться рисовать красивые экраны.

Нужно уметь:

  • понимать задачи пользователя;

  • анализировать бизнес;

  • проектировать сценарии;

  • проверять гипотезы;

  • принимать аргументированные решения;

  • правильно использовать искусственный интеллект;

  • контролировать качество результатов, созданных ИИ.

Этот курс посвящён тому, как соединить UI/UX-дизайн, продуктовое мышление и возможности искусственного интеллекта.


1. Что такое UI/UX-дизайн

Начнём с двух терминов, которые часто используют вместе: UI и UX.

Они связаны между собой, но означают разные вещи.

UX — User Experience

UX переводится как «пользовательский опыт».

Это весь опыт взаимодействия человека с продуктом.

Пользовательский опыт начинается не в тот момент, когда человек открыл приложение. Он может начаться значительно раньше:

  • когда человек увидел рекламу;

  • когда услышал рекомендацию;

  • когда нашёл сайт в поиске;

  • когда зарегистрировался;

  • когда обратился в поддержку;

  • когда получил уведомление;

  • когда решил перестать пользоваться продуктом.

UX включает мысли, эмоции, ожидания и действия пользователя.

Например, человек решил заказать еду.

Он:

  1. открывает приложение;

  2. выбирает ресторан;

  3. изучает меню;

  4. добавляет блюда в корзину;

  5. вводит адрес;

  6. оплачивает заказ;

  7. ждёт курьера;

  8. получает заказ;

  9. оценивает качество доставки.

Пользовательский опыт складывается из всех этих этапов.

Даже если экран оплаты выглядит красиво, опыт нельзя считать хорошим, если:

  • ресторан отменил заказ;

  • приложение неправильно определило адрес;

  • курьер опоздал;

  • поддержка не отвечает;

  • пользователь не понимает, когда привезут заказ.

UX — это не отдельный экран. Это весь путь человека к результату.

UI — User Interface

UI переводится как «пользовательский интерфейс».

Это визуальная и интерактивная часть цифрового продукта.

К UI относятся:

  • кнопки;

  • поля ввода;

  • меню;

  • карточки;

  • иконки;

  • цвета;

  • шрифты;

  • изображения;

  • отступы;

  • анимации;

  • состояния элементов;

  • расположение информации на экране.

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

Можно сказать проще:

UX отвечает за то, как продукт работает для человека, а UI — за то, как взаимодействие представлено на экране.

Но разделять их полностью нельзя.

Визуальные решения влияют на пользовательский опыт.

Если кнопка слишком маленькая, пользователь может её не заметить.

Если текст трудно прочитать, человек не поймёт информацию.

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

Если интерфейс перегружен, человеку будет сложно принять решение.

Поэтому UI является частью UX.


2. Пример различия между UI и UX

Представим приложение для покупки железнодорожных билетов.

Красивый UI может включать:

  • аккуратные карточки;

  • современную типографику;

  • приятные цвета;

  • стильные иконки;

  • качественные фотографии городов.

Но UX может оставаться плохим, если пользователь:

  • не может быстро изменить дату поездки;

  • не понимает, включён ли багаж;

  • не видит итоговую стоимость;

  • не может выбрать место;

  • вынужден несколько раз вводить паспортные данные;

  • теряет заполненную информацию после ошибки.

Получается красивый, но неудобный продукт.

Возможна и обратная ситуация.

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

  • текст слишком мелкий;

  • элементы расположены хаотично;

  • кнопки выглядят одинаково;

  • нет визуальной иерархии;

  • интерфейс плохо работает на смартфоне.

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

Задача UI/UX-дизайнера — объединить удобство, понятность и визуальное качество.


3. Что на самом деле проектирует дизайнер

Новички часто думают, что дизайнер проектирует экраны.

Но экран — это только форма представления решения.

На самом деле дизайнер проектирует взаимодействие.

Рассмотрим пример.

Пользователь забыл пароль.

На первый взгляд задача простая: нужно нарисовать экран восстановления пароля.

Но перед созданием экрана необходимо ответить на вопросы:

  • Как пользователь подтвердит свою личность?

  • Через электронную почту или телефон?

  • Что произойдёт, если письмо не придёт?

  • Сколько времени действует ссылка?

  • Можно ли запросить несколько писем подряд?

  • Что произойдёт, если пользователь ошибся в адресе?

  • Как защитить аккаунт от злоумышленников?

  • Вернётся ли человек после смены пароля в приложение?

  • Нужно ли завершить другие активные сеансы?

  • Как объяснить требования к новому паролю?

Мы видим, что дизайнер работает не только с внешним видом.

Он проектирует:

  • последовательность действий;

  • правила системы;

  • возможные состояния;

  • ошибки;

  • обратную связь;

  • переходы между экранами;

  • реакцию продукта на действия пользователя.

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


4. Что такое цифровой продукт

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

Примеры цифровых продуктов:

  • интернет-магазин;

  • мобильный банк;

  • образовательная платформа;

  • сервис доставки;

  • социальная сеть;

  • медицинское приложение;

  • система управления проектами;

  • онлайн-кинотеатр;

  • сервис бронирования;

  • редактор документов;

  • платформа для создания квизов.

У каждого продукта есть несколько сторон.

Пользователь

Пользователь хочет решить свою задачу.

Например:

  • заказать еду;

  • найти работу;

  • изучить тему;

  • оплатить услугу;

  • записаться к врачу;

  • провести тестирование студентов.

Бизнес

Бизнес хочет получить определённый результат.

Например:

  • привлечь клиентов;

  • увеличить выручку;

  • сократить расходы;

  • повысить количество регистраций;

  • удержать пользователей;

  • продать подписку;

  • автоматизировать процессы.

Технологии

Разработка должна обеспечить работу продукта.

Не каждое дизайнерское решение можно реализовать быстро, дешёво и безопасно.

Ограничения

У продукта всегда есть ограничения:

  • бюджет;

  • сроки;

  • возможности команды;

  • законодательство;

  • техническая архитектура;

  • доступные данные;

  • требования безопасности;

  • особенности аудитории.

Дизайнер находится между пользователем, бизнесом и технологиями.

Его задача — найти решение, которое:

  • полезно пользователю;

  • выгодно бизнесу;

  • технически реализуемо;

  • понятно в использовании.


5. Дизайн — это не украшение

Слово «дизайн» часто связывают с внешним видом.

Люди говорят:

  • красивый дизайн;

  • современный дизайн;

  • стильный дизайн;

  • яркий дизайн.

Но в профессиональной среде дизайн — это прежде всего процесс решения задачи.

Красота может быть важна, но она не является единственным критерием.

Представьте кнопку вызова скорой помощи.

Главное требование к ней — не необычный визуальный стиль.

Она должна быть:

  • заметной;

  • понятной;

  • доступной;

  • предсказуемой;

  • защищённой от случайного нажатия;

  • удобной для людей с разными возможностями.

В такой ситуации функциональность и ясность важнее декоративности.

Хороший дизайн отвечает на вопрос:

Насколько хорошо решение помогает человеку выполнить задачу?

Поэтому дизайнер должен уметь объяснять свои решения.

Недостаточно сказать:

«Я сделал эту кнопку синей, потому что так красивее».

Профессиональное объяснение может звучать иначе:

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

Разница заключается в аргументации.

Дизайнер принимает решения не только на основе вкуса, но и на основе:

  • задачи;

  • контекста;

  • данных;

  • поведения пользователей;

  • принципов восприятия;

  • результатов тестирования;

  • требований бизнеса.


6. Кто такой UI/UX-дизайнер

UI/UX-дизайнер — специалист, который исследует задачи пользователей и проектирует понятные интерфейсы цифровых продуктов.

В разных компаниях обязанности дизайнера отличаются.

В небольшой команде один специалист может выполнять почти весь процесс:

  • проводить исследования;

  • анализировать конкурентов;

  • создавать пользовательские сценарии;

  • разрабатывать структуру продукта;

  • проектировать прототипы;

  • создавать визуальный дизайн;

  • собирать компоненты;

  • проводить тестирования;

  • передавать макеты разработчикам.

В крупной компании задачи могут быть разделены между разными специалистами.

Например:

  • UX-исследователь;

  • продуктовый дизайнер;

  • UI-дизайнер;

  • UX-редактор;

  • аналитик;

  • дизайнер дизайн-системы;

  • сервис-дизайнер;

  • специалист по доступности.

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


7. Основные направления работы дизайнера

Исследование

Дизайнер изучает:

  • кто является пользователем;

  • какие у него цели;

  • с какими проблемами он сталкивается;

  • как решает задачу сейчас;

  • что его раздражает;

  • чего он опасается;

  • какие альтернативы использует.

Исследование помогает не проектировать продукт только на основе собственных предположений.

Проектирование сценария

Дизайнер определяет последовательность действий пользователя.

Например, сценарий записи к врачу:

  1. выбрать направление;

  2. выбрать врача;

  3. выбрать клинику;

  4. выбрать дату;

  5. выбрать время;

  6. указать контактные данные;

  7. подтвердить запись;

  8. получить напоминание.

Задача дизайнера — сделать этот путь логичным и удобным.

Информационная архитектура

Дизайнер организует информацию:

  • разделы сайта;

  • меню;

  • категории;

  • фильтры;

  • страницы;

  • связи между объектами.

Пользователь должен понимать, где он находится и где искать нужную функцию.

Создание прототипа

Прототип показывает, как будет работать продукт.

Он может быть очень простым: прямоугольники, текст и стрелки.

На этом этапе важна не красота, а логика.

Визуальный дизайн

После проверки структуры дизайнер работает с:

  • цветом;

  • типографикой;

  • сеткой;

  • отступами;

  • изображениями;

  • иконками;

  • визуальной иерархией.

Тестирование

Дизайнер наблюдает, как реальные люди используют продукт.

Пользователю дают задачу и смотрят:

  • понимает ли он интерфейс;

  • где ошибается;

  • что не замечает;

  • какие вопросы задаёт;

  • где останавливается.

Работа с разработкой

Дизайнер объясняет, как должен работать интерфейс:

  • какие состояния есть у элемента;

  • что происходит после нажатия;

  • как выглядит ошибка;

  • как интерфейс адаптируется под разные экраны;

  • какие данные отображаются;

  • какие ограничения существуют.


8. Что такое пользовательская задача

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

Он приходит, чтобы получить результат.

Человек открывает банковское приложение не ради кнопок. Он хочет:

  • оплатить счёт;

  • проверить баланс;

  • отправить деньги;

  • получить выписку.

Человек открывает образовательную платформу не ради карточек и меню. Он хочет:

  • изучить материал;

  • пройти тест;

  • получить обратную связь;

  • понять свой прогресс.

Поэтому перед проектированием нужно сформулировать пользовательскую задачу.

Например:

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

В этой формулировке есть:

  • ситуация;

  • желание;

  • ожидаемый результат.

Интерфейс создаётся вокруг задачи, а не наоборот.


9. Пользователь не обязан думать как дизайнер

Это один из важнейших принципов профессии.

Дизайнер проводит в макете много времени. Он знает:

  • где расположены функции;

  • что означают иконки;

  • как работает навигация;

  • почему кнопка находится именно здесь;

  • что произойдёт после нажатия.

Пользователь этого не знает.

Он видит интерфейс впервые или возвращается к нему спустя несколько месяцев.

Нельзя ожидать, что человек догадается о логике продукта.

Например, дизайнер может думать:

«Понятно же, что для редактирования нужно нажать на три точки».

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

Поэтому хороший интерфейс должен давать человеку подсказки:

  • понятные названия;

  • заметные действия;

  • логичную структуру;

  • своевременную обратную связь;

  • предсказуемое поведение.


10. Интерфейс как диалог

Интерфейс можно рассматривать как разговор между человеком и системой.

Пользователь говорит:

«Я хочу создать аккаунт».

Система отвечает:

«Введите имя, электронную почту и пароль».

Пользователь вводит данные.

Система должна сообщить:

  • данные приняты;

  • адрес уже используется;

  • пароль слишком короткий;

  • письмо отправлено;

  • регистрация завершена.

Если система никак не реагирует, пользователь не понимает, что произошло.

Поэтому интерфейс должен постоянно давать обратную связь.

Обратная связь может быть выражена через:

  • изменение состояния кнопки;

  • уведомление;

  • индикатор загрузки;

  • сообщение об ошибке;

  • подтверждение действия;

  • изменение данных на экране;

  • анимацию.

Пользователь не должен задаваться вопросом:

«Нажалась ли кнопка?»


11. Что такое искусственный интеллект

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

Современные генеративные модели умеют работать с:

  • текстом;

  • изображениями;

  • аудио;

  • видео;

  • таблицами;

  • программным кодом;

  • документами;

  • интерфейсами.

ИИ может:

  • объяснить термин;

  • предложить гипотезы;

  • подготовить вопросы для интервью;

  • структурировать результаты исследования;

  • написать текст для интерфейса;

  • создать черновик пользовательского сценария;

  • проанализировать отзывы;

  • найти повторяющиеся проблемы;

  • предложить варианты структуры;

  • сгенерировать изображение;

  • помочь написать программный код.

Но важно понимать: ИИ не обладает магической способностью всегда давать правильный ответ.

Он может:

  • ошибаться;

  • придумывать факты;

  • неправильно понимать контекст;

  • давать слишком общие рекомендации;

  • воспроизводить стереотипы;

  • создавать убедительный, но неверный результат.

Поэтому профессиональная работа с ИИ состоит не только в создании запроса.

Она включает:

  1. постановку задачи;

  2. передачу контекста;

  3. проверку результата;

  4. исправление ошибок;

  5. адаптацию под реальный продукт;

  6. принятие окончательного решения человеком.


12. Как ИИ меняет работу дизайнера

Раньше дизайнер мог несколько часов:

  • собирать примеры;

  • анализировать конкурентов;

  • формулировать варианты текста;

  • создавать структуру интервью;

  • описывать пользовательские сценарии;

  • готовить документацию.

Теперь часть этой работы можно ускорить с помощью ИИ.

Но ускорение не означает автоматическую замену специалиста.

Рассмотрим простой пример.

Дизайнер просит ИИ:

«Создай интерфейс приложения для изучения английского языка».

Система может предложить красивый экран.

Но она не знает:

  • для кого создаётся приложение;

  • какой уровень английского у аудитории;

  • какие задачи решает продукт;

  • как он будет зарабатывать;

  • какие функции уже разработаны;

  • какие ограничения существуют;

  • что показали исследования;

  • чем продукт отличается от конкурентов.

Без контекста ИИ создаёт усреднённое решение.

Оно может выглядеть убедительно, но не решать реальную задачу.

Поэтому роль дизайнера становится не менее важной, а более интеллектуальной.

Дизайнер должен уметь:

  • формулировать проблему;

  • выбирать данные;

  • ставить ограничения;

  • оценивать варианты;

  • замечать ошибки;

  • связывать результат с потребностями пользователя и бизнеса.


13. ИИ как помощник, а не автор решения

Полезно рассматривать ИИ как очень быстрого помощника.

Этот помощник:

  • прочитал много текстов;

  • умеет быстро генерировать варианты;

  • может работать с большим количеством информации;

  • никогда не устаёт;

  • способен быстро переделывать результат.

Но у него нет полноценного понимания вашего проекта.

Он не присутствовал на встречах с заказчиком.

Он не видел реакцию пользователей.

Он не несёт ответственность за последствия решения.

Поэтому задача дизайнера — управлять работой ИИ.

Хорошая формула выглядит так:

Человек ставит задачу → ИИ предлагает варианты → человек проверяет и принимает решение.

Плохая формула выглядит так:

ИИ создал результат → человек без проверки использовал его в продукте.


14. Где дизайнер может использовать ИИ

1. Исследование темы

ИИ может помочь понять новую предметную область.

Например, если дизайнер работает над медицинским сервисом, он может попросить:

  • объяснить основные термины;

  • описать типичный путь пациента;

  • сформировать список вопросов эксперту;

  • перечислить возможные риски.

Но медицинскую информацию необходимо проверять по надёжным источникам и обсуждать с профильными специалистами.

2. Подготовка интервью

ИИ может предложить вопросы для интервью с пользователями.

Однако дизайнер должен проверить:

  • не подсказывают ли вопросы ответ;

  • соответствуют ли они цели исследования;

  • понятны ли они аудитории;

  • не объединены ли несколько вопросов в один.

3. Анализ отзывов

Если у продукта много отзывов, ИИ может помочь:

  • сгруппировать проблемы;

  • выделить повторяющиеся жалобы;

  • определить эмоциональную окраску;

  • найти упоминания отдельных функций.

4. Генерация гипотез

ИИ может предложить несколько способов решения проблемы.

Например:

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

ИИ может предложить:

  • шаблоны;

  • пошаговый онбординг;

  • демонстрационный проект;

  • подсказки;

  • обучение;

  • систему достижений.

Но дизайнер должен проверить гипотезы с помощью данных и экспериментов.

5. Тексты интерфейса

ИИ может помочь написать:

  • названия кнопок;

  • сообщения об ошибках;

  • подсказки;

  • уведомления;

  • инструкции;

  • тексты пустых состояний.

6. Прототипирование

ИИ может:

  • описать структуру экранов;

  • предложить пользовательский сценарий;

  • создать HTML-прототип;

  • помочь с кодом;

  • сгенерировать визуальную концепцию.

7. Документация

ИИ может ускорить подготовку:

  • описания функции;

  • требований;

  • пользовательских историй;

  • сценариев;

  • презентаций;

  • отчётов по исследованию.


15. Где нельзя полностью доверять ИИ

Особенно внимательно нужно относиться к задачам, связанным с:

  • медициной;

  • финансами;

  • законодательством;

  • безопасностью;

  • персональными данными;

  • доступностью;

  • дискриминацией;

  • детьми;

  • критическими системами.

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

Также нельзя слепо доверять ИИ при проведении исследования.

Например, искусственный интеллект может создать вымышленную персону:

«Анна, 32 года, работает менеджером, хочет экономить время».

Такая персона выглядит правдоподобно, но она не является реальным исследованием.

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

Нужно различать:

  • реальные данные;

  • предположения;

  • гипотезы;

  • сгенерированные примеры.


16. Как правильно ставить задачи ИИ

Качество результата зависит от качества запроса.

Сравним два варианта.

Плохой запрос:

«Сделай хороший интерфейс регистрации».

Такой запрос слишком общий.

Более точный запрос:

«Предложи структуру регистрации для образовательной платформы. Аудитория — преподаватели от 25 до 55 лет, часть пользователей обладает невысокой цифровой грамотностью. Для создания аккаунта нужны имя, электронная почта и пароль. Основная цель — максимально быстро привести пользователя к созданию первого теста. Опиши последовательность экранов, возможные ошибки и способы сократить количество действий».

Во втором запросе указаны:

  • продукт;

  • аудитория;

  • контекст;

  • ограничения;

  • цель;

  • ожидаемый формат ответа.

Полезная структура запроса к ИИ:

Роль

Кем должен выступить ИИ?

Например:

«Выступи в роли UX-исследователя».

Контекст

Что это за продукт и ситуация?

Задача

Что именно нужно сделать?

Аудитория

Для кого создаётся решение?

Ограничения

Что необходимо учитывать?

Формат

Как должен выглядеть ответ?

Критерии

По каким признакам результат считается качественным?


17. Пример профессионального запроса

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

Аудитория: преподаватели и репетиторы с разным уровнем цифровой грамотности.

Ограничения: онбординг должен содержать не более пяти шагов. Пользователь должен иметь возможность пропустить обучение.

Предложи:

  1. последовательность шагов;

  2. текст для каждого шага;

  3. основное действие;

  4. возможные ошибки;

  5. метрики эффективности.

Даже хороший запрос не гарантирует правильного результата.

После получения ответа дизайнер должен спросить:

  • Какие предположения использовал ИИ?

  • Какие данные подтверждают решение?

  • Не усложнён ли сценарий?

  • Соответствует ли он реальной аудитории?

  • Можно ли проверить гипотезу?

  • Какие риски не учтены?


18. Как выглядит процесс создания интерфейса

Упрощённый процесс можно представить следующим образом.

Этап 1. Понять задачу

Нужно определить:

  • что мы создаём;

  • для кого;

  • какую проблему решаем;

  • почему это важно;

  • какой результат нужен бизнесу.

Этап 2. Собрать информацию

Мы изучаем:

  • пользователей;

  • существующий продукт;

  • конкурентов;

  • аналитику;

  • отзывы;

  • ограничения.

Этап 3. Сформулировать проблему

Например:

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

Этап 4. Предложить гипотезы

Например:

  • показать выбор сценария;

  • добавить шаблоны;

  • создать демонстрационный квиз;

  • сократить форму;

  • добавить подсказки;

  • показать пример результата.

Этап 5. Создать сценарий

Определить, какие действия выполняет пользователь.

Этап 6. Создать прототип

Проверить структуру без детальной визуальной проработки.

Этап 7. Провести тестирование

Посмотреть, понимают ли пользователи предложенное решение.

Этап 8. Создать визуальный интерфейс

Разработать финальное оформление и состояния элементов.

Этап 9. Передать решение разработке

Подготовить макеты, компоненты, состояния и описание поведения.

Этап 10. Измерить результат

После запуска необходимо проверить:

  • улучшились ли показатели;

  • стало ли меньше ошибок;

  • быстрее ли пользователь выполняет задачу;

  • увеличилась ли конверсия;

  • появились ли новые проблемы.

Дизайн не заканчивается после передачи макета разработчику.


19. Почему дизайнеру нужны метрики

Интерфейс создаётся для достижения определённого результата.

Поэтому необходимо понимать, как измерить его эффективность.

Примеры метрик:

  • процент завершённых регистраций;

  • время выполнения задачи;

  • количество ошибок;

  • конверсия в покупку;

  • доля пользователей, создавших первый проект;

  • количество обращений в поддержку;

  • удержание пользователей;

  • процент возвратов;

  • удовлетворённость.

Представим, что дизайнер упростил регистрацию.

Раньше её завершали 45% пользователей, а после изменений — 68%.

Это свидетельствует о том, что решение, вероятно, улучшило опыт.

Но важно учитывать и другие показатели.

Например, если регистрация стала проще, но увеличилось количество мошеннических аккаунтов, решение нельзя оценивать только по росту конверсии.

Дизайнер должен смотреть на систему целиком.


20. Основные ошибки начинающих дизайнеров

Ошибка 1. Начинать с визуального оформления

Новичок сразу выбирает цвета, шрифты и фотографии.

Но сначала нужно понять задачу и сценарий.

Ошибка 2. Проектировать для себя

Дизайнер думает:

«Мне было бы удобно».

Но он не всегда является представителем аудитории.

Ошибка 3. Копировать конкурентов без анализа

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

Ошибка 4. Использовать ИИ вместо исследования

Сгенерированные портреты пользователей не заменяют общение с реальными людьми.

Ошибка 5. Делать слишком много функций

Большое количество функций не всегда делает продукт лучше.

Иногда оно усложняет выбор и увеличивает когнитивную нагрузку.

Ошибка 6. Не проектировать ошибки

Интерфейс должен учитывать не только идеальный сценарий.

Нужно продумать:

  • пустые состояния;

  • ошибки;

  • отсутствие интернета;

  • неправильный ввод;

  • недостаток прав;

  • загрузку;

  • отмену действия.

Ошибка 7. Считать первый вариант финальным

Первое решение почти всегда является гипотезой.

Его необходимо проверять и улучшать.

Ошибка 8. Слепо принимать результат ИИ

Убедительный текст или красивый экран может содержать серьёзные логические ошибки.


21. Новая роль дизайнера

Искусственный интеллект снижает стоимость создания вариантов.

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

Но возникает новая проблема: как выбрать правильный вариант?

Поэтому ценность специалиста постепенно смещается от простого производства макетов к:

  • постановке задач;

  • анализу контекста;

  • работе с неопределённостью;

  • выбору критериев;

  • проверке гипотез;

  • системному мышлению;

  • оценке рисков;

  • контролю качества.

Создание экрана становится проще.

Обоснование решения остаётся сложной задачей.

Современный дизайнер должен уметь отвечать не только на вопрос:

«Как это нарисовать?»

Но и на вопросы:

  • Зачем это нужно?

  • Какую проблему мы решаем?

  • Для кого?

  • Какие данные это подтверждают?

  • Что изменится после запуска?

  • Как мы поймём, что решение работает?

  • Какие риски оно создаёт?

  • Что можно поручить ИИ?

  • Что обязательно должен проверить человек?


22. Каким будет наш курс

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

Мы рассмотрим:

  • основы UI и UX;

  • пользовательские исследования;

  • анализ конкурентов;

  • продуктовые гипотезы;

  • целевую аудиторию;

  • пользовательские сценарии;

  • Customer Journey Map;

  • информационную архитектуру;

  • прототипирование;

  • композицию;

  • типографику;

  • цвет;

  • компоненты;

  • дизайн-системы;

  • адаптивные интерфейсы;

  • тестирование;

  • работу с разработчиками;

  • продуктовые метрики;

  • доступность;

  • использование ИИ на разных этапах проектирования.

ИИ будет использоваться не как отдельная тема в конце курса.

Он станет рабочим инструментом на протяжении всего обучения.

Мы будем применять его для:

  • исследования;

  • генерации гипотез;

  • анализа информации;

  • подготовки текстов;

  • создания прототипов;

  • поиска ошибок;

  • разработки концепций;

  • подготовки презентаций;

  • автоматизации рутинных задач.

При этом каждое решение необходимо будет объяснять и проверять.


23. Правила работы на курсе

Правило 1. Сначала задача, потом интерфейс

Перед созданием экрана ответьте:

  • кто пользователь;

  • чего он хочет;

  • в каком контексте находится;

  • какой результат должен получить.

Правило 2. Отделяйте данные от предположений

Всегда обозначайте:

  • что вы знаете;

  • что предполагаете;

  • что нужно проверить.

Правило 3. Объясняйте решения

Фраза «мне нравится» не является профессиональным аргументом.

Правило 4. Проверяйте результат ИИ

Не копируйте ответ без анализа.

Правило 5. Не бойтесь черновиков

Прототип не обязан быть красивым. Его задача — помочь проверить идею.

Правило 6. Ошибка — часть процесса

Неудачная гипотеза может дать больше полезной информации, чем случайно удачное решение.

Правило 7. Показывайте работу

Дизайн развивается через обсуждение, обратную связь и итерации.


24. Практическое задание на занятии

Задание «Неудобный цифровой опыт»

Вспомните цифровой продукт, который недавно вызвал у вас сложности.

Это может быть:

  • сайт;

  • мобильное приложение;

  • терминал;

  • личный кабинет;

  • интернет-магазин;

  • образовательная платформа;

  • государственный сервис.

Ответьте на вопросы.

1. Какую задачу вы хотели выполнить?

Пример:

Я хотел записаться к врачу на определённое время.

2. Что помешало выполнить задачу?

Пример:

Сервис показывал врачей, но не показывал ближайшее свободное время.

3. Что вы чувствовали?

Пример:

Раздражение и неуверенность, потому что я не понимал, завершена ли запись.

4. На каком этапе возникла проблема?

5. Какое решение можно предложить?

6. Как ИИ мог бы помочь дизайнеру при работе над этой проблемой?

Например:

  • проанализировать отзывы;

  • сгруппировать жалобы;

  • предложить варианты сценария;

  • помочь подготовить вопросы для интервью;

  • создать несколько вариантов текста.

7. Что нельзя поручать ИИ без проверки?

Результат оформите в виде короткого рассказа или таблицы.


25. Практика работы с ИИ

Выберите любой цифровой продукт и отправьте ИИ запрос:

Выступи в роли UX-исследователя. Я анализирую продукт [название продукта]. Его пользователи хотят [задача]. Предложи десять возможных проблем, с которыми они могут столкнуться.

После получения ответа разделите проблемы на три группы:

  1. проблемы, которые кажутся реалистичными;

  2. проблемы, которые требуют проверки;

  3. проблемы, которые не соответствуют продукту.

Затем ответьте:

  • Почему ИИ предложил неподходящие варианты?

  • Какой контекст необходимо добавить в запрос?

  • Какие данные нужны для проверки предположений?

Главная цель задания — не получить идеальный ответ, а увидеть ограничения искусственного интеллекта.


26. Домашнее задание

Часть 1. Анализ продукта

Выберите один цифровой продукт, которым вы регулярно пользуетесь.

Опишите:

  1. Название продукта.

  2. Кто его пользователь.

  3. Какую основную задачу решает продукт.

  4. Какую пользу получает пользователь.

  5. Какую пользу получает бизнес.

  6. Какие три действия пользователь выполняет чаще всего.

  7. Что в продукте сделано удобно.

  8. Что вызывает сложности.

  9. Какое улучшение вы бы предложили.

  10. По какой метрике можно оценить результат улучшения.

Часть 2. Анализ интерфейса

Выберите один экран продукта и определите:

  • главное действие;

  • второстепенные действия;

  • основную информацию;

  • визуальную иерархию;

  • возможные ошибки пользователя;

  • обратную связь системы.

Добавьте скриншот экрана с комментариями.

Часть 3. Работа с ИИ

Составьте запрос к ИИ, который поможет улучшить выбранный экран.

В запросе должны быть:

  • роль;

  • контекст;

  • описание пользователя;

  • задача;

  • ограничения;

  • формат ответа.

Получите результат и проведите его критический анализ.

Укажите:

  • что было полезно;

  • что было слишком общим;

  • какие ошибки допустил ИИ;

  • что вы изменили самостоятельно;

  • какие данные необходимы для принятия окончательного решения.


27. Критерии оценки домашнего задания

Работа оценивается по следующим критериям:

Понимание задачи пользователя

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

Логика анализа

Выводы связаны с выявленной проблемой.

Аргументация

Предложенные решения объяснены.

Работа с интерфейсом

Определены основные и второстепенные элементы.

Использование ИИ

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

Критическое мышление

Студент способен найти ограничения и ошибки в ответе ИИ.

Качество оформления

Материал структурирован и понятен.


28. Итоги лекции

Сегодня мы рассмотрели основные идеи, на которых будет строиться курс.

UI — это визуальная и интерактивная часть продукта.

UX — это весь пользовательский опыт: от появления потребности до получения результата.

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

Хороший дизайн начинается не с выбора цвета, а с понимания задачи.

Искусственный интеллект способен ускорить исследования, генерацию вариантов, работу с текстом, прототипирование и документацию.

Но ИИ не знает контекст продукта полностью, может ошибаться и не несёт ответственность за принятое решение.

Поэтому современный UI/UX-дизайнер — это не просто человек, который создаёт макеты.

Это специалист, который:

  • исследует;

  • анализирует;

  • формулирует проблемы;

  • проектирует сценарии;

  • проверяет гипотезы;

  • использует ИИ;

  • оценивает результат;

  • принимает обоснованные решения.

Главный вопрос дизайнера звучит не так:

«Как сделать красивый экран?»

Главный вопрос звучит иначе:

«Как помочь человеку решить задачу наиболее понятным, удобным и эффективным способом?»

А в эпоху искусственного интеллекта к нему добавляется ещё один вопрос:

«Как использовать технологии, не теряя критического мышления и ответственности за результат?»


Викторины по теме: