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

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

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

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

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

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

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

5 ошибок интернет-магазинов, за которые стыдно

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

далее →

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

Пять облачных решений для повышения эффективности малого бизнеса

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

далее →

26 декабря 2016 / Комментарии

Мобильные приложения для e-commerce: руководство для начинающих

У вас есть действующий интернет-магазин, и вы задумываетесь над созданием мобильного приложения? С чего начать? На что обратить внимание и как не упустить важное? 

далее →

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

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

Любой e-commerce проект включает массу составляющих: разработку сайта, поддержку контента интернет-магазина, подключение платежного агрегатора, реализацию бэк-офиса, использование коллтрекинг-сервисов, разработку мобильных приложений и многие другие вопросы. Мы попросили представителей отрасли поделиться своими мнениями о том, что важно при запуске интернет-магазина и на что обязательно нужно обратить внимание.
На наши вопросы любезно согласились ответить представители компаний Payler, contentBox, LiveCatalog, Callibri.ru, АйРи.рф и многих других.

далее →

8 декабря 2016 / Комментарии

Интернет-магазин: сами с усами?

На повестке дня сегодня вопрос, который нет-нет да и приходит в голову многим владельцам интернет-магазинов: «А не стоит ли мне отказаться от внешних подрядчиков и организовать разработку и поддержку своей онлайн-площадки самостоятельно?».
Вопрос правильный и важный. Однако в большинстве случаев ответом на него будет: «Нет, не стоит». Иначе, разве было бы у веб-студий столько работы?!

далее →

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