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

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

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

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

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

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

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

Возможно ли «коробочное» решение в B2B? 11 ключевых отличий розничного интернет-магазина от B2B-портала

Когда  пишешь о различиях B2B и B2C сфер, то сами собой всплывают слова Льва Николаевича «Все счастливые семьи похожи друг на друга, каждая несчастливая семья несчастлива по-своему». Так же и в бизнесе: все розничные интернет-магазины похожи друг на друга, но каждый B2B-портал индивидуален.
Разница не очевидна на первый взгляд, поэтому многие компании соглашаются на «коробочное» решение. Почему готовая CMS подходит для розницы, но не подходит для B2B?

далее →

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

«Джентльменский набор»: что нельзя забыть при запуске интернет-магазина?

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

далее →

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

Заказ интернет-магазина: на чем можно сэкономить?

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

далее →

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

Создание интернет-магазина без лишних вложений: онлайн-конструктор + профессиональная CMS в одной «коробке»

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

далее →

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

CMS и SaaS для интернет-магазинов: в какую сторону все идет?

Цель данного материала – начать продуктивный полилог между несколькими сторонами: различными разработчиками CMS/SaaS, разработчиками сайтов/потребителями SaaS и владельцами интернет-магазинов. И главное его условие – все участники должны руководствоваться не только собственными интересами, но и интересами четвертой стороны – собственно, самих онлайн-покупателей.

далее →

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