Бесконечная прокрутка против разбивки на страницы / Хабр
Ник Бабич разработчик, теч энтузиаст и просто влюбленный в UX/UI специалист написал заметку в блоге UX Planet про бесконечную прокрутку, мы сделали адаптивный перевод материала специально для читателей Хабрахабр.

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

Содержание

Бесконечная прокрутка


Бесконечная прокрутка — это технологический прием, который позволяет пользователям прокручивать массивный кусок контента так, чтобы его конец не попадал в поле зрения. Этот метод просто обновляет страницу при прокрутке вниз. Хоть это и выглядит весьма заманчиво, данный метод не является идеальным решением для любого сайта или приложения.

Плюс №1: Вовлечение пользователя и раскрытие контента.

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

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


Океан заметок Pinterest

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


Новостная лента Facebook позволяет просматривать огромное количество обновляемого контента

Плюс №2: Прокрутка лучше щелканья.

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

Для щелканья/нажатия: каждое обновление контента требует дополнительных щелчков и времени ожидания загрузки страницы. Для прокрутки: единое и простое действие обновляет контент.

Плюс №3: Прокрутка хороша для мобильных устройств.

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

Минус №1: Производительность страницы и ресурсы устройства.

Скорость загрузки страниц – это самое главное для пользователей. Многочисленные исследования показали, что низкая скорость загрузки приводит к тому, что люди покидают ваш сайт, или удаляют приложения. И это плохая новость для тех, кто использует бесконечную прокрутку. Чем больше пользователи прокрутят страницу вниз, тем больше контента будет загружаться на одной странице. В результате скорость обновления контента будет падать все сильнее.

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

Минус №2: Поиск и локация объектов.

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

В 2012 году Etsy потратили много времени на внедрение нового интерфейса с бесконечной прокруткой и обнаружили, что этот новый интерфейс существенно уступает старому по функциональности. Хотя количество покупок не снизилось, показатели использования сайта существенно упали – теперь люди не так часто пользовались поиском.


Интерфейс поиска у Etsy с полосой прокрутки. Текущая версия содержит разбивку на страницы

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

Минус №3: Несоответствие полосы прокрутки.

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


Полоса прокрутки должна отражать реальный размер страницы

Минус №4: Отсутствие нижнего колонтитула.

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

Когда LinkedIn в 2012 году внедрили в интерфейс бесконечную прокрутку, у пользователей была возможность увидеть нижнюю часть экрана до того как подгружался новый фрагмент полосы с контентом.

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


Facebook переместил все ссылки с нижнего колонтитула на правую боковую панель

Другой вариант решения заключается в загрузке контента по требованию с помощью кнопки загрузить. Новый контент не загружается автоматически, пока пользователь не нажмет кнопку. Таким образом, пользователи смогут легко добраться до нижнего колонтитула, а не гоняться за ним.


В Instagram есть кнопка «загрузить еще», которая позволяет пользователям получить доступ к нижнему колонтитулу

Разбивка на страницы


Разбивка на страницы — это каркас пользовательского интерфейса, который делит контент на отдельные страницы. Если вы прокрутите вниз страницы и увидите ряд чисел — это будет нумерация страниц сайта или приложения.

Плюс №1: Хорошая конверсия.

Разбивка на страницы прекрасно работает, когда пользователь ищет что-то конкретное в списке результатов, а не просто сканирует и обобщает потоки информации.

Вы можете оценить преимущества разбивки на страницы на примере поиска в Google Search. В зависимости от вашего запроса, выбор наилучшего результата поиска может занять секунды или часы. Но когда вы решите прекратить поиск в текущем формате Google, вы будете знать точное количество результатов поиска. Вы сможете принять решение о том, где вам пора остановиться, или сколько результатов вам нужно просмотреть.


Результаты поиска в Google

Плюс №2: Ощущение контроля.

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

Также, когда пользователи видят общее количество результатов (конечно, если общий объем данных не бесконечен), они могут оценить, сколько времени потребуется на поиски того, что им нужно.

Плюс №3: Расположение элементов.

Интерфейс с разбивкой на страницы позволяет пользователю зрительно запомнить расположение элемента. Пользователь может не вспомнить точный номер страницы, но он будет примерно знать, где видел нужный объект, а нумерованные ссылки позволят ему попасть туда, куда нужно.

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

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


Сайт MR Porter использует разбивку на страницы

Минус: Дополнительные действия.

Чтобы перейти к следующей части контента при его разбивке на страницы, пользователь должен найти целевую ссылку (например, «далее»), навести на нее указатель мыши, нажать и ждать загрузки новой страницы.


Нужно кликнуть для загрузки контента

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

Когда использовать бесконечную прокрутку/разбивку на страницы?


Существует всего несколько ситуаций, когда бесконечная прокрутка будет эффективной. Она идеально подходит для сайтов и приложений, которые представляют пользовательский контент (Twitter, Facebook) или визуальный контент (Pinterest, Instagram). С другой стороны, разбивка на страницы – это безопасный вариант и хорошее решение для сайтов и приложений, которые предназначены для целенаправленной деятельности пользователей.

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

Заключение


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

В следующих статьях мы рассмотрим лучшие примеры использования бесконечной прокрутки и разбивки на страницы. Так что следите за обновлениями!

jQuery-плагины бесконечной прокрутки: топ 10

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

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

Например, Google использует разбиение на страницы вместо бесконечной прокрутки, и это очень удобно. А социальные сети, такие как Twitter и Facebook всегда будут предпочитать использование бесконечной прокрутки, так как никто не любит каждый раз кликать, чтобы просто прокрутить свою ленту новостей.

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

Лучшее использование этой техники можно найти в Twitter, Facebook и многих других ресурсах.

Ниже приводится список, состоящий из 10 лучших jQuery-плагинов бесконечной прокрутки (скролла).

10 лучших jQuery-плагинов бесконечной прокрутки:

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

Masonry размещает элементы в доступном вертикальном пространстве. Очень популярный плагин с почти 13 000 звезд на github.

Демо-версия Скачать

Хотите создать плавную бесконечную прокрутку? iScroll определенно поможет вам создать плавный jquery- скролл. Благодаря интеллектуальной системе кеширования вы сможете создавать бесконечную прокрутку для реализации надежного пользовательского интерфейса. Кроме jQuery, он поддерживает и javascript.

Демо-версия Скачать

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

Демо-версия Скачать

Очень компактный jQuery-плагин бесконечный прокрутки. Infinite Scroll автоматически добавляет следующую страницу, позволяя не загружать все страницы сразу.

Демо-версия Скачать

jScroll — простой в использовании jQuery-плагин для бесконечной прокрутки, дающий возможность осуществлять гибкую настройку.

Демо-версия Скачать

Этот плагин никогда не позволит вашим пользователям затормозить, находясь в ожидании загрузки новой страницы. jQuery-Endless-Scroll очень гибкий, он включает в себя действительно уникальные функции, такие как добавление дружественных URL-адресов, усечение данных, возможность прокрутки и добавления контента в начало страницы.

Демо-версия Скачать

Infinite AJAX Scroll — это интеллектуальный jQuery-плагин бесконечной прокрутки. Он может преобразовать существующую систему разбиения на страницы в систему бесконечной прокрутки. Данный плагин считывает на сервере ссылки «следующая / предыдущая» существующей страницы и, когда пользователь достигает ее окончания, загружает эти страницы с помощью AJAX.

Этот подход также оптимизирован с точки зрения SEO и очень прост в реализации.

Демо-версия Скачать

Широко используемый jQuery-плагин бесконечной прокрутки, который вы можете легко использовать. Он автоматически добавляет содержимое страницы, используя AJAX, когда пользователь просматривает страницу из встроенного кеша браузера. Плагин прост в освоении и практическом использовании.

Демо-версия Скачать

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

Демо-версия Скачать

Endless.js — это jQuery-плагин, который помогает создавать бесконечные прокрутки (скроллы) для HTML-элементов. Он соединяет нижнюю часть с верхней или левую секцию с правой, создавая тем самым иллюзию бесконечной прокрутки.

