UX и дизайнКонцепцияИсследования UXUI-дизайн

UX и UI: в чём разница

UX — про общий опыт взаимодействия с продуктом, UI — про внешний вид и поведение конкретного интерфейса.

КРАТКО
UX (пользовательский опыт) и UI (интерфейс пользователя) — связанные, но разные дисциплины. UX отвечает за весь путь пользователя: понятна ли задача, удобно ли её решить, чего ожидать на каждом шаге. UI — про конкретные экраны: типографика, цвета, отступы, состояния кнопок. Хороший UI без UX — это красивый, но неудобный продукт. Хороший UX без UI — это работающая, но раздражающая глаз система.
СИНОНИМЫ:UXUIпользовательский опытинтерфейс пользователяразница между UX и UIuser experienceuser interface

Путаница между UX и UI — одна из самых частых в продуктовых командах. Полезно держать в голове, что эти дисциплины смотрят на разные слои одного продукта.

Что делает UX

  • Понимает, кто пользователь и какие у него задачи.
  • Проектирует структуру продукта и пути пользователя.
  • Проверяет гипотезы на прототипах и реальных людях.
  • Работает с метриками: успешность задачи, скорость, удовлетворённость.

Что делает UI

  • Делает экраны конкретными: вёрстка, типографика, цвета, иконки.
  • Описывает состояния: наведение курсора, фокус, ошибка, загрузка, пустой экран.
  • Поддерживает единообразие через дизайн-систему.
  • Договаривается с разработкой о реализуемости и доступности.

В маленькой команде эти роли часто совмещает один человек. В крупной — это разные специалисты с разными процессами.

КОГДА ПРИМЕНЯТЬ
  • Когда команда обсуждает, кого нанимать в дизайн
  • В разделении ответственности на продуктовых встречах
  • При найме внешнего подрядчика: уточнить, на каком уровне он работает
КОГДА НЕ СТОИТ
  • Внутри команды эти термины не стоит разводить до фанатизма — в реальной работе они переплетаются
ПРИМЕР

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

КАК ИСПОЛЬЗОВАТЬ В SHTAB

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

Попробовать бесплатно

Вопросы про «UX и UI: в чём разница»

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

Применяйте термины на практике

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