🖌️ UI и UX

Чем отличаются UI и UX, процесс дизайна, принципы юзабилити, эвристики Нильсена.

Теория · Аналитика · #analytics #ui #ux #design

Разница

	UX (опыт)	UI (интерфейс)
Вопрос	удобно ли решить задачу?	как это выглядит и работает под рукой?
Предмет	пути, сценарии, структура, логика	цвета, шрифты, компоненты, анимации
Результат	исследования, карта пути, прототип	макеты, дизайн-система

Процесс

Исследование: интервью, опросы, аналитика, конкуренты.
Персоны и сценарии: кто пользователь, что хочет (Jobs To Be Done).
Информационная архитектура: структура разделов, навигация, карточная сортировка.
Пользовательский путь (CJM): этапы, мысли, эмоции, проблемы.
Wireframe: схема экрана без оформления.
Прототип: кликабельная модель.
UI-дизайн: визуальный стиль, компоненты.
Тестирование: юзабилити-тесты, A/B.
Передача в разработку: спецификации, ассеты, состояния компонентов.

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

Видимость состояния системы.
Соответствие системы реальному миру.
Контроль и свобода пользователя (отмена, возврат).
Согласованность и стандарты.
Предотвращение ошибок.
Узнавание вместо припоминания.
Гибкость и эффективность (быстрые клавиши).
Эстетика и минимализм.
Помощь в распознавании и исправлении ошибок.
Справка и документация.

Основы UI

Область	Правила
Сетка и отступы	кратность 4 или 8 px
Типографика	1–2 шрифта, контраст размеров, межстрочный 1.4–1.6
Цвет	основной, акцентный, нейтральные, семантические (успех, ошибка)
Контраст	текст не менее 4.5:1 (WCAG AA)
Состояния	normal, hover, focus, active, disabled, loading, error, empty
Размер цели касания	не менее 44×44 px

Законы UX

Закон Фитса (чем крупнее и ближе цель, тем быстрее попасть), Хика (больше выбора, дольше решение), Миллера (в памяти 7±2 элемента), Якоба (пользователи ждут привычного поведения).

Артефакты и инструменты

Figma, Sketch, Miro, Penpot, Axure, Maze, Hotjar. Дизайн-система: токены, компоненты, документация.

Метрики

Task success rate, время на задачу, число ошибок, SUS (System Usability Scale), CSAT, NPS, конверсия.