50 lines
1.5 KiB
Markdown
50 lines
1.5 KiB
Markdown
---
|
|
name: psychology/cognitive-fluency
|
|
title: Cognitive Fluency in Design
|
|
description: Design patterns that make information easy to process — reducing friction and increasing trust.
|
|
tags: [psychology, cognitive, fluency, simplicity, trust]
|
|
source: Nielsen Norman Group, baymard.com, stripe.com, linear.app
|
|
---
|
|
|
|
# Cognitive Fluency
|
|
|
|
## Что это
|
|
Дизайн, который делает информацию максимально простой для восприятия. Мозг доверяет тому, что легко понять.
|
|
|
|
## Принципы
|
|
|
|
1. **Простота** — одна идея на экран
|
|
2. **Предсказуемость** — знакомые паттерны
|
|
3. **Контраст** — важнее = больше
|
|
4. **Группировка** — связанные вместе
|
|
|
|
## Паттерны
|
|
|
|
```css
|
|
/* ✅ Fluent */
|
|
.card {
|
|
background: var(--color-surface);
|
|
border-radius: 16px;
|
|
padding: 32px;
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
/* ❌ Complex */
|
|
.card {
|
|
background: linear-gradient(...);
|
|
border-radius: 16px 8px 20px 12px;
|
|
padding: 33px 37px;
|
|
box-shadow: ...;
|
|
border: 2px solid ...;
|
|
}
|
|
```
|
|
|
|
## Anti-patterns
|
|
|
|
| ❌ Плохо | ✅ Хорошо |
|
|
|----------|-----------|
|
|
| 5 идей на экран | 1 идея на экран |
|
|
| Сложная навигация | 3–5 пунктов |
|
|
| Абстрактные иконки | Распознаваемые |
|
|
| Без whitespace | 128px между секциями |
|