Демо-версия Скачать

Я уверен, что эта статья будет полезна для вас, поскольку все перечисленные выше jQuery-плагины бесконечной прокрутки полностью актуальны и активно поддерживаются. Если у вас есть какие-либо вопросы, задайте их в комментариях.

Данная публикация представляет собой перевод статьи «Top 10 jQuery Infinite Scrolling Plugin With Demo» , подготовленной дружной командой проекта Интернет-технологии.ру

Хватит делать сайты с бесконечной прокруткойǃ / Хабр

TL;DR. Хотя бесконечная прокрутка подходит для некоторых случаев, но она может создать проблемы.

Бесконечная прокрутка может быть дезориентирующей, неконтролируемой и вызывать стресс у пользователей.

В этой статье мы объясним, почему нужно прекратить создание сайтов с бесконечной прокруткой. Но для начала рассмотрим краткую историю вопроса.


Чтобы понять, что такое скроллинг, посмотрим на происхождение слова.

scroll (свиток) (n.): c. 1400, “рулон пергамента или бумаги”

Свитки первоначально использовали тогда, когда документ становился слишком длинным (например, религиозного содержания). С таким большим количеством контента стало трудно управляться, его трудно читать и переписывать.

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


1. Строки (и столбцы)

После появления веба дизайнеры изобрели/изучили множество способов пагинации/прокрутки контента. До интернета мы прокручивали строки на экране.

Горизонтальная прокрутка сделала скроллинг инструментом не только для чтения контента, но и для навигации по экрану.

2. Окна (не операционная система)

Наличие прокрутки подтолкнуло людей к созданию оконного интерфейса. С помощью окон можно одновременно просматривать несколько фрагментов содержимого.


В Диспетчере программ Windows 3.1 несколько «свитков»

3. Веб-страницы

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

Начнём с некоторых серверных систем пагинации.

Разбивка страниц на основе смещения


Cамая известная система пагинации. В этой технике сначала нужно найти, сколько элементов нужно разбить на страницы:
-- All posts count
SELECT COUNT(*) AS total FROM posts

После этого нужно подсчитать страницы. Предположим, мы показываем 10 элементов на странице:
-- First page items
SELECT * FROM posts LIMIT 10

И если мы хотим перейти на страницу 3, то нужно пропустить первые 30 элементов, используя смещение (OFFSET):
-- Third page items
SELECT * FROM posts LIMIT 10 OFFSET 30

Клиенту отправляется информация следующим образом:
{
  "pagination": {
    "items_count": 100,
    "current": 3,
    "total_pages": 10
  },
  "items": [...]
}

Плюсы и минусы пагинации на основе смещения:


  • Хорошо: легко перейти на любую страницу
  • Хорошо: более свободный вариант для пользователя
  • Плохо: проблемы с производительностью
  • Плохо: при изменении данных могут отображаться повторяющиеся элементы

Пагинация по указателю


Большие данные затрудняют расчёт таблиц, так как данные постоянно прибывают (подумайте о Twitter). Таким образом, разработчики придумали новые методы разбиения данных на страницы: по указателям (cursor).

Каждой строке присваивается уникальный указатель. Не нужно обсчитывать всю таблицу и знать точное число страниц:

-- Get extra 1 item to get its cursor.
SELECT * FROM posts ORDER BY id DESC LIMIT 11

Предположим, что у каждого сообщения уникальный указатель (ID в данном примере) для разбиения на страницы. Клиент получит следующую информацию:
{
  "pagination": {
    "next": 1234 // extra item's ID (cursor), null if end of data.
  },
  "items": [...]
}

И вы можете запросить следующую страницу с помощью указателя:
-- Offsetting records using 1234 cursor
SELECT * FROM posts WHERE id >= 1234 ORDER BY id LIMIT 11

Плюсы и минусы пагинации по указателям:


  • Хорошо: более производительная, нет обсчёта таблицы
  • Хорошо: отображение повторяющихся элементов невозможно, если кто-то вставит строку в центр таблицы
  • Плохо: невозможно перейти на любую страницу
  • Плохо: ограничения для клиента, неизвестно общее количество страниц и номер текущей страницы

Рассмотрим некоторые методы навигации.

Следующий и предыдущий


Действие: на основе кликов
Техника: на основе смещения или по указателям

Она в основном используется для навигации по блогам. Это самая старая версия бесконечной прокрутки. При таком подходе пользователь может не знать, где заканчивается контент.


Пагинация WordPress

Нумерация страниц


Действие: на основе кликов
Техника: на основе смещения

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


Примеры нумерации

Google использует такую навигацию в результатах поиска:

Загрузить ещё


Действие: триггер
Техника: на основе указателей, хотя можно реализовать на основе смещения, но это будет неудобно

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


Кнопка «Загрузить ещё»

В приведённом выше примере пользователь нажимает кнопку «Загрузить ещё» (Load More), чтобы увидеть больше контента.

Бесконечная прокрутка


Действие: на основе прокрутки
Техника: на основе указателей, хотя можно реализовать на основе смещения, но это будет ОЧЕНЬ неудобно

Бесконечная прокрутка — новейшая техника пагинации на основе указателей.

Хью Уильямс утверждает, что изобрёл бесконечную прокрутку в 2005 году для Microsoft.
Metafizzy разработала open source инструмент, помогающий разработчикам реализовать бесконечную прокрутку.


Бесконечная прокрутка позволяет прокручивать страницу до бесконечности
До сих пор мы рассматривали, как сюда попасть. Теперь поговорим, почему здесь так хреново.

Поиск футера


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

С бесконечной прокруткой пользователям трудно найти футер, потому что невозможно увидеть конец страницы. Невозможность достичь футера может напрягать пользователя (что не здорово).

Сайты с бесконечной прокруткой (например, Twitter) решают проблему, размещая необходимую информацию и ссылки в боковую панель. Боковая панель — это решение проблемы, но не очень хорошее. Футер должен оставаться футером.


Футер Twitter на правой боковой панели

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


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

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

Дайте пользователям больше контроля


Пользователи, как правило, не любят UI, который не могут контролировать.

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

Бесконечная прокрутка делает страницы менее управляемыми. Пользователи также могут столкнуться с глюками прыжков.

Вместо бесконечной прокрутки поставьте кнопку «Загрузить ещё», которая является триггером. Это даст пользователю контроль. (Я бы предпочел старый стиль нумерации страниц, но мы предполагаем, что сейчас используем пагинацию по указателям).

Разрешите пользователям идти куда они хотят


Люди перемещаются по страницам, сохраняют некоторые в закладки, делятся с друзьями и т.д.

Однако бесконечная прокрутка не может сохранить состояние по своей сути. Пользователи не могут делиться текущим состоянием. Это также означает, что вы не можете отслеживать действия пользователей с помощью инструментов аналитики.

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

Кроме того, если в списке есть функция «Сортировать по», необходимо показать пользователю нумерацию страниц. Если список в алфавитном порядке, нельзя заставлять людей прокручивать список до буквы K, иначе они сойдут с ума.

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


Бесконечная прокрутка хороша в некоторых случаях, но как правило, она создаёт больше проблем, чем решает. Дизайнеры не должны рассматривать бесконечную прокрутку как серебряную пулю, которая решает все проблемы с разбиением на страницы. Хватит делать сайты с бесконечной прокруткой!
Бесконечный скролл в веб-дизайне — советы по использованию, альтернативы технологии

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

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

Что это такое

Infinite scroll — механизм, который превращает контент в единый поток. По мере прокрутки страницы появляются новые блоки. Приём активно используют социальные сети и онлайн-медиа, главная задача которых заключается в вовлечении посетителей. Бесконечный скролл даёт обманчивое впечатление, что у данных нет границ. Они есть, просто в некоторых случаях листать придётся очень долго.

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

Бесконечный скроллинг — крутая альтернатива постраничной навигации. Пагинация представляет собой более простой и наглядный способ упорядочивания контента. Изначально подгружается несколько «плиток» с товарами или новостями. В конце размещается маленький блок с цифрами. Каждый кружочек или квадратик — ссылка на определённую страницу. По клику можно перейти на следующий уровень и посмотреть, что там спрятано.

