UX-дизайн

Что такое UX-дизайн

UX-дизайн (user experience design) — проектирование опыта человека при взаимодействии с продуктом или сервисом. Работа начинается с понимания пользователей и их задач, затем охватывает структуру, сценарии, содержание, обратную связь интерфейса и проверку решения. Цель — помочь человеку выполнить нужное действие понятно и без лишних препятствий.

Формулировка Дона Нормана и Якоба Нильсена шире, чем «удобный интерфейс»: опыт охватывает все стороны взаимодействия человека с компанией, её сервисами и продуктами. Поэтому плохая база данных, неверные сроки доставки или непрозрачная цена портят опыт ровно так же, как неудобная форма, — даже если интерфейс сам по себе безупречен.

Важно не путать три уровня:

Полезность (utility) — продукт вообще решает нужную задачу.
Юзабилити (usability) — задачу можно решить легко и без ошибок.
UX — суммарное впечатление от всех этапов: до, во время и после использования.

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

Ключевые составляющие UX

Четыре темы раздела разобраны отдельными статьями — с них стоит начинать:

Составляющая	На какой вопрос отвечает	Статья
Юзабилити (usability)	Легко ли достичь цели без ошибок?	Юзабилити — пять составляющих удобства, метрики и методы проверки
Информационная архитектура (IA)	Как устроена структура и как называются её части?	Информационная архитектура — системы организации, навигации и поиска
Проектирование взаимодействия (IxD)	Что произойдёт после действия пользователя?	Проектирование взаимодействия — потоки, состояния и обратная связь
Доступность (a11y)	Могут ли воспользоваться люди с разными возможностями?	Доступность (a11y) — WCAG 2.2, клавиатура, контраст и инструменты проверки

Эти четыре работы не заменяют друг друга: структура может быть верной, а состояния — сломанными, и наоборот. Вместе они дают то, что называют удобством использования, но опыт этим не исчерпывается — ниже то, что остаётся за пределами статей.

Дополнительные составляющие

Следующие грани опыта не выделены в отдельные статьи, но без них сценарий разваливается:

Составляющая	Смысл	Где проявляется
Полезность и ценность (useful, valuable)	Продукт решает реальную задачу и приносит пользу пользователю и бизнесу	Требования, приоритеты бэклога, отказ от «красивых, но пустых» разделов
Исследование пользователей (user research)	Понимание аудитории, её задач, словаря и барьеров	Интервью, наблюдение, анализ обращений и аналитики до проектирования
Находимость (findable)	Нужное можно найти снаружи и внутри продукта	SEO, поиск по сайту, меню, перелинковка, названия разделов
Доверие (credible)	Продукту и компании можно верить	Прозрачные цены, статусы и сроки, понятные ошибки, безопасность данных
Желательность (desirable)	Возникает эмоциональная привязанность	Эстетика, бренд, тон общения, микровзаимодействия

На практике эти составляющие связаны: продуманная информационная архитектура поднимает юзабилити, а исследование пользователей выявляет барьеры доступности ещё на ранних этапах.

Грани опыта: модель «сот»

Питер Морвилл в 2004 году предложил описывать качество опыта семью гранями — «сотами». Модель удобна как чек-лист при разборе готового сценария и при постановке требований: она не даёт свести UX к удобству интерфейса.

