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

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

Бесконечный скролл – отложенная загрузка элементов страницы. По-английски техника называется 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 (сайт нарушает закон РФ) используют отложенную загрузку в том или ином виде. Совсем не исключено, что завтра бесконечный скролл станет нормой в интернет-магазинах. Вы готовы быть в первых рядах?

Автор: Антон Терехов

Читайте также

20 марта / Комментарии

Товарная автоматизация для маркетплейса на 30+ брендов

G-shopping.ru – это российский маркетплейс современных товаров для красоты, здоровья и удобного отдыха. Маркетплейс работает одновременно как магазин оптовой и розничной торговли и продает товары напрямую от производителей. У компании также есть собственные производственные линии. Поэтому основным требованием при разработке программных продуктов была настройка плавного автоматизированного процесса загрузки больших каталогов товаров, сегментированных на категории, а также наличие инструментов для управления запасами. С такими задачами клиент обратился к нам, в Simtech Development

далее →

21 февраля / Комментарии

Перенос сайта на платформу InSales: выгоды и преимущества

От CMS зависит очень многое: функциональность сайта, стабильность его работы, удобство взаимодействия с пользователями. Однако сделать правильный выбор не так легко. В этом материале рассмотрим выгоды, преимущества платформы и 8 причин, чтобы перенести сайт на InSales.

далее →

6 декабря 2021 / Комментарии

Шесть историй о том, как облачный хостинг помог бизнесу вырасти

Simtech Development работает на рынке разработки и поддержки ПО для электронной коммерции больше 15 лет. Наше решение для eCommerce хостинга  — это больше, чем просто хранилище для сайта. В этой статье мы расскажем о нескольких случаях, когда работа наших хостинг экспертов не только превзошла ожидания клиентов, но и внесла весомый вклад в развитие их онлайн-бизнеса.

далее →

30 ноября 2021 / Комментарии

InSales – платформа управления онлайн-торговлей: преимущества, тарифы и планы по развитию

InSales – единый инструмент для всех каналов интернет-продаж, где можно создать сайт интернет-магазина, продавать на всех маркетплейсах, через социальные сети и мессенджеры. Платформа InSales обеспечивает полное техническое сопровождение продаж в e-commerce. Уже 13 лет компания помогает начинающим предпринимателям и офлайн-бизнесам продавать онлайн.

далее →

21 октября 2021 / Комментарии

В Google рассказали, как создать идеальное приложение для пользователя

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

далее →