x
 
Валерий
26 июня 2012

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



Один из самых старых индикаторов загрузки выглядел как сменяющие друг друга символы \ | / - :

Индикатор загрузки MS-DOS

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

Этот приём был придуман в однозадачной среде: изменение символа было частью цикла работы программы, поэтому если программа висла, то «вращение» неизбежно прекращалось, и пользователь нажимал «Ресет».

А вот современная крутилка:

Крутилка

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

Тем не менее, она вполне уместна.

    Она используется также:
  • чтобы показать, что идёт фоновый процесс и результат ещё не достигнут (например, крутилка в Спотлайте означает, что ещё не все результаты поиска отображены, но ждать завершения нет смысла, если искомый объект уже найден);
  • когда процесс достаточно короткий, и более детальное представление не имеет смысла.

Для отображения степени завершённости часто используется прогрессбар. Классический экземпляр из Виндоуса 95:

Прогрессбар в Виндоусе 95

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

На Маке эту проблему решили изящнее — вода внутри закрашенной области течёт (причём влево, отчего создаётся впечатление, что правый её конец всё время двигается вправо):

Сафари скачивает Спотифай

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

Компактный родственник прогрессбара — закрашивающийся круг. Айтюнс скачивает Радио-Т:

Айтюнс скачивает Радио-Т

Прогрессбар не обязан быть «честными», то есть отображать реальный прогресс идущего процесса. Не могу не показать любимую картинку «из интернета»:

Айфон отправляет СМС

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

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

Если есть возможность хотя бы приблизительно предсказать, сколько осталось времени до конца длительного процесса, хорошо бы это сделать за пользователя. Однако важно сделать очевидным, что это приблизительное значение — когда оставшееся время непрерывно скачет между 32 мин 16 с, 30 мин 52 с и 33 мин 4 с, это не добавляет информативности. Следует честно писать, что осталось около получаса.

Процесс копирования файлов в Файндере на Маке:

Мак копирует файлы

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

Визуальные способы представления крутилок и прогрессбаров разнообразны. Во времена Флеша существовал целый жанр — прелоадеры. Вот, например, как загружался один из промо-сайтов Самсунга:

Прелоадер Самсунга

Здесь нестандартный элемент используется лишь для развлечения.

Но часто удаётся объединить индикаторы загрузки с имеющимися элементами интерфейса и сократить шум. Классический пример — прогрессбар в адресной строке Сафари:

Прогрессбар в Сафари

А вот иконка приложения «Дроплер» на время загрузки скриншота на сервер превращается в закрашивающийся круг:

Анимация Дроплера

Картинка — сама себе прогрессбар.

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

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

Поделиться
Отправить

Комментарии

Сергей Саржевский
26 июня 2012

В восьмом Виндоусе сделали ещё более продвинутое отображение копирования файлов.

Отображается не только скорость на текущий момент, но и строится красивый график.

Александр Савенков
26 июня 2012

Странно, что не упомянули это небольшое исследование: http://www.newscientist.com/…can-make-downloads-seem-quicker.html (http://www.newscientist.com/article/dn18754-visual-tricks-can-make-downloads-seem-quicker.html)

Дмитрий Черненко
26 июня 2012

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

Александр Дебкалюк
26 июня 2012

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

Свежий пример остроумного текста в индикаторе — Дропбокс. Cообщение появляется если на очень медленном интернете загружается очень большой объём данных.

Александр Павлов
26 июня 2012

Важный момент ещё, что индикатор стоит выбирать в зависомости от длительности процесса. Например, крутилку можно оставлять не более чем на 2 секунды. Про всё это неплохо Стивен Сеов написал в книге «Проектируем время»

Супрунюк Павел
26 июня 2012

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

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

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

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

Стасис Чепулис
27 июня 2012

Не забудем о простых текстовых индикаторах — словами («Загружена почти четверть», «Осталось 5 минут») и процентами (24%).

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

Евгений Арутюнов
28 июня 2012

Стасис, эта крутилка выглядит как нечто глючное или поломанное.

Иван Титов
29 июня 2012

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

«Сглаживающую» анимацию, которая будет успокаивать нервы пользователю и «экономить» его время, можно использовать и в долгих процессах. Но стоит отметить и обратную сторону медали. Например, в интерфейсе «Аэро» мне сразу не понравилось долгое и слишком эффектное появление и скрытие окошек:
1) при выборочном просмотре и скрытии картинок время анимации может быть больше, чем идентификация картинки;
2) при полупрозрачном наложении (несмотря на короткое время эффекта) мозг пытается анализировать увиденное на экране — и утомляется быстрее.

Роман Шавня
30 июня 2012

А вот, к примеру, Фликр показывает индикатор загрузки фотографии в фавиконке:

Сергей Якунин
12 июля 2012

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

Никита Дубровин
4 октября 2018

Нигде не встречал такого решения: циферки процентов внутри крутилки. Или внутри кругового прогрессбара (как при загрузке файлов в Хроме). Теоретически получается самый минималистичный вид, при котором виден и прогресс, и что комп не завис.

Наверняка уже где-то реализовано, просто не натыкался, да и не везде будет нужна такая штука.

Антон Иванов
28 декабря 2020

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

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

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

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

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

Вот такой веб 2.0.

Как правильно в мобильных приложениях ставить ссылки? 1 1 2 Я не понимаю, как должен быть устроен мир — в смысле сохранения предпочтений 2




Недавно всплыло

1 Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1 Как следует поступить дизайнеру, если клиент постоянно вспоминает «нечто очень важное» 7 Все уже успели заметить, что вы почти во всех пятничных примерах советуете немного поунижаться 12