Прелоадеры/ индикаторы загрузки

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

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

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

Одно из первых упоминаний об индикаторах загрузки появилось в статье о Нильсене Нормане в 1993 году с ссылкой на ресурс 1985 года: «В тех случаях, когда компьютер не может обеспечить достаточно немедленный ответ, непрерывная обратная связь должна предоставляться пользователю в виде индикатора процента выполнения (Myers 1985, «Важность процентных индикаторов прогресса для интерфейсов компьютер-человек»)».

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

1. Показывают рабочее состояние сайта

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

2. Привлекают внимание

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

3. Придают более профессиональный вид

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

4. Снижают процент отказов

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

5. Работают на узнаваемость бренда

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

Прелоадеры могут быть определенными и неопределенными.

Определенные демонстрируют время операции и могут показывать процент ее выполнения.

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

Спиннер или Циклическая анимация

Наиболее знакомый нам вид прелоадера — спиннер (spinner). Его применяют, когда время загрузки не определено. Как правило, спиннер представлен в виде анимированного непрерывно вращающегося круга. Важно: циклическую анимацию следует использовать только для быстрых операций (2-3 секунды). Если спиннер задержится на экране дольше, это может увеличить процент отказов. Никому не интересно долго смотреть на вращающийся круг.

Прогресс-бар или Линейная анимация

Этот вид индикатора загрузки представлен в виде горизонтальной полосы. Если она отображает процент выполнения операции от 0% до 100% — это просто линейная анимация. Если же процент не указан, такой вид линейной анимации называется прогресс-бар. Они используются, когда ожидание длится продолжительное время и демонстрируют прогресс конкретной задачи: загрузка большого файла, обновление данных.

Скелетный экран

Данный прелоадер представляет пустую версию страницы, которая постепенно загружается элементами контента — Скелет страницы (Skeleton). Впервые этот термин появился в статье Люка Вроблевского в 2013 (Mobile Design Details: Avoid The Spinner, 2013). В этом случае акцент делается на структуре страницы, а не на самом процессе загрузки.

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

1. Объясните причины задержки

Расскажите пользователю, почему ему нужно ждать. Мы переносим ожидание легче, когда знаем, почему ждем. Вы можете добавить в прелоадер информацию о том, что происходит во время загрузки. Это могут быть короткие сообщения: «Поиск рейсов», «Обработка данных», «Загружено 2 из 5 файлов» и т.д. Когда пользователь понимает, какая операция выполняется, он меньше волнуется.

2. Сделайте ожидание более интересным

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

3. Указывайте, сколько времени осталось

Если процесс загрузки занимает продолжительное время (3-10 секунд), стоит показать пользователю, сколько времени осталось до конца ожидания. Если время выполнения операции неизвестно заранее, просто покажите прогресс загрузки при помощи прогресс-бара. Когда человек видит, что ожидание скоро закончится, он меньше беспокоится. Также вы можете добавить фразы, которые обозначают время ожидания: «Обработка файлов займет не более 2 минут».

4. Расскажите пользователям о бренде

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

5. Вдохновляйте

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

Netflix

Использование заставки-бренда в качестве прелоадера известного всем сервиса для просмотра фильмов и сериалов.

Scheele green

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

Duolingo

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

Figma

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

Genshin Impact

Мобильная игра Genshin Impact оказывается намного более сложной, чем можно было бы ожидать от игры, предназначенной для iPhone. Игрокам постоянно приходится улучшать навыки и осваивать новые. В связи с тем, что игра занимает значительный объем памяти на мобильном устройстве, на загрузку требуется некоторое время. В качестве прелоадеров Genshin Impact выступают советы и подсказки. Вы можете легко прочитать один совет и, нажав на кнопку, перейти к следующему.

Hinge

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

Makepill

Пример творческого и современного подхода к созданию прелоадеров — начальный экран загрузки Парижского агентства по проектированию веб-сайтов, приложений, программ и других интерактивных цифровых продуктов. Индикатор загрузки соединяет в себе несколько элементов: прелоадер в виде таблетки с названием компании и надписью «Loading, Crafting pills»; в правом нижнем углу указан процент загрузки. В левом нижнем углу — фраза, которая не объясняет причину ожидания, а работает на брендинг «Just a second, we're crafting some pills» (Секунду, мы создаем таблетки).

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