Открыть сервис
Главная → Блог → Прогресс-бар в интерфейсах

Прогресс-бар в интерфейсах

Прогресс-бар (от англ. progress bar — «полоса продвижения»), также индикатор выполнения или полоса прогресса, — элемент графического пользовательского интерфейса, отображающий степень завершённости длительной операции в виде заполняющейся полосы. Относится к классу индикаторов состояния и служит для информирования пользователя о ходе процесса, который занимает заметное время и не может быть завершён мгновенно.

Назначение и принцип работы

Основная функция прогресс-бара — снижение неопределённости при ожидании. Когда система выполняет операцию продолжительностью более одной-двух секунд, отсутствие обратной связи воспринимается человеком как зависание или отказ. Индикатор выполнения показывает, что процесс идёт, и позволяет приблизительно оценить оставшееся время.

Технически элемент представляет собой прямоугольную область, заполняемую цветом или текстурой пропорционально выполненной доле работы. Значение выражается в процентах от 0 до 100 либо в виде отношения выполненных шагов к общему числу. В большинстве реализаций индикатор связан с программным счётчиком, который обновляется по мере обработки данных.

Виды индикаторов

Различают два принципиально разных типа.

Детерминированный (определённый) прогресс-бар используется, когда общий объём работы известен заранее. Например, при копировании файла система знает его размер и может вычислить долю завершения. Такой индикатор заполняется равномерно и часто сопровождается числовым значением и оценкой оставшегося времени.

Неопределённый (индетерминированный) индикатор применяется, когда длительность операции неизвестна. Вместо заполнения отображается анимация — бегущая полоса, вращающийся элемент или пульсация. Классический пример — «часики» или вращающееся кольцо загрузки. Такой элемент не сообщает о прогрессе, а лишь подтверждает активность системы.

Отдельно выделяют ступенчатые индикаторы, где процесс разбит на именованные этапы (например, установка программы: загрузка, распаковка, настройка), и многосегментные, показывающие прогресс нескольких параллельных задач.

История

До появления графических интерфейсов о ходе вычислений судили по миганию лампочек на передней панели ЭВМ или по выводу текстовых сообщений в терминал. В текстовых интерфейсах получили распространение псевдографические индикаторы из символов решётки и дефисов, а также «спиннеры» — последовательности вида |/-\, сменяющие друг друга.

С развитием оконных систем в 1980-х годах прогресс-бар стал стандартным элементом. В 1984 году в графической среде Apple Macintosh появился индикатор копирования файлов. Впоследствии элемент вошёл в руководства по проектированию интерфейсов Microsoft Windows, а затем и в веб-стандарты.

Реализация в веб-технологиях

В HTML5 появился семантический тег <progress>, позволяющий разметить индикатор без сторонних библиотек. Он поддерживает атрибуты value и max, задающие текущее и максимальное значения. При отсутствии атрибута value элемент отображается как неопределённый.

Каскадные таблицы стилей (CSS) предоставляют широкие возможности оформления: градиентные заливки, анимации, скругления, тени. Распространён приём имитации прогресса через изменение ширины вложенного блока в процентах. Библиотеки JavaScript (например, на основе фреймворков React, Vue) предлагают готовые компоненты с настраиваемым поведением.

В консольных приложениях применяются текстовые индикаторы, обновляющие одну строку терминала с помощью управляющих символов возврата каретки.

Применение

Прогресс-бары используются повсеместно:

В медиаплеерах полоса воспроизведения совмещает функции индикатора и элемента управления: перетаскиванием бегунка пользователь изменяет позицию.

Проблемы и критика

Главная претензия к детерминированным индикаторам — неточность оценки времени. Алгоритмы расчёта остатка часто дают скачущие значения: полоса может замереть на 90 % или, наоборот, мгновенно заполниться в конце. Причина — неравномерность этапов работы и невозможность заранее учесть все факторы.

Известен эффект, при котором искусственное замедление финальной стадии (например, удержание на 99 %) снижает раздражение пользователя, если фактическая работа завершается быстрее ожидаемого. Некоторые разработчики намеренно искажают отображение ради субъективного комфорта.

Критикуется и ложная точность: показ десятых долей процента создаёт иллюзию достоверности, которой нет. В ряде руководств по юзабилити рекомендуется округлять значения.

Психологическое восприятие

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

Смежные элементы

К родственным элементам относятся спиннеры (индикаторы неопределённой загрузки), скелетон-экраны (серые заглушки на месте будущего контента) и уведомления о состоянии в строке статуса. В мобильных приложениях распространён приём «pull-to-refresh» — обновление жестом с прокруткой.

Источники: руководства по проектированию интерфейсов Apple Human Interface Guidelines и Microsoft Windows User Experience; спецификация HTML Living Standard (WHATWG); материалы по юзабилити Якоба Нильсена; документация MDN Web Docs.

Похожие материалы