Бесконечный скроллинг: Реализация бесконечной прокрутки на JavaScript


21.11.1975 Facebook Twitter LinkedIn Google+ Разное


Содержание

Ajax Scroll — бесконечный скроллинг

Ajax Scroll v1.5.2 — автоподгрузка страниц Joomla

В результате вы получите эффект «бесконечного скроллинга» для своего сайта, на примере ВКонтакте, Твиттера, Фейсбука и др.

  1. Может работать с любыми компонентами Joomla, при наличии ссылок пагинации
  2. Использует технологию AJAX
  3. Современный эффект, как на крупных порталах и соц. сетях
  4. Встроенная навигация по страницам через якори #
  5. Автоскроллинг до нужной страницы
  6. Возможность задать ограничение для загрузки

Плагин получился довольно универсальный — он может работать как с родным компонентом материалов (com_content), так и с другими сторонними компонентами, в которых используется родная пагинация Joomla. Это значит, что вы можете использовать «бесконечный скроллинг» например, в блоге категории, где у вас идет разбивка материалов на несколько страниц, а также в таких компонентах как Virtuemart, Joomshopping и т.

д. и подгружать аяксом ваши товары.

На данный момент плагин AJAX Scroll протестирован и успешно работает со следующими компонентами:

  • com_content — стандартный компонент материалов (блог, новости)
  • Joomshopping — интернет-магазин для Joomla
  • Virtuemart — компонент интернет-магазина
  • AdsManager — компонент доски объявлений
  • Zoo — конструктор контента
  • K2 — конструктор контента
  • MijoShop — компонент интернет-магазина для Joomla на базе Opencart

 

Внимание! На данный момент известно, что плагин не сможет работать с Hikashop

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

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

ru/blog#page/4, т.е. если ваш посетитель остановился где-то посередине списка, при обновлении страницы, произойдет прокрутка до нужного места. Также посетитель может скопировать такую ссылку и поделиться ею с другими — другие пользователи также попадут к нужному участку на странице.

О поисковых системах: для них все останется как и прежде — обычная пагинация, вроде ?start=24, ?start=48 и т.д., т.к., плагин ее просто скрывает для обычных пользователей, а для ботов она будет доступна в исходном коде.

 

Настройки

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

На картинке слева указаны настройки для стандартного компонента материалов в Joomla 3.x на шаблоне Protostar

  • Селектор контейнера — class или id блока, в котором выводится ваш компонент и все его элементы.
  • Селектор материала — class блока, в котором выводится отдельно взятый материал, товар и т. д.
  • Селектор пагинации — class или id блока, в котором содержатся все элементы разбиения страницы, должен быть уникальным и единственным на странице.
  • Селектор следующей стр-цы — class кнопки «Вперед», должен быть уникальным.

 

Это основные параметры плагина, необходимо отнестись внимательно к этим 4-м полям и заполнить их правильно, иначе плагин работать не будет.

В случае, если нет у нужных блоков селектора, вам необходимо их добавить в вашем шаблоне.

  • Конец списка — текст-уведомление об окончании списка.
  • Кнопка — текст самой кнопки для продолжения загрузки.

  • Версия jQuery — если на вашем сайте не подключена библиотека jQuery, то укажите здесь необходимую версию,например 1.8.1, и она будет подключена с CDN Google. Обратите внимание, в этом случае библиотека будет подключена на всех страницах вашего сайта. Если возникают конфликты библиотек, то воспользуйтесь плагином JB Library.

 

Параметры, добавленные с новыми версиями

 Обновление plg_ajax_scroll_v1.5.2

 

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

 

Бесконечный скроллинг: эффективное решение или причуда? Бесконечная Прокрутка Страниц: Особенности И Идеи.

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

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

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

Что такое бесконечный скроллинг?

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

Где использовать бесконечную прокрутку?

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

Для социальных сетей

В социальных сетях и блогах все записи относительно равны. Ну, некоторые из них могут быть более или менее интересными, но слишком субъективно разделять их на подкатегории. Такие платформы, как Facebook или Twitter , обновляются в реальном времени и оставляют предыдущую историю сообщений. Это делает их по-настоящему бездонными.

Для не менее важного контента

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

Для мобильных интерфейсов

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

Для повествования

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

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

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

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 «


» ;
echo «

» . $content . «…


» ;

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

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

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

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

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

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

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

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

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

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

