Создаем веб-галерею с бесконечной прокруткой. PHP и AJAX. Бесконечная прокрутка Супер плагин WordPress

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

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

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

Бесконечный скроллинг

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

Преимущество 1: Вовлеченность пользователя и естественное желание глубже изучать материал

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

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

Pinterest с его бескрайним океаном «пинов»

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

Новостная лента Facebook практически вынуждает пользователей скроллить еще и еще в поисках контента

Преимущество 2: Скроллить легче, чем кликать

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

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

Преимущество 3: Скроллинг хорошо подходит для мобильных устройств

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

Источник изображения - Dribbble

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

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

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

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

Недостаток 2: Поиск и местоположение объекта в потоке данных

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

В интерфейсе сервиса Pinterest есть опция закладок

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

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

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

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

Недостаток 3: Нерелевантный скроллбар

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

Полоса прокрутки должна отражать истинную длину страницы

Недостаток 4: Отсутствие футера

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

Возьмем, к примеру, сервис Bing Images. Футер сервиса содержит ссылки Learn More и Help, но пользователям вряд ли удастся перейти по ним, так как ссылки будут постоянно «убегать» от них из-за загружаемого контента.

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

Facebook перенес все ссылки из подвала (например, Legal, Careers) в панель справа от новостной ленты

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

Instagram использует кнопку Load More, чтобы подвал был доступен пользователям

Пагинация

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

Преимущество 1: Хорошая конверсия

Пагинация хорошо работает, когда пользователь ищет в списке объектов что-то определенное, а не просто просматривает поток данных.

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

Данные результатов поиска Google

Преимущество 2: Ощущение контроля

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

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

Преимущество 3: Положение элемента

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

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

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

Онлайн-магазин MR Porter использует пагинацию для представления товаров

Недостаток: Дополнительные действия

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

Для получения контента нужно кликнуть

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

В каких случаях что использовать

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

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

Заключение

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

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

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

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

Преимущество #1: Вовлеченность пользователя и развертывание контента

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

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

Море пинов в Pinterest

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

Новостной фид Facebook: пользователь скроллит еще и еще для обновления контента

Преимущество #2: Скроллить лучше, чем кликать

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

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

Преимущество #3: Скроллинг хорош для мобильных устройств

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

Недостаток #1: Работоспособность страницы и ресурсы устройства

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

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

Недостаток #2: Поиск и местоположение данных

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

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

Интерфейс поиска с бесконечным скроллингом на Etsy. Нынешняя версия построена на пагинации.

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

Недостаток #3: Нерелевантная полоса прокрутки

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

Полоса прокрутки должна отражать настоящую длину странички

Недостаток #4: Отсутствие подвала

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

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

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

Facebook перенес все ссылки из подвала (например, ‘Legal’, ‘Careers’) в панель справа.

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

В Instagram предусмотрена кнопка ‘Load More’, чтобы подвал всегда был доступен пользователям.

Пагинация делит контент на отдельные страницы. Если вы проскроллите вниз страницы и увидите ряд цифр – этот ряд цифр и есть пагинация сайта или приложения.

Преимущество #1: Хорошая конверсия

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

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

Данные результатов поиска Google

Преимущество #2: Ощущение контроля

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

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

Преимущество #3: Положение элемента

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

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

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

На сайте MR Porter для товаров используется пагинация

Недостатки: Дополнительные действия

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

Для получения контента нужно кликнуть

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

В каких случаях использовать бесконечный скроллинг / пагинацию?

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

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

Заключение

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

, на примерах демонстрирует достоинства и недостатки популярного приёма — бесконечного скроллинга.

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

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

Преимущества

Эффективное использование пространства экрана. Больше никаких неуклюжих кнопок или ссылок с номерами страниц.

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

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

Недостатки

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

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

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

Прощай, футер! Либо бесконечный скроллинг, либо футер — третьего не дано. Если вам (или, что важнее, вашим пользователям) нужен футер, стоит подумать о более привычном шаблоне. Не дразните пользователей футером, по которому нельзя кликнуть: стоит ему появиться перед глазами, как на его месте тут же возникает новый контент (LinkedIn и Facebook, я говорю о вас!)

