Зачем на самом деле нужен прелоадер на сайте

Прелоадер — философия в круге

Сегодня мы поговорим про маленькую, но неотъемлемую деталь практически любого веб-сайта — прелоадер, он же спиннер, значок загрузки страницы. Ахтунг, многабукав.

Главная причина, почему создаются очереди — ограниченная пропускная способность. Будь то пропускная способность тетеньки на кассе, МКАДа или протокола HTTP.

Не ждите, что загрузится картинка!

Ценности века

Собственно, сегодня превыше всего ценятся две «вещи»: ~~айфоны 5S~~ информация и время. Логично, что доступ к первой ценности не должен отнимать много второй. Другими словами: интернет должен работать быстро.

Но пока интернет-провайдеры меряются мегабитами в секунду, «тяжелеет» и контент. И это правильно, но, как понимаете, чревато проблемами со скоростью. Фактором может быть что угодно: от вялого хостера до старого браузера пользователя.

Как дать пользователю счастье, если на загрузку странички нужно время? Подарить ему универсальную игрушку-погремушку — лоадер.

Гражданин, здесь живая очередь!

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

Вероятно, многих смутит то, что термины «прогресс-бар» и «прелоадер» в статье фактически приравнены по смыслу. На самом деле так и есть, и любой прогресс-бар вовсе не сообщает пользователю: «смотри, загрузка завершена на 50%, файл качался 29 секунд, тебе нужно подождать еще 29 секунд и всё будет!». Он просто дает сферический процент, который намекает: «Ну вот, часть операции сделана. Когда-нибудь мы закончим всю. Не знаю, когда. А покажу-ка я тебе вот эти успокаивающие цифры».

Давайте зададимся справедливым вопросом: для чего вообще нужно что-то показывать пользователю? Очевидных задач как минимум две.

Зачем нужны прелоадеры

Первая задача: показать стабильность

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

Зачем все эти приблуды конечному пользователю? В транспорте он вполне может смотреть кино на планшете, есть рыбу/курицу, читать книгу или видеть сны.

Типичный вид из иллюминатора, вопреки ожиданиям. И так 8 часов.

А пока устанавливается GTA — сходить покурить или ужин приготовить. Давайте так и сделаем?

— Нет? Вам так некомфортно?

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

То же самое и с лоадером: фактически вы можете не знать, сколько еще минут (часов?) продлится распаковка архива, но вот на экране уже половина этой синей «колбасы», а значит, всё не так уж плохо!

Задача номер два присуща и прогресс-барам и прелоадерам. Она их объединяет. И он куда важнее первой.

Вторая задача: занять и развлечь пользователя

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

Ожидание никто не любит

Поэтому был пущен в ход этот очевидный и бесхитростный прием — создать хоть какую-то движуху на сайте, пока на нем «внешне» ничего не происходит.

О природе прелоадера

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

Почему прелоадеры преимущественно круглые? Объяснение очевидное, но оттого не менее занятное:

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

Вспомните, как курсоры в MacOS и Windows предлагают вам расслабиться и подождать.

Всё просто. Главное целевое назначение прелоадера — занять и развлечь скучающего пользователя, смягчить его раздражение.

Примеры интересных прелоадеров

По сути, в том же Google Chrome есть значок прелоадера, находится он на вкладке страницы вверху. Однако веб-технологии позволяют подгружать контент без обновления страницы — в таком случае можно сделать интресный индикатор прямо, скажем, в каталоге.

Если на самом сайте использована куча интересных технологий и для их загрузки нужно время — можно сделать прелоадер на стартовом экране. Да, как во времена бума flash-игр, но только на кошерном HTML5. Пример с нашим vekaslide.ru

Еще несколько ссылок на необычные прелоадеры из бессмертной рубрики «Сайты дня» (#SOTD в нашем твиттере):

И немного ностальгии по веб-технологиям на заре века: