«Подождите, идёт загрузка»: типы индикаторов прогресса и принципы их применения

Дизайнер Николай Бабич написал колонку для vc.ru о том, как использовать индикаторы прогресса — какие типы существуют и когда их лучше применять.

Видимость статуса системы является одной из основополагающих характеристик пользовательского интерфейса. Пользователи хотят иметь контроль над системой, которую они используют. Это значит, что им необходимо понимать текущий контекст в любой момент времени, особенно, когда система работает над задачей.


Индикатор прогресса выполнения задачи является одной из самый популярных форм предоставления системного статуса для пользователя. Хороший интерактивный дизайн предоставляет обратную связь

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

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

Время ожидания для пользователя начинается сразу с момента инициации действия, и в худшем случае он не получает никакой индикации о том, получила ли система его запрос.

Когда приложение не уведомляет о том, что ему требуется некоторое время на выполнение его действия, пользователи часто думаю, что их действие не было получено приложением и повторяют свой запрос. Множество лишних щелчков мышкой — тот самый результат отсутствия обратной связи.

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

Когда приложению требуется от 0,1 до 1 секунды, кажется, что оно просто выполняет действия. Хотя пользователь и замечает небольшую задержку, он остается сфокусированным на текущей задаче. Но если приложение выполняет действие дольше одной секунды, пользователь будет думать, что оно работает медленно.

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

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

Прогресс-индикаторы прямо говорят пользователю, что приложению требуется больше времени на выполнения последнего запроса. Самая простая форма индикаторов — это неопределенный прогресс-индикатор. Этот тип индикатора обычно просто уведомляет пользователя о самом факте ожидания без какого-либо уточнения, сколько это продлится. Бесконечный спинер предупреждает, что система работает над запросом, но при этом не говорит, сколько это займёт времени

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

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

Существует два наиболее популярных типа индикаторов прогресса — петлевая анимация и процентный индикатор. Петлевая анимация

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

Например, базовый индикатор загрузки в Apple iOS (серый спинер) служит множеству функций, начиная с отображения статуса загрузки устройства, заканчивая загрузкой данных из интернета. Пользователю не нравится смотреть на такой индикатор без точного указания времени ожидания.

Процентный индикатор

Процентный индикатор показывает прогресс выполнения операции от 0% до 100%, и абсолютное значение в нём никогда не уменьшается. И линейный, и круговой индикатор могут быть процентными. Линейный прогресс-индикатор Круговой процесс-индикатор

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

Десять секунд — предельное время ожидания для пользователя, так как по прошествии этого времени пользователь приходит в недоумение от того, что ему приходится ожидать выполнения операции, не зная, сколько это ожидание продлится. — Из исследования Якоба Нильсена «О времени отклика системы» Советы по использованию прогресс-индикаторов

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

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

Не надо стремиться быть точным, простого предупреждения «Это может занять пять минут» будет достаточно для пользователя и позволит ему не беспокоится о том, что происходит. Обновление ПО в Apple iOS Показывайте абсолютный объём работы

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

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

При худшем раскладе прогресс-бар доходит до отметки 99% и внезапно замирает. Большинство пользователей останутся разочарованы, так как будут считать, что приложение зависло. Для того чтобы не создавать таких ситуаций, следуйте простому правилу — сглаживайте небольшие задержки прогресс-бара путём его непрерывного и плавного движения. Создайте ощущение быстрого прогресса


Помните, что ощущение ожидания может быть важнее настоящей скорости выполнения операции. Для того чтобы создать у пользователя ощущение быстрого прогресс-бара, вы можете начинать анимировать прогресс медленно в начале и позволить ему двигаться быстрее в конце. Это создаст ощущение быстрого выполнения задачи. Отвлекайте пользователей от самого факта ожидания


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



Или милым.

Или совершенно непредсказуемым, но настолько интересным, что способно удерживать пользовательское внимание до того момента, как приложение будет полностью загружено. Анимация позволяет отвлечь пользователя от самого факта ожидания Скелетоны — прекрасная альтернатива традиционным индикаторам прогресса

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

Как заметил в своей статье Люк Вроблевски: «Любые прогресс-индикаторы в сущности сообщают о факте ожидания. Это всё равно что смотреть на идущие часы на стене — когда вы делаете это, кажется, что время идёт медленнее». Как правило, из-за добавления прогресс-индикаторов в пользовательский интерфейс дизайнеры заставляют пользователей смотреть именно на такие «часы».

К счастью, есть хорошая альтернатива для прогресс-индикаторов, которая позволяет предоставлять пользователям поистине отличный UX во время ожидания. И эта техника носит название «Скелетон». Скелетоны (а-ля плейсхолдеры для данных) первоначально представляют собой пустую страницу, данные на которую загружаются в процессе.

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

Популярная блогинг-платформа Medium использует этот трюк, показывая простой wireframe (как плейсхолдер), в то время как данные подгружаются. В дополнение к этому пользователь знакомится со структурой контента на странице. Medium фокусирует на контексте, который загружается, а не на самом факте загрузки Выводы

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

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

Когда вы будете выбирать между скелетонами или бесконечным круговым спинером, лучше присмотреться к первому варианту, так как они (скелетоны) позволяют создать ощущение, что процесс загрузки практически мгновенен.