Время чтения: 7 минут

Как правильно использовать индикаторы прогресса на сайте, скрашивая ожидание пользователя

Зачем нужен индикатор прогресса на сайте

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

Зачем нужны индикаторы прогресса?

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

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

На скорость обработки задач влияют разные факторы:

  • медленный интернет;
  • слабые характеристики устройства;
  • сложность запроса.

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

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

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

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

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

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

Разновидности индикаторов прогресса

Графическое отображение процесса выполнения задачи может выглядеть по-разному. Но все виды индикаторов Николай делит на типы:

  1. Неопределенные. На экране показано, что задача получена, процесс выполняется. Но пользователь не может по индикатору определить, сколько времени осталось.
  2. Определенный. Более информативная форма, которая дает представление о времени окончания процесса. Подразделяются на приблизительные, где прогресс можно определить только визуально, и точные, с указанием процентов.

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

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

Николай предложил базовое правило: «Если действие занимает более 10 секунд – на экране его должен сопровождать процентный индикатор процесса».

При этом свои тезисы он подкрепляет ссылкой на исследование Якоба Нильсена, которое как раз и посвящено реакции пользователей на время ожидания.

Процесс зависший на 99% - кошмар пользователя.

Если длительное ожидание заканчивается «зависанием» на 99%, негативный эффект будет еще больше.

Советы по использованию индикаторов прогресса

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

  1. Рассказывать какие конкретно действия выполняются.
    Например, текстовое сообщение «ищем подходящие варианты» добавляет определенности.
  2. Давать приблизительное время окончания.
    «До конца установки осталось 12 минут».
  3. Показывать, сколько уже выполнено на фоне общего объема.
    Разбить весь процесс на этапы и указывать что-то вроде «Шаг 9 из 14 завершен».
  4. Отвлекать пользователя от факта ожидания.
    Креативные и веселые прогресс-бары сглаживают негативный эффект.

Кроме того, Николай предостерегает от неправильной визуализации процессов. Индикатор прогресса создает ощущение выполнения и поэтому:

  1. Ни в коем случае не должен разочаровать пользователя внезапно зависнув на 99%.
  2. По мере выполнения задачи, визуализация должна ускоряться, чтобы появился эффект скорости.

Альтернатива традиционным шкалам прогресса

Как бы ни был хорош индикатор процесса в приложении или на сайте, он все равно остается наглядным сигналом ожидания и беспокоит посетителя.

Поэтому современные тенденции дизайна постепенно переориентируют пользователей и владельцев сайтов на использование «скелетонов».

Новая техника предполагает постепенное выведение контента на странице, начиная от «скелета» и заканчивая «тяжелым» содержимым.

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

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

Посмотреть примеры разных видов индикаторов прогресса и ознакомиться с выводами можно по ссылке.

Оцените статью:
Понравилась 0
Не понравилась 0
Автор: Артём Шаманский / Создатель проекта

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

Нам интересно ваше мнение, напишите комментарий:

Нажимая на кнопку «Отправить», я даю согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности».

Обмен мнениями и отзывы о публикации
  • raiseskills / 28.01.2017
Подпишитесь на рассылку блог-оптимизатора.рф

Уже подписались 801 человек