Я согласен с автором. Я сам — наркоман, и порою сижу за монитором как зачарованный, со стеклянными глазами, кручу-кручу-кручу волшебное колёсико, не в состоянии пойти по делам/на работу/в магазин/поесть/попить/в туалет, и кручу я его с одной единственной мыслью: «Ну когдааа же вы все уже закончитесь?!» (что поделаешь — я привык доводить дела до конца).

Однажды утром я встал и твёрдо решил: «Хватит это терпеть!».

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

Чтобы посмотреть демо, скачайте архив , и запустите файл «test/test.html».

Какие нововведения предлагает этот скрипт:

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

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

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

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

Этот скрипт, очевидно, не является чем-то высеченным в граните, и я сам, встав сегодня с утра, переписал его половину. Тем не менее, работоспособность вроде как стабильная, и проверено в последних версиях Chrome и FireFox. Сразу скажу: не гонюсь за «кроссбраузерностью» — её всегда можно будет допилить, если кто-то захочет использовать этот скрипт на своём «кроссбраузерном» сайте.

Вроде как всё, демо говорит само за себя. Пост провоцирует комментарии.

Что ещё можно сделать (на основе комментариев):

При клике в любое место полоски — переходить на соответствующую страницу выборки.

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

Примеры улучшенного «бесконечного скроллинга».

Facebook

Twitter

Вконтакте

Одноклассники

Google+

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

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

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

Задача

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

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

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

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

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

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

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

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

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

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

UICollectionView

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

UIScrollView и (n + 2) UIView

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

Источник

Свой путь

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

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

Реализация

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

Создаём наследника UIView, размещаем на нём UIScrollView и три UIImageView:

final class BannersView: UIView {
    private let scrollView = UIScrollView()

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

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

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

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

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

Добавляем реализацию метода с настройкой scrollView:

После базовой настройки можем заняться макетом и размещением ImageView:

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

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

    var startX: CGFloat = 0.0

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

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

Добавим в UIImageView изображения, которые подтянем с сайта-генератора картинок https://placeholder.com:

    let imageURLs = ImageURLFactory. makeImageURLS()
    imageViews.enumerated().forEach { key, view in
        view.setImage(with: imageURLs[key])
    }

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

Your browser does not support HTML5 video.

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

Для контролирования прокрутки будем использовать UIScrollViewDelegate. В метод setup выставляем делегат для UIScrollView, а также выставляем contentInset, чтобы у первого и последнего изображения были отступы по бокам.

self.scrollView.contentInset = UIEdgeInsets(top: 0.0, left: 16.0, bottom: 0.0, right: 16.0)
self.scrollView.delegate = self

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


extension BannersView: UIScrollViewDelegate {

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

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

}

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

targetRightOffsetX — эта точка поможет определить, является ли правый view центральным.

Результат работы реализации данного метода:

Your browser does not support HTML5 video.

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

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

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


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

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

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

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

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

Добавим метод func set(imageURLs: ), чтобы снаружи выставлять данные для отображения. Туда перенесем часть кода из setup.

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

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

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

Your browser does not support HTML5 video.

Так… При резкой прокрутке сломалось центрирование.

Дело в том, что при сильной прокрутке игнорируется targetContentOffset. Увеличим contentInset, после этого всё работает корректно. Центральный view всегда будет по центру.

self.scrollView.contentInset = UIEdgeInsets(top: 0.0, left: 300.0, bottom: 0.0, right: 300.0)

Your browser does not support HTML5 video.

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

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

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

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

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

    private var currentCenterItemIndex: Int = 0

    private var viewModel: BannersViewModel?

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

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

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

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

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

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

Изменим метод, который используется снаружи для выставления контента:

    func set(viewModel: BannersViewModel) {
        self. viewModel = viewModel
        self.updateViews()
        self.scrollView.contentOffset.x = self.centerItemView.frame.minX - Constants.horizontalItemOffsetFromSuperView
    }

И будем вызывать nextItem и prevItem в методе делегата при смене contentOffset:

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        .......

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

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

Your browser does not support HTML5 video.

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

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

Расширим ViewModel:

struct BannersViewModel {
    let items: [Item]

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

И напишем реализацию баннера:

extension BannersView {
    final class ItemView: UIView {
        private let titleLabel = UILabel()
        private let subtitleLabel = UILabel()
        private let imageView = UIImageView()

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

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

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