SEO. Хотя в Google отмечают, что их алгоритм принимает в расчет страницы, которые содержат множественные версии (например, учитывает «Страницу-1», «Страницу-2» наряду со страницей «Посмотреть все» и т.д.), отказываясь от тестирований, вы рискуете «уронить» сайт в поисковых системах.

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

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

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

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

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

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

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

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

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

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

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

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. При разделении сайта на несколько частей необходимо вносить изменения в . Когда речь заходит об индексации, любые изменения, внесенные в , игнорируются роботами Google.

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

Когда идет речь об онлайн-маркетинге или веб-дизайне, чрезвычайно важно быть инициатором успешных идей и формировать в собственной сфере. Сегодня речь пойдет об одной из подобных тенденций — бесконечном скроллинге (прокрутке) страниц на сайте: какие возможности он представляет для бизнеса? как лучше реализовать и когда следует отказаться от этой функции? Материал написан на основе перевода статьи про Infinite Scrolling от SpeckyBoy.

Основные разделы статьи:

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

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

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

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

Возможности бесконечной прокрутки

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

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

Положительные характеристики метода:

• Удержание пользователей . Это одна из главных характерных черт бесконечной прокрутки, плюс она позволяет быстро вовлекать посетителей. Кроме того, также мотивирует юзеров остаться на странице, поскольку они могут бесконечно просматривать содержание, прокручивая вниз.
• Легкая навигация/удобство использования . Скроллинг – простой для понимания и универсальный метод, не требующий особых усилий для выполнения. Он сразу открывает посетителям доступ к основной информации сайта.
• Подходит для просмотра иллюстрированных материалов, а также для пользователей мобильных устройств . Бесконечный скролл – хороший способ обеспечить просмотр множества простых визуальных элементов. Также хорошо подходит для мобильных устройств, где лучшим способом навигации считается прокрутка одним пальцем.

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

Причины избегать бесконечную прокрутку

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

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

• Любые сайты, предусматривающие поиск специальных продуктов или услуг . Когда пользователи попадают в проект с бесконечной прокруткой, они сталкиваются со множеством опций. Это не всегда подходит для тех, кто преследует конкретные цели. Слишком большое количество вариантов, вероятнее всего, заставит посетителя покинуть веб-ресурс.
• Сайты с наполнением, ориентированным на долгий период времени . Журналы и веб-ресурсы, где статьи требуют углубленного изучения, не выиграют от применения бесконечной прокрутки. Непрерывно загружающийся контент может показаться чрезмерно подавляющим с точки зрения и приведет к тому, что пользователи скорее покинут сайт, нежели продолжат чтение.
• Сложность навигации при повторном поиске конкретной информации . Одна из главных причин не переходить на данную функцию – трудности повторного конкретной информации. Это может сказаться негативным образом в коммерческих нишах. Так, например, из-за бесконечной прокрутки практически невозможно сделать закладку. Многие пользователи Pinterest столкнулись с подобной проблемой, когда, возвратившись назад в новостную ленту, не смогли найти нужную запись, присутствующую на странице всего несколько секунд назад.
• Влияние на поисковую оптимизацию. Одна из наиболее обсуждаемых проблем в теме — негативное влияние на SEO оптимизацию. Страницы с бесконечной прокруткой, по сути, представляют собой одну единственную страницу, в связи с чем количество контента, доступного для поисковой выдачи, снижается. Более того, будет вводиться лишь одно мета-описание, и как следствие, исключается возможность задания релевантной информации о вашем детище. Похожая ситуация в но им не так важно SEO.
• Удобство пользовательского . Некоторые функции сайта просто несовместимы с бесконечной прокруткой. Например, если у вас есть сноски и колонтитулы. Люди будут прокручивать страницу в поисках сносок, однако им не удастся до них добраться. В итоге, вероятнее всего, они не останутся на вашем веб-ресурсе. Также им сложно будет добраться до футера и инфы в нем.
• Отсутствие возможности выбирать . В настоящее время подобная прокрутка не ориентирована на предпочтения посетителей, так как у них нет опции выбора контента. Даже, если пользователь захочет пропустить некоторые информационные блоки, он не сможет так сделать. Это расстраивает тех, кто предпочитает просматривать тексты в более ограниченном количестве.

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

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

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

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

Итого

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

Дополнения и мысли по теме пишите ниже.