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

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

«Дизайн — это не то, как вещь выглядит и ощущается. Дизайн — это то, как она работает». — Стив Джобс

Новички часто путают два термина. UI (User Interface, пользовательский интерфейс) — это визуальный слой: кнопки, цвета, шрифты, иконки, отступы. UX (User Experience, пользовательский опыт) — это весь путь человека к цели: насколько легко он понял, что делать, сколько шагов прошёл, не разозлился ли по дороге. UI — часть UX, но не равна ему.

Представьте кофейню. UI — это меню, вывеска, форма стаканчика, цвет стен. UX — это то, легко ли найти вход, быстро ли вас обслужили, понятно ли, где забирать заказ, и захотите ли вы вернуться. Можно нарисовать красивое меню (отличный UI) и при этом заставить человека стоять в трёх очередях (ужасный UX).

Зачем разделять

Разделение помогает находить причину проблемы. Если люди бросают форму регистрации, дело может быть в UI (поле не видно, кнопка сливается с фоном) или в UX (слишком много полей, непонятно зачем нужен телефон). Лечится это по-разному. Дизайнер, который видит только «некрасиво», чинит цвет, а проблема была в лишнем шаге.

        ОПЫТ (UX) — весь путь к цели
  +--------------------------------------+
  |  узнал -> зашёл -> нашёл -> сделал    |
  |                                      |
  |   +----------------------------+     |
  |   |  ИНТЕРФЕЙС (UI) — экран     |     |
  |   |  кнопки, цвет, шрифт, сетка |     |
  |   +----------------------------+     |
  +--------------------------------------+
  UI живёт ВНУТРИ UX, а не рядом с ним

Как делают ПЛОХО

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

Как делают ХОРОШО

Сначала формулируют задачу пользователя («быстро купить билет с телефона в метро»), потом проектируют путь (UX), и только потом наводят красоту (UI). Каждое решение проверяют вопросом: «Это помогает человеку дойти до цели или просто украшает?»

Чек-лист

• Я могу одним предложением сказать, какую задачу решает экран.
• Я отделяю «некрасиво» от «непонятно/неудобно».
• Красоту я навожу после того, как путь продуман.
• Я оцениваю экран не «нравится/не нравится», а «помогает дойти до цели или нет».

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

Классическая ловушка — красивый UI поверх провального UX. Представьте приложение с безупречной анимацией и модными градиентами, в котором никто не может довести до конца оформление заказа: кнопка «Оплатить» прячется за клавиатурой, адрес теряется при возврате назад. Глаз радуется, а конверсия падает. Поэтому и измеряют их по-разному: эстетику оценивают опросами и первым впечатлением, а UX — долей дошедших до цели и временем до результата (time-to-goal).

Основатели путают одно с другим, потому что UI виден сразу, а UX проявляется только в поведении. Заказать редизайн «чтобы было красиво» проще, чем признать, что сам сценарий покупки сломан. Красивая обёртка не лечит кривой путь — и наоборот, аскетичный интерфейс с понятным маршрутом часто выигрывает у нарядного, но запутанного.

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

Итог

UI — это поверхность, UX — это весь путь. Хороший продукт нуждается в обоих: красивый, но неудобный интерфейс раздражает, а удобный, но уродливый — не вызывает доверия. Дальше в курсе мы соберём оба слоя по кирпичикам.

Запомните формулу: UI отвечает за форму, UX — за путь, и сильный продукт нуждается в обоих сразу. Разделяя их в голове, вы точнее ставите диагноз и не лечите неудобный сценарий сменой цвета кнопки.