Модуль 7 · урок 4 з 10
Порожні стани
Порожній стан — єдиний екран, який користувач бачить у свою першу хвилину в продукті. І найчастіше саме він виглядає як помилка: сіре «Немає даних» посеред екрана. Урок короткий, але ефект від нього помітний одразу.
Два різні порожні стани
| Даних ще немає | Фільтр нічого не знайшов | |
|---|---|---|
| Коли | Перший вхід, порожня база | Записи є, але не підходять під умови |
| Заголовок | «Задач ще немає» | «Нічого не знайдено» |
| Підказка | Що це за розділ і навіщо | Які саме фільтри активні |
| Дія | «Створити першу задачу» | «Скинути фільтри» |
| Настрій | Запрошення | Пояснення |
Показати «Нічого не знайдено» новому користувачу — означає натякнути, що він щось зробив
не так. Показати «Створіть першу задачу» тому, хто просто ввів невдалий пошуковий запит —
збити з пантелику. Різниця в одному @if, а відчуття від продукту різне.
Компонент
@Component({
selector: 'app-empty-state',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div class="state">
<span class="state__icon" aria-hidden="true">{{ icon() }}</span>
<h3 class="state__title">{{ title() }}</h3>
<p class="state__hint">{{ hint() }}</p>
@if (actionLabel(); as label) {
<button type="button" (click)="act.emit()">{{ label }}</button>
}
</div>
`,
})
export class EmptyState {
icon = input('📋');
title = input.required<string>();
hint = input('');
actionLabel = input<string | null>(null);
act = output<void>();
}@if (state() === 'no-results') {
<app-empty-state
icon="🔍"
title="Нічого не знайдено"
hint="Спробуйте змінити пошуковий запит або скинути фільтри"
actionLabel="Скинути фільтри"
(act)="store.resetFilters()" />
} @else if (state() === 'empty') {
<app-empty-state
icon="📋"
title="Задач ще немає"
hint="Тут зʼявляться задачі, коли ви створите першу"
actionLabel="Створити задачу"
(act)="create()" />
}Найкорисніше доповнення до «нічого не знайдено» — перелік активних умов: «за запитом kyiv, статус заблоковано». Часто людина забуває, що вчора поставила фільтр, і думає, що дані зникли. Один рядок тексту економить звернення в підтримку.
Порожньо в інших місцях
| Де | Що показати |
|---|---|
| Випадайка виконавців | «Немає доступних виконавців» замість порожнього списку |
| Автодоповнення | «Нічого не знайшлось за “kyi”» |
| Панель деталей | «Виберіть рядок ліворуч, щоб побачити деталі» |
| Графік без даних | «Немає даних за обраний період» замість порожніх осей |
| Порожня комірка таблиці | Прочерк —, а не порожнеча |
Останній рядок вартий уваги: порожня комірка виглядає як помилка рендеру, а прочерк — як свідоме «тут нічого немає». Дрібниця, яку помічають одразу.
- Пояснює, чому порожньо.
- Пропонує конкретну наступну дію.
- Написаний людською мовою, без «дані відсутні».
- Не виглядає як помилка.
- «Немає даних» — і все.
- Той самий текст для обох видів порожнечі.
- Червоний колір і знак оклику.
- Порожній екран узагалі без повідомлення.