01 Что такое UX #

Смотри, UX часто путают с интерфейсом, но это не интерфейс. Интерфейс — это кнопки и поля на экране, а UX — это то, что происходит в голове у человека, когда он эти кнопки нажимает. Удобно ему? Понятно? Быстро? Или он злится, плюётся и уходит?

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

Главная фишка UX в том, что он не про «мне нравится». Он про наблюдение и данные. Ты не решаешь, что удобно. Ты смотришь, как реальные люди тыкают в твой прототип, видишь, где они спотыкаются, и исправляешь.
💪 Тренажёр

UX или UI?

Распредели задачи по двум колонкам — нажми правильную кнопку под каждой задачей.

Продумать путь пользователя от главной до покупки
Подобрать цвет кнопки и скругления
Провести тест на реальных людях и найти, где они спотыкаются
Сделать состояния кнопки: покой, hover, нажатие, disabled
Решить, что пользователь должен увидеть первым на экране
Правильно: 0 / 5

02 Что такое UI #

UI — это как раз то, что на экране. User Interface, пользовательский интерфейс. Кнопки, иконки, поля ввода, меню, карточки, шрифты, цвета. Всё, что человек видит глазами и трогает пальцем или мышкой.

Но фишка в том, что UI — это не просто «сделать красиво». Красота тут подчинена функции. Кнопка должна выглядеть как кнопка: человек должен сразу понять, что на неё можно нажать. Если кнопка выглядит как просто текст — он пройдёт мимо. Если поле ввода выглядит как декоративная плашка — он не поймёт, куда вводить email.

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

💪 Тренажёр

Собери UI

Из чего состоит UI-система? Нажми на элементы, которые относятся к UI.

Цвета и градиенты
Порядок шагов в форме регистрации
Типографика и размеры шрифтов
Состояния кнопки при наведении и нажатии
Решение убрать лишнее поле из формы
Правильно: 0 / 5

03 UX и UI — в чём разница #

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

🧠

UX — про голову

Путь, логика, наблюдение, тесты. Отвечает на вопрос «удобно ли?».

🎨

UI — про глаза

Кнопки, цвета, шрифты, состояния. Отвечает на вопрос «понятно ли?».

Хороший продукт получается, когда UX и UI работают вместе. Логика без визуала — сухая. Красота без логики — бесполезная. Только в связке — работает.