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

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

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

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

Подписаться на новости

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

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

Почему использовать CMS для разработки розничных ИМ в В2В-бизнесе – это очень плохая идея

В этой статье мы попробуем объяснить вам, почему использовать В2С-платформу в В2В-бизнесе — это очень плохая идея.

далее →

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

Реальный e-commerce. Открываем интернет-магазин автозапчастей

Какие особенности рынка следует учитывать при выборе платформы и разработчика для вашего интернет-магазина? Почему универсальный инструментарий и традиционные подходы оказываются малопригодными? Отвечают руководители компаний-разработчиков платформ для интернет-магазинов автозапчастей Parts-soft.ru и Linemedia.ru

далее →

6 августа / Комментарии

CS-Cart представил платформу для создания маркетплейсов

CS-Cart выпустил русскую версию платформы для создания маркетплейсов Multi-Vendor в раннем доступе. Разбираемся подробнее: зачем она, для кого, что умеет и что пока только в планах. Рассказывает Павел Трубецков, Директор по маркетингу CS-Cart в России.

далее →

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

Кейс: дилер-портал для группы компаний “RM и Profiline”

Разработка B2B платформы + двухстороняя интеграция и настройка 1С. Автоматизация  процесса продаж и документооборота с дилерской сетью для крупнейшего поставщика расходников для офисной техники.

далее →

10 октября 2017 / Комментарии

Редизайн интернет-магазина: признаки необходимости, чек-лист и важные моменты

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

далее →

X
Нажмите «Нравится»,
чтобы читать Shopolog.ru в Facebook