Загрузчики сигнализируют о том, что в фоновом режиме происходит какой-либо процесс, и пользователю необходимо подождать его завершения. Особенно полезны они в ситуациях, когда пользователь может столкнуться с небольшой задержкой, например при загрузке веб-страницы, получении контента с сервера или во время выполнения приложением сложной задачи. Загрузчики ясно дают пользователю понять, что приложение не зависло и активно обрабатывает его запрос. Это улучшает пользовательский опыт, предотвращая путаницу и раздражение.
Неопределённый загрузчик
Неопределённые загрузчики — это зацикленные анимации, которые не показывают конкретный прогресс выполнения задачи. Используйте такие загрузчики для процессов длительностью менее 5 секунд. Не стоит применять их для более длительных процессов, так как продолжительная зацикленная анимация склонна раздражать пользователей.
Круговой загрузчик
Круговые загрузчики или спиннеры, являясь неопределёнными загрузчиками, эффективно подходят для задач длительностью от 1 до 5 секунд, сохраняя вовлечённость пользователя без чрезмерного вмешательства.
Тем не менее избегайте полноэкранных спиннеров, так как они не дают чёткого ощущения прогресса. Вместо этого вы можете использовать их в меньшем масштабе — встроенными рядом с компонентами, например строками таблиц или после нажатия кнопок.
Текстовый загрузчик
Текстовый загрузчик представляет собой короткую надпись, которая сообщает пользователю о текущем процессе загрузки. Он лучше всего подходит для процессов, которые занимают менее 5 секунд. Хотя сам по себе текстовый загрузчик может казаться простым, добавление небольшой анимации существенно повышает его визуальную привлекательность. Подумайте о включении ненавязчивых, но интересных анимаций — например, пульсирующих точек, прокручивающегося многоточия или плавного перехода цвета, чтобы сделать процесс загрузки динамичнее и менее монотонным. Убедитесь, что анимация дополняет общий дизайн и не затмевает текст.
Также помните, что текстовая надпись загрузчика не должна быть исключительно декоративной. Она должна информировать пользователя о том, что происходит или что будет дальше.
Определённый загрузчик
Определённые загрузчики показывают измеримый прогресс, предоставляя пользователю чёткое представление о завершении задачи. Обычно они имеют форму горизонтальной полосы прогресса или постепенно заполняющегося круга.
Используйте определённые загрузчики для задач с предсказуемой длительностью более 10 секунд, например для загрузки больших файлов. Оформляйте их с чёткой конечной точкой, позволяя пользователям легко отслеживать ход процесса. Также рекомендуется добавлять процентные обозначения для большей точности. Например, горизонтальная полоса может наглядно отображать прогресс загрузки файла, постепенно заполняясь по мере завершения процесса и сопровождаясь отображением процентов.
Совет! Если процесс загрузки занимает более минуты, уведомите пользователя о возможности покинуть страницу и вернуться позже, чтобы он мог переключиться на другие задачи.
Скелетон-загрузчик
Скелетон-загрузчики — это заполнители, имитирующие структуру контента во время его загрузки, снижая субъективное ощущение ожидания и уменьшая раздражение пользователей.
- Скелетоны изображений: Отображают размытое или упрощённое изображение, постепенно заменяемое реальным по мере загрузки.
- Скелетоны текста: Показывают блоки-заполнители, похожие на текст, постепенно наполняющиеся реальным контентом.
Рекомендуемая практика — загружать только тот контент, который непосредственно виден пользователю, подгружая остальной контент по мере прокрутки страницы, и использовать скелетон-загрузчики, чтобы обеспечить плавный пользовательский опыт во время такого перехода.
Совет! Нейтральные цвета, такие как светло-серый, отлично подходят для скелетон-загрузчиков.
Индикаторы прогресса внутри интерактивных элементов
Индикаторы прогресса внутри интерактивных элементов, таких как кнопки или иконки, обеспечивают немедленную обратную связь с пользователем, сообщая о том, что действие находится в процессе выполнения. Например, круговой индикатор может быть встроен в кнопку, чётко демонстрируя, что задача выполняется и кнопку нельзя повторно нажать до завершения процесса. Такая визуальная подсказка помогает пользователям понимать текущее состояние действия и избегать путаницы.
Эти индикаторы идеально подходят для коротких неопределённых процессов, длительностью от 2 до 5 секунд. Например, при отправке формы кнопка со вращающимся кружком может показывать, что отправка данных идёт. Это поддерживает чистоту интерфейса и обеспечивает прямую связь между действием и конкретным элементом, который обрабатывается.
Для более длительных процессов лучше подходят другие методы, такие как снэкбары или уведомления.
Размещайте загрузчики стратегически
Где лучше всего разместить загрузчики? Вот три варианта:
- Рядом с действием: Размещайте загрузчики непосредственно рядом или встроенными в кнопки или элементы, запускающие процесс, такие как кнопки отправки. Такое размещение напрямую связывает загрузчик с действием пользователя.
- Рядом с контентом: Располагайте их рядом или поверх контента, который загружается (например, изображений или текста), минимизируя путаницу.
- Центрированно или выровнено: Для полноэкранных загрузчиков размещайте их по центру страницы. Это подчёркивает, что вся страница находится в процессе изменения.
Независимо от выбранного вами размещения, убедитесь, что загрузчики находятся в пределах видимой области экрана пользователя, оставаясь заметными и информируя его о текущем процессе.
Создание кастомных загрузчиков
Загрузчики дают уникальную возможность повлиять на восприятие пользователями времени, уменьшая раздражение и улучшая общий опыт взаимодействия. Экспериментировать с анимациями, сохраняя при этом брендовый стиль, будет отличной идеей.
Чтобы разработать кастомный загрузчик:
- Решите, будет ли ваш загрузчик определённым, предоставляющим пользователям понятную конечную точку, или неопределённым, сигнализирующим о продолжающемся процессе.
- Определите подходящую продолжительность, сочетая необходимость оперативной обратной связи с естественным темпом задачи.
- Создайте анимации, соответствующие идентичности вашего бренда, поддерживая единый визуальный язык.
- Убедитесь, что загрузчик передаёт важную информацию о текущем процессе, используя элементы вроде полос прогресса или процентных индикаторов, если это применимо.
Протестируйте кастомный загрузчик в различных сценариях, соберите отзывы пользователей и проведите итерации, чтобы улучшить его эффективность и вклад в позитивный пользовательский опыт.