Обратная связь и ожидание¶
Что происходит внутри программы, пользователь не видит. Он судит по тому, что показывает интерфейс. Если реакции нет, человек решает, что ничего не сработало, и нажимает ещё раз. Так из повторных нажатий на «Оплатить» или «Отправить» и появляются дубли.
Отклик в зависимости от длительности¶
Выбор индикатора определяется ожидаемым временем операции, и пороги здесь удобно брать из классических работ о времени отклика (подробнее - в разделе Восприятие и внимание).
| Длительность | Что показывать | Почему |
|---|---|---|
| до 0,1 с | Только смену состояния элемента | Воспринимается как мгновенная реакция |
| 0,1–1 с | Состояние нажатия, блокировку повторного действия | Задержка заметна, но индикатор вызвал бы мелькание |
| 1–10 с | Неопределённый индикатор (спиннер, скелетон) рядом с местом, где появится результат | Пользователь ждёт, но уже нуждается в подтверждении, что процесс идёт |
| более 10 с | Определённый прогресс с долей выполненного, по возможности - оценку времени и возможность отмены | Внимание уходит; пользователю нужно решить, ждать ли |
| минуты и больше | Фоновое выполнение с уведомлением о завершении | Блокировать интерфейс на такое время нельзя |
Индикатор, появляющийся мгновенно, мелькает на быстрых операциях и создаёт ощущение нестабильности, поэтому его обычно показывают с небольшой задержкой, а показав, удерживают какое-то минимальное время. Конкретные значения задержки - вопрос настройки под ваш продукт, а не стандарт.
Скелетон или спиннер?¶
Скелетон - это каркас из серых блоков, который не только показывает, что страница загружается, но и даёт представление о её содержимом. Он особенно полезен, когда структура страницы предсказуема, например, при загрузке списка. Скелетон предотвращает смещение раскладки, когда новые блоки сдвигают элементы, на которые пользователь уже собирался нажать.
Спиннер, напротив, более уместен там, где структура результата неизвестна. Например, при отправке формы, где индикатор загрузки лучше разместить прямо на кнопке.
Для пользователей вспомогательных технологий состояние загрузки передаётся через атрибут aria-busy, который добавляется к обновляемой области, а итоговое сообщение выводится в живой области.
Оптимистичное обновление¶
Оптимистичный интерфейс показывает результат сразу, не дожидаясь ответа сервера: сообщение появляется в чате, задача отмечается выполненной. Такой подход оправдан для частых, легко отменяемых действий с высокой вероятностью успеха и устраняет задержку, которая иначе ощущалась бы при каждом клике. Он требует продуманного отката: если сервер ответил ошибкой, элемент возвращается в прежнее состояние с понятным сообщением и возможностью повторить, а не исчезает молча. Для платежей, отправки документов контрагенту и других необратимых операций оптимистичное обновление неуместно, поскольку пользователь может уйти, считая процесс завершенным.
Сообщение о результате¶
Каждое действие, меняющее данные, заканчивается сообщением о результате, соразмерным действию. Для мелких изменений достаточно смены состояния самого элемента («Сохранено» рядом с полем), для действий над объектами вне поля зрения подходит всплывающее уведомление (toast), а для результатов, требующих решения, - встроенное сообщение или диалог. Всплывающие уведомления исчезают сами, поэтому в них нельзя помещать единственный способ исправить ошибку: пользователь может не успеть прочитать текст, а критерий 2.2.1 Timing Adjustable (A) требует давать возможность продлить время для материалов с ограничением по времени. Уведомление с кнопкой «Отменить» не исчезает, пока на нём фокус или курсор.
Сообщения о статусе, появляющиеся без перемещения фокуса, должны быть доступны экранным дикторам через role="status" или role="alert" (критерий 4.1.3 Status Messages, AA).
Состояние фоновых процессов¶
Если операция (например, экспорт, импорт или синхронизация) продолжается после закрытия экрана, интерфейс должен отображать её статус в постоянном месте и уведомлять о завершении. Пользователь должен иметь возможность закрыть вкладку без риска прервать процесс, а если это всё же случится, он должен получить уведомление заранее.