UX и UI: что на самом деле значит каждое и о чём спросить дизайнера
Во многих брифах ищут «UX/UI-дизайнера», как будто это одна профессия с косой чертой посередине. Иногда один человек действительно умеет и то и другое, но эти дисциплины отвечают на разные вопросы. Если вы не понимаете, какой вопрос задаёте, вы наймёте не того человека, будете оценивать работу не по тем критериям и заплатите за редизайн, который не решит настоящую проблему.
| Параметр | UX | UI |
|---|---|---|
| Ключевой вопрос | Работает ли это для пользователя? | Как это выглядит, читается и реагирует? |
| Фокус | Путь, структура, логика каждого шага | Сетка, шрифты, цвет, компоненты |
| Типичные результаты | Итоги исследований, сценарии, вайрфреймы, прототипы | Макеты экранов, UI-кит, дизайн-система |
| Основные методы | Интервью, аналитика, юзабилити-тесты | Визуальная иерархия, правила бренда, проверка доступности |
| Как оценивать | Доля выполненных задач, отказы, обращения в поддержку | Единообразие, читаемость, понятные действия |
| Признак проблемы | Пользователи теряются или бросают задачу | Экраны разнородны или плохо читаются |
UX: работает ли это для того, кто пользуется?
Пользовательский опыт (UX) — это весь путь, который человек проходит, чтобы решить задачу: найти товар, сравнить варианты, зарегистрироваться, оплатить, получить поддержку. UX-дизайнер спрашивает: кто пользователь, чего он хочет добиться, где он застревает и какой самый короткий надёжный путь к цели?
В готовом продукте работа UX почти не видна. Она живёт в итогах исследований, интервью с пользователями, картах пути клиента, информационной архитектуре (как организованы контент и меню), пользовательских сценариях и вайрфреймах — простых серых схемах, которые показывают структуру без цвета и стиля. Хороший UX-дизайнер тратит значительную часть времени не на рисование, а на разговоры с пользователями и наблюдение за тем, как они пользуются продуктом.
Плохой UX выглядит так: оформление заказа, где дважды просят одни и те же данные; форма, которая стирает всё, если одно поле заполнено неверно; меню, в котором никто не может найти условия доставки. Экран может быть красивым, а UX — ужасным.
UI: как это выглядит, читается и реагирует?
Пользовательский интерфейс (UI) — это слой, который человек видит и которого касается: сетка, шрифты, цвет, иконки, кнопки, отступы, состояния (нажата, неактивна, ошибка, загрузка) и небольшие анимации. UI-дизайнер превращает вайрфрейм в единую визуальную систему, которая соответствует бренду и легко читается на экране любого размера.
Хороший UI — не украшение. Он выстраивает визуальную иерархию, чтобы взгляд сначала попадал на главное действие, делает кнопки похожими на кнопки, держит контраст достаточным для чтения на солнце и сохраняет единообразие всех экранов. Главный результат — дизайн-система или UI-кит: набор повторно используемых компонентов и правил, по которым работают разработчики.
Плохой UI выглядит так: серый текст на светло-сером фоне, пять разных стилей кнопок на одной странице, иконка, которую никто не понимает без подписи.
Как они работают вместе
Представьте здание. UX — это планировка: где двери, как пройти от входа до кухни, логично ли расположена лестница. UI — это материалы, цвета, освещение и указатели. Отличная планировка с дешёвой отделкой выглядит дёшево; красивая отделка в запутанном здании всё равно заставляет людей блуждать.
На практике работа идёт не по прямой, а по кругу:
- Исследование: интервью, аналитика, обращения в поддержку, обзор конкурентов.
- Структура: пользовательские сценарии, информационная архитектура, вайрфреймы.
- Визуальный дизайн: UI-слой поверх вайрфреймов и компоненты дизайн-системы.
- Прототип и тест: кликабельный прототип проверяют на небольшой группе реальных пользователей.
- Передача: компоненты, состояния и спецификации для разработчиков.
- Замер и улучшение: доля завершённых задач, отказы, обращения в поддержку.
- Исследование
Интервью, аналитика, обращения в поддержку и обзор конкурентов показывают, где пользователи спотыкаются.
- Структура
Сценарии, информационная архитектура и вайрфреймы задают логику до любой стилизации.
- Визуальный дизайн
К утверждённым вайрфреймам применяются UI-слой и компоненты дизайн-системы.
- Прототип и тест
Кликабельный прототип проверяют на реальных пользователях; выводы часто возвращают на шаг назад.
- Передача в разработку
Разработчики получают компоненты, состояния и спецификации, а не просто картинки экранов.
- Замер и улучшение
Доля завершённых задач, отказы и обращения в поддержку показывают, что исправлять дальше.
Тестирование часто возвращает вас ко второму шагу. Это нормально и гораздо дешевле, чем найти проблему после запуска.
Один человек или два?
Для небольшого сайта, лендинга или приложения на ранней стадии обычно достаточно одного сильного продуктового дизайнера, который умеет и то и другое. Для крупного интернет-магазина, банковского приложения или продукта с множеством типов пользователей понадобятся отдельные специалисты или хотя бы UX-исследователь в помощь дизайнеру.
Тревожный сигнал — портфолио, в котором только отполированные экраны. Спросите, где исследование. Спросите, что изменилось после тестирования. Дизайнер, который не может объяснить, почему экран выглядит именно так, скорее всего, занимается только UI. Это нормально, если вам нужен именно UI, — просто напишите об этом в брифе.
Вопросы дизайнеру перед наймом
- «Расскажите об одном проекте от задачи до результата». Слушайте про исследование, решения и измерения, а не только про визуал.
- «Как вы узнали, что нужно пользователям?» Интервью, аналитика, юзабилити-тесты — или предположения?
- «Покажите вайрфрейм и финальный экран одной и той же страницы». Так видно, думает ли человек сначала о структуре.
- «Что изменилось после тестирования?» Хороший дизайнер может назвать решение, от которого отказался.
- «Как вы передаёте работу разработчикам?» Ищите библиотеку компонентов, описанные состояния и чёткие спецификации.
- «Как вы работаете с доступностью?» Контраст, размер шрифтов, размер зон нажатия, поддержка экранных дикторов.
- «Что вам понадобится от нас?» Доступ к пользователям, данные, брендбук и человек, принимающий решения и отвечающий вовремя.
Что написать в брифе
Разделите эти две части в брифе. Для UX опишите бизнес-задачу, пользователей и задачи, которые они должны выполнить. Для UI — бренд, платформы и визуальные ожидания. Назовите метрики, которые хотите сдвинуть: завершённые регистрации, отказы при оформлении заказа, звонки в поддержку по конкретному шагу.
Укажите нужные языки. В нашем регионе продукт часто должен работать на двух-трёх языках, и надпись на русском или азербайджанском может быть заметно длиннее английской. Макеты, сделанные только под английский, ломаются, когда приходит реальный текст, поэтому попросите дизайнера с самого начала проверять все языки.
Если вы работаете с агентством или фрилансером, требуйте результаты исследования как отдельный результат работы, а не только экраны. Эти выводы остаются полезными ещё долго после завершения проекта, и следующая команда скажет вам за них спасибо. Если вы ещё ищете подходящего специалиста, можно разместить бриф на платформе и сравнить портфолио рядом друг с другом.
Главный вывод
Прежде чем написать «UX/UI-дизайнер» в следующем брифе, напишите по одному предложению на каждое: что пользователь должен суметь сделать (UX) и как продукт должен выглядеть и ощущаться (UI). Если получается заполнить только второе предложение, начинать дизайн ещё рано. Пора начинать исследование.