Складывается впечатление, что стандартная пагинация даёт больше контроля и надо использовать только её. На самом деле, у двух решений есть преимущества и недостатки. Наша статья посвящена infinite scroll, но затронуть сильные и слабые стороны аналога определённо надо.

Плюсы постраничной навигации:

  • пользователь контролирует процесс;
  • наглядное отображение пройденного пути;
  • интуитивно понятная структура.

Минусы:

  • для перехода надо выполнять дополнительные шаги;
  • снижение быстродействия.

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

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

Ещё одна распространённая проблема — снижение быстродействия. Когда страница подгружается за 1-2 секунды, подождать несложно. В некоторых случаях обновление контента затягивается на 10-15 секунд. Пользователь не будет ждать, пока контент прогрузится и уйдёт к конкурентам.

Проблемы, описанные выше, касаются и бесконечного скролла. Понятный механизм, высокое быстродействие и отсутствие раздражающих факторов обеспечат идеальный user experience и положительно повлияют на конверсии.

Преимущества и недостатки infinite scroll 

Дизайнер напрямую не влияет на организацию бесконечной прокрутки, но хороший специалист не бросает проект после разработки макета. Он следит за превращением структуры в рабочий веб-сайт или приложение, даёт рекомендации заказчику и сообщает о критических проблемах.

Давайте подробно остановимся на преимуществах и недостатках технологии, чтобы определить, в каких случаях её надо применять. Начнём с плюсов.

1. Улучшение поведенческих факторов

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

2. Меньше действий

При использовании постраничной навигации надо постоянно кликать по блокам. Бесконечная прокрутка облегчает взаимодействие. Можно листать колёсиком мышки или через клавиатуру. Никакого длительного обновления страницы и других проблем. Этот плюс принесёт пользу, только если разработчик выполнил оптимизацию быстродействия. Иногда infinite scroll работает с рывками или хуже того — положение возвращается к исходному значению. В этом случае негатива со стороны посетителей не избежать.

3. Идеальное решение для смартфонов

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

Правильное использование длинной прокрутки — настоящее искусство. Даже опытные разработчики часто допускают ошибки и не учитывают важные нюансы. Рассмотрим минусы infinite scroll.

1. Ущерб для производительности

Парадоксально, но infinite scroll влияет на быстродействие и положительно, и отрицательно. Сначала пользователь видит ограниченное количество контента, то есть секция прогружается быстро. По мере прокрутки количество блоков увеличивается, растёт нагрузка и страница становится более «тяжелой». Если на компьютере или смартфоне открыто несколько вкладок, ресурсов системы может не хватить.

2. Потеря контроля

При использовании пагинации у пользователя есть полный контроль над ситуацией. Он переходит на страницу, анализирует контент и сам решает, куда пойти. При использовании бесконечного скролла вариант только один — прокручивать дальше, чтобы увидеть новые записи. Хорошо, если разработчик добавил кнопку для перехода к верхней части. Если нет, придётся задействовать мышку, чтобы вернуться в начало.

3. Поиск местоположения

Если infinite scroll установлен на коммерческом сайте, который продаёт товары, посетителю будет сложно ориентироваться. Если скроллбар скрыт, человек не поймёт, где именно он находится. Возникнет желание закрыть вкладку. Хорошо, если он заранее добавил продукты в корзину или виш-лист. В противном случае бизнес потеряет потенциального клиента.

4. Бесполезный scrollbar

Полоса прокрутки, которая находится на привычном месте в правой части страницы, является индикатором прогресса. Она показывает, сколько процентов контента остались позади и как долго ещё придётся листать, чтобы дойти до низа. С каждой подгрузкой дополнительных секций длина страницы будет увеличиваться. Скроллбар теряет полезные свойства и не даёт никакой информации.

5. Потеря футера

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

Любые технологии и новые фишки нельзя использовать на реальных проектах только потому, что так делают конкуренты. Material design, flat и другие направления в дизайне дадут преимущества, только если они использованы с хирургической точностью и предварительным анализом потребностей целевой аудитории. Аналогичная ситуация и с бесконечной прокруткой. Если хотите, чтобы она была полезной, протестируйте разные сценарии работы, чтобы избавиться от негативных последствий.

Советы по использованию infinite scroll

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

Прочитайте 7 советов, которые помогут создать эффективный бесконечный скролл.

Мотивируйте пользователей

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

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

Разработайте понятную структуру

Длинная прокрутка, как и другие приёмы вовлечения, должны интегрироваться в проект после создания идеального «скелета». Хорошее решение — использовать знакомую структуру, которая встречается на популярных сайтах. Когда пользователь попадает в место подгрузки нового контента, обычно появляется анимация с точками или прелоадер. Это сигнал того, что сейчас появится дополнительная информация.

Если юзер столкнется с «ложным дном», он не будет листать дальше. Надо размещать данные так, чтобы не создавать обманчивые впечатления. Аудитория должна понимать, что им нужно прокрутить ниже для отображения дополнительных блоков. Задачу решить легко — добавьте визуальную подсказку. Это может быть всплывающий тултип или более сложные варианты с анимацией. Если infinite scroll используется для сайтов с разметкой контента в виде «плиток», можно показать начало следующего набора до прокрутки. Или вставить стрелку, по клику на которую откроется новая секция. Обычно такой подход используется для сайтов с контентом в виде слайдера. Информация разбивается на несколько блоков, и они переключаются по скроллу мышкой.

Позаботьтесь о меню

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

Обеспечьте максимальный комфорт

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

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

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

Добавьте анимацию

Чтобы пользователь сконцентрировался на изучении контента и не отвлекался на другие задачи, надо использовать инструменты вовлечения. Добавьте красочную анимацию и нестандартные эффекты. Только не забывайте о быстродействии. Протестируйте работу на разных устройствах, включая смартфоны с мобильным интернетом. Если анимация повлияет на скорость загрузки и удобство, откажитесь от неё.

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

Сделайте наглядные индикаторы

При взаимодействии с контентом пользователю нужны визуальные сигналы, которые отображают состояние системы. При клике на слайдер должен появляться следующий элемент. При загрузке дополнительной секции новостей, надо показать короткую циклическую анимацию. Так юзеры поймут, что сейчас появятся блоки и надо подождать. Если обновлять содержимое без предварительного информирования, пострадает юзабилити.

Адаптируйте механизм под SEO

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

3 альтернативы технологии

Ранее мы говорили, что постраничная пагинация и бесконечный скролл используется на сайтах и в приложениях. Есть ещё несколько вариантов для создания понятной структуры.

Загрузка по кнопке

Принцип работы простой — по умолчанию отображается несколько результатов и кнопка, которая запускает подгрузку дополнительного контента. Мало чем отличается от концепции бесконечной прокрутки, но у юзера появляется контроль над ситуацией. Он сам решает, что делать. Такое сочетание обеспечивает максимальный комфорт.

Вложенные категории

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

Слайд-шоу

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

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

Веб-студия IDBI поможет организовать эффективную навигацию по контенту ваших проектов. Мы знаем, когда использовать infinite scroll, а когда пагинацию. И можем объяснить свою позицию.

Бесконечная прокрутка для сайта WordPress

(Последнее обновление: 05.02.2020)

Привет, друзья! Вы хотите добавить бесконечную прокрутку на свой сайт или блог? Тогда читайте как это сделать. Бесконечная прокрутка WordPress позволяет автоматически загружать следующий набор записей, когда посетители приближаются к нижней части главной страницы или страницы записей. Так посетители могут прочитать больше записей без дополнительных усилий.

Как добавить бесконечную прокрутку на сайт WordPress?Как добавить бесконечную прокрутку на сайт WordPress? Постраничная навигация и бесконечная прокрутка в WordPress

Бесконечная прокрутка постов WordPress устраняет необходимость разбивки на страницы в вашем блоге или на сайте электронной коммерции.

Бесконечная прокрутка (скроллинг) WordPress

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

