Вы когда-нибудь изучали, как люди потребляют веб контент? Они просматривают сотни страниц в день. Читают на ходу, останавливаясь на картинках и тексте, выделенном жирным шрифтом. Более того, они в большей степени сканируют страницу, а не читают.
Поэтому бесконечная прокрутка и стала столь популярной; она сохраняет время при чтении страниц сайта. Движимые постоянной боязнью пропустить что-либо люди предпочитают получать весь контент на лету внутри одной страницы.
В данной статье мы погрузимся в исследование отдельного метода потребления контента – бесконечной прокрутки и посмотрим на некоторые интересные примеры.
Что такое бесконечный скроллинг?Бесконечный скроллинг
это техника, которая позволяет загружать новый контент
на страницу при ее проматывании. В зависимости от сценария, содержимое может
быть загружено сразу или разделено на подразделы, которые появляются по
требованию, одним нажатием кнопки.
Предположительно, бесконечная прокрутка была разработана как более быстрая и
удобная для пользователя альтернатива разбивке на страницы. Но верно ли это?
Фактически, все зависит от ситуации. Нет причин загружать сразу сто страниц
контента для плавной навигации; есть вероятность, что многие люди просто уйдут
на полпути. Поэтому представляется целесообразным разделить варианты
использования на те, которые хороши для бесконечной прокрутки, и те, которые
нуждаются в альтернативе.
Основная причина использования бесконечной прокрутки на странице - это объемный контент, который должен привлекать внимание посетителей. Кажется все просто, но контент должен быть большим и иметь плоскую иерархию. В противном случае нужно рассматривать альтернативы.
Для социальных сетейВ социальных сетях и блогах все записи относительно равны. Ну, некоторые из них могут быть более или менее интересными, но слишком субъективно разделять их на подкатегории. Такие платформы, как Facebook или Twitter , обновляются в реальном времени и оставляют предыдущую историю сообщений. Это делает их по-настоящему бездонными.
Для не менее важного контентаДопустим, есть некоторый веб-сайт (интерактивная галерея искусств), целью которого является вдохновить того, кто просматривает, представленные на нем изображения. В такой ситуации, как правило, люди не ищут что-то конкретное. Скорее, они будут прокручивать страницу снова и снова, пока не найдут что-то, что бросается в глаза. Здесь, самое большее, что вы можете сделать, это позволить им сортировать результаты на основе новизны или популярности.
Для мобильных интерфейсовСмартфоны и планшеты сделали бесконечную прокрутку интуитивно понятным действием для мобильных пользователей. Она позволяет пользователю не загружать весь контент одновременно, тем самым делая приложение или мобильный сайт более легкими.
Для повествованияТаким образом, как бесконечная прокрутка имеет важное значение в поддержании заинтересованности и вовлеченности пользователя. Однако ее необходимо применять с умом, только там, где это действительно необходимо.
Всем привет. Сегодня хочу поговорить с вами о том, как организовать «ленивую загрузку» контента на посадочных страницах.
Часто, ее еще называют «бесконечной прокруткой». Наверняка вы видели подобный эффект, когда контент изначально не присутствует на сайте, а по мере прокрутки страницы он плавно подгружается.
Давненько уже написали в раздел «Ваши предложения», с просьбой написать статью о том, как реализовать такой эффект:
Вот и решил, заняться реализацией. Спасибо, что подкидываете идеи. Приступим…
Как и в большинстве случаев, начинаем с того, что подключаем библиотеку jQuery:
А сейчас нужно немножко отвлечься и я объясню вам суть метода. Все это затевается для того, чтобы не грузить все элементы сайта (ваше портфолио или отзывы), а подгружать их по мере необходимости. Например, при клике пользователя по кнопке «Показать еще». Таким образом, страница будет грузиться намного быстрее. А теперь суть, при помощи ajax технологии мы будем подгружать нужный элемент (div) и стороннего файла на наш лендинг. Вот так все просто, как в теории, так и на практике, и вы в этом скоро убедитесь.
Теперь давайте создадим основной блок, например, с картинками наших работ. Предположим мы рисуем иконки, и будем подгружать их при клике по кнопке. Я создал такую структуру:
Портфолио
Показать еще...
Как видите, все — просто. Но на что нужно обратить внимание? А обратить внимание нужно на div с id=»smartPortfolio», id=»moreButton» и id=»loadingDiv», так как они используются в скрипте, который и помогает нам загружать контент с других страниц. SmartPortfolio — это «контейнер» для нашего портфолио. MoreButton — это будет наша кнопка, при клике на которую загружается еще одна часть портфолио. LoadingDiv — область, в которую будет выводиться текст, когда портфолио будет полностью открыто, либо возникнет какая-нибудь ошибка.
Например, часть из читателей все равно будет пытаться тестировать этот скрипт не на сервере, а просто откроют индексный файл в браузере. В таком случае они увидят сообщение об ошибке. Кроме того, при совсем медленном соединении, на загрузку файлов может понадобиться время, и чтобы пользователь понимал, что процесс идет, можно вписать туда сообщение, что идет загрузка данных или поместить (картинку, индикатор прогресса или еще что-то).
Сам скрипт я не писал, а нашел на одном из сайтов, автор указан в исходнике, кому интересно — посмотрите. Так как он не слишком большого размера, то приведу его весь, но если вы планируете использовать такие же названия айдишников и пути к файлам, как у меня, то можете даже не заглядывать в него, а просто подключить перед закрывающимся тегом body (в футере).
Для тех, кто планирует вносить правки вот сам скрипт:
Var lazyload = lazyload || {}; (function($, lazyload) { "use strict"; var page = 2, buttonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio"; lazyload.load = function() { var url = "./pages/" + page + ".html"; $(buttonId).hide(); $(loadingId).show(); $.ajax({ url: url, success: function(response) { if (!response || response.trim() == "NONE") { $(buttonId).fadeOut(); $(loadingId).text("Портфолио полностью загружено"); return; } appendContests(response); }, error: function(response) { $(loadingId).text("К сожалению, возникла какая-то ошибка при запросе. Пожалуйста, обновите страницу."); } }); }; var appendContests = function(response) { var id = $(buttonId); $(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(container)); page += 1; }; })(jQuery, lazyload);
Итак, теперь стоит поговорить о тех файлах, из которых мы будем подгружать информацию. Скрипт предполагает, что это будут файла с именами 2.html…5.html и т.д. В которых лежит наша информация. Например, у меня первым подгружается файл 2.html и он имеет такое содержимое:
В моей структуре сайта, страницы из которых будет браться информация для последующей загрузке при клике, лежит в папке pages. Там три файла, два из которых заполнены, а последний — пустой. Это предполагает логика скрипта.
Путь в скрипте указан следующим образом:
Var url = "./pages/" + page + ".html";
Если вы планируете использовать другой путь, не забудьте заменить его в скрипте. Кроме того, если вы использовали другие айдишники, то и их придется переопределить в скрипте. Вот тут:
ButtonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio";
И, как я уже говорил, перед закрывающимся тегом body подключаем сам скрипт:
Вот так на landing page можно реализовать «ленивую загрузку». Присылайте еще темы, на которые вы хотели-бы почитать статью на блоге. По мере возможности буду стараться публиковать не запланированный материал, а тот, о котором спрашиваете вы в разделе «Ваши предложения». А на сегодня — все. Пока!
При написании этой статьи я понял, что существует два типа людей, между которыми всегда ведется спор: те, кто предпочитает разбиение на страницы и те, кто поддерживает использование бесконечной прокрутки — оба этих «клана » приводят убедительные доказательства в пользу своей точки зрения.
На мой взгляд, и разбиение на страницы, и бесконечная прокрутка имеют свои преимущества. Какой из этих методов выбрать, зависит от критериев каждого конкретного разработчика.
Например, Google использует разбиение на страницы вместо бесконечной прокрутки, и это очень удобно. А социальные сети, такие как Twitter и Facebook всегда будут предпочитать использование бесконечной прокрутки, так как никто не любит каждый раз кликать, чтобы просто прокрутить свою ленту новостей.
Что такое метод бесконечной прокрутки?В веб-разработке бесконечная прокрутка — это метод, который помогает автоматически загружать содержимое, когда пользователь доходит до конца отображаемого контента и прокручивает страницу.
Лучшее использование этой техники можно найти в Twitter , Facebook и многих других ресурсах.
Ниже приводится список, состоящий из 10 лучших jQuery-плагинов бесконечной прокрутки (скролла ).
10 лучших jQuery-плагинов бесконечной прокрутки:
Если вы решили использовать jQuery-плагин бесконечной прокрутки, мы упростим вам задачу. Рассмотренные ниже 10 jQuery-плагинов бесконечной прокрутки поддерживают все функции, которые могут вам понадобиться – просто выберите наиболее подходящий именно для вашего сайта, чтобы сделать пользовательский интерфейс более эффективным и удобным.
jQuery Masonry
Masonry размещает элементы в доступном вертикальном пространстве. Очень популярный плагин с почти 13 000 звезд на github .
Демо-версия Скачать
iScroll
Хотите создать плавную бесконечную прокрутку? iScroll определенно поможет вам создать плавный jquery- скролл . Благодаря интеллектуальной системе кеширования вы сможете создавать бесконечную прокрутку для реализации надежного пользовательского интерфейса. Кроме jQuery , он поддерживает и javascript .
Демо-версия Скачать
WayPoints
WayPoints упрощают реализацию функций прокрутки страницы. С помощью этого простого плагина можно преобразовать навигацию типа «Предыдущая / Следующая » в бесконечно прокручиваемый AJAX -интерфейс . Для WayPoints доступна подробная документация, поэтому его практическое применение не будет сложной задачей.
Демо-версия Скачать
Infinite-Scroll.js
Очень компактный jQuery-плагин бесконечный прокрутки. Infinite Scroll автоматически добавляет следующую страницу, позволяя не загружать все страницы сразу.
Демо-версия Скачать
jScroll
jScroll — простой в использовании jQuery-плагин для бесконечной прокрутки, дающий возможность осуществлять гибкую настройку.
Демо-версия Скачать
jQuery-Endless-Scroll
Этот плагин никогда не позволит вашим пользователям затормозить, находясь в ожидании загрузки новой страницы. jQuery-Endless-Scroll очень гибкий, он включает в себя действительно уникальные функции, такие как добавление дружественных URL-адресов , усечение данных, возможность прокрутки и добавления контента в начало страницы.
Демо-версия Скачать
Infinite AJAX Scroll
Infinite AJAX Scroll — это интеллектуальный jQuery-плагин бесконечной прокрутки. Он может преобразовать существующую систему разбиения на страницы в систему бесконечной прокрутки. Данный плагин считывает на сервере ссылки «следующая / предыдущая» существующей страницы и, когда пользователь достигает ее окончания, загружает эти страницы с помощью AJAX .
Этот подход также оптимизирован с точки зрения SEO и очень прост в реализации.
Демо-версия Скачать
JQuery-ESN-Autobrowse
Широко используемый jQuery-плагин бесконечной прокрутки, который вы можете легко использовать. Он автоматически добавляет содержимое страницы, используя AJAX , когда пользователь просматривает страницу из встроенного кеша браузера. Плагин прост в освоении и практическом использовании.
Демо-версия Скачать
JQuery Infinite Scroll
Еще один простой jQuery-плагин бесконечной прокрутки, позволяющий прокручивать тексты или изображения.
Демо-версия Скачать
Endless.JS
Endless.js — это jQuery-плагин , который помогает создавать бесконечные прокрутки (скроллы ) для HTML-элементов . Он соединяет нижнюю часть с верхней или левую секцию с правой, создавая тем самым иллюзию бесконечной прокрутки.
В 2011 году очень модно было (по-моему, эта мода пошла от Фейсбука) делать у себя на сайтах «бесконечный скроллинг»: это когда пользователь крутит-крутит колесом мыши, и всё новые результаты поиска подгружаются Аяксом внизу страницы, превращая обычный скроллинг в бесконечный и вызывая у столкнувшегося с этим в первый раз пользователя «когнитивный диссонанс».
Также недавно я видел на этом сайте статью, в которой автор выражал своё недовольство «бесконечным скроллингом» и призывал использовать старую добрую «паджинацию».
Я согласен с автором. Я сам - наркоман, и порою сижу за монитором как зачарованный, со стеклянными глазами, кручу-кручу-кручу волшебное колёсико, не в состоянии пойти по делам/на работу/в магазин/поесть/попить/в туалет, и кручу я его с одной единственной мыслью: «Ну когдааа же вы все уже закончитесь?!» (что поделаешь - я привык доводить дела до конца).
Однажды утром я встал и твёрдо решил: «Хватит это терпеть!».
Представляю вам свой небольшой скрипт , который я на днях написал для своей «социальной сети» (с блекджеком и шлюхами).
Чтобы посмотреть демо, скачайте архив , и запустите файл «test/test.html».
Какие нововведения предлагает этот скрипт:
Поскольку основной «скроллбар» они превратили непонятно во что, нам нужно вернуть нормальный «скроллбар», что мы и сделали, нарисовав серую полоску в правой части страницы, сразу слева от обычного «скроллбара».
То, докуда дошла эта полоска сверху - это сколько результатов выборки мы уже пролистали. Вообще, эта полоска как бы чёрная. Там, где она серая - это место во всей выборке, где мы находимся сейчас.
Обратите также внимание на то, что адрес страницы меняется во время прокрутки. Таким образом, вы можете сегодня вечером пролистать половину, добавить страницу в закладки, выключить компьютер, пойти спать, проснуться утром, включить компьютер, зайти на страницу, добавленную вами вчера перед сном в закладки, и продолжить листать с того самого места, на котором вы остановились. И, более того, вы сможете листать с этого места не только вперёд, но и назад.
И по поводу навигации на любую нужную страницу: попасть на любую страницу можно и здесь - просто подставьте в адрес веб страницы номер нужной вам страницы выборки. Поскольку человекопонятные url"ы сейчас являются стандартом, это должно быть годным решением.
Этот скрипт, очевидно, не является чем-то высеченным в граните, и я сам, встав сегодня с утра, переписал его половину. Тем не менее, работоспособность вроде как стабильная, и проверено в последних версиях Chrome и FireFox. Сразу скажу: не гонюсь за «кроссбраузерностью» - её всегда можно будет допилить, если кто-то захочет использовать этот скрипт на своём «кроссбраузерном» сайте.
Вроде как всё, демо говорит само за себя. Пост провоцирует комментарии.
Что ещё можно сделать (на основе комментариев):
При клике в любое место полоски - переходить на соответствующую страницу выборки.
Убирать страницы данных с верха веб страницы, когда данных на веб странице становится слишком много (чтобы не тормозило).
Примеры улучшенного «бесконечного скроллинга».
Ник Бабич разработчик, теч энтузиаст и просто влюбленный в 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, где пользователи потребляют бесконечно льющийся поток данных, не акцентируя внимание ни на чем конкретном. Интерфейс с разбивкой на страницы хорош для вывода результатов поиска, когда люди ищут определенный товар, и им важна локализация каждого просмотренного элемента.В следующих статьях мы рассмотрим лучшие примеры использования бесконечной прокрутки и разбивки на страницы. Так что следите за обновлениями!