Chulakov Design

Please stand by

Скорость Интернета за последние 15 лет выросла в десятки раз. Это развязало руки дизайнерам в плане проявления своего богатого внутреннего мира. Никого уже не удивит рассчитываемый в реальном времени 3D-объект или 4k-видео в потоковом режиме.

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

0. Никакой

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

Бывает такое, что жмете по ссылке — экран гаснет и становится пустым. Вы сидите и гадаете: страница грузится, или что-то пошло не так? Может, обновить страницу? Или подождать? О, вот что-то появилось!

1. Спиннеры

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

2. Прогресс-бар

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

3. Скелетоны

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

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