UI (user interface) – это то, что человек видит и трогает. Кнопки, поля, иконки, шрифты, цвета, отступы, состояния элементов. Все, из чего физически собран экран

UX (user experience) – это то, что человек проживает, пока пользуется продуктом. Сколько шагов он прошел, где застрял, понял ли, что делать дальше, вернулся ли на следующий день

Первое можно показать скриншотом. Второе скрином не показать, а только описать: что было до, что после, где стало неудобно и почему

Термин user experience придумал Дональд Норман в начале девяностых, когда работал в Apple. Логика была примерно такая: «дизайн интерфейса» – слишком узко для того, чем мы тут занимаемся. Человек взаимодействует не только с экраном: он читает инструкцию, ждет доставку, звонит в поддержку, распаковывает коробку. Все это важная часть впечатления от продукта

То есть UX изначально шире цифрового интерфейса. Экран – только его часть

А потом пришли вакансии. И рынок слепил из двух понятий одно словосочетание «UX/UI-дизайнер», после чего разбираться, где заканчивается одно и начинается другое, стало почти невозможно

Это работа с формой. Как выглядит, как читается, как реагирует

Тут много ремесла и много скучных решений, которые никто не заметит, если они сделаны хорошо. Про состояния компонентов, кстати, забывают чаще всего – макет выглядит отлично, пока не начинаешь собирать его в реальном продукте

Это работа со смыслом и с логикой. Зачем человек сюда пришел и что ему мешает

Здесь почти нет картинок. Здесь таблицы, схемы, расшифровки интервью и много разговоров с командой

Потому что в реальной работе они не разделены стеной

Когда ты меняешь размер кнопки – это UI. Но если кнопка стала заметнее и человек наконец нашел нужное действие, ты изменила его опыт. А это уже UX

Когда ты убираешь из формы три поля – это UX-решение, ты сокращаешь путь. Но выглядеть форма после этого тоже будет иначе, а значит это влияет на UI

Мне ближе такая формулировка: UX – это решение о том, что должно произойти. UI – решение о том, как это будет выглядеть и ощущаться. Одно без другого не работает

Красивый экран с кривой логикой – это дорогая упаковка вокруг пустоты. Идеально продуманный сценарий в нечитаемом интерфейсе человек просто не пройдет, потому что не разберется, куда нажимать

Вывод? Нам нужен балансик :)

Мне кажется, что чаще всего: «нарисуй нам экраны и подумай головой, пока рисуешь»

В маленькой команде один человек делает и то, и другое. В крупной продуктовой компании роли могут быть разведены: есть исследовательницы, есть те, кто отвечает за дизайн-систему и визуальный слой. Но даже там граница подвижная и зависит от того, как устроены процессы

Поэтому я бы не тратила силы на то, чтобы правильно себя назвать. Гораздо полезнее уметь ответить на вопрос «почему здесь так, а не иначе» – и на уровне логики, и на уровне визуала

Если ты только начинаешь, то начни с UI. Не потому что он важнее, а потому что он нагляднее: результат видно сразу, и это держит мотивацию. Разбери типографику, цвет, систему отступов, компоненты и состояния. Это база, на которую потом ложится все остальное

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

И еще: не пытайся выбрать сторону. Разделение на UX и UI полезно для того, чтобы понимать, чем ты сейчас занимаешься – исследуешь или оформляешь, а не как выбор профессии

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