Грань	Вопрос	Что ломается без неё
Полезность (useful)	Решает ли продукт реальную задачу пользователя?	Красивый интерфейс поверх неполных данных: форма работает, а нужной информации в системе нет.
Удобство (usable)	Легко ли достичь цели?	Лишние шаги, непонятные названия, ошибки, которые пользователь не может исправить сам.
Желательность (desirable)	Возникает ли эмоциональная привязанность?	Эстетика, бренд и тон общения не поддерживают решение; продуктом пользуются по необходимости и уходят к конкуренту.
Находимость (findable)	Можно ли найти нужное — снаружи и внутри?	Хорошая навигация при плохой структуре: пользователь не знает, что нужный раздел вообще существует.
Доступность (accessible)	Могут ли воспользоваться люди с разными возможностями?	Часть аудитории физически не может пройти сценарий: фокус уезжает под sticky-хедер, цели меньше 24 px, drag без альтернативы.
Доверие (credible)	Можно ли верить продукту и компании?	Прозрачность цен, статусов и сроков, понятные ошибки, безопасность данных. Без этого конверсия падает даже при хорошем интерфейсе.
Ценность (valuable)	Есть ли польза и пользователю, и бизнесу?	Опыт приятный, но не двигает метрику: раздел читают, а заявок и покупок нет.

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

Грани не равны по глубине проработки: те, у которых есть отдельная статья, разобраны в разделе «Ключевые составляющие UX», остальные — в дополнительных составляющих.

Что делает UX-специалист

Грани описывают результат, работы — то, чем этот результат получают. На практике набор сводится к шести видам работ; в небольшой команде их выполняет один человек, в крупной — разные роли.

Исследование. Интервью, наблюдение, анализ обращений и аналитики: понять задачи, контекст и барьеры до проектирования.
Информационная архитектура. Структура разделов, навигация, поиск, названия и группировка контента.
Проектирование взаимодействия. Сценарии, состояния, поведение элементов, обратная связь и восстановление после ошибки.
Юзабилити-инжиниринг. Эвристическая оценка, юзабилити-тестирование, замеры и приоритизация найденных проблем; подробно — в статье юзабилити.
Прототипирование. Проверяемая модель решения — от бумажного наброска до интерактивного прототипа, чтобы не строить непроверенное.
Контент. Тексты интерфейса, микрокопирайт, пустые и ошибочные состояния: содержание — часть сценария, а не отдельная задача редактора.

Три из этих работ разобраны отдельными статьями — они перечислены выше, в разделе «Ключевые составляющие UX».

Доступность как часть UX

Доступность часто ставят рядом с юзабилити, и это точная пара: юзабилити делает продукт удобным для «среднего» пользователя, доступность гарантирует, что барьеров не возникнет и у людей с ограничениями зрения, слуха, моторики или когнитивных особенностей. Разница в том, что доступность проверяется объективными критериями, а не только мнением.

Практический ориентир — WCAG 2.2 (рекомендация W3C от 5 октября 2023 года, уровень AA). По сравнению с 2.1 добавлено девять критериев и удалён устаревший 4.1.1 Parsing. Шесть новых критериев уровня A/AA прямо касаются повседневных сценариев:

Критерий	Суть	Частая причина провала
2.4.11 Focus Not Obscured (AA)	Фокус не должен полностью скрываться другим контентом	Sticky-хедер, cookie-баннер, чат-виджет перекрывают сфокусированный элемент
2.5.7 Dragging Movements (AA)	У любого перетаскивания есть альтернатива без drag	Слайдеры, канбан-доски, подписи пальцем
2.5.8 Target Size (AA)	Интерактивные цели не меньше 24 × 24 CSS-пикселя	Мелкие крестики закрытия, иконки в таблицах, ссылки в подвале
3.2.6 Consistent Help (A)	Помощь и контакты в одном и том же месте на всех страницах	Блок поддержки переезжает из шапки в подвал и обратно
3.3.7 Redundant Entry (A)	Не заставлять вводить одни и те же данные повторно	Адрес доставки и адрес плательщика в одном заказе
3.3.8 Accessible Authentication (AA)	Вход не должен требовать запоминания и вставки из менеджера паролей	Запрет вставки пароля, CAPTCHA без альтернативы

Остальные три критерия (2.4.12, 2.4.13, 3.3.9) — уровня AAA.

Доступность дешевле закладывать в сценарий, чем приделывать после: она влияет на решения о разметке, порядке фокуса и размерах целей, то есть на те же артефакты, что и UX. Платформенные практики и инструменты проверки — в статье Доступность (a11y).