            self.imageView.contentMode = .scaleAspectFill

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

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

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

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

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

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


    .......

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

    .......

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

    .......

Результат:

Your browser does not support HTML5 video.

Выводы

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

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

Автор: Dmitrii Chikovinskii

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пожалуйста, оставьте ваши комментарии по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, подписки, отклики, дизлайки, лайки!

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

Вадим Дворниковавтор-переводчик статьи «Top 10 jQuery Infinite Scrolling Plugin With Demo»

Сенатор США требует запретить бесконечный скроллинг в соцсетях

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

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

Закон о снижении зависимости от социальных сетей [англ. The Social Media Addiction Reduction Technology Act] запретит социальным медиа-платформам, например, Facebook, YouTube, Twitter и Snapchat использовать функции, благодаря которым пользователь может потреблять контент бесконечно. Так, в Facebook такой функцией является бесконечная лента новостей, которую можно скроллить вниз, а в видеохостинге YouTube ролики проигрываются один за другим.

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

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

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

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

Однако, платформа обязана предупреждать юзера каждые 30 минут о проведенном времени.

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

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

Помимо прочего, по задумке Джоша Хаули, социальным сетям запретят вводить награды и поощрения для пользователей, которые много времени проводят онлайн. Так, например, Snapchat считает так называемые Snapstreaks — платформа следит, сколько дней подряд пользователь делится фотографиями с одним и тем же другом. Похожая система работает и в YouTube — видеохостинг дарит значки платным подписчикам определенных каналов за количество времени, проведенного за просмотром роликов.

В случае принятия законопроекта надзор за социальными сетями будет осуществлять Федеральная торговая комиссия (FTC) США. У нее также появятся полномочия штрафовать те компании, которые будут пойманы на нарушении закона.

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

Хаули возмутила ошибка Google-переводчика, который в течение непродолжительного времени неправильно переводил фразу «Я не рад тому, что Гонконг станет частью Китая». Сообщается, что в переводе от Google она несла в себе полностью противоположный смысл — «Я счастлив, что Гонконг станет частью Китая». При этом время ошибки совпало с массовыми протестами в Гонконге.

«Получившаяся ошибка перевода совпадает с позицией правительства КНР касательно протестов [в Гонконге]», — заявил сенатор в своем письме в адрес генерального директора Google Сундара Пичаи.

«Учитывая тесные отношения Google с Пекином и финансовый стимул сохранить близость с этим авторитарным правительством, я обеспокоен тем, как Google халатно отнесся к проверке перевода, имея возможность предотвратить ошибку в момент, когда точность сообщения была очень важна», — заявил Хаули. Вскоре после этого проверить Google и его возможные связи с Китаем потребовал и советник президента Трампа Питер Тиль. Впрочем, Белый дом заявил о том, что оснований для беспокойства и угрозы национальной безопасности США он не обнаружил.

Как и почему в Google решили бороться с «бесконечным скроллингом»

Около трёх лет назад с лёгкой руки веб-гигантов Google и Facebook у многих сайтостроителей вошёл в моду «бесконечный скроллинг» (БС), при котором новый контент автоматически подгружается по мере прокручивания до конца страницы. С тех пор на эту технологию перешло множество самых разных ресурсов, в том числе и таких, где её использование выглядит если не нелепым, то по крайней мере неуместным. Более того, в определённых случаях «бесконечный скроллинг» неудобен не только для пользователей, но и для самих владельцев сайтов, так что давно пришла пора посмотреть на эту технологию критически.

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

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

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

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

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

Более того, «бесконечный скроллинг» вводит в заблуждение пользователя, который (вы удивитесь!) до сих пор принимает во внимание расположение движка полосы прокрутки, сигнализирующее о том, насколько вы продвинулись в изучении предлагаемого контента. В нашем же случае только что находившийся в самом низу страницы движок через секунду снова оказывается в середине. Читая книгу или газету, вы видите их физическую ограниченность и знаете, что дочитав их, будете располагать неким завершённым объёмом информации, ответом на интриги сюжета или представлением о том, как, например, программировать на Си-шарп. В случае с бесконечной лентой такого не происходит. Контент становится буквально необозримым, вы просто тонете в нём, и у пользователя формируется чувство неудовлетворённости и беспокойства.

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

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

В результате в Google задумались о том, можно ли объединить удобство автоматической подгрузки контента с чётким делением такой «бесконечной ленты» на конкретные страницы с уникальными адресами. Аналитик поведения веб-мастеров Google Джон Мюллер предложил решение, которое упрощает индексирование подобных страниц для поисковых роботов и одновременно сохраняет удобную автоподгрузку.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Infinite Scroll: для чего он нужен?

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

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

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

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

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

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

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

Раскин сказал Wall Street Journal , что его первоначальные намерения по созданию бесконечной прокрутки были чисты: он хотел избавить пользователя от необходимости делать другой выбор, который, как он думал, их не волнует. Он подумал, что если пользователь уже прокручивает страницу, он, вероятно, просто хочет больше контента, так почему бы не загрузить его для них и не продолжать добавлять его внизу? Это имело смысл и для других, и идея взлетела. Теперь бесконечная прокрутка повсеместно используется на платформах социальных сетей, блогах и сайтах электронной коммерции.

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

 

Изображение: Встроенный

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

Это может способствовать зависимости от социальных сетей

В 2019 году сенатор США Джош Хоули представил Закон о технологиях снижения зависимости от социальных сетей (SMART). В случае принятия законопроект запретит платформам социальных сетей использовать определенные методы, в том числе бесконечную прокрутку, которую он называет эксплуатацией человеческой психологии.

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

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

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

 

Риски нарушения доступности

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

 

Это делает невозможным доступ к нижним колонтитулам

Адриан Роселли, консультант по веб-доступности и пользовательскому опыту, рассказал Built In, что время от времени видит клиентов, сочетающих бесконечную прокрутку с нижним колонтитулом внизу страницы.Это слишком распространенная ошибка, из-за которой ссылки «О нас» и «Контакты» недоступны, что создает головную боль для пользователей, которые пытаются получить доступ к соответствующей информации, но не могут.

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

«Это сведет их с ума».

 

Это может привести к тому, что пользователь потеряет свое место

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

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

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

 

Замедляет работу пользователей с конкретными целями

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

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

«Если я нахожусь на сайте продукта и хочу штаны, а это буква «р», я не хочу прокручивать остальные 15 букв алфавита», — сказал Роселли. «Просто позвольте мне нажать «p» и перейти к этому разделу бесконечной прокрутки».

 

Это мешает интуитивному восприятию пользователя

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

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

Хью Гини, консультант по дизайну UI и UX, сказал, что дизайн этого веб-сайта «ломает ментальную модель сети».

«Веками это был только один URL-адрес на страницу», — сказал он. «Теперь это на URL-адресов на страницу».

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

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

 

Изображение: Встроенный

Альтернативы Infinite Scroll

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

 

Пагинация

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

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

 

Кнопки загрузки дополнительных элементов

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

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

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

Дизайн ReadInclusive принимает множество форм

 

Футляр для бесконечной прокрутки

Бесшовная мобильная прокрутка

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

 

Случайный просмотр

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

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

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

 

Советы по улучшению бесконечной прокрутки

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

 

Не размещайте содержимое после бесконечной прокрутки

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

 

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

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

 

Предложите возможность прыгнуть вперед

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

 

Заставить работать только пользователей с клавиатурой

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

 

Сначала проверьте

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

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

Read NextБывший консультант Twitter по этичному UX-дизайну

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

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

«Я был вынужден оставаться в своей жаркой квартире, и мне некуда было деваться, кроме сумасшествия, происходящего в Твиттере», — говорит он.

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

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

Киберболезнь, характеризующаяся головокружением и тошнотой, в основном изучалась в контексте нишевых технологий агрессивного погружения, таких как гарнитуры виртуальной реальности.В 2011 году от 30 до 80 процентов пользователей виртуальной реальности, вероятно, испытывали кибертошноту, хотя к 2016 году улучшенное аппаратное обеспечение гарнитур снизило этот показатель до 25-60 процентов. Лента новостей также может вызвать киберболезнь при использовании в исключительных обстоятельствах: весь день, каждый день. (Также узнайте, как видеозвонки могут нагружать мозг, приводя к феномену, называемому усталостью от Zoom.)

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

Старое снова становится новым

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

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

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

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

Английское слово «тошнота» на самом деле происходит от греческого слова «корабль»: naus .

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

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

Время не на вашей стороне 

Сара Колли, 30-летний контент-маркетолог из Эшвилла, Северная Каролина, в марте 2021 года заметила у себя худшие из симптомов киберболезни. Время, проведенное ею за экраном, увеличилось во время крайнего дедлайна. , когда несколько дней проводила за компьютером по 10-12 часов подряд. Помимо головокружения и тошноты, она говорит, что сам экран как будто прыгал, мешая сосредоточиться, и ее охватило чувство беспокойства.

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

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

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

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

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

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

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

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

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

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

«Если бы телефон [был] немного дальше или если бы он находился в освещенной комнате, это могло бы помочь уменьшить некоторые из этих побочных эффектов», — советует она.

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

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

Токсичные устройства

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

«У нас есть два аверсивных ощущения: у нас есть боль и у нас тошнота», — говорит Наливайко. «И то, и другое присутствует, когда Мать-Природа хочет, чтобы мы не повторяли то, что делаем, но то, что тошнота предназначена для предотвращения, мы не знаем».

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

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

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

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

Пришло время убить бесконечную прокрутку

Когда бесконечная прокрутка впервые была представлена ​​в издательских компаниях, бутылки с просекко лопались на каждом этаже офиса, когда внедрялся новый UX. по всей компании.Я знаю, потому что был там: до 2015 года я работал в Hearst UK, издателе таких изданий, как Cosmopolitan UK.

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

Бесконечная прокрутка: враг внимания простирается

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

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

Изображение и анимация Пабло Стэнли

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

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

Если мы что-то узнали об экосистемах новостей и «контента» за последние пять лет, так это то, что сайты, которые максимизируют время пребывания на сайте и количество просмотров страниц, не производят наиболее полезного контента (см.: любой сайт, продвигаемый в Taboola/Outbrain виджет).

Полагаться на необработанные просмотры страниц можно уже несколько лет. В конце концов, однако, отсутствие стабильной аудитории дает о себе знать, и эти публикации борются или становятся тенями своих прежних «я» (см. : Мих.com и Babe.Net). Так почему же сайты до сих пор разрабатываются с учетом этих показателей?

Скажи мне, для кого эти виджеты Taboola

«Бесконечная прокрутка всегда казалась решением, ожидающим ответа на вопрос, — говорит мне Джон*, управляющий директор, много лет проработавший в Hearst and News UK. «Сайты увидели увеличение времени на странице, когда появилась бесконечная прокрутка, но действительно ли это равнялось чему-то ценному? Традиционно на сайтах всегда есть футер, где можно найти [вроде] контакты, справка по которым вдруг исчезла.Что, если бесконечные скроллеры просто ищут это? Я ненавижу это.»

Переход от бесконечной прокрутки к алгоритму к….?

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

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

