UX Паттерн: Визуализация загрузки данных. Loader, spin, progress, skeleton – когда и как использовать

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

UX Паттерн: Визуализация загрузки данных. Loader, spin, progress, skeleton – когда и как использовать

Для того чтобы показать пользователю, что просидит загрузка или расчет, можно использовать различные элементы: loader, spin, progress, skeleton и другие варианты компонентов. В разных дизайн системах названия могут отличаться.

Компонент Loader и Spinner

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

Loader
Spin

Плюсы:

  • Дает явную обратную связь пользователю, что процесс загрузки данных или выполнения операции еще не завершен
  • Улучшает UX, позволяя пользователю знать, что приложение продолжает работать, даже когда не отображается контент
  • Может быть использован в различных ситуациях, например, при загрузке картинок, видео или скриптов, когда пользователь ждет завершения загрузки
  • Помогает предотвращать потерю клиентов, показывая пользователям, что приложение все еще работает

Минусы:

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

Пример:

Progress indicators – Material Design 3
Progress indicators – Material Design 3

Loader и Spin полезны для операций с серверной частью приложения или при выполнении асинхронных операций

Компонент Progress

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

Progress

Плюсы:

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

Минусы:

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

Примеры:

Progress indicators – Material Design 3
Progress indicators – Material Design 3
Progress indicators – Material Design 3

Progress подходит когда нужно показать пользователю конкретный прогресс выполнения задачи

Компонент Skeleton

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

Skeleton

Плюсы:

  • Улучшает восприятие процесса загрузки страницы
  • Позволяет пользователю видеть общую структуру страницы до загрузки основного контента
  • Улучшает пользовательский опыт

Минусы:

  • Не подходит для всех типов контента
  • Может замедлить загрузку страницы, если не оптимизировать правильно
  • Может создать ложное впечатление о скорости загрузки страницы, если скелетон остается на экране слишком долго

Примеры:

FB
FB
YT
YT

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

Дополнение

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

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

Поэтому интерфейс с загрузкой данных должен быть продуманным.

  • Подумайте как можно дать более точную оценку завершения процесса загрузки. И вообще можно ли это просчитать.
  • Объясните, почему пользователь ждет. (Загружено 6 из 10 файлов; Пожалуйста, подождите, пока мы рассчитаем ваши результаты; Пожалуйста, подождите, пока мы настроим ваш рабочий стол или собираем данные)
  • Не используйте анимацию, если страница загрузится менее чем за одну секунду. И при этом не зависима от скорости интернета или устройства.

Хороший интерфейс должен всегда информировать пользователей, что происходит с системой

Мой телеграм канал. Заходите, будем обсуждать и решать задачи по теме UX инженеринга.

DesignCode ❤

4141
8 комментариев

Мы слишком избалованны, загрузка в 1 секунду уже вызывает ярость

3
Ответить

Все правильно, к хорошему быстро привыкаешь

Ответить

Если перейти на статьи vc по ссылке, то отображается сразу два варианта загрузки данных, это скелетон для загрузки контента главной и спин для загрузки статьи

1) почему бы сразу на статью не отправлять и тем самым убрать лишнию загрузку контента главной страницы? @vc.ru

2) почему для главной скелетон, а для статьи спиннер?

1
Ответить

Согласен..

2
Ответить