Почему все их путают
'UI/UX' произносится как одно слово настолько часто, что большинство людей считает это одной работой. Это не так — и путаница не безобидна. Основатель, который думает 'UI', когда на самом деле проблема в 'UX', наймёт визуального дизайнера, чтобы исправить проблему, которая на самом деле в процессе оформления заказа, потратит бюджет на более красивую кнопку — и увидит, как тот же процент пользователей уходит на том же шаге. Решение никогда не было визуальным. Оно было структурным. Знание того, с какой из двух проблем вы столкнулись на самом деле, — это разница между тем, чтобы тратить деньги, и тем, чтобы их выбрасывать.
Определения без лишних слов
UI — User Interface (Пользовательский интерфейс)
Всё, что можно увидеть и с чем можно физически взаимодействовать: кнопки, цвета, типографика, иконки, отступы, анимации. UI — это поверхность — визуальный и интерактивный слой между человеком и системой. Это мастерство, которое можно запечатлеть скриншотом.
UX — User Experience (Пользовательский опыт)
Весь путь, который проходит человек, чтобы что-то сделать — насколько это легко, сколько шагов требуется, есть ли в этом логика, чувствует ли человек уверенность или растерянность. UX структурен — его нельзя запечатлеть скриншотом, можно только измерить, по завершённым и брошенным задачам.
8 способов их различить
Фокус
UI
Как продукт выглядит и ощущается — цвет, шрифт, отступы, иконки.
UX
Как продукт работает для человека, который им пользуется — весь путь от начала до конца.
Вопрос, на который отвечает
UI
«Выглядит ли это правильно?»
UX
«Есть ли в этом смысл?»
Что передаётся в результате
UI
Макеты, гайдлайны по стилю, библиотеки компонентов, пиксель-перфектные экраны.
UX
Пользовательские сценарии, вайрфреймы, персоны, карты пути пользователя, отчёты по юзабилити.
Инструменты профессии
UI
Figma, цветовые палитры, наборы иконок, типографские шкалы.
UX
Интервью с пользователями, карты пути, A/B-тесты, аналитика, карточная сортировка.
Как измеряется успех
UI
Визуальная согласованность, соответствие бренду, эстетическая привлекательность.
UX
Процент завершения задач, время на задачу, процент отказов, показатель удовлетворённости.
Когда включается в процесс
UI
Позже — как только сценарий проверен, UI придаёт ему лицо.
UX
Раньше — ещё до появления хотя бы одного пикселя, UX решает, каким вообще будет сценарий.
Как выглядит «хорошо»
UI
Кнопка, которая выглядит кликабельной. Согласованные отступы. Целостный визуальный язык.
UX
Оформление заказа за 3 шага вместо 8, потому что никому не пришлось останавливаться и думать.
Как каждая из них проваливается
UI
Красивый интерфейс, в котором никто не может разобраться — сплошной стиль, никакой карты.
UX
Форма, которая работает безупречно, но выглядит как из 2004 года — сплошная логика, никакой полировки.
Думаешь, сможешь отличить одно от другого? Проверь.
Вот 6 реальных продуктовых решений. Для каждого реши, что оно исправляет — UI или UX, — а затем проверь объяснение. Без регистрации, без отслеживания — всего шесть секунд честности насчёт того, насколько хорошо ты на самом деле знаешь разницу.
Кнопка оформления заказа стала фиолетовой, со скруглёнными углами и лёгкой анимацией при наведении.
Они не соперники — они нужны друг другу
Потрясающий UI вокруг запутанного сценария лишь делает эту путаницу более дорогой на вид. Блестящий UX, похороненный под неуклюжим, непоследовательным интерфейсом, заставляет людей не доверять тому, что на самом деле работает. Сайты и продукты, которые конвертируют, никогда не бывают только одним или только другим — это решения UX (что строить, в каком порядке, за сколько шагов), выраженные через мастерство UI (как это выглядит и ощущается, когда построено). Ни одно из двух не исправляет то, что сломало другое.
Нужен сайт, где UX и UI действительно согласованы друг с другом?
Давайте обсудим →About
Patrick Chen — независимый разработчик и веб-дизайнер, стоящий за Sublimearts.io. Меня просят «улучшить UI» гораздо чаще, чем реальная проблема действительно в UI. Обычно дело в сценарии. Это статья, которую я бы хотел просто отправлять, вместо того чтобы объяснять это каждый раз заново.