 Люди хотели использовать приложение до тех пор, пока не были уверены, что просмотрели весь Instagram, что раньше объявлялось, когда пользователь доходил до последней публикации, которую он видел при последнем просмотре. (Это, конечно же, привело к уведомлению «Вы все пойманы!».)

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

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

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

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

«Я должен верить, что контекстное представление одной ценной ссылки в долгосрочной перспективе лучше, чем предлагать пользователям отчаянные поведенческие списки дерьма», — говорит мне бывший коллега по СМИ (и да, я тоже хотел бы в это верить). ), но будет ли?

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

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

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

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

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

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

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

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

«Я думаю, что мы увидим движение к опыту, основанному на механизмах принятия решений, где все на веб-сайте является компонентом, а то, что кто-то видит, основано на множестве решений, принятых людьми и компьютерами, причем никто не обязательно владение всей областью просмотра», — говорит Джон. «Хотя это потребует от UX-специалистов, ориентированных на дизайн, немного отступить и проявить некоторую смелость, чтобы реализовать. Не отличается от Global Experience Language».

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

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

* Некоторые имена изменены.

Хотите узнать больше о вызывающих привыкание технологиях?

Доступна ли бесконечная прокрутка?

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

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

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

Влияние на доступность веб-сайта

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

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

Бесконечная прокрутка также создает некоторые трудности для пользователей с ограниченными физическими возможностями:

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

Варианты улучшения доступности?

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

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

Бесконечная прокрутка: да или нет?. За последнее десятилетие веб-дизайнеры и… | Denis Z.

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

