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

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

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

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

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

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

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

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

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

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

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

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

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

Скроллинг хорош для мобильных устройств

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

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

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

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

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

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

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

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

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

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

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

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

LinkedIn в 2012
Когда бесконечный скролл был реализован на LinkedIn в 2012 году, пользователи могли прокручивать экран еще до того, как загрузится контент.
Сайты с бесконечным скроллом должны иметь возможность добираться до подвала, делая его «липким», либо перемещать ссылки в шапку или боковую панель.
Facebook Legal Careers
Facebook перенес все ссылки из подвала (например, ‘Legal', ‘Careers') в панель справа.
Как вариант, для загрузки контента по запросу можно сделать кнопку Load More. Новый контент не будет автоматически загружаться, пока пользователь не нажмет на кнопку. Таким образом, пользователи могут без проблем добраться до подвала.
Load More
В Instagram предусмотрена кнопка ‘Load More', чтобы подвал всегда был доступен пользователям.

Пагинация

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

Пагинация
Пагинация

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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