Бесконечный скролл в интернет-магазине

Бесконечный скролл – отложенная загрузка элементов страницы. По-английски техника называется lazy load, «ленивая загрузка». Здесь собраны ссылки на 15 красивых сайтов с бесконечным скроллом. А здесь есть ссылки на плагины и код, который позволяет реализовать бесконечный скролл (равно как и отложенную загрузку картинок, CSS и Javascript).

В своей статье Infinite Page Scrolling – How it Affects Users & Conversions Дэвид Мертон (David Murton), разработчик и веб-маркетолог со стажем, приводит пару главных преимуществ бесконечного скролла:

1. пользователь не теряется во множестве страниц, по которым ему приходится «прыгать» при изучении контента (каталога товаров) на сайте с постраничной разбивкой;
2. (отложенная) загрузка одной бесконечно длинной страницы занимает гораздо меньше времени, чем загрузка нескольких страниц.

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

В той же статье Дэвид выделяет и пару недостатков отложенной загрузки:

1. посетитель не имеет возможности в один клик вернуться к определенному блоку товаров;
2. старые версии браузеров могут не выдержать нагрузки, производимой бесконечным скроллом.

Например, если в категории присутствует 300–500 товаров, и покупатель полностью, «до дна» просматривает ее, возврат к первому-третьему-пятому десятку товаров подразумевает либо долгое кручение колеса мыши, либо десяток кликов по полосе прокрутки, либо манипуляции с ползунком на той же полосе. Браузер, в свою очередь, может закрыться без предупреждения, так как бесконечный скролл требует загрузки большего объема данных, чем постраничная навигация. Кроме того, некоторые мобильные браузеры просто неспособны корректно обрабатывать отложенную загрузку.

В том, что касается влияния бесконечного скролла на SEO, единого мнения все еще нет. Кто-то заявляет, что роботы просматривают страницы сверху вниз, и если контента слишком много, «низы» не будут проиндексированы. Есть и другое мнение: бесконечный скролл не имеет никакого отрицательного влияния на поисковую оптимизацию.

В материале Infinite Scrolling Best Practices, опубликованном на посвященном юзабилити ресурсе UXMovement, предлагаются методы улучшения бесконечного скролла.

1. Закрепление блока с меню/каталогом.

Бесконечный скролл позволяет посетителю «зарыться» очень глубоко, и если меню/каталог интернет-магазина доступны только над разворотом (в области, видимой сразу после загрузки страницы), для перехода в другую категорию пользователю придется прокручивать страницу до самого верха. Закрепление блока с навигационными ссылками – сверху, сбоку, или снизу – решает эту проблему. Неважно, насколько далеко покупатель прошел в категории, он сможет перейти в другую без особого труда.

2. Отображение объема загружаемого контента и текущего положения.

Например, в категории у вас 500 товаров, единовременно на страницу категории с бесконечным скроллом выгружается по 50 карточек. Как только посетитель достигает дна страницы и (по клику или без него) сервер начинает отдавать следующие 50 элементов, можно выводить на экран справочную информацию: «Загружаются карточки 50–100 из 500». Обозначение общего количества товаров в категории и показатель прогресса поможет удержать на странице пользователей, которым просто необходимо видеть четкие рамки и понимать, сколько времени может занять завершение начатого процесса. Текущее положение – «Карточки 50–100» – можно оставлять в зоне видимости посетителя как дополнительный ориентир.

3. Использование кнопки «Дальше…»

Кнопка «Дальше…» – компромисс между постраничной навигацией и бесконечным скроллом в чистом виде. Без нее, загрузка следующей пачки элементов страницы начинается автоматически, по достижении посетителем определенного рубежа. С кнопкой «Дальше…» загрузка инициируется кликом по ней. Пример реализации «чистого» бесконечного скролла – страница с постами друзей на Фейсбуке; (организация признана экстремистской, деятельность на территории РФ запрещена) пример использования кнопки «Дальше…» – поиск картинок на Google (сайт нарушает закон РФ). С одной стороны, без кнопки навигация по категории может сводиться к кручению колесика мыши. С другой стороны, кнопка «Дальше…» дает пользователю больше контроля над процессом.

4. Кнопка возврата к предыдущей точке загрузки контента

Контент – с кнопкой «Дальше…» или без нее – загружается на «бесконечную» страницу порциями (см. пример с 50 карточками в п. 2). Эту особенность технологии можно использовать для улучшения юзабилити интернет-магазина. Закрепленная в видимой области кнопка «Выше…» позволит посетителю возвращаться к началу порции без лишнего напряжения.

Бесконечный скролл, отложенная загрузка контента – относительно новые находки в веб-разработке. Обратите внимание, ни нам, ни авторам упомянутых выше статей не удалось найти именно интернет-магазин, в котором был бы реализован бесконечный скролл. Тем не менее, на основании изложенных аргументов и предложенных улучшений можно утверждать, что техника действительно применима в электронной коммерции. Facebook (организация признана экстремистской, деятельность на территории РФ запрещена), Twitter и Google (сайт нарушает закон РФ) используют отложенную загрузку в том или ином виде. Совсем не исключено, что завтра бесконечный скролл станет нормой в интернет-магазинах. Вы готовы быть в первых рядах?