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

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

Хороший интерактивный дизайн всегда дает фидбек

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

В целом, фидбек отвечает на вопросы трех категорий:

  • Текущий статус: что происходит?
  • Результат: что только что произошло?
  • Будущий статус: Что будет дальше?

Каким должен быть хороший индикатор прогресса?

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

  • Уменьшение неопределенности пользователя (приложение дает понять, что оно работает).
  • Предоставление причины, зачем нужно ожидать, делает ожидание менее напряжным (приложение дает пользователю на что-то смотреть во время ожидания. Таким образом, пользователь обращает меньше внимания на само ожидание).

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

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

Типы индикаторов

Индикаторы прогресса могут быть определенными или неопределенными:

  • Если индикаторы определенные, они показывают, как долго займет операция, указывая процент выполнения.

индикаторы определенные

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

Неопределенные индикаторы

Также могут быть комбинации этих двух типов индикации:

определенные и неопределенные индикаторы
Источник: materialdoc

Циклическая анимация

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

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

Циклическая анимация

Также полезно будет внести дополнительную ясность в виде текста, который поясняет, чего собственно ждет пользователь (например, «Идет загрузка элементов…»).

Ожидания пользователей

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

Ожидания пользователей
Источник: appnce

Интеграция циклической анимации

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

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

Системная или кастомная циклическая анимация

В Facebook-приложении реализована очень интересная циклическая анимация. Расти Митчел упомянул этот момент, когда рассказывал об индикаторе загрузки Facebook: «Когда пользователям показали анимацию индикатора загрузки в iOS-приложении для Facebook (слева), у них были претензии по задержке в загрузке самого приложения. Но когда пользователям показали системный индикатор загрузки iOS, они уже склонны обвинять саму систему».

Системная или кастомная циклическая анимация

Линейная анимация

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

Линейная анимация
Линейная анимация. Источник: Dribbble

Анимация с процентом выполнения

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

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

процентный индикатор
Источник: Dribbble

Предоставление временной оценки

Не пытайтесь быть точными, просто, «Это займет минуту» будет достаточно, чтобы проинформировать пользователя, и вежливо попросить его подождать.

Оценка времени обновления ПО в Apple iOS
Оценка времени обновления ПО в Apple iOS

Прогрессивная анимация

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

tympanus
Источник: tympanus

Показ шагов

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

Вы можете следовать классической схеме:

Показ шагов

Показывайте количество шагов или следуйте более креативному подходу:

Показывайте количество шагов
Источник: Dribbble

Скелетные экраны

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

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

Скелетные экраны
Скелетный экран Medium.

Не используйте статические индикаторы прогресса

Эта группа индикаторов представлена статичным изображением или текстом вроде «Loading…» или «Please wait…», которые указывают на то, что запрос получен. И хотя любой фидбек лучше, чем никакого, статические индикаторы не дают достаточно информации о происходящем, их стоит заменить на более выразительный тип индикатора.

статические индикаторы прогресса
Избегайте статических индикаторов прогресса

И напоследок

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

Забавные анимации
Источник: dribble

Заключение

Предоставление фидбека — это фундамент позитивного опыта пользования при работе с продуктом. Отклик поможет избежать неопределенности, и повысит время, которое пользователь готов ждать.

Спасибо!