Бесконечная прокрутка является практически обязательным элементом новостных интерфейсов. Когда пользователь не ищет что-то конкретное, ему нужно просмотреть множество тем, чтобы найти ту, которая понравится. Самые популярные сайты социальных сетей с бесконечной прокруткой это — Facebook, Instagram, Twitter, Pinterest и другие.

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

Плюсы бесконечной прокрутки:

  • Повышение вовлеченности пользователей — бесконечная прокрутка помогает удерживать людей на вашем сайте в течение более длительных периодов времени. Больше просмотров страниц;
  • Упрощенное чтение. Благодаря бесконечной прокрутке, пользователям будет проще находить контент, о котором они не знали, что они есть на вашем сайте, поскольку они смогут быстро и легко загружать старый контент;
  • Улучшенная навигация по сайту — бесконечная прокрутка делает просмотр вашего сайта простым — все, что вам нужно сделать, это прокрутить страницу вниз;
  • Прокрутка хороша для мобильных устройств.

Минусы бесконечного скроллинга:

  • Отсутствие раздела нижнего колонтитула.  При переходе к бесконечной прокрутке вы не можете добраться до футера. Естественно, ничего страшного тут нет, но надо принять это во внимание, если вы используете подвал вашего сайта для получения важной информации. Тем не менее, липкий футер/подвал решает эту проблему;
  • Нет ощущения «завершения».  Пользователям на самом деле нравится чувство «завершения», когда они достигают конца страницы. Бесконечная прокрутка делает это ощущение невозможным.

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

Как добавить бесконечную прокрутку на сайт WordPress?

Если вы решили добавить бесконечную прокрутку в свой блог WordPress, то вы можете сделать это легко. Я покажу вам несколько плагинов, которые вы можете использовать на своём веб-ресурсе. Выбирайте тот, который лучше всего соответствует вашим потребностям. Реализовать бесконечный скроллинг на сайте WordPress можно с помощью бесплатных плагинов. Например:

  1. WordPress Infinite Scroll – Ajax Load More;
  2. Catch Infinite Scroll;
  3. YITH Infinite Scrolling;
  4. Infinite Scroll and Ajax Load More.

Для примера возьмём простой плагин бесконечной прокрутки для WordPress — Catch Infinite Scroll. 

Плагин Catch Infinite Scroll

Бесконечная прокрутка на WordPress с помощью плагина Catch Infinite ScrollБесконечная прокрутка на WordPress с помощью плагина Catch Infinite Scroll Плагин Catch Infinite Scroll

Catch Infinite Scroll — это плагин WordPress, который позволяет добавить магию бесконечной прокрутки с помощью нескольких настроек на вашем сайте. Плагин поможет увеличить вовлеченность пользователей на вашем сайте ВордПресс. Вдохновением для создания Catch Infinite Scroll является бесконечный свиток модуля Jetpack.

Плагин будет загружать контент автоматически при прокрутке страницы или вы также можете добавить кнопку «Загрузить еще», чтобы загрузить больше контента.

Первым делом вы должны установить плагин Catch Infinite Scroll стандартным способом. То есть, из вашей админки:

Catch Infinite Scroll - плагин WordPress, который добавит магию бесконечной прокруткиCatch Infinite Scroll - плагин WordPress, который добавит магию бесконечной прокруткиУстановка и активация плагина

После активации модуля, перейдите в одноимённый новый раздел Catch Infinite Scroll для того, чтобы настроить параметры плагина. Нам понадобится только вкладка Dashboard:

Страница с настройками модуля бесконечной прокрутки в Страница с настройками модуля бесконечной прокрутки в Настройка Catch Infinite Scroll

Чтобы включить бесконечную прокрутку на своем веб-сайте выберите в строке Load On (Trigger on) из выпадающего списка функцию Scroll. Функция Click это — загрузить еще при нажатие кнопки. Scroll — будет автоматически загружать посты при прокручивании страницы вниз:

Автоматически загружать контент при прокручивании страницы вниз (опция Scroll)Автоматически загружать контент при прокручивании страницы вниз (опция Scroll)Выбрать из списка Scroll

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

В строке Image, у вас есть возможность загрузить пользовательский значок загрузчика контента. А также в строке Load More Text и Finish Text указать свой текст на русском языке:

Это сообщение будет отображаться для посетителей сайта WordPressЭто сообщение будет отображаться для посетителей сайта WordPressПараметры плагина

Когда вы закончите настройку параметров, нажмите кнопку «Сохранить изменения». Для восстановления всех настроек плагина по умолчанию нужно активировать настройку Check to reset.

Обратите внимание, темы WordPress у всех разные. Catch Infinite Scroll хорошо работает с большинством тем WordPress. Однако, это может не сработать с некоторыми шаблонами. В таком случае вы можете использовать любой из следующих плагинов WP с бесконечной прокруткой.

Альтернативные плагины WordPress для добавления бесконечной прокрутки/скроллинга в WordPress.

WordPress Infinite Scroll – Ajax Load More

Идеальное решение для бесконечной прокрутки и отложенной загрузки для вашего сайта на платформе WordPress. Ajax Load More может бесконечно прокручивать любой тип контента, предлагаемый WordPress — от сообщений в блоге до многостраничного контента продуктов WooCommerce.

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

Как добавить бесконечную прокрутку на WordPressКак добавить бесконечную прокрутку на WordPress Бесплатный плагин Ajax Load More

Ajax Load More — это плагин для WordPress с бесконечной прокруткой для отдельных сообщений, страниц, комментариев и другого с помощью запросов на основе Ajax.

Создавайте сложные пользовательские запросы WordPress с помощью конструктора шорткодов Ajax Load More, а затем добавляйте сгенерированный шорткод на свою страницу с помощью редактора контента или непосредственно в файлы шаблонов.

Решение бесконечной прокрутки постов для вашего сайта на CMS WordPressРешение бесконечной прокрутки постов для вашего сайта на CMS WordPressГлобальные настройки WordPress Infinite Scroll

Ajax Load More совместим для бесконечной прокрутки с популярными плагинами электронной коммерции, такими как WooCommerce и Easy Digital Downloads.

Infinite Scroll and Ajax Load More

Бесконечная прокрутка или загрузить больше сообщений по нажатию кнопки без нумерации страниц.

Бесконечная прокрутка WordPress с помощью плагинаБесконечная прокрутка WordPress с помощью плагина Бесконечная прокрутка и Ajax загрузить больше

Используя бесконечную прокрутку, вы можете перечислить все посты на одной странице, просто прокрутив страницу вниз.

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

Этот плагин используется на всех страницах листинга блога, таких как архив, категория и автор.

Для бесконечной прокрутки просто установите плагин и сделайте настройкиДля бесконечной прокрутки просто установите плагин и сделайте настройкиНастройки Infinite Scroll

Полностью настраиваемый для адаптации к вашему сайту и теме. Вы можете изменить изображение загрузчика из настроек. Также для кнопки «Загрузить больше» вы можете изменить цвет кнопки и текст.

И последний плагин для интернет магазина.

YITH Infinite Scrolling WooCommerce

Добавьте бесконечную прокрутку к архивному сообщению или странице интернет магазина.

Бесконечная прокрутка записей плагин WordPressБесконечная прокрутка записей плагин WordPressПлагин для ВордПресс

Бесконечная прокрутка для WooCommerce — плагин для WordPress. Что может быть лучшим решением, чем свобода предлагать своим клиентам весь контент, просто прокручивая страницу вниз? Вы сократите время загрузки следующих страниц и ваши клиенты смогут увидеть все результаты сразу.

Продукты загружаются в Ajax, а плагин работает на страницах блогов и магазинов. Вы можете включить плагин в разделе YITH Plugins — Infinite Scrolling.

Бесплатная версия позволяет включить бесконечную загрузку на одном участке сайтаБесплатная версия позволяет включить бесконечную загрузку на одном участке сайта Настройки бесплатной версии YITH Infinite Scrolling

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

И в заключение

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

