Как устранить негативный эффект долгой загрузки при помощи прогресс-индикаторов? Какой индикатор загрузки выбрать.

Анимированные прелоадеры используются разработчиками при загрузке веб-приложений, данных веб-страниц через Ajax. Иногда возникает желание использовать вместо стандартной скучной картинки нечто более оригинальное. Если вам необходим анимированный GIF или PNG (APNG) прелоадер (индикатор) подгрузки loading.gif советую обратить внимание на интернет сервис . Раньше приходилось прикладывать немалые усилия, чтобы найти подходящие файлы изображений, подобных сервисов, в принципе не так много, поэтому появление еще одного проекта, безусловно плюс для дизайнеров и разработчиков.

Итак, рассмотрим более детально Preloaders - бесплатный генератор GIF и APNG прелоадеров, отображающих процесс загрузки. Причем генератор максимально простой и очень удобный. Сразу попадая на страницу вы увидите, что все картинки-загрузчики удобно отсортированы по категориям - 3D, смайлики, знаки зодиака, люди, знаки религий, астрономия и прочее. Вы можете обнаружить даже категорияю «Социальные сети». По сегодняшним временам вещь практически незаменимая. Кстати, кроме категорий есть возможность посмотреть наиболее поплярные анимированные картинки или 10-тку последний.

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

Тип изображения (формат - gif или apng);
Цвет самого подзагрузчика/заднего фона (выбирается с помощью удобной «палитры»), а также прозрачность;
Скорость анимации;
Размер изображения (в том числе, поддерживается разрешение 128х128 пикселей);
Некоторые дополнительные «эффекты» (инвертирование цвета, отражение фона, обратная анимация и прочее).

Уникальная особенность сервиса Preloaders.net заключается еще и в том, что если вы не найдете в базе необходимый подгрузчик, вы можете его заказать! Для этого нужно перейти в раздел «Заказать новый» и заполнить простейшую форму:

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

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

Прогресс-индикаторы внедряются с целью своевременного предоставления обратной связи о функционировании системы/интерфейса. Согласно теории интеракции Нормана (Norman"s interaction theory), эти элементы также должны помогать юзерам оценивать состояние системы.

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

Сегодня мы предлагаем вашему вниманию перевод статьи Кейти Шервин (Katie Sherwin), специалиста юзабилити NNG (Nielsen-Norman Group, группа Нильсена-Нормана), в которой она рассказала о различных типах индикаторов прогресса и представила рекомендации по их применению.

Сила обратной связи — дайте пользователям почувствовать, что вы их слышите

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

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

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

В качестве примера обратной связи о состоянии системы Кейти рассказала о своем звонке в Калифорнийский департамент транспорта (DMV, Department of Motor Vehicles):

Предсказуемо, Шервин осведомили, что все операторы заняты.
Через несколько минут было включено сообщение о том, что Кейти все еще на линии.
Следующая запись гласила, что примерное время ожидания составляет 15-20 минут — это позволило специалисту NNG заняться своими делами без опасения пропустить очередь.
По истечении 15 минут Кейти было предложено оставить контактный номер, чтобы оператор смог связаться с ней, когда освободится. Более того, Шервин уверили, что она не потеряет свое место в очереди.

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

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

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

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

Целью одного из исследований, проведенных в университете Небраски-Линкольна (University of Nebraska-Lincoln), было определение времени, на протяжении которого пользователи готовы ждать загрузки сайта. Одной группе респондентов была представлена версия страницы с индикаторами прогресса (анимированной полосой загрузки), а второй — без.

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

Анимированные индикаторы загрузки

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

Расположенность пользователей к ожиданию загрузки определяется несколькими факторами:

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

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

Всегда отображайте некую обратную связь

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

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

Отображайте прогресс любого процесса, тянущегося дольше 1 секунды

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

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

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

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

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

Добавление к индикаторам текстовых обозначений (например, «Загрузка комментариев») также может увеличить их эффективность.

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

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

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

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

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

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

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

Настройте анимацию так, чтобы индикатор начал заполняться медленно, а по мере приближения к завершению загрузки скорость увеличивалась — это не создаст у посетителей завышенных ожиданий касательно производительности сайта. Всегда лучше превзойти ожидания клиентов, нежели разочаровать их.
Стоит заметить, что эта рекомендация актуальна только для индикаторов загрузки — исследования показали, что прогресс-индикаторы опросов, скорость заполнения которых снижается по мере прохождения, понижают показатель отказов.
Указывайте примерное, не точное время ожидания — в некоторых случаях, загрузка наверняка продлится дольше указанного времени, что негативно повлияет на доверие потребителей.
Простого текста вроде «Это займет примерно минуту» или «Осталось примерно 3 минуты» достаточно для информирования и удержания пользователей. Также добавляйте к указанному значению нескольких лишних секунд на случай непредвиденных задержек.
Вместо отображения общего прогресса, в некоторых случаях оптимально отображать количество выполненных и оставшихся этапов — посетители не будут точно знать, сколько займет выполнение того или иного шага, однако количество этапов поможет им сформировать примерное представление и привлечет к завершению процесса или ожиданию его окончания.

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

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

Текст предупреждения: «Не кликайте дважды!».

В ходе исследования «Дети во Всемирной сети» (Children on the Web), специалисты NNG столкнулись с множеством долго загружающихся интерактивных инструментов и игр.

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

Кейти представила несколько советов о том, как сохранить интерес юных пользователей, не отвлекая их от основного занятия:

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

Заключение

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

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

Эффективные прогресс-индикаторы располагают пользователей к ожиданию и положительно влияют на впечатление о сайте/приложении.

Такой стильный стрелочный дисплей служит для представления данных о работе серверов. Он отображает процент загрузки процессора, оперативной памяти и жестких дисков компьютера. Данные показываются с помощью трех аналоговых приборов стрелочного типа — вольтметров постоянного тока на 10 В (или любые подходящие, подобрать сопротивление для полного отклонения стрелки не проблема). За контроль над работой системы отвечает модуль Raspberry Pi Zero вместе с системой, состоящей из двух операционных усилителей LM358, питаемых от повышающего преобразователя 5>12 В (готовый модуль с Али).

Электрическая схема

Схема ЦАП на ОУ 358

Для того, чтобы подключить к выходам вольтметры, нужна простая программа, написанная на языке Python, которая генерирует три сигнала ШИМ, пропорционально нагрузке данного элемента контролируемого сервера. Схема на ОУ — аналоговый преобразователь сигнала ШИМ напряжения.

Плата с деталями — 2 LM358

ЦАП преобразует сигнал ШИМ с амплитудой 3,3 В поступающий с Raspberry Pi в напряжение в диапазоне от 0 до 10 В. аналоговые Выходы — 1, 2 и 3 — подключены непосредственно к датчикам на панели, а входы ШИМ — 1, 2 и 3, подключенные к контроллеру.

Конструкция индикатора

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

Рисунки новой шкалы индикаторов

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

Шкала вольтметра

Вид готового устройства

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

Готовый индикатор — 3 шт.

Все питается одним общим напряжением 5 Вольт с блока питания ПК. С одной стороны, оно питает Raspberry Pi Zero, а с другой — через преобразователь на 12 Вольт — схему аналогового генерирования напряжения управления от 0 до 10 В для стрелочников. Схема и прошивка МК не приводится — так как это уже отдельная история…

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

Спиннеры не для длительной загрузки

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

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

Правило четырех секунд

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

Когда использовать спиннер

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

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

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

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

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

Как оформить полосу загрузки

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

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

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

Не злоупотребляйте спиннерами

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

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

Перевод — Дежурка