UX (user experience, опыт пользователя) — это путь человека к цели: какие шаги он проходит, где сомневается и что его останавливает. UI (user interface, пользовательский интерфейс) — то, как этот путь выглядит: кнопки, шрифты, цвета, отступы. UX отвечает на вопрос «работает ли это», UI — «понятно ли и приятно ли этим пользоваться», поэтому продукту нужны оба: красивый экран без продуманного сценария не продаёт, а хороший сценарий в невнятной обёртке никто не пройдёт до конца.
После материала вы сможете
- объяснить разницу между UX и UI на примере своего сайта или приложения
- назвать пять этапов работы — исследование, сценарии, прототип, визуальный дизайн, проверка — и что даёт каждый
- проверить по чек-листу из шести пунктов, был ли в проекте UX-этап
Содержание
Что такое UX
Nielsen Norman Group — одна из самых цитируемых исследовательских компаний в области интерфейсов — определяет пользовательский опыт широко: это всё, что связано с взаимодействием человека с компанией, её услугами и продуктами. Первое требование к хорошему опыту — точно закрыть потребность клиента, без лишней суеты и раздражения. Красота и удовольствие от использования идут следом, а не вместо.
На практике UX-работа над сайтом или приложением — это ответы на простые, но неудобные вопросы. Кто приходит на сайт и с какой задачей? Что человек должен увидеть первым, чтобы не уйти? Сколько шагов от главной страницы до записи на услугу и какой из них лишний? Что произойдёт, если он ошибётся в номере телефона или потеряет связь посреди оплаты?
- Исследование: интервью с клиентами, разбор заявок и звонков, анализ конкурентов, данные аналитики
- Сценарии (user flow): пошаговый путь пользователя к цели, включая развилки и ошибки
- Информационная архитектура: какие разделы есть, как они называются и как вложены друг в друга
- Прототипы: схемы экранов без оформления, по которым можно «пройти» сценарий
- Проверка: показ прототипа живым людям и правки до того, как началась разработка
Что такое UI
UI — это видимая часть: как выглядят и ведут себя элементы на экране. Типографика, цвет, сетка, отступы, иконки, кнопки и поля, их состояния при наведении, нажатии и ошибке. Хороший UI — не «раскраска» готовой схемы. Он тоже решает задачи: показывает, что здесь нажимается, а что просто текст, выделяет главное действие, делает длинную страницу читаемой.
UX отвечает за
- Что человек делает и в каком порядке
- Какие экраны и разделы вообще нужны
- Какие данные спрашиваем и зачем
- Что происходит при ошибке, пустом списке, потере связи
- Понимает ли человек, где он и что дальше
UI отвечает за
- Как выглядят кнопки, поля, карточки
- Шрифты, размеры, цвета и контраст
- Сетку, отступы и выравнивание
- Иконки, иллюстрации, микроанимации
- Единый стиль всех экранов
Как идёт работа: от исследования до макета
Исследование
Собираем, что уже известно: кто клиенты, какие вопросы они задают менеджерам, на каком шаге бросают заявку, что делают конкуренты. Для небольшого сайта это может быть пара разговоров с владельцем и отделом продаж, для сервиса — интервью с пользователями.
Сценарии
Описываем путь по шагам: «увидел рекламу → открыл страницу услуги → посмотрел цены → выбрал время → подтвердил». Отдельно — что происходит, если человек передумал, ошибся или вернулся позже.
Прототип (wireframe)
Схемы экранов из серых блоков: где заголовок, где кнопка, где форма. Цвета и шрифты специально не подключаем, чтобы обсуждать логику, а не оттенок синего.
Визуальный дизайн
На утверждённую схему ложится стиль: шрифты, палитра, иконки, фотографии, состояния элементов. Повторяющиеся элементы собираются в UI-кит — библиотеку компонентов.
Проверка
Показываем кликабельный прототип нескольким людям из целевой аудитории и просим выполнить задачу. Всё, на чём они спотыкаются, правим до передачи в разработку.
Кто что делает в команде
В больших компаниях за UX и UI отвечают разные люди. В студиях и небольших командах роли часто совмещает продуктовый дизайнер. Важно не то, сколько людей в команде, а то, чтобы каждая задача из таблицы ниже была кем-то закрыта.
UX-исследователь
- Чем занимается
- Интервью, тесты, анализ поведения пользователей
- Что отдаёт
- Выводы: кто пользователи, что им мешает
UX-дизайнер (проектировщик)
- Чем занимается
- Сценарии, структура разделов, прототипы
- Что отдаёт
- Карту сценариев и схемы экранов
UI-дизайнер
- Чем занимается
- Визуальный стиль, компоненты, состояния
- Что отдаёт
- Макеты и UI-кит
Продуктовый дизайнер
- Чем занимается
- Совмещает UX и UI, держит связь с целями бизнеса
- Что отдаёт
- Всё перечисленное в одном контуре
Фронтенд-разработчик
- Чем занимается
- Переносит макеты в код, проверяет реализуемость
- Что отдаёт
- Работающий интерфейс
Что ломается, когда бизнес пропускает UX
Самая частая просьба на старте — «сделайте красиво, как у конкурента». Визуальный стиль действительно можно взять за ориентир, но сценарий конкурента построен под его клиентов, его ассортимент и его процессы. Когда этап UX пропускают, на проектах обычно всплывают одни и те же проблемы:
- Меню повторяет структуру компании («О нас», «Направления», «Отделы»), а не задачи клиента («Записаться», «Цены», «Как доехать»)
- Форма заявки спрашивает всё, что может пригодиться менеджеру, — и человек бросает её на середине
- Главное действие спрятано: кнопка записи есть только в шапке или внизу страницы
- Не продуманы состояния: что видит человек, пока идёт загрузка, если список пуст или сервер не ответил
- Мобильная версия делается «потом», хотя многие клиенты впервые открывают сайт с телефона по ссылке из мессенджера или соцсетей
Как заказчику проверить, что о UX подумали
Владельцу бизнеса не нужно разбираться в инструментах дизайнера. Достаточно задать подрядчику правильные вопросы и посмотреть, есть ли на них ответы в материалах проекта.
- Есть описание, кто ваши пользователи и с какими задачами они приходят
- Ключевые сценарии расписаны по шагам — включая ошибки и отказ на полпути
- До визуального дизайна вам показали схемы экранов и вы их согласовали
- Мобильная версия спроектирована одновременно с настольной, а не после
- Для каждого важного экрана продуманы загрузка, пустое состояние и ошибка
- Прототип хотя бы раз проверили на людях, которые не участвовали в проекте
UI решает, захочется ли человеку остаться. UX решает, сможет ли он сделать то, ради чего пришёл.