Бесконечная прокрутка — это только один из многих вариантов дизайна, который может улучшить взаимодействие с пользователем и его удержание на сайте. Тем не менее, это не является оптимальным для каждого сайта. Все зависит от того, чего вы пытаетесь достичь с помощью конкретной страницы.

Для мобильных пользователей прокрутка более удобна, чем прикосновение к крошечным ссылкам на страницы.

Что вы думаете об этой технике? Вам это нравится? Вы бы использовали это? Поделитесь своими мыслями, используя раздел комментариев!

Я надеюсь, друзья, что этот пост помог вам узнать, как добавить бесконечный дизайн прокрутки в ваш любимый блог WP. Удачи всем и до новых встреч.


Бесконечная прокрутка (скроллинг): «за» и «против»

Если вы хоть раз заходили на Twitter или искали изображение в Google, вы, вероятно, видели бесконечную прокрутку (бесконечный скроллинг, infinite scrolling) в действии. Вы могли часами прокручивать страницу, конца которой не было.

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

Хотите понять, как бесконечный скроллинг влияет на SEO, и стоит ли вообще использовать его на вашем сайте? Для начала необходимо определиться с тем, что представляет собой этот инструмент.

Что такое бесконечная прокрутка?

Бесконечная прокрутка — это еще один способ вывести контент пользователю на экран. Вместо того чтобы предлагать людям нажимать на кнопки «Читать далее» или «Следующая страница», вы можете дать им возможность неограниченной прокрутки, которая и будет инициировать загрузку содержания. Данный принцип реализован, к примеру, на сайте Mashable. Посетители ресурса могут читать новость за новостью, пользуясь при этом только колесиком мыши (или ползунком прокрутки).

Большой вклад в дело популяризации бесконечного скроллинга внесли социальные медиа. Подавляющее большинство социальных сетей, среди которых Facebook, Pinterest, Twitter, Google+, LinkedIn и Instagram, достаточно быстро разглядели потенциал данного инструмента и взяли его на вооружение. На представленном ниже изображении запечатлена страница Pinterest за мгновение до загрузки очередной части контента:

Преимущества и недостатки бесконечной прокрутки

Одинаковый подход к работе может привести одну компанию к успеху, а другую — к провалу. Бесконечная прокрутка, вне всяких сомнений, является одним из самых перспективных способов подачи материала читателям. Однако это не значит, что вы сию же секунду должны перейти на infinite scrolling: прежде, вам стоит рассмотреть все «за» и «против».

Достоинства бесконечной прокрутки

1. Она удобна для мобильных пользователей

При использовании телефона с сенсорным экраном гораздо проще прокрутить страницу, чем щелкать по маленьким ссылкам.

2. Она позволяет удержать внимание читателя

Регулярно требуя от посетителей нажатия на кнопку «Читать далее» вы рискуете «проиграть войну» за их внимание. Бесконечная прокрутка позволяет сделать процесс поглощения информации непрерывным. Сайты, ориентирующиеся в первую очередь на визуальный контент (Instagram, Pinterest и т.д.), активно используют infinite scrolling с целью обеспечить пользователям максимальный комфорт.

3. С ее помощью удобнее выводить на экран большие объемы информации

Вы хотите разместить на сайте статью внушительных размеров, но не желаете делить ее на несколько частей? Бесконечная прокрутка поможет выйти из положения.

4. Она идеальна для сайтов с обновлением информации в режиме реального времени

Бесконечная прокрутка является оптимальным решением для ресурсов, предоставляющих данные в режиме реального времени. Это еще одна причина, по которой данный инструмент нравится социальным сетям.

5. Бесконечная прокрутка не доставляет пользователям неудобств, связанных со скоростью загрузки

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

Недостатки бесконечной прокрутки

1. Она осложняет поиск нужной информации

Если читателю потребуется добраться до конкретного элемента содержания на сайте с бесконечным скроллингом, он будет вынужден потратить определенное время на прокрутку страницы. Именно поэтому Google не предлагает пользователям infinite scrolling для ознакомления с результатами поиска.

2. Она не позволяет использовать футер

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

3. Она не дает пользователю возможности в один клик пропустить неинтересный контент

Посетитель сайта с бесконечным скроллингом, наткнувшийся на не слишком интересный для него контент, вынужден будет прокручивать его вручную.

4. Бесконечная прокрутка увеличивает нагрузку на серверы

При внедрении бесконечного скроллинга активно используется JavaScript, вследствие чего требования к производительности серверов постоянно растут.

Как понять, нужна ли вашему сайту бесконечная прокрутка?

Плюсы и минусы бесконечного скроллинга, перечисленные выше, дают вам общее представление об этом инструменте. Если вы все еще не знаете, стоит ли его использовать, ответьте на два вопроса:

1. Ваш бизнес предполагает, что пользователи должны искать товары или услуги на сайте?

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

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

Взять, к примеру, Etsy — крупную площадку для онлайн-торговли. Компания попробовала использовать на своем сайте бесконечный скроллинг, однако получить за счет этого какую-либо выгоду ей не удалось. Главный инженер Etsy Дэн Мак-Кинли (Dan McKinley) не может дать однозначного объяснения данному факту. Вот что он говорит о бесконечной прокрутке:

«Люди крайне чувствительны к любым изменениям интерфейса. Но если алгоритм поиска выводит 16 наиболее подходящих результатов в верхнюю часть списка, infinite scrolling позволяет пользователю, не затрачивая дополнительных усилий, получить «бесконечное» количество менее подходящих результатов (для получения которых в отсутствие системы бесконечной прокрутки ему пришлось бы нажать на соответствующую кнопку).

Я не хочу сказать, что бесконечный скроллинг — это глупость. Данный инструмент способен принести немало пользы, но прежде чем вы решите использовать его, попытайтесь определить, как отреагируют на нововведение пользователи».

Если вы всерьез задумались об использовании бесконечной прокрутки на вашем сайте, есть смысл провести сплит-тестирование. Это позволит понять, насколько такой тип навигации по нраву вашим клиентам.

2. Ваш сайт главным образом предлагает контент?

Если так, вероятно, бесконечная прокрутка — это то, что вам нужно.

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

В качестве наглядного примера можно привести новостной сайт Inc. Как вы видите, значительную часть страницы занимает визуальный контент. При этом информация скомпонована так, чтобы максимально облегчить процесс ее восприятия.

Ресурсы, подобные Inc. или Mashable, зачастую не имеют футера, который вполне успешно заменяет кнопка меню в верхней части страницы. У пользователя, таким образом, появляется выбор: он может мгновенно переместиться к определенному элементу сайта, или же просто прокручивать ленту в поисках интересных материалов.

Как использование бесконечного скроллинга влияет на SEO?

Если вы собираетесь внедрять infinite scrolling, вам стоит узнать о том, как «относятся» к данной затее поисковые системы. Вот что говорит по этому поводу Скотт Лэнгдон (Scott Langdon) из HigherVisibility:

«При сканировании веб-сайта с системой бесконечного скроллинга роботы Google «увидят» только ту часть информации, которую видит пользователь до первой прокрутки. Остальное содержание не будет проиндексировано и, соответственно, не сможет попасть на страницу результатов поиска по тому или иному запросу».

Впрочем, с это проблемой можно справиться. Сделать это вам помогут советы Джона Мюллера (John Muller), представляющего Google:

  1. На сайте с бесконечной прокруткой должны присутствовать статические ссылки, разбивающие информацию на странице так, чтобы роботы могли правильно ее «понять».
  2. Для проведения пагинации (то есть разбивки информации на несколько страниц) компания должна иметь в своем распоряжении систему управления контентом (content management system, CMS).
  3. После разделения «бесконечного» содержания на отдельные страницы необходимо удостовериться в том, что каждая из этих страниц имеет полный URL.
  4. Также необходимо убедиться в том, что ни один из элементов не попал в состав сразу нескольких страниц.
  5. При разделении сайта на несколько частей необходимо вносить изменения в <head>. Когда речь заходит об индексации, любые изменения, внесенные в <body>, игнорируются роботами Google.

Представленная ниже схема показывает как нужно, и как не нужно проводить пагинацию (во втором случае некоторые из элементов контента будут проиндексированы дважды):

