Что такое UI и UX
UI (user interface, пользовательский интерфейс) — всё, что человек видит на экране и с чем взаимодействует: кнопки, поля, меню, иконки, шрифты, цвета, отступы, а ещё состояния элементов — наведение, нажатие, ошибка, загрузка.
UX (user experience, пользовательский опыт) — то, как человек проходит путь к своей цели: какие шаги делает, где сомневается, где ошибается и доходит ли до результата. UX включает и то, что происходит вне экрана: ожидание, письма, звонок в поддержку.
Короткая проверка: если решение можно увидеть на одном скриншоте, это скорее UI. Если для оценки нужен сценарий из нескольких шагов и живой человек, это UX.
Разница между UI и UX: таблица
UI и UX — не «красиво» и «удобно». Это два вопроса к одному продукту, и у каждого свои результаты и способы проверки.
| Что сравниваем | UI | UX |
|---|---|---|
| Главный вопрос | Понятно ли, куда нажать, и цельно ли выглядит экран | Нужен ли этот шаг и дойдёт ли человек до цели |
| Предмет работы | Экран и его элементы, их состояния | Сценарий: задачи, порядок шагов, структура |
| Результат | Макеты, компоненты, стили, переменные | Карта пути, user flow, вайрфреймы, прототип |
| Как проверяют | Сверка с дизайн-системой, контраст, все состояния | Тесты прототипа с людьми, интервью, аналитика |
| Когда видна ошибка | Сразу на экране: разъехался отступ, не тот цвет | Позже, в поведении: люди бросают заказ на втором шаге |
Примеры: решения UI и решения UX
В одной и той же задаче UX решает, что и в каком порядке происходит, а UI — как это выглядит и отвечает на действия.
| Задача | Решение UX | Решение UI |
|---|---|---|
| Регистрация | Спрашивать только почту и пароль, остальное — позже в профиле | Подписи над полями, крупные поля, заметное состояние фокуса |
| Ошибка в форме | Проверять поле сразу после ввода и говорить, как исправить | Красная обводка поля и текст ошибки под ним |
| Оформление заказа | Показать итог с доставкой до последнего шага | Итог крупным начертанием, главная кнопка внизу экрана |
| Пустой список | Подсказать первое действие: «Добавьте первый проект» | Иллюстрация, заголовок и одна кнопка вместо серой пустоты |
| Тёмная тема | Включать по системной настройке и запоминать выбор | Палитра с достаточным контрастом в обоих режимах |
Красивая форма из десяти полей — хороший UI и плохой UX. Короткий сценарий с нечитаемыми кнопками — наоборот. Продукт получается, только когда сделаны обе части.
Кто такой UI/UX-дизайнер
В вакансиях «UI/UX-дизайнер» и «продуктовый дизайнер» обычно означают одного человека, который ведёт задачу от сценария до готовых экранов. В больших командах работу делят между несколькими ролями.
UX-дизайнер
Проектирует сценарии и структуру, собирает вайрфреймы и прототипы, проверяет их с людьми.
UI-дизайнер
Рисует экраны и состояния, ведёт компоненты, стили и переменные, следит за цельностью.
UX-исследователь
Проводит интервью и тесты и приносит данные, на которых принимают решения.
UX-редактор
Пишет подписи кнопок, тексты ошибок и подсказки, чтобы слова помогали пройти сценарий.
Как работать над UX и UI в Morfa
В Morfa обе части работы лежат в одном аккаунте: исследование и сценарии — на доске, вайрфреймы, интерфейс и прототип — в файле дизайна.
Карта пути — на доске
Шаблон «Карта пути клиента» даёт пять этапов и строки «Действия», «Мысли», «Эмоции», «Трудности», «Возможности». Как его заполнять, описано на странице карта пути клиента.
Сценарий — блок-схемой
Шаблон «Блок-схема» на той же доске: шаги — прямоугольники, решения — ромбы, связи — соединители (X). Так рисуют user flow — путь по экранам для одной задачи.
Вайрфреймы — во фреймах
Инструмент «Фрейм» (F) предлагает 27 готовых размеров, например iPhone 16 (393×852) или Desktop (1440×1024). Серые блоки и подписи — без цвета и картинок. Подробнее — в статье вайрфрейм.
Прототип — для проверки сценария
На вкладке «Прототип» свяжите экраны: «При нажатии» → «Перейти к». У каждого сценария своё «Начало сценария». Плеер запускается кнопкой ▶ или ⌥⌘↵ и показывает экран в рамке из списка «Устройство».
Интерфейс — компонентами
Кнопки и поля соберите компонентами с вариантами: состояния «Наведение», «Нажата», «Фокус», «Отключена» лежат в одном наборе, а в коде станут
:hover,:active,:focus-visibleи:disabled. Цвета и отступы вынесите в переменные с режимами «Светлая» и «Тёмная».Решения — в аннотациях
Почему поле проверяется сразу, а кнопка неактивна, запишите инструментом «Аннотация» (Y) с категорией «Взаимодействие», «Доступность» или «Контент». Разработчик увидит их в режиме «Код» (⇧D).
Как проверить UX прототипом
Дайте человеку задачу, а не инструкцию: «Закажите футболку размера M», а не «Нажмите синюю кнопку». Молчите и смотрите, где он останавливается, куда нажимает мимо и что говорит вслух. Пяти–шести таких сессий обычно хватает, чтобы увидеть главные трудности.
Ссылку на прототип в Morfa даёт команда «Копировать ссылку на прототип», но откроют её только те, у кого есть доступ к файлу, и только после входа в аккаунт. Публичной ссылки нет, поэтому участникам теста заранее дайте доступ «Может смотреть» через «Поделиться» и попросите войти в аккаунт до начала сессии.
Частые ошибки
- Оценивать UI по вкусу. «Нравится» не значит «понятно, что делать дальше».
- Тестировать на коллегах. Они знают продукт и не видят путь новичка.
- Считать карту пути готовым UX. Карта фиксирует гипотезы, а проверяют их интервью и тесты прототипа.