---
title: UX-дизайн
description: Ключевые составляющие UX со ссылками на статьи подраздела и дополнительные грани опыта по модели «сот», эвристики и законы UX, доступность, практический цикл, методы проверки и навыки.
---

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

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

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

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

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

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

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

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

| Составляющая | На какой вопрос отвечает | Статья |
| --- | --- | --- |
| **Юзабилити** (usability) | Легко ли достичь цели без ошибок? | [Юзабилити](https://wpcraft.ru/kb/design/ux/usability.md) — пять составляющих удобства, метрики и методы проверки |
| **Информационная архитектура** (IA) | Как устроена структура и как называются её части? | [Информационная архитектура](https://wpcraft.ru/kb/design/ux/information-architecture.md) — системы организации, навигации и поиска |
| **Проектирование взаимодействия** (IxD) | Что произойдёт после действия пользователя? | [Проектирование взаимодействия](https://wpcraft.ru/kb/design/ux/interaction-design.md) — потоки, состояния и обратная связь |
| **Доступность** (a11y) | Могут ли воспользоваться люди с разными возможностями? | [Доступность (a11y)](https://wpcraft.ru/kb/design/ux/accessibility.md) — WCAG 2.2, клавиатура, контраст и инструменты проверки |

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

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

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

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

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

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

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

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

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

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

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

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

1. **Исследование.** Интервью, наблюдение, анализ обращений и аналитики: понять задачи, контекст и барьеры до проектирования.
2. **[Информационная архитектура](https://wpcraft.ru/kb/design/ux/information-architecture.md).** Структура разделов, навигация, поиск, названия и группировка контента.
3. **[Проектирование взаимодействия](https://wpcraft.ru/kb/design/ux/interaction-design.md).** Сценарии, состояния, поведение элементов, обратная связь и восстановление после ошибки.
4. **Юзабилити-инжиниринг.** Эвристическая оценка, юзабилити-тестирование, замеры и приоритизация найденных проблем; подробно — в статье [юзабилити](https://wpcraft.ru/kb/design/ux/usability.md).
5. **Прототипирование.** Проверяемая модель решения — от бумажного наброска до интерактивного прототипа, чтобы не строить непроверенное.
6. **Контент.** Тексты интерфейса, микрокопирайт, пустые и ошибочные состояния: содержание — часть сценария, а не отдельная задача редактора.

Три из этих работ разобраны отдельными статьями — они перечислены выше, в разделе [«Ключевые составляющие 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)](https://wpcraft.ru/kb/design/ux/accessibility.md).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

| Навык | Что тренировать | Где смотреть |
| --- | --- | --- |
| Исследование | Сценарии интервью, выборка, анализ наблюдений, отчёт без натяжек | [NN/g: статьи и исследования](https://www.nngroup.com/articles/), [UXmatters](https://www.uxmatters.com) |
| Информационная архитектура | Структура, навигация, названия разделов, карточная сортировка | [Interaction Design Foundation: литература](https://www.interaction-design.org/literature) |
| Проектирование взаимодействия | Потоки, состояния, микровзаимодействия, обратная связь | [Laws of UX](https://lawsofux.com), [Mobbin](https://mobbin.com) — паттерны реальных продуктов |
| Юзабилити-инжиниринг | Эвристическая оценка, модерация тестов, приоритизация проблем | [10 эвристик Нильсена](https://www.nngroup.com/articles/ten-usability-heuristics) |
| Визуальный слой | Иерархия, типографика, отступы, состояния элементов | [Refactoring UI](https://www.refactoringui.com), [UI-дизайн](https://wpcraft.ru/kb/design/ui.md) |
| Доступность | WCAG 2.2, клавиатура, скринридер, контраст | [W3C WAI: WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/), [Доступность (a11y)](https://wpcraft.ru/kb/design/ux/accessibility.md) |
| Контент интерфейса | Микротекст, ошибки, пустые состояния, тон | Статьи NN/g о микротексте и сообщениях об ошибках |
| Коммерческий контекст | Поведение покупателей, checkout, поиск и фильтры | [Baymard Institute](https://baymard.com/blog) — исследования e-commerce UX |

Базовое чтение, которое чаще всего рекомендуют: «Не заставляй меня думать» Стива Круга ([sensible.com](https://sensible.com/dont-make-me-think/)) и «Laws of UX» Джона Яблонски. Для системного входа в профессию — [Google UX Design](https://www.coursera.org/professional-certificates/google-ux-design) и [обзор UX-ролей 2026](https://www.uxdesigninstitute.com/blog/19-ux-roles-in-2026/) от UX Design Institute.

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

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

| Направление | На какой вопрос отвечает | Как связано с UX |
| --- | --- | --- |
| [UI-дизайн](https://wpcraft.ru/kb/design/ui.md) | Как устроены и выглядят элементы интерфейса? | UI выражает сценарии через композицию экранов, компоненты, типографику, цвета и состояния. UX задаёт потребности и логику использования, UI помогает воплотить их в интерфейсе. |
| [Маркетинговый дизайн](https://wpcraft.ru/kb/design/marketing.md) | Как объяснить ценность и привести к целевому действию? | Он решает задачу убеждения и выбора. UX помогает сделать путь к заявке, покупке или другой цели понятным и предсказуемым. |
| [Доступность](https://wpcraft.ru/kb/design/ux/accessibility.md) | Могут ли люди с разными возможностями воспринимать и использовать сайт? | Доступность — не отдельная надстройка, а одна из граней опыта: порядок фокуса, подписи, контраст и работа с клавиатуры проектируются вместе со сценарием. |
| [ИИ-дизайн](https://wpcraft.ru/kb/design/ai.md) | Как применять ИИ на этапах проектирования? | ИИ может помочь получить варианты структуры и экранов, но UX-гипотезы и пригодность решения нужно проверять. |

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

## Материалы и источники

- [Ключевые составляющие UX-дизайна (исходный конспект)](https://wpcraft.ru/raw/2026/1024/ux.md)
- [The Definition of User Experience (UX) — Don Norman, Jakob Nielsen, NN/g](https://www.nngroup.com/articles/definition-user-experience/)
- [User Experience Design — Peter Morville, Semantic Studios](https://semanticstudios.com/user_experience_design/)
- [10 Usability Heuristics for User Interface Design — NN/g](https://www.nngroup.com/articles/ten-usability-heuristics)
- [What's New in WCAG 2.2 — W3C WAI](https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22)
- [Laws of UX — Jon Yablonski](https://lawsofux.com)
- [The Five Competencies of User Experience Design — Steve Psomas, UXmatters](https://www.uxmatters.com/mt/archives/2007/11/the-five-competencies-of-user-experience-design.php)
- [19 UX Roles to Explore in 2026 — UX Design Institute](https://www.uxdesigninstitute.com/blog/19-ux-roles-in-2026/)
- [Обзор дизайна цифровых продуктов](https://wpcraft.ru/kb/design.md)