Прогресс-бар

Прогресс-бар — это индикатор, который отображает прогресс выполнения задачи.

В библиотеке элементов Контура прогресс-бар имеет горизонтальный вид, но вообще он может быть любой формы. Например, Microsoft использует круглый индикатор и называет его ProgressRing:

Используйте прогресс-бар, если процесс в среднем длится дольше 10 секунд. Понимание того, когда процесс завершится, дает ощущение контроля и улучшает пользовательский опыт.

Если это уместно, дайте возможность отменить задачу и сделайте прогресс-бар не модальным, чтобы он не блокировал работу в сервисе.

Если процесс происходит на стороне сервера и можно закрыть окно браузера — сообщите об этом пользователю.

Создание прогресс-бара требует больше усилий, чем подключение спиннера, и оправдано, если сценарий частотный.

Если получить данные о ходе выполнения задачи невозможно, лучше использовать спиннер. Имитировать работу прогресс-бара можно, только если он носит дополнительный и иллюстративный характер. Например, глобальный лоадер сопровождает загрузку контента, его задача ― заполнить паузу до появления первых элементов страницы, а не дать точную обратную связь.

Прогресс-бар делится на отрезки по количеству подзадач пропорционально среднему времени их выполнения. Например, чтобы выполнить команду пользователя, нужно сделать три подзадачи. Известно, что первые две в среднем занимают по 10 секунд, третья — 5 секунд. Значит, должны получиться такие отрезки:

0 % → 40 % → 80 % → 100 %

Отрезок заполняется с постоянной скоростью, равной: длина отрезка / среднее время. Если отрезок заполнился, а подзадача все еще выполняется, прогресс-бар останавливается и ждет завершения подзадачи. Если подзадача выполнится раньше среднего времени, отрезок заполняется с ускорением easeOutQuint.

Последний отрезок заполняется до 75 % и ждет, пока завершится подзадача, затем заполняется с ускорением.

Если среднее время выполнения задач неизвестно, то прогресс-бар следует разделить на отрезки равной длины, а за среднее время взять минимально ожидаемое время.

Если задача не имеет подзадач, то прогресс-бар может равномерно заполняться до значения 75 %, после чего ждать информации о завершении задачи. Фактически такой прогресс-бар является имитацией и малоинформативен для пользователей, лучше, когда есть три и больше подзадач.

Заполнение прогресс-бара всегда должно только расти, но не уменьшаться. Откатывающийся назад прогресс-бар путает пользователей и снижает доверие к интерфейсу.

Прогресс-бар можно красить в цвет продукта или ссылок в интерфейсе.

Быстрые процессы не нужно сопровождать подписью. Но чем дольше процесс, тем больше подробностей о ходе выполнения задачи нужно сообщать.

Укажите, сколько времени осталось до конца задачи. Округляйте в большую сторону: если процесс завершится раньше, пользователю будет приятно. Обратная ситуация вызовет негативные эмоции и снизит доверие к интерфейсу.

Укажите, какой именно шаг выполняется в данный момент. Это объяснит пользователю, почему процесс такой долгий, и поможет скоротать время.