a! Разбивка контента на страницы с номерами является классической схемой пагинации, интуитивно понятной и привычной для пользователей. Однако, в последнее время все больше сайтов начинают «применять на практике» такой вид навигации по страницам как, Infinite Scroll (бесконечная прокрутка). Исключением не стали даже такие гиганты как Google, Facebook и ВКонтакте. Естественно у данного вида пагинации есть свои плюсы и минусы, но это уже другой разговор. В этом уроке мы рассмотрим, как можно реализовать подобную навигацию.

Как это работает?!

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

Процесс определения положения пользователя на странице:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

// Если прокрутка включена if ($settings.scroll == true ) { // .. и пользователь прокручивает страницу $(window) .scroll (function () { // Проверяем пользователя, находится ли он в нижней части страницы if ($(window) .scrollTop () + $(window) .height () > $this.height () && ! busy) { // Идет процесс busy $this.) .html ) ; // Запустить функцию для выборки данных с установленной задержкой // Это полезно, если у вас есть контент в футере setTimeout(function () { GetData() ; } , $settings.delay ) ; } } ) ; }

Вы наверняка заметили использование переменных, так сказать параметры плагина, о них немного позже. Функция AJAX запроса к PHP файлу getData() , выглядит следующим образом:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

// Функция AJAX запроса function getData() { // Формируется POST запрос к ajax.php $.post ("ajax.php" , { Action : "scrollpagination" , number : $settings.nop , offset : offset, } , function (data) ) .html ($initmessage) ; // Если возвращенные данные пусты то сообщаем об этом if (data ) .html ($settings.error ) ; } else { // Смещение увеличивается offset = offset+ $settings.nop ; // Добавление полученных данных в DIV content $this.find (".content" ) .append (data) ; // Процесс завершен busy = false ; } } ) ;

Файл AJAX.php

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

mysql_connect ("localhost" , "username" , "password" ) or die () ; mysql_select_db ("database" ) ; $offset = is_numeric ($_POST [ "offset" ] ) ? $_POST [ "offset" ] : die () ; $postnumbers = is_numeric ($_POST [ "number" ] ) ? $_POST [ "number" ] : die () ; $run = mysql_query ("SELECT * FROM ex_posts ORDER BY id DESC LIMIT " . $postnumbers . " OFFSET " . $offset ) ; while ($row = mysql_fetch_array ($run ) ) { $content = substr (strip_tags ($row [ "text" ] ) , 0 , 500 ) ; echo " " . $row [ "title" ] . " " ; echo " " . $content . "... " ;

Использование в качестве плагина

Для этого нужно найти в ИСХОДНИКАХ (ссылка в начале статьи), файлы javascript.js и если желаете стили style.css + должна быть подключена библиотека jQuery. Остается только определиться в какой DIV будут подгружаться данные и вызвать метод scrollPagination с указанием параметров.

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

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

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

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

Но это одна сторона медали. Что же дизайнеры? Что находят они в бесконечной прокрутке? Зачем стараются применить её к разным по тематике и стилям проектам, даже если у них нет мобильного варианта? Все просто: бесконечность удобна для конверсии, для внимания, для художественных идей, например Apple Mac Pro , Boat , firewatch .

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

Поощрение

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

Ненавязчивость

Многие веб-дизайнеры стремятся не навязывать длинную прокрутку зрителям. И это верно, ибо не всегда и не всем пользователям хочется бесконечно прокручивать и прокручивать контент в поисках интересного или нужного. Более того, всегда хочется иметь перед глазами какие-то ориентиры: где находимся, в каком разделе, что еще есть на сайте. Именно поэтому частенько мы видим в верхней части страницы плавающую панель навигации. И это удобно, поскольку бесконечная прокрутка попросту скрывает строчку меню с глаз, и совершить переход в иной раздел не всегда удобно. Это Uplug , Voux , Geranandpartners , Company.airbus (навигация бела перемещена вправо).

Все имеет начало

Бесконечный или даже длинный скроллинг способствует тому, что пользователи теряются на странице. Им сложнее сориентироваться: вначале они еще или уже в середине. Более того, даже при наличии кнопки «вверх» или «назад» (обычно она в виде стрелочки) посетители возвращаются в начало станицы, а не туда, где остановились. В ленте новостей ВКонтакте «Назад» реализована именно для удобства. То есть, она возвращает наш взор туда, где мы били ранее. Аналогично реализована работа и на flickr . Если выбрать изображение, открыть его в этом же окне, а затем нажать кнопку «назад», то вернёмся мы именно к моменту, где были раньше, а не в началао страницы. Аналогично работает и интернет-магазины etsy , amazon .

Но, наоборот, проект Fomo не позволяет такого. Всегда будет загружаться начало страницы с плитками и материалами. И даже Boomandthearty тоже нет, несмотря на, казалось бы, не такую уж и простую навигацию при большом объеме контента.

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

Активность перед глазами

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

Например, это использование кнопок «загрузить больше» или почти мгновенная анимация подзагрузки Time , Vogue , Яндекс Дзен , Voux , Ria .

Влияние на бесконечность

Даже если страница имеет бесконечную прокрутку, пользователям хочется пролистать её быстрее. Подсознательно. Особенно это заметно, если прокрутка не бесконечная, а просто длинная и рано или поздно, но кончается. Желание веб-дизайнеров иное - задержать посетителей на сайте, поэтому чаще всего прокрутка странниц всегда имеет одну и ту же скорость. Иными словами, как бы быстро мы не крутили колёсико мышки, скорость появления нового материала не увеличится и появится контент только тогда, когда задумали разработчики. Это отлично реализовано на Apple Mac Pro . Можно даже в настройках мышки задать скорость прокрутки в количестве строк, но контент на сайте будет меняться со своей заданной скоростью. Аналогично работает и Амурский тигр , company.airbus .

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

Удобство просмотра

В первую очередь, касается это интернет-магазинов и карточек товаров. Например, веб-мастера добавляют иконки «Нравится» к каждому товару или «Добавить в закладки». Это упрощает изучение контента, если его много. Более того, во время поиска отображается и количество найденного. То есть, даже если станица с выбранными товарами бывает неимоверно длинной, пользователь ориентировочно знает уже, сколько он просмотрел и сколько ему еще впереди осталось. Это удобно, хотя дизайнеры частенько и игнорируют такой подход. Куда проще создать карточки с товарами и загрузить их на единый холст. Так и сделали на Ericbeauduin , Vagabond , Skechers даже фотобанк Photobazaar не предлагает отбирать на будущее фотографии.

Но иные проекты, наоборот, позволяют сортировать информацию. Это и Wildberries , Ozon , Lamoda .

Эффекты, больше эффектов

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

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

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

Новаторство

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

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

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

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

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

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

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

Завершение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итого

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

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