Обратная связь
Обратная связь
Восемь компонентов, и все они отвечают на один вопрос: что сейчас происходит и что с этим делать. Различаются двумя: сколько это держится и к чему относится.
| держится | относится к | |
|---|---|---|
| Тост | секунды, уходит сам | тому, что человек только что сделал |
| Баннер | пока держится состояние | всему экрану |
| Сноска | всегда | соседнему абзацу, полю, блоку |
| Спиннер | пока идёт работа | месту, где он стоит |
| Скелетон | пока грузится | форме будущего содержимого |
| Пустое состояние | пока пусто | всему списку |
| Точки состояния | пока держится фаза | одному объекту |
| Аккордеон | — | это не сообщение, а раскладка |
Сравнение стоит здесь, а не на страницах: «возьмите другое» — это утверждение о СОСЕДЯХ, и повторённое восемь раз оно расходится с ними по одной строке за правку.
Ожидание: что показать
| Что известно | Возьмите | Почему не соседа |
|---|---|---|
| Форма будущего содержимого: заголовок и три строки | Скелетон | Скелетон не той формы врёт дважды |
| Ничего, и ожидание короче секунды | Спиннер | Скелетон обещал бы форму, которой не будет |
| Доля выполненного | мера | Ни спиннер, ни скелетон не говорят, сколько осталось |
| Занята кнопка | aria-busy="true" на самой кнопке |
У неё своё кольцо на месте подписи |
| Данных нет и не будет | Пустое состояние | Скелетон в этот момент обещает то, чего не случится |
| Пусто из-за ошибки | блок отказа | Там нужны причина и то, что уже пробовали |
Сообщение: где показать
| Что нужно | Возьмите | Почему не соседа |
|---|---|---|
| Результат действия, которое человек запустил сам | Тост | Баннер держится, пока держится состояние, и сам не уходит |
| Условие, действующее на весь экран | Баннер | Тост уйдёт раньше, чем условие исчезнет |
| Пояснение к соседнему блоку | Сноску | Баннер претендует на весь экран |
| Вопрос, без ответа на который нельзя дальше | модалку | У тоста и баннера нет вопроса |
| Отказ, из которого нужен выход | блок отказа | У него есть причина и повтор, и он остаётся в потоке |
| Ошибка одного поля | сообщение формы под полем | Баннер уровня экрана про одно поле — это шум |
Когда ни один не подходит
| Что нужно | Возьмите | Почему не отсюда |
|---|---|---|
| Равноправные виды одного объекта | вкладки | У них видно все названия сразу и нет прыжка высоты |
| Всё, что нужно видеть одновременно | панели в колонку | Аккордеон прячет то, что сравнивают |
| Вызов инструмента с телом вывода | шаг агента | У него есть фаза и длительность |
| Статус без слова | бейдж целиком | Одна точка не называет состояние |
Общее для всех восьми
Ошибка перебивает, остальное — нет. У сообщения об ошибке role="alert", у
подтверждения role="status": первое прерывает чтение, второе дожидается
паузы. Перепутать их значит либо перебивать по пустякам, либо промолчать о
сбое.
Живой регион обязан быть в раскладке. Область тостов открыта поповером один
раз и не закрывается: закрытый popover — это display: none, а живой регион
в display: none не озвучивается вовсе.
Бесконечный индикатор не останавливают при prefers-reduced-motion.
Сжатая до 0.01ms бесконечная анимация — это остановка, а остановленный спиннер
сообщает «ничего не происходит» ровно тогда, когда происходит. Такие
замедляются до частоты, которая читается как «идёт».
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument