neo
76c4c5b4fe
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
68 lines
4.4 KiB
Markdown
68 lines
4.4 KiB
Markdown
---
|
|
title: UX Principles
|
|
created: 2026-06-02
|
|
updated: 2026-06-02
|
|
type: concept
|
|
tags: [web-design, ux]
|
|
sources:
|
|
- raw/articles/web-design-research.md
|
|
- raw/articles/crawford-20-principles.md
|
|
- raw/articles/crawford-15-tips.md
|
|
- raw/articles/crawford-26-lessons.md
|
|
confidence: high
|
|
---
|
|
|
|
# UX Principles — Принципы пользовательского опыта
|
|
|
|
## 10 эвристик юзабилити (Jakob Nielsen, NN/g, 1994 — обновлено 2024)
|
|
Это «правила большого пальца» для оценки интерфейсов. На них ссылается вся индустрия.
|
|
|
|
### 1. Visibility of System Status
|
|
Система всегда должна информировать пользователя о том, что происходит. Своевременная обратная связь. Если пользователь нажал кнопку — он должен сразу увидеть результат.
|
|
*Пример: карта торгового центра с указателем «Вы здесь».*
|
|
|
|
### 2. Match Between System and the Real World
|
|
Говорить на языке пользователя — без жаргона, с естественным порядком. Природные метафоры и знакомые концепции.
|
|
*Пример: расположение конфорок на плите соответствует реальному расположению.*
|
|
|
|
### 3. User Control and Freedom
|
|
Пользователи часто ошибаются — нужен «аварийный выход». Undo/Redo, отмена действия.
|
|
*Пример: кнопка Cancel в любом диалоге.*
|
|
|
|
### 4. Consistency and Standards
|
|
Одинаковые слова/ситуации должны означать одно и то же. Использовать конвенции платформы. Следовать **закону Якоба** (Нильсен): пользователи проводят 80% времени на других сайтах.
|
|
|
|
### 5. Error Prevention
|
|
Лучше предотвратить ошибку, чем исправлять. Два типа ошибок: slips (неосознанные, из-за невнимательности) и mistakes (осознанные, из-за неверной ментальной модели).
|
|
|
|
### 6. Recognition Rather Than Recall
|
|
Минимизировать нагрузку на память. Показывать элементы, а не заставлять вспоминать. Короткая память человека (7±2 элемента).
|
|
|
|
### 7. Flexibility and Efficiency of Use
|
|
Ускорения для опытных пользователей (клавишные shortcuts, жесты). Кастомизация.
|
|
|
|
### 8. Aesthetic and Minimalist Design
|
|
Только релевантная информация. Минимализм = меньше когнитивной нагрузки.
|
|
|
|
### 9. Help Users Recognize, Diagnose, Recover from Errors
|
|
Понятные сообщения об ошибках, подсказывающие решение.
|
|
|
|
### 10. Help and Documentation
|
|
Помощь должна быть легко доступна, сфокусирована на задаче, с конкретными шагами.
|
|
|
|
## 3 кита UX (Nielsen)
|
|
- **Useful** — полезность (соответствует потребностям)
|
|
- **Usable** — удобство использования (простота и эффективность)
|
|
- **Desirable** — желаемость (вызывает позитивные эмоции)
|
|
|
|
## Apple HIG: принципы дизайна
|
|
- **Clarity** — ясность: контент важнее UI-хрома, всё должно быть понятно
|
|
- **Deference** — уважение: UI служит контенту, не отвлекает
|
|
- **Depth** — глубина: реалистичное движение, наслоение, иерархия через визуальные слои
|
|
|
|
## Crawford: практическая адаптация
|
|
- **Clarity beats design** — ясность > красота
|
|
- **Nobody reads, they scan** — короткие абзацы, жирный ключ
|
|
- **First impressions in 0.5s** (halo effect)
|
|
- **Micro details build trust** — продуманные детали формируют доверие
|