Заключение

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

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

Высоких вам конверсий!

По материалам: hubspot.com, image source: Stefano Montagner 

05-02-2015

Бесконечный скролл с баннерами, или Как обойтись тремя вьюхами

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

Бесконечный/цикличный скролл в iOS стандартными средствами не реализовать, нужно идти на разные ухищрения. В этой статье я расскажу, какие варианты решения задачи лежат на поверхности и какой вариант мы в итоге реализовали.

Задача


Нужно было сделать бесконечную цикличную прокрутку с элементами в виде подготовленной картинки, заголовка и подзаголовка. Вводные данные: центральное изображение имеет отступы от экрана по 16.0 поинтов. По бокам от центрального изображения торчат «ушки». А расстояние между баннерами 8.0 поинтов.

Изучаем, что сделано у коллег



Додо — баннеры не цикличные, центральный баннер всегда прилегает к левому краю на определенном расстоянии.

Auto.ru — баннеры не цикличные, если сделать свайп, то баннеры очень долго еще листаются.

Ozon — баннеры цикличные, но их нельзя контролировать касанием: как только определяется направление свайпа, картинку уже не остановить.

Wildberries — баннеры не цикличные, происходит центрирование, долгое завершение анимации прокрутки.

Итоговые пожелания:

  • Баннеры должны центрироваться.
  • Прокрутка должна завершаться без долгого ожидания анимации.
  • Управляемость баннеров: должна быть возможность пальцем контролировать анимацию прокрутки.

Варианты реализации


Когда встает новая задача, которую еще не приходилось решать, стоит рассмотреть существующие решения и подходы.

UICollectionView


Действуя в лоб, можно прийти к варианту с созданием UICollectionView. Делаем количество элементов Int.max и при инициализации показываем середину, а при вызове метода в dataSourcefunc collectionView(UICollectionView, cellForItemAt: IndexPath) -> UICollectionViewCell. Будем возвращать соответствующий элемент, рассчитывая, что нулевой элемент — это Int.max / 2. Такого монстра с кучей возможностей, как UICollectionView, нецелесообразно использовать для нашей простой задачи.

UIScrollView и (n + 2) UIView


Еще есть вариант при котором создаётся UIScrollView, на нем размещаются абсолютно все баннеры, а в начало и в конец добавляется еще по баннеру. Когда докручиваем до конца, незаметно для пользователя меняем оффсет и возвращаемся к первому элементу. А при прокрутке назад всё делаем наоборот. В результате при большом количестве элементов будет создана куча view без их повторного использования.
Источник

Свой путь


Мы решили сделать UIScrollView + три UIView. Эти UIView будут переиспользоваться. В момент прокрутки мы будем возвращать contentOffset к центральному баннеру и подменять контент у всех трех UIView. И тогда должен получиться легкий компонент, который закроет эту задачу.

Однако есть опасение, что подмена контента во время прокрутки будет заметна пользователю. Узнаем об этом в ходе реализации.

Реализация


Подготовка UIScrollView и трёх UIImageView


Создаём наследника UIView, размещаем на нём UIScrollView и три UIImageView:
final class BannersView: UIView {
    private let scrollView = UIScrollView()

    private let leftItemView = UIImageView()
    private let centerItemView = UIImageView()
    private let rightItemView = UIImageView()

    init() {
        super.init(frame: .zero)
        self.setup()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private func setup() {
        self.addSubview(self.scrollView)
        self.setupScrollView()

        let imageViews = [self.leftItemView, self.centerItemView, self.rightItemView]
        imageViews.forEach(self.scrollView.addSubview)
    }
}

Добавляем реализацию метода с настройкой scrollView:
После базовой настройки можем заняться макетом и размещением ImageView:
override func layoutSubviews() {
    super.layoutSubviews()
    self.scrollView.frame = self.bounds

    let horizontalItemOffsetFromSuperView: CGFloat = 16.0
    let spaceBetweenItems: CGFloat = 8.0
    let itemWidth = self.frame.width - horizontalItemOffsetFromSuperView * 2
    let itemHeight: CGFloat = self.scrollView.frame.height

    var startX: CGFloat = 0.0

    let imageViews = [self.leftItemView, self.centerItemView, self.rightItemView]
    imageViews.forEach { view in
        view.frame.origin = CGPoint(x: startX, y: 0.0)
        view.frame.size = CGSize(width: itemWidth, height: itemHeight)
        startX += itemWidth + spaceBetweenItems
    }

    let viewsCount: CGFloat = 3.0
    let contentWidth: CGFloat = itemWidth * viewsCount + spaceBetweenItems * (viewsCount - 1.0)
    self.scrollView.contentSize = CGSize(width: contentWidth, height: self.frame.height)
}

Добавим в UIImageView изображения, которые подтянем с сайта-генератора картинок https://placeholder.com:
    let imageURLs = ImageURLFactory.makeImageURLS()
    imageViews.enumerated().forEach { key, view in
        view.setImage(with: imageURLs[key])
    }

Результат первых подготовительных шагов:

Your browser does not support HTML5 video.


Центрируем изображения при прокрутке


Для контролирования прокрутки будем использовать UIScrollViewDelegate. В метод setup выставляем делегат для UIScrollView, а также выставляем contentInset, чтобы у первого и последнего изображения были отступы по бокам.
self.scrollView.contentInset = UIEdgeInsets(top: 0.0, left: 16.0, bottom: 0.0, right: 16.0)
self.scrollView.delegate = self

Создаем extension для нашего BannersView и один из методов. Метод делегата func scrollViewWillEndDragging вызывается, когда пользователь перестает прокручивать. В этом методе нас интересует targetContentOffset — это переменная, которая отвечает за конечный offset прокрутки (точка, в которой остановится прокрутка).

extension BannersView: UIScrollViewDelegate {

  func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    let gap: CGFloat = self.centerItemView.frame.width / 3

    let targetRightOffsetX = targetContentOffset.pointee.x + self.frame.width
    if (self.rightItemView.frame.minX + gap) < targetRightOffsetX {
      targetContentOffset.pointee.x = self.rightItemView.frame.midX - self.frame.midX
    }
    else if (self.leftItemView.frame.maxX - gap) > targetContentOffset.pointee.x {
      targetContentOffset.pointee.x = self.leftItemView.frame.midX - self.frame.midX
    }
    else {
      targetContentOffset.pointee.x = self.centerItemView.frame.midX - self.frame.midX
    }
  }

}

gap — это расстояние при котором мы будем считать, что view является центральным. Если на экране отображается треть ширины оранжевого изображения, то мы будем выставлять конечный offset таким образом, чтобы оранжевое изображение оказалось в центре.
targetRightOffsetX — эта точка поможет определить, является ли правый view центральным.
Результат работы реализации данного метода:

Your browser does not support HTML5 video.


Управляем оффсетом во время прокрутки


Теперь прямо во время прокрутки будем менять contentOffset, возвращая в центр экрана центральную view. Это позволит незаметно для пользователя создать иллюзию бесконечной прокрутки.

Добавим метод делегата func scrollViewDidScroll(_ scrollView: UIScrollView), он вызывается при изменении contentOffset у UIScrollView.


func scrollViewDidScroll(_ scrollView: UIScrollView) {
    guard
            self.leftItemView.frame.width > 0,
            self.centerItemView.frame.width > 0,
            self.rightItemView.frame.width > 0
            else {
        return
    }

    let gap: CGFloat = self.centerItemView.frame.width / 3
    let spacing: CGFloat = 8.0

    let currentRightOffset: CGFloat = scrollView.contentOffset.x + self.frame.width + scrollView.contentInset.left

    if (self.rightItemView.frame.maxX - gap) < currentRightOffset {
        scrollView.contentOffset.x -= self.centerItemView.frame.width + spacing
    } else if (self.leftItemView.frame.minX + gap) > scrollView.contentOffset.x {
        scrollView.contentOffset.x += self.centerItemView.frame.width + spacing
    }
}