Эвристики и законы UX

Дизайн-решения проверяют двумя разными способами: эвристиками (быстрый экспертный разбор) и законами (психологические модели, объясняющие, почему интерфейс работает или нет).

Десять эвристик Нильсена

Сформулированы в 1994 году, обновлены в 2020-м; остаются самым распространённым чек-листом для экспертной оценки.

Эвристика	Что проверить
1. Видимость состояния системы	Пользователь понимает, что происходит: загрузка, сохранение, отправка, ошибка
2. Связь системы с реальным миром	Язык и порядок действий совпадают с ожиданиями человека, а не с внутренними терминами
3. Свобода действий	Есть отмена, возврат и выход из начатого действия
4. Последовательность и стандарты	Одинаковые вещи выглядят и называются одинаково, паттерны привычны
5. Предотвращение ошибок	Опасные действия подтверждаются, необратимые — ограничены
6. Узнавание вместо припоминания	Нужное видно на экране, а не хранится в памяти пользователя
7. Гибкость и эффективность	Есть быстрый путь для опытных и понятный — для новых
8. Эстетичный и минималистичный дизайн	Второстепенное не конкурирует с главным действием
9. Помощь в распознавании, диагностике и исправлении ошибок	Сообщение говорит, что случилось и что делать дальше
10. Помощь и документация	Подсказка доступна в момент, когда она нужна

Оценка по эвристикам занимает часы, а не недели, и хорошо работает как первый проход перед тестированием на пользователях: она находит очевидные проблемы без рекрутинга респондентов.

Законы и эффекты

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

Принцип	Смысл	Что из этого следует
Закон Якоба	Пользователи проводят больше времени на других сайтах и переносят ожидания	Не изобретать незнакомые паттерны для стандартных задач
Закон Фиттса	Время достижения цели зависит от расстояния и размера	Крупные и близкие цели; напрямую связано с критерием 2.5.8
Закон Хика	Время выбора растёт с числом и сложностью вариантов	Группировать и постепенно раскрывать выбор, а не просто сокращать его
Закон Миллера	Рабочая память ограничена и оперирует «чанками»	Группировать данные; это не правило «не больше семи пунктов в меню»
Эстетико-юзабилити-эффект	Привлекательный интерфейс кажется удобнее	Красота маскирует проблемы — проверять сценарий отдельно от визуала
Закон Теслера	Сложность не исчезает, а перераспределяется	Решать, кому отдать сложность: пользователю или системе
Порог Доэрти	Отклик быстрее ~400 мс сохраняет ощущение непрерывности	Немедленная обратная связь на клик, даже если операция длится дольше
Правило пика и конца	Опыт запоминается по самому яркому моменту и финалу	Финальный шаг и подтверждение важнее середины формы
Эффект цели	Усилия растут по мере приближения к цели	Прогресс и «остался один шаг» работают, если прогресс честный

Комбинация эвристик и законов даёт язык для обсуждения, но не заменяет проверку: любое объяснение — гипотеза, пока сценарий не прошли живые люди.

Практический цикл UX

Понять контекст. Определить пользователей, их задачи, среду использования и ограничения проекта.
Сформулировать проблему и результат. Уточнить, какую потребность решает продукт и по каким признакам можно понять, что задача выполнена.
Спроектировать структуру и путь. Разложить информацию, действия и переходы, учесть основные и альтернативные сценарии.
Предусмотреть состояния и ошибки. Описать пустые, загрузочные, успешные и ошибочные состояния, а также восстановление после ошибки.
Собрать и проверить прототип. Пройти сценарий, проверить понятность на пользователях или доступных данных и исправить обнаруженные препятствия.
Согласовать с UI и реализацией. Передать сценарии и требования к состояниям в визуальный дизайн и разработку, затем проверить реализацию.

