+7(343) 344-34-20
г. Екатеринбург, ул. Горького,
дом 65, офис 296
Online-заказ

«Что происходит?»: индикатор прогресса как важный элемент интерфейса

16 Июля 2018

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

Зачем это нужно?

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

Еще одно назначение индикатора прогресса – показать, что программа поняла команду и выполняет ее. При отсутствии указаний на это пользователь может только предполагать, почему ничего не происходит. А «зависнуть» может  и сайт, и компьютер, и смартфон. Наконец, скорость интернет-соединения может упасть до нуля. И вместо того, чтобы проверять все версии, человек, которому не так важно получить результат здесь и сейчас, просто закроет вкладку. Но если на время ожидания вывести на экран хотя бы самый простой индикатор, пользователь поймет: все работает, нужно только немного терпения.

Виды индикаторов прогресса

Поскольку внешний вид индикатора зависит только от фантазии дизайнера, разделим все возможные варианты на две группы по информативности:

  • Точные показатели. Это подсчет количества обработанных файлов или процента выполнения задачи. Как правило, такой индикатор похож на рассмотренные выше примеры из Windows и браузеров. Иногда строка состояния сопровождается меняющимися сообщениями, где указывается, какой этап работы выполняется сейчас. Преимущество таких индикаторов в том, что пользователи получают все нужные сведения в привычном формате. Недостаток – сложность реализации показа настоящих данных.
  • Без показателей. В этом случае используется разнообразная циклическая анимация, от классических кругов до перебежек по экрану смешных персонажей. Пользователь видит, что программа поняла запрос и запустила некий процесс, но не знает, как долго придется ждать результат. Такие индикаторы удобны, когда подсчитать время выполнения запроса невозможно, но не рекомендованы, если ждать нужно более 10 секунд. Также не стоит использовать круги, похожие на индикаторы операционных систем и браузеров, чтобы не создавать иллюзию проблемы с устройством и подключением.

Итак, если пользователям нужно ждать ответа в течение 2-10 секунд, можно использовать анимацию без вывода точных данных. Если предполагаемое время выполнения запроса может затянуться надолго, стоит сообщать обо всем происходящем.

Психологические уловки

Для индикаторов, как и для других элементов интерфейса, придуманы некоторые хитрости, создающие иллюзию ускоренной работы:

  • «Волна». Строка состояния заполняется как обычно, но по ней «текут волны» в обратном направлении. Визуально заполнение происходит быстрее, хотя технически все работает без изменений.
  • Искусственное распределение скорости. В одних случаях простой пользователь полагает, что система «сначала думает, потом выполняет». Например, это логично после ввода данных и отправки их на обработку. Здесь можно показать медленное выполнение первых этапов и ускорение к концу работы. Другая ситуация, когда данные вводятся параллельно обработке, как это происходит при прохождении опросов и тестов. Здесь ожидаемо, что замедление происходит по мере получения все большего количества информации. И индикатор прогресса можно настроить на показ ожидаемого процесса, а не происходящего в действительности.
  • Текстовые обновления. Как уже упоминалось, индикатор можно дополнить сообщениями о том, что происходит в текущий момент: «загрузка файла 1», «обработка файла 2» и т.п. Используется как техническая информация, так и поданная с юмором. Так создается иллюзия общения, а чтение интересных сообщений помогает скрасить ожидание.
  • Интересная анимация. Конечно, залюбоваться циклической анимацией можно только первые несколько раз, потом она станет привычной. Но замена стандартной «крутилки» на что-то более привлекательное продемонстрирует заботу о пользователях и сделает ожидание приятнее.

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

Вывод

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


«Что происходит?»: индикатор прогресса как важный элемент интерфейса

 
ссылка на эту статью:

Обратная связь

Нажимая "отправить" я соглашаюсь на обработку моих персональных данных
Положение об обработке персональных данных