Какого черта вы готовы довести до своих пользователей?

Конечно, вы хотите ответить: «Нет!» Но если вы разрабатываете веб-приложения, в какой-то момент вы заставите пользователей ждать результатов.

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

Ожидание - это боль. Никто не любит кататься на американских горках - это ожидание перед ними.

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

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

Вот 7 уровней индикатора прогресса ада от наименее болезненного до наиболее болезненного.

Первый уровень индикатора прогресса ада

Точное отображение прогресса

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

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

Второй уровень индикатора прогресса ада

Полу-точный индикатор прогресса

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

Например, вызов может занимать 20% времени, запрос - 70% времени, сортировка - 2% времени, а возврат - 8% времени. Пользователь проводит большую часть своего времени, глядя на полоску, заполненную на 20%, а затем внезапно она немного подпрыгивает и готово.

Третий уровень индикатора прогресса ада

Throbber с трюками восприятия

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

Утверждают, что субъективным временем не только легче всего манипулировать, но и самым важным. В конце концов, наше восприятие - это наша реальность. Нам не нужно делать компьютеры более быстрыми, чтобы они работали быстрее. «-« Крис Харрисон

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

Вот три моих любимых:

Уловка восприятия # 1: визуальное увеличение

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

UX-дизайнеры должны найти баланс между этой уловкой восприятия и дизайном приложения / бренда.

Уловка восприятия №2: текстовые обновления статуса

Предоставьте пользователю текст (правдивый или фальшивый) о статусе приложения.

Во многих случаях, если пользователи проинформированы, они могут быть более терпеливыми. Может быть полезно добавить дополнительную ясность, включив текст, который сообщает пользователю, что происходит, или объясняет, почему пользователь ждет . - Smashing Magazine

Adobe хорошо с этим справляется. Ознакомьтесь с разделом «Кисти для чтения…» ниже. (Adobe циклически перебирает десятки этих статусов в зависимости от того, сколько времени требуется для загрузки на компьютер пользователя.)

Уловка восприятия # 3: юмор

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

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

Четвертый уровень индикатора прогресса ада

Бесконечная полоса прогресса

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

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

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

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

Пятый уровень индикатора прогресса ада

Throbber

Вы видите это во всех программных приложениях.

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

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

Шестой уровень индикатора прогресса ада

Статический текст

Or:

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

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

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

Nielsen Norman Group говорит об этом лучше всего: Статические индикаторы прогресса: не используйте их.

Седьмой уровень индикатора прогресса ада

Ничего такого

Индикатора прогресса нет вообще.

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

Пример использования: индикатор выполнения подключений

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

Мы внедрили в заголовок индикатор выполнения в стиле YouTube, чтобы отображать ход выполнения пользовательского запроса к базе данных.

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

  1. Визуальное дополнение, соответствующее дизайну нашего бренда. Полоса появляется справа налево во время ожидания, а затем полоса быстро заполняется слева направо при загрузке. Анимация также происходит быстрее, чем предполагают настройки фреймворка по умолчанию (Bootstrap, я смотрю на вас), поэтому кажется, что это быстрее.
  2. Текстовые обновления статуса - мы отображаем пару десятков текстовых статусов («Подключение к базе данных», «Установление соединения» и т. д.). Они отображаются через случайные интервалы от 2 до 4 секунд, чтобы они казались реальными.
  3. Юмор. Если запрос занимает больше 12 секунд (неприятно, но иногда необходимо), наши текстовые обновления статуса становятся все смешнее и страннее. Мы надеемся, что запросы никогда не займут так много времени, но если это так, мы стараемся уменьшить беспокойство с помощью юмора.

Ожидание - это боль

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