Чему вы научитесь

Примерное время: 45 минут

К концу этого урока вы сможете:

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

• Критиковать generated ИИ дизайны с обратной связью, достаточно конкретной, чтобы по ней действовать

• Осознанно принимать trade-off решения между скоростью, polish и потребностями пользователей

Распознавание для пользовательского опыта

(2 минуты)

По мере ускорения реализации ИИ дизайн становится differentiator. Этот урок охватывает UX-принципы, наиболее важные при работе с ИИ, объясняет, почему «сделай красиво» не даёт ничего полезного, и как закрыть разрыв между критикой, которую вы дали бы коллеге, и описанием, которое ИИ может выполнить.

UX-лаборатория: примените четыре принципа

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

Ясность. Каждый элемент должен мгновенно коммуницировать своё назначение. Пользователи не должны гадать, что делает кнопка или что означает поле. Плохо: «Назад» без указания куда, generic-заголовок, необъяснённая иконка, цены без валюты («12.00» — это доллары?), vague-кнопка «Отправить». Хорошо: «Назад в меню», «Проверка заказа», цены «$12.00», «Итого заказа $16.50», кнопка «Оформить заказ — $16.50».

Иерархия. Визуальный вес должен соответствовать приоритету информации. Самое важное должно выглядеть самым важным. Плохо: критичная информация («Итого: $16.50», «Прибытие к 13:10») зарыта в плоском списке одним кеглем с номером заказа. Хорошо: «$16.50» крупно, «Прибытие к 13:10» заметно, детали мелко.

Доступность. Примерно у каждого пятого человека есть инвалидность — зрительная, когнитивная или неврологическая. ИИ генерирует под медианного пользователя. Мелкий текст, сигналы только цветом и жаргон тихо исключают всех остальных. Плохо: только цвет без текстовой метки (дальтоники не поймут, подтверждён заказ или нет), текст 9px, сокращения вроде «qty», «ETA» и «T&C». Хорошо: «Заказ подтверждён» с галочкой, полные слова «Количество», «Цена», «Итого заказа», «Прибудет примерно через 35 минут · Бесплатная отмена — см. детали».

Обратная связь. Когда что-то ломается, пользователям нужно знать, что случилось, что делать дальше и как получить помощь. Сырой код ошибки не отвечает ни на один из этих вопросов. Плохо: «Error 503», «503 Service Unavailable» без объяснений. Хорошо: «Не смогли оформить ваш заказ. Наша платёжная система дала сбой. Корзина сохранена — попробуйте через минуту», кнопки «Попробовать снова» и «Написать в поддержку».

Ключевые выводы

• Когда реализация быстра, дифференциатором становится опыт. Дизайн-грамотность — ключевой навык разработчика.

• «Сделай красиво» — это желание, а не спек. Описывайте опыт с той же точностью, что и функцию.

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

• Хорошая критика и actionable описание для ИИ — разные артефакты. Учитесь переводить между ними.

Упражнение

Проект «Время ожидания в клинике», часть 3

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

• Ясность и ментальная модель — использует ли вывод язык и паттерны, узнаваемые администратором клиники?

• Информационная иерархия — самая важная информация видна первой?

• Доступность — проходит ли проверки контраста цветов, скринридера и клавиатурной навигации?

• Обратная связь и обработка ошибок — подтверждает ли интерфейс действия пользователя и объясняет ли, что делать, когда что-то пошло не так?

Рефлексия по уроку

• Какая часть вашего дизайн-спека описывает, что делает интерфейс, а какая — каково им пользоваться?

• После проверки доступности: вы строили с доступностью в уме с самого начала или добавили её в конце?

Что дальше

Вы посмотрели на проверку времени ожидания клиники через линзу кода и линзу UX. На следующем уроке вы разберёте hardest-вопрос: что значит реально отвечать за построенное?

Обратная связь

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

Благодарности и лицензия

Copyright 2026 Anthropic. Курс разработан в партнёрстве с CodePath на основе фреймворка ИИ-грамотности, созданного проф. Риком Даканом (Ringling College of Art and Design) и проф. Джозефом Феллером (University College Cork). Выпущено под лицензией CC BY-NC-SA 4.0.