10 бесплатных макетов прогресс-баров
Индикатор загрузки данных или, как его еще часто называют, прогресс-бар – это один из важнейших элементов веб-дизайна. Наличие на сайте прогресс-бара может быть очень полезным, особенно, когда какой-либо процесс, например скачивание файла, происходит медленно. Для прогресс-бара очень важно, чтобы он был не только информативным, но еще и красивым. Этому элементу требуется очень качественная отрисовка – прогресс-бар должен быть оригинальным и эффектным. Если пользователю, зашедшему на сайт, приходится ждать, то нужно сделать так, чтобы его ожидание было не скучным. Если индикатор загрузки сделан на высоком уровне и наглядно отражает состояние прогресса выполнения задачи, то у пользователя останется положительное впечатление о сайте, а это именно то, что нужно, особенно если скрипты работают достаточно медленно. FreelanceToday представляет вашему вниманию 10 бесплатных макетов прогресс-баров с необычным дизайном.
Все макеты представляют собой многослойные PSD-файлы, так что их можно редактировать, изменяя внешний вид прогресс-бара таким образом, чтобы он соответствовал основному дизайну сайта.
Круглый прогресс-бар с полосой загрузки, изменяющей цвет в зависимости от хода выполнения задачи. Очень интересное решение – пользователь может «залипнуть», глядя, как полоса постепенно меняет свой цвет.
Даже простенькую горизонтальную полосу загрузки можно сделать очень привлекательной, добавив эффект свечения.
Очень интересный подход к дизайну прогресс-бара. Здесь мы видим не одну, а сразу четыре полосы загрузки. Посетителю сайта однозначно будет не скучно наблюдать за процессом загрузки.
Горизонтальный прогресс-бар с переключателем. Во время загрузки или скачивания файлов пользователь видит, сколько осталось времени до окончания процесса и может убедиться, что он работает с тем файлом, который ему нужен – информация представлена в верхней части полосы загрузки.
Очень простой прогресс-бар от дизайнера Айзека Санчеса. При наведении на полосу прокрутки, по-видимому, должна появляться подсказка с цифрами в процентах.
Прогресс-бар для мобильных приложений с темным пользовательским интерфейсом. Полоса загрузки меняет свой оттенок на более светлый в процессе выполнения задачи.
Еще один круговой прогресс-бар в этой подборке. Макет можно использовать не только как индикатор загрузки, но и как график, например при создании интерактивных диаграмм.
Самая обычная полоса загрузки с отсечками в процентах. Ничего особенного, зато бесплатно.
Сразу несколько вариантов для создания прогресс-бара. В макете представлено три круговых индикатора и два варианта горизонтальной полосы.
Необычное решение – в этом макете нет привычной индикации. Круглый индикатор постепенно заполняется как бы водой или другой жидкостью. В данном варианте жидкость имеет другой цвет, но ничто не мешает заменить ее цвет на любой другой. Интересно, как будет смотреться данный прогресс-бар, если его правильно анимировать.
Прогресс Бар или Спиннер: что и когда использовать
Хотя ответ очевиден, кого-то выбор того или иного индикатора загрузки ставит в тупик. Разбираемся, когда стоит использовать каждый из них.
И не забывайте подписываться на мой блог, чтобы у меня была хоть какая-то мотивация
Вам ведь не нравится стоять в очереди на одном месте, не продвигаясь вперёд? Так и юзерам не нравится смотреть на спиннеры больше четырёх секунд.
Согласно исследованию, именно столько юзеры готовы терпеть спиннер. Если они вынуждены наблюдать спиннер дольше, то начнут думать, всё ли в порядке с вашим приложением или с их интернет-подключением.
При этом, если время ответа меньше одной секунды, то спиннер можно вообще не показывать.
Будет логичным предположить, что если время ожидания ответа составляет больше 4 секунд, то стоит использовать прогресс бар. В общем-то, так и есть.
Индикатор процесса (прогресс бар) задаёт чёткие ожидания времени загрузки. Юзеры своими глазами наблюдают прогресс загрузки, что снижает негативные эмоции от ожидания. Спиннер не даёт этого ощущения, он не показывает прогресс и не подталкивает юзера к ожиданию загрузки. Юзеры просто не знают, обрабатывает ли приложение их запрос или просто зависло.
Прогресс бар должен показывать прогресс выполнения их запроса. Он должен быть анимирован слева направо и, по возможности, плавно. Если анимация останавливается на длительное время, юзер может подумать, что прогресс завис и не станут ждать.
При этом, если процесс занимает меньше минуты, то достаточно будет указать прогресс в процентах. Но если он занимает длительное время, то юзерам проценты не помогут оценить оставшееся время ожидания. В таком случае лучше использовать примерную оценку оставшегося времени. Эта информация поможем им понять, что процесс может занять длительное время.
Казалось бы — всё просто. Загрузка меньше 4 секунд — используй спиннер. Больше — прогресс бар.
Но не всё так однозначно. Ожидаемое время загрузки может колебаться в зависимости от производительности, пропускной способности канала и ещё целой кучи факторов. В итоге мы просто не можем предположить, сколько юзер будет наблюдать загрузку — полторы секунды или тридцать секунд.
Что делать в таких «промежуточных» случаях — тема для отдельной статьи, потому что вариантов много. Например, можно последовать примеру Google и показывать небольшую нотификашку о том, что «процесс занимает дольше, чем ожидалось».
Если вам понравилось — подписывайтесь на мой блог и кидайте деньги в монитор. Жмите на колокольчик, чтобы ничего не пропустить. И выращивайте петрушку. Она полезная.
Спиннер используют не просто как индикатор быстрой загрузки, а как информатор о неопределенной продолжительности загрузки. Что-бы не вышло , как раньше, когда прогресс бар был самым главным пиздаболом в мире компьютерных технологий.
В торрентах всегда неопределенная продолжительность загрузки и прогресс бар — пока никто не умер — можно в довесок к бару показывать сколько уже загружено, и какая скорость
Она всегда слабо определённая, лучше прогресс чего-то показывать.
Все просто: если видишь спиннер, значит что-то зависло
Пальцем? Все это курсором делают!
Ребят круто!
давайте еще больше постов по UI/UX
Да без проблем, сделаем (:
Эпл вот так ещё любит делать. Выглядит как прогресс-бар, а на деле работает как спиннер
ультра плохое решение имхо.
если говорить в рамках мессенджера, где скорее важнее сам факт отправки или НЕотправки сообщения, чем его прогресс. и этот факт визуально определяется маленькой писюлькой в 10%? в которую надо всматрваться полная ли у меня полоса или нет? а остальные 90% графической информации просто не играет никакой роли, так еще и вводит тебя в заблуждение (в сторону успеха). пиздец
это еще кое-как работало если б была 100% гарантия выполнения, но тут успех зависит от твоего интернета, твоего провайдера интернета, твоего нахождения внутри сети (не зашел ли ты в бетонный переход/бункер), от серверов мессенджера.
«Подождите, идёт загрузка»: типы индикаторов прогресса и принципы их применения Статьи редакции
Дизайнер Николай Бабич написал колонку для vc.ru о том, как использовать индикаторы прогресса — какие типы существуют и когда их лучше применять.
Видимость статуса системы является одной из основополагающих характеристик пользовательского интерфейса. Пользователи хотят иметь контроль над системой, которую они используют. Это значит, что им необходимо понимать текущий контекст в любой момент времени, особенно, когда система работает над задачей.
Индикатор прогресса выполнения задачи является одной из самый популярных форм предоставления системного статуса для пользователя.
Хороший интерактивный дизайн предоставляет обратную связь
Немедленный отклик несомненно является наилучшим вариантом для любого приложения, но часто возможны ситуации, когда это неосуществимо. Медленная работа системы может быть связана со слабым интернет-соединением, либо сама операция может быть сложной и занимать продолжительное время.
В таких случаях, чтобы снизить пользовательский стресс, вы должны подтвердить пользователю, что система занята работой над его задачей и по ней есть реальный прогресс.
Время ожидания для пользователя начинается сразу с момента инициации действия, и в худшем случае он не получает никакой индикации о том, получила ли система его запрос.
Когда приложение не уведомляет о том, что ему требуется некоторое время на выполнение его действия, пользователи часто думаю, что их действие не было получено приложением и повторяют свой запрос. Множество лишних щелчков мышкой — тот самый результат отсутствия обратной связи.
Любые действия, такие как щелчок по кнопке или обновление данных в мобильных приложениях путём pull to refresh, должны сопровождаться незамедлительной реакцией.
Используйте индикатор прогресса для любой активности, которая занимает больше одной секунды
Когда приложению требуется от 0,1 до 1 секунды, кажется, что оно просто выполняет действия. Хотя пользователь и замечает небольшую задержку, он остается сфокусированным на текущей задаче. Но если приложение выполняет действие дольше одной секунды, пользователь будет думать, что оно работает медленно.
В случае, когда загрузка длится дольше одной секунды, для того чтобы уменьшить степень неопределённости, нужно использовать прогресс-индикаторы.
Анимационные прогресс-индикаторы уменьшают негативный эффект ожидания и позволяют удерживать пользовательское внимание (не рекомендуется использовать анимацию для любой активности, которая длиться меньше, чем одна секунда, так как анимация в таком коротком промежутке времени может быть воспринята пользователем как мерцание на экране).
Типы прогресс-индикаторов
Прогресс-индикаторы прямо говорят пользователю, что приложению требуется больше времени на выполнения последнего запроса. Самая простая форма индикаторов — это неопределенный прогресс-индикатор. Этот тип индикатора обычно просто уведомляет пользователя о самом факте ожидания без какого-либо уточнения, сколько это продлится.
Бесконечный спинер предупреждает, что система работает над запросом, но при этом не говорит, сколько это займёт времени
Базовое правило: вы можете использовать этот тип индикации для любого быстрого действия (от двух до десяти секунд). Заставлять пользователя смотреть на бесконечный спинер дольше может привести к тому, что пользователь покинет сайт или закроет приложение.
Следующий тип прогресс-индикаторов говорит, сколько пользователю надо ждать времени, прежде чем его операция будет выполнена (точно или приблизительно). Этот тип индикаторов называется определённым. Очевидно, это наиболее информативная форма индикаторов прогресса, так как пользователь видит, сколько прошло и сколько осталось подождать.
Неопределенный индикатор визуализирует сам факт ожидания, тогда как определённый говорит о том, сколько продлится сама операция
Два наиболее популярных типа прогресс-индикаторов
Существует два наиболее популярных типа индикаторов прогресса — петлевая анимация и процентный индикатор.
Петлевая анимация
Из-за того, что большинство вариантов петлевой анимации — это неопределённые формы индикации и используются они в разных типах ожиданий (от малых до больших), этот тип прогресс-индикаторов имеет плохую репутацию у пользователей.
Например, базовый индикатор загрузки в Apple iOS (серый спинер) служит множеству функций, начиная с отображения статуса загрузки устройства, заканчивая загрузкой данных из интернета. Пользователю не нравится смотреть на такой индикатор без точного указания времени ожидания.
Процентный индикатор
Процентный индикатор показывает прогресс выполнения операции от 0% до 100%, и абсолютное значение в нём никогда не уменьшается. И линейный, и круговой индикатор могут быть процентными.
Линейный прогресс-индикатор
Круговой процесс-индикатор
Базовое правило гласит, что процентный прогресс-индикатор необходимо использовать для любой активности, которая занимает больше десяти секунд.
Десять секунд — предельное время ожидания для пользователя, так как по прошествии этого времени пользователь приходит в недоумение от того, что ему приходится ожидать выполнения операции, не зная, сколько это ожидание продлится.
– Из исследования Якоба Нильсена «О времени отклика системы»
Советы по использованию прогресс-индикаторов
В случае, если вы не можете уменьшить время ожидания, нужно как минимум стремится сделать этот процесс более комфортным для пользователя.
Объясняйте пользователю, какие действия выполняет система
В большинстве случаев, если пользователь проинформирован о том, что происходит в настоящий момент, он будет более спокоен за процесс. Текстовая информация о том, какие действия выполняются в настоящий момент, позволяет добавить деталей к процессу и дать пользователю понимание того, что сейчас происходит.
Skyscanner говорит пользователю, что система ищет лучшие варианты доступных полётов
Предоставляйте приближенное время ожидания для больших задач
Не надо стремиться быть точным, простого предупреждения «Это может занять пять минут» будет достаточно для пользователя и позволит ему не беспокоится о том, что происходит.
Обновление ПО в Apple iOS
Показывайте абсолютный объём работы
Для тяжёлых задач, где заранее невозможно предсказать, сколько времени потребуется на её выполнение, нельзя использовать процентный индикатор. В таком случае будет полезно показать пользователю абсолютное значение выполненной работы. Рассмотрите вариант демонстрации номера шагов, потому что, зная номер шага, пользователь может оценить хотя бы приблизительное время окончания операции.
Когда прогресс не может быть точно оценён, попробуйте использовать номер шага вместо процентного индикатора
Не останавливайте прогресс-бар
Прогресс-бар создаёт ожидания у пользователя о том, как быстро работает система над выполнением задачи. Таким образом, любые фризы прогресс-бара могут оказывать негативное влияние на ожидания пользователей.
При худшем раскладе прогресс-бар доходит до отметки 99% и внезапно замирает. Большинство пользователей останутся разочарованы, так как будут считать, что приложение зависло. Для того чтобы не создавать таких ситуаций, следуйте простому правилу — сглаживайте небольшие задержки прогресс-бара путём его непрерывного и плавного движения.
Создайте ощущение быстрого прогресса
Помните, что ощущение ожидания может быть важнее настоящей скорости выполнения операции. Для того чтобы создать у пользователя ощущение быстрого прогресс-бара, вы можете начинать анимировать прогресс медленно в начале и позволить ему двигаться быстрее в конце. Это создаст ощущение быстрого выполнения задачи.
Отвлекайте пользователей от самого факта ожидания
Креативные прогресс-индикаторы могут сглаживать негативные ощущения от ожидания. Если приложение предлагает пользователю что-то интересное в течение загрузки, это позволяет отвлечь его от самого факта ожидания. Для того чтобы пользователи не заскучали во время долгих операций — отвлекайте их. Например, чем-нибудь веселым.
Или совершенно непредсказуемым, но настолько интересным, что способно удерживать пользовательское внимание до того момента, как приложение будет полностью загружено.
Анимация позволяет отвлечь пользователя от самого факта ожидания
Скелетоны — прекрасная альтернатива традиционным индикаторам прогресса
Как мы уже знаем, если выполнение действия требует продолжительного времени, нам необходимо дать знать об этом пользователю, используя прогресс-индикаторы. Однако, несмотря на то что мы преследуем самые хорошие намерения, конечный результат в ряде случаев оказывается не таким положительным.
Как заметил в своей статье Люк Вроблевски: «Любые прогресс-индикаторы в сущности сообщают о факте ожидания. Это всё равно что смотреть на идущие часы на стене — когда вы делаете это, кажется, что время идёт медленнее». Как правило, из-за добавления прогресс-индикаторов в пользовательский интерфейс дизайнеры заставляют пользователей смотреть именно на такие «часы».
К счастью, есть хорошая альтернатива для прогресс-индикаторов, которая позволяет предоставлять пользователям поистине отличный UX во время ожидания. И эта техника носит название «Скелетон». Скелетоны (а-ля плейсхолдеры для данных) первоначально представляют собой пустую страницу, данные на которую загружаются в процессе.
Но вместо того, чтобы показывать индикатор загрузки, скелетон фокусирует внимание пользователя на прогрессе и предвкушении того, что скоро появится на экране. Это создает впечатление, что данные загружаются мгновенно, так как вся информация подаётся инкрементально.
Популярная блогинг-платформа Medium использует этот трюк, показывая простой wireframe (как плейсхолдер), в то время как данные подгружаются. В дополнение к этому пользователь знакомится со структурой контента на странице.
Medium фокусирует на контексте, который загружается, а не на самом факте загрузки
Выводы
Каким бы быстрым мы не сделали наше приложение или сайт, всегда будут возникать моменты, требующие времени на выполнение. Индикаторы прогресса, такие как спинеры или процентные прогресс-бары, снижают ощущение неопределённости у пользователей и предоставляют им необходимую обратную связь.
Базовое правило: нужно использовать скелетоны или бесконечный круговой спинер для относительно быстрых операций, которые занимают от двух до десяти секунд, и процентный индикатор для любой активности, которая занимает более десяти секунд.
Когда вы будете выбирать между скелетонами или бесконечным круговым спинером, лучше присмотреться к первому варианту, так как они (скелетоны) позволяют создать ощущение, что процесс загрузки практически мгновенен.
Прогресс-бар
Прогресс-бар — это индикатор, который отображает прогресс выполнения задачи.
В библиотеке элементов Контура прогресс-бар имеет горизонтальный вид, но вообще он может быть любой формы. Например, Microsoft использует круглый индикатор и называет его ProgressRing:
Используйте прогресс-бар, если процесс в среднем длится дольше 10 секунд. Понимание того, когда процесс завершится, дает ощущение контроля и улучшает пользовательский опыт.
Если это уместно, дайте возможность отменить задачу и сделайте прогресс-бар не модальным, чтобы он не блокировал работу в сервисе.
Если процесс происходит на стороне сервера и можно закрыть окно браузера — сообщите об этом пользователю.
Создание прогресс-бара требует больше усилий, чем подключение спиннера, и оправдано, если сценарий частотный.
Если получить данные о ходе выполнения задачи невозможно, лучше использовать спиннер. Имитировать работу прогресс-бара можно, только если он носит дополнительный и иллюстративный характер. Например, глобальный лоадер сопровождает загрузку контента, его задача ― заполнить паузу до появления первых элементов страницы, а не дать точную обратную связь.
Принцип работы
Прогресс-бар делится на отрезки по количеству подзадач пропорционально среднему времени их выполнения. Например, чтобы выполнить команду пользователя, нужно сделать три подзадачи. Известно, что первые две в среднем занимают по 10 секунд, третья — 5 секунд. Значит, должны получиться такие отрезки:
0 % → 40 % → 80 % → 100 %
Отрезок заполняется с постоянной скоростью, равной: длина отрезка / среднее время. Если отрезок заполнился, а подзадача все еще выполняется, прогресс-бар останавливается и ждет завершения подзадачи. Если подзадача выполнится раньше среднего времени, отрезок заполняется с ускорением easeOutQuint.
Последний отрезок заполняется до 75 % и ждет, пока завершится подзадача, затем заполняется с ускорением.
Если среднее время выполнения задач неизвестно, то прогресс-бар следует разделить на отрезки равной длины, а за среднее время взять минимально ожидаемое время.
Если задача не имеет подзадач, то прогресс-бар может равномерно заполняться до значения 75 %, после чего ждать информации о завершении задачи. Фактически такой прогресс-бар является имитацией и малоинформативен для пользователей, лучше, когда есть три и больше подзадач.
Заполнение прогресс-бара всегда должно только расти, но не уменьшаться. Откатывающийся назад прогресс-бар путает пользователей и снижает доверие к интерфейсу.
Прогресс-бар можно красить в цвет продукта или ссылок в интерфейсе.
Подпись
Быстрые процессы не нужно сопровождать подписью. Но чем дольше процесс, тем больше подробностей о ходе выполнения задачи нужно сообщать.
Укажите, сколько времени осталось до конца задачи. Округляйте в большую сторону: если процесс завершится раньше, пользователю будет приятно. Обратная ситуация вызовет негативные эмоции и снизит доверие к интерфейсу.
Укажите, какой именно шаг выполняется в данный момент. Это объяснит пользователю, почему процесс такой долгий, и поможет скоротать время.