  • Интуитивно понятный дизайн с удобной навигацией;
  • Дружественные цвета;
  • Простой доступ к информации;
  • Бесшовное соединение;
  • Быстрый ответ.

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

Говоря о цифрах, Ericsson В отчете о мобильности за 2018 г. указано 375 млн смартфонов, проданных в четвертом квартале 2018 г., и 88-процентный рост ежемесячного мобильного трафика данных. Кроме того, Отчет о рынке коммуникаций за 2018 год представляет собой технологический сдвиг, произошедший за последние десять лет, и описывает основные изменения в потребительском опыте.

Источник

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

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

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

  1. Коммерческий или частный

Для бизнес-сайтов рекомендуется помнить, что:

  • нумерация страниц остается лучшим решением для четкого и упорядоченного представления информации и категоризации для сайтов и приложений электронной коммерции
  • показы с бесконечной прокруткой лучшие результаты для нерешительных потребителей и соблазнов читать все больше и больше
  • иерархия страниц и сетка подкатегорий обеспечивают удобную навигацию, а «точка возврата»
  • непрерывная прокрутка приводит к меньшему количеству кликов
  • независимо от того, какой тип веб-сайта рекомендуется дизайнерам размещайте эксклюзивную информацию в верхней части страницы
  • бесконечность не бесконечна, поэтому позвольте своим пользователям дойти до конца — для коммерческих сайтов важно знать конечный пункт назначения пользователей, поэтому указывайте им путь
  • медленная скорость постраничных веб-сайтов отпугивают посетителей от просмотра
  • с помощью бесконечной прокрутки потребители обычно бросают взгляд на
  • для сайтов электронной коммерции подходят гибридные решения (кнопка Загрузить еще пригодится для поиска, категорий и мобильных устройств)
  • медленная бесконечная прокрутка требует времени, быстрая — заставляет пропустить результаты
  • image- загруженные веб-сайты значительно выигрывают от бесконечной прокрутки

2. Мобильные и настольные устройства

В зависимости от типа устройства вы можете использовать все из них:

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

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

Плюсы

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

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

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

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

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

Facebook рекомендует. Будучи особенно популярной среди социальных сетей, бесконечная лента новостей является средством для просмотра большого количества пользовательского контента с автоматическим обновлением страницы.Существует ряд веб-сайтов, на которых непрерывная прокрутка оказывается успешной: Facebook, Instagram и Tweeter — самые известные.

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

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

Минусы

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

Требует много времени. Как часто вы выходите в сеть «всего на 5 минут» и вдруг замечаете, что провели в Интернете несколько часов? Исследователи утверждают, что пользователи теряют контроль над временем и снижают производительность при прокрутке.

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

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

Источник

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

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

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

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

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

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

Бесконечная прокрутка: плюсы и минусы

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

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

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

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

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

Бесконечная прокрутка — еще один популярный прием дизайна, при котором содержимое продолжает заполняться внизу экрана по мере того, как пользователь прокручивает страницу вниз. В результате получается «бесконечный» поток контента, который продолжает расти вместе с действиями пользователя.У него нет отдельной (или какой-либо) остановки или конечной точки. Распространенными примерами бесконечной прокрутки в действии являются популярные сайты социальных сетей Facebook, Twitter и Pinterest. Каждый из этих сайтов использует эту технику бесконечной прокрутки, чтобы информация заполнялась в фидах, поэтому у сайтов нет конца.

Pro: удержание пользователей

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

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

Con: потерянная информация нижнего колонтитула

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

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

Pro: отлично подходит для мобильных устройств и сенсорных экранов

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

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

Против: навигация и связывание могут запутаться

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

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

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

Pro: сделано для визуализации

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

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

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

Против: отслеживать аналитику сложнее

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

Это также вызывает некоторые проблемы с поисковой оптимизацией. Есть способы преодолеть проблемы SEO, но вы должны принять это во внимание. У Google есть руководство, как сделать эти приложения доступными для поисковых роботов в наборе инструментов для веб-мастеров.

Pro: облегчает просмотр

Каждый пользователь умеет прокручивать. Это так просто.

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

Con: время загрузки и проблемы сбоев

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

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

Pro: открывает двери для творчества

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

Подумайте, как этот метод может работать в сочетании с вашим контентом и другими элементами дизайна вашего веб-сайта. Работает ли бесконечная прокрутка на одной странице большого веб-сайта? Это способ рассказать уникальную историю в сочетании с другими эффектами? Подумайте, как этот метод помогает вашему контенту (и помогает ли он вашему контенту), прежде чем начать его использовать.

Con: тот же старый дизайн

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

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

Заключение

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

Comments