gap — это расстояние, на основании которого будем определять необходимость смещения contentOffset. Рассчитаем точку для rightItemView: self.rightItemView.frame.maxX — gap, после пересечения которой будем смещать contentOffset. Например, если до полного отображения rightItemView останется прокрутить 100.0 поинтов, то мы смещаем contentOffset назад, на ширину одного баннера с учетом расстояния между баннерами (spacing), чтобы centerItemView оказалась на месте rightItemView. Аналогично делаем для leftItemView: вычисляем точку, после пересечения которой будем менять contentOffset.
Добавим метод func set(imageURLs: [URL]), чтобы снаружи выставлять данные для отображения. Туда перенесем часть кода из setup.

И также добавим строку, чтобы при выставлении контента centerItemView сразу был по центру. horizontalItemOffsetFromSuperView мы уже использовали в layoutSubviews, поэтому вынесем его в константы и используем вновь.

func set(imageURLs: [URL]) {
    // добавляем контент на ImageView
    let imageViews = [self.leftItemView, self.centerItemView, self.rightItemView]
    imageViews.enumerated().forEach { key, view in
        view.setImage(with: imageURLs[key])
    }
    // выставляем изначальный контент оффсет, чтобы centerItemView был по центру
    self.scrollView.contentOffset.x = self.centerItemView.frame.minX - Constants.horizontalItemOffsetFromSuperView
}

Этот метод мы будем вызывать снаружи во UIViewController.viewDidAppear. Или можно перенести первую центровку в layoutSubviews, но проверять, что это будет сделано только при изменение frame всей view. Для демонстрации работы воспользуемся первым способом:

Your browser does not support HTML5 video.


Так… При резкой прокрутке сломалось центрирование.
Дело в том, что при сильной прокрутке игнорируется targetContentOffset. Увеличим contentInset, после этого всё работает корректно. Центральный view всегда будет по центру.
self.scrollView.contentInset = UIEdgeInsets(top: 0.0, left: 300.0, bottom: 0.0, right: 300.0)

Your browser does not support HTML5 video.


Подменяем контент


Задача состоит в том, чтобы при смещении contentOffset одновременно заменять контент у view. При прокрутке в правую сторону правое изображение станет центральным, центральное станет левым, а левое — правым. 1 — 2 — 3 | 2 — 3 — 1.

Для удобства создадим ViewModel:

struct BannersViewModel {
    // здесь у нас гарантированно 3 ссылки или более на изображения
    let items: [URL] = ImageURLFactory.makeImageURLS()
}

Чтобы проверить, какой элемент сейчас в центре, добавим переменную в BannersView и переменные с контентом для каждой из view:
    private var currentCenterItemIndex: Int = 0

    private var viewModel: BannersViewModel?

    private var leftItemViewModel: URL {
        guard let items = self.viewModel?.items else { fatalError("not ready") }
        let leftIndex = items.index(before: self.currentCenterItemIndex)
        return leftIndex < 0 ? items.last! : items[leftIndex]
    }
    private var centerItemViewModel: URL {
        guard let items = self.viewModel?.items else { fatalError("not ready") }
        return items[self.currentCenterItemIndex]
    }
    private var rightItemViewModel: URL {
        guard let items = self.viewModel?.items else { fatalError("not ready") }
        let rightIndex = items.index(after: self.currentCenterItemIndex)
        return rightIndex >= items.count ? items.first! : items[rightIndex]
    }

leftItemViewModel, centerItemViewModel, rightItemViewModel — на основе currentCenterItemIndex возвращаем нужный контент для каждой view. force unwrap и fatal здесь используем потому, что количество элементов ≥ 3 (при желании, можно добавить проверку в метод set).

Добавим методы, которые будут вызываться при необходимости изменить контент у views:

    func nextItem() {
        self.currentCenterItemIndex += 1
        if self.viewModel?.items.count == self.currentCenterItemIndex {
            self.currentCenterItemIndex = 0
        }
        self.updateViews()
    }

    func prevItem() {
        self.currentCenterItemIndex -= 1
        if self.currentCenterItemIndex == -1 {
            self.currentCenterItemIndex = self.viewModel?.items.indices.last ?? 0
        }
        self.updateViews()
    }

    private func updateViews() {
        self.leftItemView.setImage(with: self.leftItemViewModel)
        self.centerItemView.setImage(with: self.centerItemViewModel)
        self.rightItemView.setImage(with: self.rightItemViewModel)
    }

Изменим метод, который используется снаружи для выставления контента:
    func set(viewModel: BannersViewModel) {
        self.viewModel = viewModel
        self.updateViews()
        self.scrollView.contentOffset.x = self.centerItemView.frame.minX - Constants.horizontalItemOffsetFromSuperView
    }

И будем вызывать nextItem и prevItem в методе делегата при смене contentOffset:
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        .......

        if (self.rightItemView.frame.maxX - gap) < currentRightOffset {
            scrollView.contentOffset.x -= self.centerItemView.frame.width + spacing
            self.nextItem()
        } else if (self.leftItemView.frame.minX + gap) > scrollView.contentOffset.x {
            scrollView.contentOffset.x += self.centerItemView.frame.width + spacing
            self.prevItem()
        }
    }

Увеличим количество входных ссылок на изображения до 5 (для удобства было три):

Your browser does not support HTML5 video.


Финальные шаги


Осталось сделать кастомную UIView вместо простой картинки. Это будет заголовок, подзаголовок и изображение.

Расширим ViewModel:

struct BannersViewModel {
    let items: [Item]

    struct Item {
        let title: String
        let subtitle: String
        let imageUrl: URL
    }
}

И напишем реализацию баннера:
extension BannersView {
    final class ItemView: UIView {
        private let titleLabel = UILabel()
        private let subtitleLabel = UILabel()
        private let imageView = UIImageView()

        init() {
            super.init(frame: .zero)
            self.setup()
        }

        required init?(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }

        private func setup() {
            self.addSubview(self.imageView)
            self.addSubview(self.titleLabel)
            self.addSubview(self.subtitleLabel)

            self.imageView.contentMode = .scaleAspectFill

            self.layer.masksToBounds = true
            self.layer.cornerRadius = 8.0
        }

        func set(viewModel: BannersViewModel.Item) {
            self.titleLabel.text = viewModel.title
            self.subtitleLabel.text = viewModel.subtitle
            self.imageView.setImage(with: viewModel.imageUrl)
        }

        override func layoutSubviews() {
            super.layoutSubviews()
            self.imageView.frame = self.bounds

            self.titleLabel.frame.origin = CGPoint(x: 16.0, y: 16.0)
            self.titleLabel.frame.size = CGSize(width: self.bounds.width - 32.0, height: 20.0)

            self.subtitleLabel.frame.origin = CGPoint(x: 16.0, y: self.titleLabel.frame.maxY + 4.0)
            self.subtitleLabel.frame.size = self.titleLabel.frame.size
        }
    }
}

Заменим UIImageView и ViewModel в BannersView::

    .......

    private let leftItemView = ItemView()
    private let centerItemView = ItemView()
    private let rightItemView = ItemView()
    
    private var leftItemViewModel: BannersViewModel.Item { ... }
    private var centerItemViewModel: BannersViewModel.Item { ... }
    private var rightItemViewModel: BannersViewModel.Item { ... }

    .......

    private func updateViews() {
        self.leftItemView.set(viewModel: self.leftItemViewModel)
        self.centerItemView.set(viewModel: self.centerItemViewModel)
        self.rightItemView.set(viewModel: self.rightItemViewModel)
    }

    .......

Результат:

Your browser does not support HTML5 video.


Выводы


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

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

метафизик / бесконечная прокрутка: 📜 Автоматически добавлять следующую страницу
перейти к содержанию Зарегистрироваться
  • Почему GitHub? Особенности →
    • Обзор кода
    • Управление проектами
    • Интеграция
    • Действия
    • Пакеты
    • Безопасность
    • Управление командой
    • Хостинг
    • Мобильный
    • Отзывы клиентов →
    • Безопасность →
  • команда
  • предприятие
  • Проводить исследования
    • Исследуйте GitHub →
    учиться и внести свой вклад
    • Темы
    • Коллекции
    • Тенденции
    • Learning Lab
    • Руководства с открытым исходным кодом
    Общайтесь с другими
    • События
    • Общественный форум
