UX Паттерн: Визуализация загрузки данных. Loader, spin, progress, skeleton – когда и как использовать
В разработке веб-приложений, особенно тех, которые работают с большим объемом данных, необходимо уделить внимание UX процессу загрузки данных. Пользователь не должен ощущать задержек в работе приложения и должен получать максимально быструю и понятную обратную связь от системы.
Для того чтобы показать пользователю, что просидит загрузка или расчет, можно использовать различные элементы: loader, spin, progress, skeleton и другие варианты компонентов. В разных дизайн системах названия могут отличаться.
Компонент Loader и Spinner
Компонент представляет собой анимированный индикатор, который показывает, что процесс загрузки данных или выполнения операции еще не завершен. Loader может быть представлен в виде крутящегося круга, полосы прогресса, троеточия или иной анимации. Он часто используется для отображения загрузки контента, например, изображений, видео, стилей или скриптов, когда пользователь ждет завершения загрузки.
Плюсы:
- Дает явную обратную связь пользователю, что процесс загрузки данных или выполнения операции еще не завершен
- Улучшает UX, позволяя пользователю знать, что приложение продолжает работать, даже когда не отображается контент
- Может быть использован в различных ситуациях, например, при загрузке картинок, видео или скриптов, когда пользователь ждет завершения загрузки
- Помогает предотвращать потерю клиентов, показывая пользователям, что приложение все еще работает
Минусы:
- Может вызывать недовольство пользователей, если загрузка занимает слишком много времени
- Необходимо обеспечить точность оценки времени завершения процесса загрузки, чтобы пользователи не тратили свое время впустую
- Необходимо объяснять, почему пользователю приходится ждать загрузки данных, чтобы избежать снижения лояльности клиентов
Пример:
Loader и Spin полезны для операций с серверной частью приложения или при выполнении асинхронных операций
Компонент Progress
Progressline представляет собой горизонтальную полосу прогресса, которая показывает пользователю процент выполнения операции или загрузки данных. Она используется для отслеживания прогресса и предоставления визуальной обратной связи пользователю о текущем статусе задачи. Progressline часто используется в случаях, когда операция занимает длительное время, например, при загрузке больших файлов, выполнении сложных задач или обновлении данных.
Плюсы:
- Позволяет отслеживать прогресс выполнения операции или загрузки данных и предоставлять визуальную обратную связь пользователю о текущем статусе задачи
- Улучшает UX, позволяя пользователю знать, сколько времени еще осталось до завершения операции
- Помогает предотвращать потерю клиентов, показывая пользователям, что приложение все еще работает
- Легко воспринимается пользователем
Минусы:
- Не подходит для быстро выполняющихся операций, когда процент выполнения быстро меняется
- Необходимо обеспечить точность оценки времени завершения процесса загрузки, чтобы пользователи не тратили свое время впустую
- Необходимо объяснять, почему пользователю приходится ждать загрузки данных, чтобы избежать снижения лояльности клиентов
- Может занимать много места на экране, особенно если операция занимает длительное время
Примеры:
Progress подходит когда нужно показать пользователю конкретный прогресс выполнения задачи
Компонент Skeleton
Skeleton — это компонент, который представляет собой временное заполнение контента, такие как текст или изображение, и позволяет пользователям видеть общую структуру страницы или компонента до полной загрузки данных. Скелетон отвлекает внимание от количества времени, которое вы ждете. И поскольку он показывает, что загрузилось и что осталось, он позволяет пользователю точно строить ожидания от пользовательского интерфейса.
Плюсы:
- Улучшает восприятие процесса загрузки страницы
- Позволяет пользователю видеть общую структуру страницы до загрузки основного контента
- Улучшает пользовательский опыт
Минусы:
- Не подходит для всех типов контента
- Может замедлить загрузку страницы, если не оптимизировать правильно
- Может создать ложное впечатление о скорости загрузки страницы, если скелетон остается на экране слишком долго
Примеры:
Скелетон лучше использовать когда загружается новый слой в приложении давая пользователю представление о том, как будет выглядеть окончательный результат
Дополнение
С одной стороны компоненты полезны для информирования пользователю, что данные загружаются.
Но так же это он может вызвать плохую обратную связь. Пользователи могут не понимать, почему загрузка занимает столько времени, и могут начать искать альтернативы, что в итоге может привести к потере клиентов.
Поэтому интерфейс с загрузкой данных должен быть продуманным.
- Подумайте как можно дать более точную оценку завершения процесса загрузки. И вообще можно ли это просчитать.
- Объясните, почему пользователь ждет. (Загружено 6 из 10 файлов; Пожалуйста, подождите, пока мы рассчитаем ваши результаты; Пожалуйста, подождите, пока мы настроим ваш рабочий стол или собираем данные)
- Не используйте анимацию, если страница загрузится менее чем за одну секунду. И при этом не зависима от скорости интернета или устройства.
Хороший интерфейс должен всегда информировать пользователей, что происходит с системой
Мой телеграм канал. Заходите, будем обсуждать и решать задачи по теме UX инженеринга.
DesignCode ❤
Мы слишком избалованны, загрузка в 1 секунду уже вызывает ярость
Все правильно, к хорошему быстро привыкаешь
Если перейти на статьи vc по ссылке, то отображается сразу два варианта загрузки данных, это скелетон для загрузки контента главной и спин для загрузки статьи
1) почему бы сразу на статью не отправлять и тем самым убрать лишнию загрузку контента главной страницы? @vc.ru
2) почему для главной скелетон, а для статьи спиннер?
Согласен..
@Сломалось