Прогресс-бар
Прогресс-бар — это индикатор, который отображает прогресс выполнения задачи.
В библиотеке элементов Контура прогресс-бар имеет горизонтальный вид, но вообще он может быть любой формы. Например, Microsoft использует круглый индикатор и называет его ProgressRing:
Используйте прогресс-бар, если процесс в среднем длится дольше 10 секунд. Понимание того, когда процесс завершится, дает ощущение контроля и улучшает пользовательский опыт.
Если это уместно, дайте возможность отменить задачу и сделайте прогресс-бар не модальным, чтобы он не блокировал работу в сервисе.
Если процесс происходит на стороне сервера и можно закрыть окно браузера — сообщите об этом пользователю.
Создание прогресс-бара требует больше усилий, чем подключение спиннера, и оправдано, если сценарий частотный.
Если получить данные о ходе выполнения задачи невозможно, лучше использовать спиннер. Имитировать работу прогресс-бара можно, только если он носит дополнительный и иллюстративный характер. Например, глобальный лоадер сопровождает загрузку контента, его задача ― заполнить паузу до появления первых элементов страницы, а не дать точную обратную связь.
Принцип работы
Прогресс-бар делится на отрезки по количеству подзадач пропорционально среднему времени их выполнения. Например, чтобы выполнить команду пользователя, нужно сделать три подзадачи. Известно, что первые две в среднем занимают по 10 секунд, третья — 5 секунд. Значит, должны получиться такие отрезки:
0 % → 40 % → 80 % → 100 %
Отрезок заполняется с постоянной скоростью, равной: длина отрезка / среднее время. Если отрезок заполнился, а подзадача все еще выполняется, прогресс-бар останавливается и ждет завершения подзадачи. Если подзадача выполнится раньше среднего времени, отрезок заполняется с ускорением easeOutQuint.
Последний отрезок заполняется до 75 % и ждет, пока завершится подзадача, затем заполняется с ускорением.
Если среднее время выполнения задач неизвестно, то прогресс-бар следует разделить на отрезки равной длины, а за среднее время взять минимально ожидаемое время.
Если задача не имеет подзадач, то прогресс-бар может равномерно заполняться до значения 75 %, после чего ждать информации о завершении задачи. Фактически такой прогресс-бар является имитацией и малоинформативен для пользователей, лучше, когда есть три и больше подзадач.
Заполнение прогресс-бара всегда должно только расти, но не уменьшаться. Откатывающийся назад прогресс-бар путает пользователей и снижает доверие к интерфейсу.
Прогресс-бар можно красить в цвет продукта или ссылок в интерфейсе.
Подпись
Быстрые процессы не нужно сопровождать подписью. Но чем дольше процесс, тем больше подробностей о ходе выполнения задачи нужно сообщать.
Укажите, сколько времени осталось до конца задачи. Округляйте в большую сторону: если процесс завершится раньше, пользователю будет приятно. Обратная ситуация вызовет негативные эмоции и снизит доверие к интерфейсу.
Укажите, какой именно шаг выполняется в данный момент. Это объяснит пользователю, почему процесс такой долгий, и поможет скоротать время.
Отслеживаем прогресс выполнения в Python
Индикаторы прогресса (progress bar) — визуальное отображение процесса работы. Они избавляют нас от необходимости беспокоиться о том, не завис ли скрипт, дают интуитивное представление о скорости его выполнения и подсказывают, сколько времени осталось до завершения.
Человек ранее не использовавший индикаторы прогресса может предположить, что их внедрение может сильно усложнить код. К счастью, это не так. Небольшие примеры ниже покажут, как быстро и просто начать отслеживать прогресс в консоли или в интерфейсе быстро набирающей популярность графической библиотеки PySimpleGUI.
Используем Progress
Первым у нас идёт модуль Progress.
Всё, что от вас потребуется, это указать количество ожидаемых итераций, тип индикатора и вызывать функцию при каждой итерации:
Есть индикаторы на любой вкус:
Используем tqdm
Следующей на очереди идёт библиотека tqdm.
Быстрый и расширяемый индикатор прогресса для Python и CLI
Всего один вызов функции понадобится для получения результата аналогичного предыдущему:
Само собой, в комплекте идёт куча настроек и опций.
Используем alive-progress
Ещё один вариант синтаксиса, побольше дефолтных анимаций, чем в предыдущих примерах:
GUI индикатор прогресса для скрипта
Иногда возникает необходимость предоставить конечному пользователю графический индикатор.
Сколько кода нужно, чтобы достигнуть такого результата? Немного:
Индикатор в приложении PySimpleGUI
Рассмотрим реализацию индикатора в PySimpleGUI.
Вот как это сделать:
Заключение
Как видите, нет ничего сложного в добавлении информации о прогрессе выполнения: кода немного, а отзывчивость повышается очень сильно. Используйте индикаторы, чтобы больше никогда не гадать, завис ли процесс или нет!
Прогресс Бар или Спиннер: что и когда использовать
Хотя ответ очевиден, кого-то выбор того или иного индикатора загрузки ставит в тупик. Разбираемся, когда стоит использовать каждый из них.
И не забывайте подписываться на мой блог, чтобы у меня была хоть какая-то мотивация ��
Вам ведь не нравится стоять в очереди на одном месте, не продвигаясь вперёд? Так и юзерам не нравится смотреть на спиннеры больше четырёх секунд.
Согласно исследованию, именно столько юзеры готовы терпеть спиннер. Если они вынуждены наблюдать спиннер дольше, то начнут думать, всё ли в порядке с вашим приложением или с их интернет-подключением.
При этом, если время ответа меньше одной секунды, то спиннер можно вообще не показывать.
Будет логичным предположить, что если время ожидания ответа составляет больше 4 секунд, то стоит использовать прогресс бар. В общем-то, так и есть.
Индикатор процесса (прогресс бар) задаёт чёткие ожидания времени загрузки. Юзеры своими глазами наблюдают прогресс загрузки, что снижает негативные эмоции от ожидания. Спиннер не даёт этого ощущения, он не показывает прогресс и не подталкивает юзера к ожиданию загрузки. Юзеры просто не знают, обрабатывает ли приложение их запрос или просто зависло.
Прогресс бар должен показывать прогресс выполнения их запроса. Он должен быть анимирован слева направо и, по возможности, плавно. Если анимация останавливается на длительное время, юзер может подумать, что прогресс завис и не станут ждать.
При этом, если процесс занимает меньше минуты, то достаточно будет указать прогресс в процентах. Но если он занимает длительное время, то юзерам проценты не помогут оценить оставшееся время ожидания. В таком случае лучше использовать примерную оценку оставшегося времени. Эта информация поможем им понять, что процесс может занять длительное время.
Казалось бы — всё просто. Загрузка меньше 4 секунд — используй спиннер. Больше — прогресс бар.
Но не всё так однозначно. Ожидаемое время загрузки может колебаться в зависимости от производительности, пропускной способности канала и ещё целой кучи факторов. В итоге мы просто не можем предположить, сколько юзер будет наблюдать загрузку — полторы секунды или тридцать секунд.
Что делать в таких «промежуточных» случаях — тема для отдельной статьи, потому что вариантов много. Например, можно последовать примеру Google и показывать небольшую нотификашку о том, что «процесс занимает дольше, чем ожидалось».
Если вам понравилось — подписывайтесь на мой блог и кидайте деньги в монитор. Жмите на колокольчик, чтобы ничего не пропустить. И выращивайте петрушку. Она полезная.
Спиннер используют не просто как индикатор быстрой загрузки, а как информатор о неопределенной продолжительности загрузки. Что-бы не вышло , как раньше, когда прогресс бар был самым главным пиздаболом в мире компьютерных технологий.
В торрентах всегда неопределенная продолжительность загрузки и прогресс бар — пока никто не умер — можно в довесок к бару показывать сколько уже загружено, и какая скорость
Она всегда слабо определённая, лучше прогресс чего-то показывать.
Все просто: если видишь спиннер, значит что-то зависло
Пальцем? Все это курсором делают!
Ребят круто!
давайте еще больше постов по UI/UX
Да без проблем, сделаем (:
Эпл вот так ещё любит делать. Выглядит как прогресс-бар, а на деле работает как спиннер
ультра плохое решение имхо.
если говорить в рамках мессенджера, где скорее важнее сам факт отправки или НЕотправки сообщения, чем его прогресс. и этот факт визуально определяется маленькой писюлькой в 10%? в которую надо всматрваться полная ли у меня полоса или нет? а остальные 90% графической информации просто не играет никакой роли, так еще и вводит тебя в заблуждение (в сторону успеха). пиздец
это еще кое-как работало если б была 100% гарантия выполнения, но тут успех зависит от твоего интернета, твоего провайдера интернета, твоего нахождения внутри сети (не зашел ли ты в бетонный переход/бункер), от серверов мессенджера.
представлять
Два индикатора прогресса доступны в библиотеке материала компонента: LinearProgressIndicator с участием CircularProgressIndicator Все они могут быть использованы как в точных инструкциях по прогрессу, так и разумным инструкциям по прогрессу. Точный прогресс обычно используется для прогресса задач, который можно рассчитать и оценить, такие как файловые загрузки; и нечеткий прогресс, прогресс задачи пользователя не может быть точно получен, а также новая кисть, представление данных и т. Д.