.

YITH Бесконечная прокрутка — плагин WordPress

Описание

Они хотят этого прямо сейчас!

Люди привыкли видеть контент в сети последовательно: подумайте о Facebook или Twitter, двух навигационных системах, которые теперь влияют на то, как мы просматриваем интернет. С YITH Infinite Scrolling мы решили применить эту идею для немедленных и прямых консультаций с содержимого страницы!

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

Основные характеристики:

  • Бесконечная прокрутка предлагает количество продуктов, показанных сразу
  • Простая и прямая навигация даже с мобильного устройства
  • Эффект перехода

Полная документация доступна здесь

Предложения

Если у вас есть предложения по улучшению Бесконечной прокрутки YITH, вы можете написать нам, чтобы мы могли объединить их в Бесконечную прокрутку YITH.

Переводчики

Доступные языки

Если вы не можете найти этот плагин на своем языке и хотите перевести его, используйте специальный инструмент в [Translating WordPress] (https: // translate.wordpress.org/locale/it/default/wp-plugins/yith-infinite-scrolling «Перевод WordPress»).
Или, если вы создали свой собственный языковой пакет или у вас есть обновление для существующего, вы можете отправить его в виде вложения в электронное письмо на нашей [странице контактов] (http://yithemes.com/contact/ «Your Inspiration Themes» ”), И мы включим в YITH Infinite Scrolling.

Скриншоты

  • Страница администратора плагина.

Установка

  1. Распакуйте загруженный почтовый файл.
  2. Загрузите папку плагинов в каталог wp-content / plugins / вашего сайта WordPress.
  3. Активируйте YITH Бесконечная прокрутка на странице плагинов.

FAQ

  • Это совместимо с WooCommerce?

Да, конечно. Этот плагин полностью совместим с последней версией WooCommerce и предыдущими версиями до 2.2.

Авторы и разработчики

«YITH Infinite Scrolling» — это программное обеспечение с открытым исходным кодом.Следующие люди внесли свой вклад в этот плагин.

участников

История изменений

1,2,0

Выпущено 11 марта 2020 года

  • Новое: поддержка WooCommerce 4.0
  • Новое: поддержка WordPress 5.4
  • Обновление: Плагин Framework
1.1.13

Дата выхода 20 декабря 2019 года

  • Новое: поддержка WooCommerce 3.9
  • Новое: поддержка WordPress 5.3.2
  • Обновление: Плагин Framework
1.1.12

Дата выхода 5 ноября 2019 года

1.1.11

Дата выхода 29 ноября 2019 года

1.1.10

Дата выхода 30 октября 2019 года

1,1,9

Дата выхода 29 октября 2019 года

  • Новое: поддержка WordPress 5.3
  • Обновление: Плагин Framework
1,1,8

Дата выхода 12 июня 2019 года

1,1,7

Дата выхода 11 июня 2019 года

  • Исправлено: фатальная ошибка с плагином YITH Premium
1.1.6
1,1,5

Дата выхода 23 апреля 2019 года

  • Новое: поддержка WordPress 5.1.1
  • Обновление: плагин Core
1.1.4

Дата выхода 20 февраля 2019 года

  • Новое: поддержка WordPress 5.0.2
  • Обновление: плагин Core
  • Tweak: улучшенная производительность Ajax на событиях прокрутки
1,1,3

Выпущено 6 декабря 2018 года

  • Новое: поддержка WordPress 5.0,0
  • Обновление: плагин Core
1.1.2

Дата выхода 24 октября 2018 года

  • Новое: поддержка WooCommerce 3.5.0
  • Обновление: плагин Core
1.1.1

Дата выхода 26 сентября 2018 года

1,1,0

Дата выхода 6 сентября 2018 года

  • Новое: поддержка WordPress 4.9.8
  • Новое: поддержка WooCommerce 3.4.5
  • Обновление: плагин Core
1,0,9

Дата выхода 28 декабря 2017 года

  • Новое: поддержка WordPress 4.9,1
  • Новое: поддержка WooCommerce 3.2.6
  • Обновление: плагин Core
1,0,8

Дата выхода 20 сентября 2017 года

  • Новое: поддержка WordPress 4.8.2
  • Новое: поддержка WooCommerce 3.1.2
  • Обновление: плагин Core
  • Исправление: Использовать относительный URL для основного действия AJAX
1,0,7

Дата выхода 19 декабря 2016 года

  • Добавлено: поддержка WordPress 4.7
  • Добавлено: Поддержка WooCommerce 2.6,9
  • Обновлено: Плагин Core
1,0,6

Дата выхода 20 апреля 2016 года

  • Добавлено: Совместимость с WordPress 4.5
  • Добавлено: добавлены минимизированные файлы JS. Плагин загружает полную версию файла, если константа «SCRIPT_DEBUG» определена и имеет значение true.
  • Обновлено: Плагин Core
1,0,5

Дата выхода 30 октября 2015 г.

  • Обновлено: языковой файл. Изменен текстовый домен с Yith-Infs на Yith-Infin-Scrolling
  • Обновлено: Плагин Core
1.0,4

Выпущен 17 сентября 2015 года.

  • Добавлено: Совместимость с YITH WooCommerce Ajax Product Filter
  • Добавлено: Совместимость с YITH WooCommerce Color Label Variations
  • Обновлено: Плагин Core
1,0,3

Дата выхода 13 августа 2015 г.

  • Добавлено: Совместимость с WooCommerce 2.4
  • Обновлено: Плагин Core
1.0.2

Дата выхода 30 апреля 2015 года

  • Исправлена ​​ссылка на документацию плагина
  • Фиксированный плагин ядро ​​
1.0,1

Дата выхода 18 марта 2015 г.

  • Незначительное исправление
  • Фиксированный плагин ядро ​​
1,0,0

Дата выхода 12 марта 2015 г.

,
mattleibow / InfiniteScrolling: небольшая библиотека, позволяющая быстро и легко добавлять бесконечную / бесконечную поддержку прокрутки в любой Xamarin.Forms ListView.
перейти к содержанию Зарегистрироваться
  • Почему GitHub? Особенности →
    • Обзор кода
    • Управление проектами
    • Интеграция
    • Действия
    • Пакеты
    • Безопасность
    • Управление командой
    • Хостинг
    • Мобильный
    • Отзывы клиентов →
    • Безопасность →
  • команда
  • предприятие
  • Проводить исследования
    • Исследуйте GitHub →
    учиться и внести свой вклад
    • Темы
    • Коллекции
    • Тенденции
    • Learning Lab
    • Руководства с открытым исходным кодом
.

Бесконечная прокрутка не для каждого веб-сайта

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

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

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

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

Бесконечная прокрутка

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

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

Бесконечная прокрутка приводит к психологическим последствиям, которые также могут негативно сказаться на опыте пользователя . Для задач, управляемых задачами, бесконечная прокрутка может казаться утоплением в информационной пропасти без конца.Люди, которым нужны конкретные типы информации, ожидают, что контент будет сгруппирован и распределен по страницам в соответствии с релевантностью. Веб-пользователи не возражают против нажатия ссылок (например, ссылки на следующую страницу), если каждый щелчок имеет смысл и ведет их ближе к желаемой цели.

(Узнайте, как применять принципы психологии, чтобы предсказать и объяснить, как ваши клиенты думают и действуют.)

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

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

Хуже всего бесконечная прокрутка на рабочем столе в том, что он играет против пользователей . Бесконечная прокрутка ломает полосу прокрутки, заставляя ее отображать неточную длину страницы. Верьте или нет, люди все еще используют полосу прокрутки. Люди полагаются на полосу прокрутки, чтобы сказать им, сколько осталось усилий. Нехорошо говорить людям, что они почти закончили, когда их нет. Играть красиво.

(Узнайте больше о бесконечной прокрутке и других новых шаблонах на нашей конференции.)

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

,