Ник Бабич разработчик, теч энтузиаст и просто влюбленный в UX/UI специалист написал заметку в блоге UX Planet про бесконечную прокрутку, мы сделали адаптивный перевод материала специально для читателей Хабрахабр.
«Что же мне выбрать для своего контента: бесконечную прокрутку, или разбивку на страницы?» Некоторые дизайнеры по-прежнему занимаются перетягиванием каната между двумя методами, прежде чем решить, что же использовать в своем проекте. У каждого из методов есть свои сильные и слабые стороны. В этой статье мы предлагаем обзор двух методик, чтобы вам было проще решить, какую из них стоит использовать в своих проектах.
Бесконечная прокрутка Бесконечная прокрутка - это технологический прием, который позволяет пользователям прокручивать массивный кусок контента так, чтобы его конец не попадал в поле зрения. Этот метод просто обновляет страницу при прокрутке вниз. Хоть это и выглядит весьма заманчиво, данный метод не является идеальным решением для любого сайта или приложения.
Плюс №1: Вовлечение пользователя и раскрытие контента.
Использование прокрутки в качестве основного метода исследования данных может привести к тому, что пользователь дольше останется на вашей веб-странице, и его вовлеченность в контент возрастет. С ростом популярности социальных сетей увеличиваются объемы потребляемых данных; бесконечная прокрутка обеспечивает эффективный способ просмотра этого океана информации без необходимости загрузки всех страниц.
Бесконечная прокрутка является практически обязательным элементом новостных интерфейсов. Когда пользователь не ищет что-то конкретное, ему нужно просмотреть множество тем, чтобы найти ту, которая понравится.
Океан заметок Pinterest
Вы можете оценить преимущества бесконечной прокрутки на примере новостной ленты Facebook. Пользователи понимают негласный закон Facebook, согласно которому посмотреть абсолютно все посты у них не получится, ведь контент обновляется слишком часто. Однако с помощью бесконечной прокрутки Facebook делает все возможное, чтобы выставить как можно больше информации пользователям на обозрение. В данном случае прокрутка позволяет пользователям сканировать информацию и ориентироваться в этом потоке.
Новостная лента Facebook позволяет просматривать огромное количество обновляемого контента
Плюс №2: Прокрутка лучше щелканья.
Пользователям удобнее пользоваться прокруткой, чем нажатием / щелчком. Мышки с колесиками и тачскрины сделали прокрутку куда проще, чем щелканье. Для длинного непрерывного контента, учебника, например, перемещение при помощи прокрутки гораздо комфортнее, чем щелканье, когда текст нарезан на несколько отдельных экранов и страниц.
Для щелканья/нажатия: каждое обновление контента требует дополнительных щелчков и времени ожидания загрузки страницы. Для прокрутки: единое и простое действие обновляет контент.
Плюс №3: Прокрутка хороша для мобильных устройств.
Чем меньше экран, тем длиннее полоса прокрутки. Популяризация мобильных версий браузеров – это еще один важный аргумент в пользу прокрутки. Прокрутка проста и понятна в использовании при управлении ею с тачскрина. В результате пользователи наслаждаются поистине отзывчивым приложением или сайтом, независимо от вида устройства, которым они пользуются.
Минус №1: Производительность страницы и ресурсы устройства.
Скорость загрузки страниц – это самое главное для пользователей. Многочисленные исследования показали, что низкая скорость загрузки приводит к тому, что люди покидают ваш сайт, или удаляют приложения. И это плохая новость для тех, кто использует бесконечную прокрутку. Чем больше пользователи прокрутят страницу вниз, тем больше контента будет загружаться на одной странице. В результате скорость обновления контента будет падать все сильнее.
Другой проблемой является ограниченность ресурсов устройства. На многих девайсах с ограниченными ресурсами, таких как iPad, бесконечная прокрутка сайтов, особенно с большим количеством изображений, может начать тормозить из-за огромного потока загружаемой информации.
Минус №2: Поиск и локация объектов.
Еще одна проблема с бесконечной прокруткой заключается в том, что когда пользователи оказываются в определенной точке потока, они не могут зафиксировать свое местоположение при помощи закладки и вернуться в эту точку позже. Если они покидают сайт, они теряют точку, на которой закончили просмотр, и им придется прокручивать все заново, чтобы вернуться на то же место. Невозможность зафиксировать положение прокрутки не только причиняет пользователю неудобства, но еще и, как следствие, портит общий опыт взаимодействия.
В 2012 году Etsy потратили много времени на внедрение нового интерфейса с бесконечной прокруткой и обнаружили, что этот новый интерфейс существенно уступает старому по функциональности. Хотя количество покупок не снизилось, показатели использования сайта существенно упали – теперь люди не так часто пользовались поиском.
Интерфейс поиска у Etsy с полосой прокрутки. Текущая версия содержит разбивку на страницы
Как отмечает Дмитрий Фадеев: «Люди хотят вернуться к списку результатов поиска, чтобы еще раз просмотреть предметы, которые они только что видели, и сравнить их с теми, которые находятся где-то в другом конце списка. Бесконечная прокрутка не только мешает им это сделать, она также затрудняет движение вверх и вниз по списку. Когда пользователи закрывают страницу и затем открывают ее снова, они вынуждены прокручивать список еще раз и ждать, пока загрузятся все результаты поиска. Таким образом, интерфейс с бесконечной прокруткой на самом деле медленнее, чем с разбивкой на страницы».
Минус №3: Несоответствие полосы прокрутки.
Еще одна неприятная вещь заключается в том, что полоса прокрутки не отражает фактический объем данных. Вы пролистываете вниз в полной уверенности, что конец уже близко. Это само по себе побуждает вас докрутить до конца, ведь осталось так мало. Но вот вы спустились еще ниже – и вдруг полоса подгрузилась и увеличилась вдвое, добавив вам еще столько же информации, которую нужно просмотреть. С точки зрения доступности для пользователя, подгружаемые полосы прокрутки –очень плохой вариант.
Полоса прокрутки должна отражать реальный размер страницы
Минус №4: Отсутствие нижнего колонтитула.
Нижние колонтитулы существуют не просто так: в них содержится контент, который иногда нужен пользователю. Например, если пользователи не могут что-то найти, или им нужна дополнительная информация, они обычно обращаются к нижнему колонтитулу. Но поскольку полоса прокрутки бесконечна, новые данные в ней все подгружаются и подгружаются по мере спуска вниз, нижний колонтитул так все время и остается вне поля зрения.
Когда LinkedIn в 2012 году внедрили в интерфейс бесконечную прокрутку, у пользователей была возможность увидеть нижнюю часть экрана до того как подгружался новый фрагмент полосы с контентом.
Сайты, на которых реализована бесконечная прокрутка, должны либо прикреплять нижний колонтитул к низу полосы прокрутки, чтобы он был доступен всегда, либо переносить содержащуюся в нем информацию в заголовок страницы, или на боковые панели.
Facebook переместил все ссылки с нижнего колонтитула на правую боковую панель
Другой вариант решения заключается в загрузке контента по требованию с помощью кнопки загрузить. Новый контент не загружается автоматически, пока пользователь не нажмет кнопку. Таким образом, пользователи смогут легко добраться до нижнего колонтитула, а не гоняться за ним.
В Instagram есть кнопка «загрузить еще», которая позволяет пользователям получить доступ к нижнему колонтитулу
Плюс №1: Хорошая конверсия.
Разбивка на страницы прекрасно работает, когда пользователь ищет что-то конкретное в списке результатов, а не просто сканирует и обобщает потоки информации.
Вы можете оценить преимущества разбивки на страницы на примере поиска в Google Search. В зависимости от вашего запроса, выбор наилучшего результата поиска может занять секунды или часы. Но когда вы решите прекратить поиск в текущем формате Google, вы будете знать точное количество результатов поиска. Вы сможете принять решение о том, где вам пора остановиться, или сколько результатов вам нужно просмотреть.
Результаты поиска в Google
Плюс №2: Ощущение контроля.
Бесконечная прокрутка - это как бесконечная игра: неважно, как много вы прокрутите, у вас все равно будет ощущение, что вы никогда не дойдете до конца. Когда пользователи знают точное количество доступных результатов, они могут принять более обоснованное решение о том, когда остановиться, а не бродить по бесконечно прокручивающемуся списку. Согласно исследованию Дэвида Кираса: «Достижение конечной точки дает чувство контроля». В исследовании также уточняется, что когда у пользователя есть ограниченные, но все же значимые результаты, он может легко определить, есть ли среди этих результатов то, что нужно, или нет.
Также, когда пользователи видят общее количество результатов (конечно, если общий объем данных не бесконечен), они могут оценить, сколько времени потребуется на поиски того, что им нужно.
Плюс №3: Расположение элементов.
Интерфейс с разбивкой на страницы позволяет пользователю зрительно запомнить расположение элемента. Пользователь может не вспомнить точный номер страницы, но он будет примерно знать, где видел нужный объект, а нумерованные ссылки позволят ему попасть туда, куда нужно.
С разбивкой на страницы пользователи контролируют навигацию, потому что знают, на какую страницу щелкнуть, чтобы снова оказаться там, где они были раньше.
Нумерация страниц хорошо работает на сайтах и в приложениях для онлайн-продаж. Покупая что-то в интернет-магазине, пользователи хотят иметь возможность вернуться к месту, где они остановились, и продолжить свои покупки.
Сайт MR Porter использует разбивку на страницы
Минус: Дополнительные действия.
Чтобы перейти к следующей части контента при его разбивке на страницы, пользователь должен найти целевую ссылку (например, «далее»), навести на нее указатель мыши, нажать и ждать загрузки новой страницы.
Нужно кликнуть для загрузки контента
Основная проблема здесь заключается в том, что большинство сайтов показывают пользователям весьма ограниченный контент на одной странице. Если вы сделаете ваши страницы длиннее без ущерба для скорости загрузки, у пользователей будет доступ к большему количеству контента на одной странице, и им не придется нажимать на кнопки перехода слишком часто.
Когда использовать бесконечную прокрутку/разбивку на страницы? Существует всего несколько ситуаций, когда бесконечная прокрутка будет эффективной. Она идеально подходит для сайтов и приложений, которые представляют пользовательский контент (Twitter, Facebook) или визуальный контент (Pinterest, Instagram). С другой стороны, разбивка на страницы – это безопасный вариант и хорошее решение для сайтов и приложений, которые предназначены для целенаправленной деятельности пользователей.Google является хорошим примером для иллюстрации. В Google Images используется бесконечная прокрутка, потому что пользователи просматривают изображения гораздо быстрее, чем текст. Чтение результатов поиска занимает намного больше времени. Вот почему результаты поиска в Google Search по-прежнему представлены более традиционно, в виде отдельных страниц.
Заключение Дизайнеры должны взвесить все плюсы и минусы бесконечной прокрутки и разбивки на страницы, прежде чем выбрать один из методов. Выбор зависит от контента проекта и того, как этот контент подается. Если обобщать, бесконечная прокрутка хорошо работает на сайтах или приложениях типа Twitter, где пользователи потребляют бесконечно льющийся поток данных, не акцентируя внимание ни на чем конкретном. Интерфейс с разбивкой на страницы хорош для вывода результатов поиска, когда люди ищут определенный товар, и им важна локализация каждого просмотренного элемента.В следующих статьях мы рассмотрим лучшие примеры использования бесконечной прокрутки и разбивки на страницы. Так что следите за обновлениями!
Всем привет. Сегодня хочу поговорить с вами о том, как организовать «ленивую загрузку» контента на посадочных страницах.
Часто, ее еще называют «бесконечной прокруткой». Наверняка вы видели подобный эффект, когда контент изначально не присутствует на сайте, а по мере прокрутки страницы он плавно подгружается.
Давненько уже написали в раздел «Ваши предложения», с просьбой написать статью о том, как реализовать такой эффект:
Вот и решил, заняться реализацией. Спасибо, что подкидываете идеи. Приступим…
Как и в большинстве случаев, начинаем с того, что подключаем библиотеку jQuery:
А сейчас нужно немножко отвлечься и я объясню вам суть метода. Все это затевается для того, чтобы не грузить все элементы сайта (ваше портфолио или отзывы), а подгружать их по мере необходимости. Например, при клике пользователя по кнопке «Показать еще». Таким образом, страница будет грузиться намного быстрее. А теперь суть, при помощи 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 можно реализовать «ленивую загрузку». Присылайте еще темы, на которые вы хотели-бы почитать статью на блоге. По мере возможности буду стараться публиковать не запланированный материал, а тот, о котором спрашиваете вы в разделе «Ваши предложения». А на сегодня — все. Пока!
Вы когда-нибудь изучали, как люди потребляют веб контент? Они просматривают сотни страниц в день. Читают на ходу, останавливаясь на картинках и тексте, выделенном жирным шрифтом. Более того, они в большей степени сканируют страницу, а не читают.
Поэтому бесконечная прокрутка и стала столь популярной; она сохраняет время при чтении страниц сайта. Движимые постоянной боязнью пропустить что-либо люди предпочитают получать весь контент на лету внутри одной страницы.
В данной статье мы погрузимся в исследование отдельного метода потребления контента – бесконечной прокрутки и посмотрим на некоторые интересные примеры.
Что такое бесконечный скроллинг?Бесконечный скроллинг
это техника, которая позволяет загружать новый контент
на страницу при ее проматывании. В зависимости от сценария, содержимое может
быть загружено сразу или разделено на подразделы, которые появляются по
требованию, одним нажатием кнопки.
Предположительно, бесконечная прокрутка была разработана как более быстрая и
удобная для пользователя альтернатива разбивке на страницы. Но верно ли это?
Фактически, все зависит от ситуации. Нет причин загружать сразу сто страниц
контента для плавной навигации; есть вероятность, что многие люди просто уйдут
на полпути. Поэтому представляется целесообразным разделить варианты
использования на те, которые хороши для бесконечной прокрутки, и те, которые
нуждаются в альтернативе.
Основная причина использования бесконечной прокрутки на странице - это объемный контент, который должен привлекать внимание посетителей. Кажется все просто, но контент должен быть большим и иметь плоскую иерархию. В противном случае нужно рассматривать альтернативы.
Для социальных сетейВ социальных сетях и блогах все записи относительно равны. Ну, некоторые из них могут быть более или менее интересными, но слишком субъективно разделять их на подкатегории. Такие платформы, как Facebook или Twitter , обновляются в реальном времени и оставляют предыдущую историю сообщений. Это делает их по-настоящему бездонными.
Для не менее важного контентаДопустим, есть некоторый веб-сайт (интерактивная галерея искусств), целью которого является вдохновить того, кто просматривает, представленные на нем изображения. В такой ситуации, как правило, люди не ищут что-то конкретное. Скорее, они будут прокручивать страницу снова и снова, пока не найдут что-то, что бросается в глаза. Здесь, самое большее, что вы можете сделать, это позволить им сортировать результаты на основе новизны или популярности.
Для мобильных интерфейсовСмартфоны и планшеты сделали бесконечную прокрутку интуитивно понятным действием для мобильных пользователей. Она позволяет пользователю не загружать весь контент одновременно, тем самым делая приложение или мобильный сайт более легкими.
Для повествованияТаким образом, как бесконечная прокрутка имеет важное значение в поддержании заинтересованности и вовлеченности пользователя. Однако ее необходимо применять с умом, только там, где это действительно необходимо.
Есть вопросы? Напиши комментарий!
Привет! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress! Сегодня вы узнаете как можно очень просто и быстро сделать на своём сайте бесконечную прокрутку любых типов записей. Вы сможете сделать бесконечную прокрутку для страниц, записей, медиафайлов, изображений, чата, аудиозаписей, ссылок, галерей, видео и т.д. Вы сможете добавить бесконечную прокрутку на любую страницу с помощью простого шорткода. Создать шорткод можно прямо из меню визуального редактора WordPress.
Бесконечная прокрутка записей плагин WordPressУстановить Супер плагин Ajax Load More – Infinite Scroll вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
Для начала нужно настроить основные параметры:
– Container Type, здесь можно изменить тип контейнера, но не обязательно.
– Disable CSS, можно отключить CSS стили плагина, чтобы использовать свои стили. Не обязательно.
– здесь вам нужно выбрать стиль загрузки контента. У вас на выбор два варианта – кнопка или бесконечная прокрутка. Нажмите по полю “Chasing Arrows”, чтобы выбрать подходящий для вас вариант.
– Button Classes, можно добавить классы для кнопки. Не обязательно.
– Ajax Security, защита URL адресов от злоупотребления Ajax запросов. Рекомендуется включить.
– Top of Page, на начальной странице загрузки, переместить окно браузера пользователя в верхнюю часть экрана. Это может помочь предотвратить загрузку ненужных сообщений.
– Dynamic Content, отключить динамическое население категорий, тегов и авторов в шорткод Builder. Рекомендуется, если у вас есть необыкновенное количество категорий, тегов и / или авторов.
– Editor Button, можно скрыть кнопку для создания шорткодов из визуального редактора WordPress, на странице редактирования записи или страницы.
– Error Notices, уведомления об ошибках. Рекомендуется включить.
– Сохраните настройки .
Если вы хотите добавить бесконечную прокрутку сразу в запись или на страницу, то можно создать шорткод прямо из визуального редактора WordPress, с помощью специальной кнопки.
Что в первом, что и во втором варианте, настройки абсолютно одинаковые, сейчас мы их разберём:
– Template, шаблон оставьте по умолчанию, ничего менять здесь не надо.
– ID, если вы собираетесь добавлять бесконечную прокрутку на несколько страниц, с разными типами вывода записей, то вам нужно указать здесь уникальный идентификатор, чтобы шорткоды отличались. Нажмите под полем на вкладку – Generate Unique ID, чтобы добавить уникальный ID.
– Container Type, можно указать тип контейнера. Не обязательно.
– Container Classes, можно добавить классы для контейнера, не обязательно.
– Label, можно добавить свою надпись на кнопку, если в основных настройках вы выбрали кнопку. Если вы выбрали бесконечную прокрутку, здесь можно ничего не менять.
– здесь можно указать надпись, которая отображается на кнопке во время загрузки контента.
– Images Loaded, загружать изображения перед загрузкой основного содержимого. Не обязательно включать данную функцию.
– Pause, не загружать сообщения пока пользователь не нажмёт на кнопку.
– Enable Scrolling, включите данный параметр, чтобы включить бесконечную прокрутку. При прокрутки страницы записи будут автоматически подгружаться, то есть на кнопку жать не надо.
– Scroll Distance, расстояние от нижней части экрана, чтобы вызвать загрузку сообщений. (По умолчанию = 150)
– Maximum Pages, максимальное количество страниц для загрузки во время прокрутки. (0 = без ограничений)
– Pause Override, разрешить прокрутку, чтобы переопределить параметр Pause и запустить загрузку сообщений при прокрутке.
– Transition Type, можно выбрать стиль загрузки перехода.
– Transition Speed, скорость перехода в миллисекундах.
– Transition Container, удалить контейнер загрузки, не рекомендуется!
– Destroy After, удалить ajax загрузку после загрузки определённого количества страниц (укажите количество в поле). Не обязательно!
– Posts Per Page, укажите здесь сколько будет загружаться записей или страниц за один раз.
– Post Type, выберите здесь, какие типы записей вы хотите добавить в бесконечную прокрутку.
– Post Format, можно выбрать формат сообщений. Выберите стандартный формат, для вывода значений по умолчанию.
– Category, можно включить или исключить определённые категории. Ничего не выбирайте, тогда будут использоваться все категории.
– Date, можно указать дату, для запроса по дате архива, чтобы выводились записи из определённого архива. Не обязательно.
– Custom Fields (Meta_Query), можно выводить определённые пользовательские поля, указав здесь их данные. Не обязательно! Оставьте без изменений!
– Search Term, здесь можно указать слово или слова, по которым будут выводиться записи. То есть, если в записи есть такое слово, значит запись будет показана. Не обязательно!
– Post Parameters, здесь можно включить или исключить определённые записи, указав их ID. Можно выбрать статус записи, например, опубликованные или нет.
– Ordering, здесь можно выбрать, по каким параметрам сортировать записи при выводе их в бесконечной прокрутке. Можно оставить по умолчанию.
– Offset, здесь можно задать смещение. Например, если указать 5, то первые 5 записей будут пропущены.
– Custom Arguments, через точку с запятой список разделенных пользовательских значений. Могут быть использованы для запроса по параметрам, не доступных в шорткоде. Не обязательно!
Шорткод необходимо добавить на страницу, где будет бесконечная прокрутка. Если в шорткоде вы выбрали тип записей post, то в бесконечной прокрутке будут выводится последние записи и т.д. Всё очень просто! Плагин лично проверял, всё работает! Декабрь 22, 2018 автором: Илья Журавлёв
Сайты с бесконечной прокруткой или очень долгой на сегодняшний день становятся одними из популярных. Да, тенденция появилась еще пару лет назад, но постепенно становится все известнее. И называть такую прокрутку модой, стилем, «фишкой» не является правильным. Скорее, это необходимость. Необходимость предоставлять взору посетителей большие части контента. Буквально открывать перед ними всё, что есть на сайте.
Мы все знаем бесконечные подзагрузки новостей в ВКонтакте, Facebook, Twitter и иных социальных сетях, поэтому не сложно представить, о чем идет речь.
И что самое занятное, у такого скроллинга существуют преимущества. С одной стороны, происходит практически 100% вовлеченность пользователя в изучение контента. Ему не приходится отвлекаться, изучать меню, разделы, ожидать загрузки очередных страниц, даже о навигации ему не приходится задумываться.
С другой стороны, же, бесконечная прокрутка востребована на мобильных устройствах. Чем меньше размер экрана, тем прокрутка нужнее. На таком экране мало что можно расположить, поэтому заголовки, короткое описание, небольшая картинка, и этого вполне достаточно. Уже на больших экранах можно и навигацию отобразить и кнопочки, и рамочки, блоки разные и прочее. Более того, управляя пространством на мобильном экране, прокрутка становится доступнее для использования.
Но это одна сторона медали. Что же дизайнеры? Что находят они в бесконечной прокрутке? Зачем стараются применить её к разным по тематике и стилям проектам, даже если у них нет мобильного варианта? Все просто: бесконечность удобна для конверсии, для внимания, для художественных идей, например Apple Mac Pro , Boat , firewatch .
.jpg)
И даже несмотря на то, что не на каждом сайте можно использовать бесконечную прокрутку, есть идеи и решения мастеров, как достичь успеха.
ПоощрениеПрокручивать страницу дальше и дальше пользователи будут только тогда, когда им это интересно. Особенно в момент завершения загрузки начальной страницы. Поэтому, если они видят нужные им фотографии, заголовки, текст, то можно уже не сомневаться в их действиях. Дизайнеры как раз и воплотили это в, например, 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 использовал эффект псевдо-параллакса, но очень мало. Он не нарушает привычного нам хода изучения контента, но добавляет небольшой изюминки.
.jpg)
Бесконечная прокрутка станиц интересна, она дает простор воображению и творчеству. Но одно дело просто рассмотреть пути реализации и некоторые моменты такого явления, как бесконечная прокрутка страницы. Другое дело разыскать . Реально красивые.
Lexus предлагает изучение технологий, разработки и прочего в весьма необычной форме. Тематика контента выбирается с помощью движения мышки, а после выбора перенаправляет на соответствующую станицу. Здесь же все изображения искажены в перспективе, предлагается и подзагрузка материала. Анимация переходов и появлений есть, но легкая и почти незаметная. А параллакс использован на главной станице выбора тематик.
Claridgeicon обладает долгой прокруткой, но интересной. Даже если сами мы не имеет отношения к строительству, проектированию зданий, этот сайт увлечет. Контента так много, и такого разного, что невольно прокручиваешь страницу и смотришь на него. То видео, то чертежи, то инфографика, то фотографии. И, да, верхнее «липкое» меню всегда есть на глазах, и каждый пункт его прикреплен к секции странницы. Что уж говорить о панорамном видео в 360 градусов.
Foodisforeating с секретом. Навигация настолько миниатюрна, что её легко пропустить и не заметить, но обладает одной большой страницей с прокруткой, которая влияет на… отображение контента и инфографику. Да, и такое бывает. Иными словами, вы не просто листаете её вниз. С помощью колесика мышки можно увидеть загрузку изображений, постепенное появление текста, графиков и прочее. Трудно описать, и лучше посмотрите своими глазами. Эффектов много, но в целом все выглядит просто и функционально.
Сhannel Nationalgeographic тоже способен поразить. Станица может и не выглядит большой и длинной, но зато контент можно прокручивать в разные стороны. Много разделов и секций, и прокрутка в каждой есть влево-вправо и верх-вниз. При этом не просто загружается подборка записей, а все окружение (фотографии, видео, новости, статьи) на какую-то тему. Оригинально и наглядно. Действительно смотришь, ищешь, разглядываешь даже. И на конверсию влияет положительно такая вовлеченность.
Powerofpossible рассказывает о человеческой энергии, о технологиях, о возможностях человека, о нефти и энергии солнца и о многом ином. Но рассказывает в анимационной форме, где каждая часть контента появляется при прокрутке колесика мышки. При этом все создано на красивых фонах, с загадочной идеей появления людей и мыслей в облаках, а затем они спускаются на землю и под воду (подводный мир). Длинная страница, долгая прокрутка, но интересный контент.
Twinpinejourney также предлагает пройти историю и узнать подробности казино и отелей Twin Pine в Калифорнии. С одной стороны, предлагается просто просмотреть станицу сверху вниз, с другой, пролистать отдельные секции слева-направо с тем, чтобы узнать некоторые подробности. Даже дорожная карта и то обладает анимацией, что зависит от прокрутки колесика мышки. И даже от вашей скорости прокрутки зависит. Интересно и красиво все в целом.
Новаторских идей еще много и бесконечная прокрутка страницы или долгая на таких сайтах не вызывает ни раздражения, ни неудобства. Так или иначе, такое, если не тренд, но явление способно создать совершенно невообразимый захватывающий опыт при просмотре сайта. Если прокрутка интуитивно понятна, аналогично пользовательскому интерфейсу, то её только приветствуют.
В любом случае, нужно четко решить для себя, нужна ли бесконечная прокрутка данному проекту или нет. Недостаточно просто подобрать контент и прописать код, чтобы он весь загружался сразу на главную страницу.
А это значит, что простора для идей очень много и реализовывать их можно много раз и всегда по-разному. Что еще раз подтверждает, веб-дизайн - сфера деятельности очень творческая, новаторская, технологичная.