Набор методов зависит от неизвестности и риска. Иногда достаточно пройти существующий сценарий и проверить прототип; для нового продукта может понадобиться изучить пользователей и сравнить несколько вариантов. Важно связывать выводы с наблюдениями и не принимать предположение за подтверждённый факт.

Как проверять сценарий

Метод	Что даёт	Когда уместен
Интервью и наблюдение	Понимание задач, контекста и словаря пользователей	До проектирования, при высокой неизвестности
Анализ обращений и аналитики	Реальные точки потери: где бросают, что ищут, о чём спрашивают	Когда продукт уже используется
Эвристическая оценка	Быстрый список проблем без респондентов	На любом прототипе, первым проходом
Когнитивный проход (cognitive walkthrough)	Поймёт ли новый пользователь, что делать на каждом шаге	Для сложных и незнакомых интерфейсов
Юзабилити-тестирование	Где именно спотыкаются живые люди	5–8 участников на итерацию обычно достаточно, чтобы увидеть основные проблемы
A/B-тест	Влияние изменения на метрику	Когда есть трафик и гипотеза сформулирована измеримо

Эти методы дополняют друг друга: аналитика показывает «где», интервью и тесты — «почему», A/B отвечает на «стало ли лучше». Один метод, взятый отдельно, легко даёт уверенный и неверный вывод.

Навыки и где их развивать

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

Навык	Что тренировать	Где смотреть
Исследование	Сценарии интервью, выборка, анализ наблюдений, отчёт без натяжек	NN/g: статьи и исследования, UXmatters
Информационная архитектура	Структура, навигация, названия разделов, карточная сортировка	Interaction Design Foundation: литература
Проектирование взаимодействия	Потоки, состояния, микровзаимодействия, обратная связь	Laws of UX, Mobbin — паттерны реальных продуктов
Юзабилити-инжиниринг	Эвристическая оценка, модерация тестов, приоритизация проблем	10 эвристик Нильсена
Визуальный слой	Иерархия, типографика, отступы, состояния элементов	Refactoring UI, UI-дизайн
Доступность	WCAG 2.2, клавиатура, скринридер, контраст	W3C WAI: WCAG, Доступность (a11y)
Контент интерфейса	Микротекст, ошибки, пустые состояния, тон	Статьи NN/g о микротексте и сообщениях об ошибках
Коммерческий контекст	Поведение покупателей, checkout, поиск и фильтры	Baymard Institute — исследования e-commerce UX

Базовое чтение, которое чаще всего рекомендуют: «Не заставляй меня думать» Стива Круга (sensible.com) и «Laws of UX» Джона Яблонски. Для системного входа в профессию — Google UX Design и обзор UX-ролей 2026 от UX Design Institute.

Связь UX с другими направлениями

UX — не единственный слой работы над продуктом. Полезно держать в голове, как он соотносится с соседними направлениями:

Направление	На какой вопрос отвечает	Как связано с UX
UI-дизайн	Как устроены и выглядят элементы интерфейса?	UI выражает сценарии через композицию экранов, компоненты, типографику, цвета и состояния. UX задаёт потребности и логику использования, UI помогает воплотить их в интерфейсе.
Маркетинговый дизайн	Как объяснить ценность и привести к целевому действию?	Он решает задачу убеждения и выбора. UX помогает сделать путь к заявке, покупке или другой цели понятным и предсказуемым.
Доступность	Могут ли люди с разными возможностями воспринимать и использовать сайт?	Доступность — не отдельная надстройка, а одна из граней опыта: порядок фокуса, подписи, контраст и работа с клавиатуры проектируются вместе со сценарием.
ИИ-дизайн	Как применять ИИ на этапах проектирования?	ИИ может помочь получить варианты структуры и экранов, но UX-гипотезы и пригодность решения нужно проверять.

Это связанные, но разные уровни работы: UX формулирует задачу и путь к результату; UI проектирует визуальную форму взаимодействия. На сайте UX- и маркетинговый подходы соединяются в зависимости от того, решает ли сайт задачи регулярного использования, продвижения или обе сразу.