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

Posted on by riasevastopol

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Как оптимизировать юзабилити иконок интерфейса?

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

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

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

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

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

Неизменно отображайте некую обратную сообщение

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

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

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

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

Потом мы ознакомимся с рекомендациями и разными типами индикаторов по их применению.

  • Секреты юзабилити: анимация для понимания и внимания

1. Циклическая анимация

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

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

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

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

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

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

  • Низкая скорость загрузки страниц = низкая конверсия

2. Процентные индикаторы

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

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

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

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

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

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

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

3. Статичные прогресс-индикаторы

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

4. Предупреждения

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

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

Советы ресурсам, целевой аудиторией которых являются дети

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

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

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

  • Неизменно применяйте заметные процентные индикаторы, дабы детям было ясно, что совокупность грузится. Дети, как и взрослые, желают знать, трудится ли совокупность и как продолжительно она будет грузиться.
  • Убедитесь в том, что промежуточная анимация не заслоняет индикатор и не похожа на игровой процесс.
  • Применяйте увлекательные и простые анимации, релевантные главной активности — таковые самый действенны для облечения ожидания и удержания внимания.
  • Юзабилити для самых мелких, либо Как создать веб-ресурс, что понравится детям?

Заключение

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

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

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

Высоких вам конверсий!

По данным nngroup.com

Случайные статьи:

Зависает рендер в Sony Vegas


Подборка похожих статей:

riasevastopol

More Posts