«Что же мне выбрать для своего контента: бесконечную прокрутку, или разбивку на страницы?» Некоторые дизайнеры по-прежнему занимаются перетягиванием каната между двумя методами, прежде чем решить, что же использовать в своем проекте. У каждого из методов есть свои сильные и слабые стороны. В этой статье мы предлагаем обзор двух методик, чтобы вам было проще решить, какую из них стоит использовать в своих проектах.
Бесконечная прокрутка
Бесконечная прокрутка — это технологический прием, который позволяет пользователям прокручивать массивный кусок контента так, чтобы его конец не попадал в поле зрения. Этот метод просто обновляет страницу при прокрутке вниз. Хоть это и выглядит весьма заманчиво, данный метод не является идеальным решением для любого сайта или приложения.
Плюс №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, где пользователи потребляют бесконечно льющийся поток данных, не акцентируя внимание ни на чем конкретном. Интерфейс с разбивкой на страницы хорош для вывода результатов поиска, когда люди ищут определенный товар, и им важна локализация каждого просмотренного элемента.
В следующих статьях мы рассмотрим лучшие примеры использования бесконечной прокрутки и разбивки на страницы. Так что следите за обновлениями!
Комментарии (72)
AllexIn
27.06.2016 11:36+4Пользователи понимают негласный закон Facebook, согласно которому посмотреть абсолютно все посты у них не получится, ведь контент обновляется слишком часто.
Это откуда такое?
Я и многие мои знакомые придерживаются «негласного закона»:
Если нет возможности за разумное время раз в сутки просмотреть ленту подписки — значит пора подписку чистить.
Вокруг слишком много информации и у нас слишком мало времени, чтобы тратить его на бессмысленную информацию, которую даже просматривать не успеваешь.
izzholtik
27.06.2016 12:50Лично я просто не использую подписку в чистом виде, а запоминаю адреса интересных страниц. Если о чём-то забыл, значит, не так уж оно и важно =)
AllexIn
27.06.2016 15:08+1Постоянно заходить на интересные ресурсы и проверять, не появилось ли что-то интересное — это же трата времени.
Подписка позволяет увидеть интересные объявления и новости, не тратя времени на перебор ресурсов.
Плюс есть ресурсы, которые очень редко публикуют новости, но это новости важные. Заходить к ним каждый день — бессмысленно. Заходить реже — есть риск пропустить важную и интересную новость.izzholtik
27.06.2016 15:26Интересные каналы ютуба просматриваю пару раз в неделю, много времени не уходит; на хабре интересующих меня постов сейчас весьма немного, так что есть возможность каждый день читать все их. А о важных событиях вроде релиза новой версии ядра (жду нормальной поддержки планшетов на атоме) или Java EE 8 я и так узнаю, пусть и несколько позже. Действительно важные события не перестают быть актуальными за пару недель.
А что, например, боитесь пропустить вы?AllexIn
27.06.2016 15:32Из очевидного, что нужно оперативно видеть — продажа всяких ништяков. Вкусные ништяки очень быстро продаются и редко появляются.
Из не очевидного, вот товарищ написал, что ему нужна машина на гонку:
https://vk.com/makakencia?w=wall42291753_7726%2Fall
Дать крутому пилоту на гонку свой авто — тоже многого стоит. :)
Oslegg
27.06.2016 17:49C фэйсбуком ваша система не слишком-то работает ибо он, ФБ, в любом случае не показывает вам всех постов а только те которые вам, как он считает, будут интересны :)
Nekto_Habr
27.06.2016 11:46+1Сейчас в играх популярен такой прием: удерживайте клавишу, чтобы выполнить действие (при удержании заполняется специальный бар). Эдакая элегантная защита от ошибочного действия. К вебу тоже можно применить. Если у бесконечной прокрутки один из плюсов заключается в отсутствии лишних щелчков, то кнопка «Показать еще» этот плюс нивелирует (все равно придется щёлкать). А можно прикрутить бар, заполняющийся от прокручивания колеса мышки в нужную сторону (в мобильной версии — от времени оттягивания экрана вверх), который, соответственно, при заполнении подгрузит новый контент.
Как вариант, можно, конечно, просто ховерить над этим баром, но обычно на бесконечных страницах я стараюсь держать курсор в стороне, чтобы из карточек контента ничего не всплывало при ховере (бесит этот прием, кстати).
И да, присоединяюсь к alff31: у ВК лучшая реализация компромисса между бесконечной прокруткой и пагинацией.oxidmod
27.06.2016 12:03-1>> И да, присоединяюсь к alff31: у ВК лучшая реализация компромисса между бесконечной прокруткой и пагинацией.
толи я плохо читал, толи вопрос не осветили. как по мне, то основная проблема обновляемой информации, которая не решается ни пагинацией, ни скролом — это невозможность вернуться к найденным записям. да, если это магазин, ассортимент которого не меняется сотни раз в час, то вы найдете понравившиеся розовые очки на тойже странице где видели их в первый раз. но вот лента новостей/комментов наполняется очень быстро и коммент который вы хотели лайкнуть будет уже не на 2 странице, а на 10. Хорошим решением этой проблемы является наверно только линк за запись, как вот на хабре комменты. но всеравно не слишком удобно. гораздо привычней скопировать адресс с адресной строкиNekto_Habr
27.06.2016 13:05+2Одно дело обратная пагинация, как на хабре — на первой странице находится всё самое новое. Тогда да, найденное будет сдвигаться. Но у контакта например классическая пагинация — на первой странице находится самый старый пост. В таком случае легко найти нужное, если помнишь страницу.
NeoCode
27.06.2016 12:08+2Бесконечная прокрутка нужна в основном пользователям мобилок и планшетов, т.к. у них нет мыши чтобы нажимать на пагинацию. Ну или совсем ленивым (коих увы большинство). Мне всегда удобнее пагинация.
Как уже было отмечено, иногда бывают примеры симбиоза (vk), хотя и они на мой взгляд неидеальны. После прочтения статьи у меня окончательно сформровались давние идеи о том как было бы идеально:
1. в качестве ссылок для пагинации использовать не безликие номера, а квантованные промежутки времени, причем время квантуется в зависимости от количества сообщений по определенному алгоритму — чтобы на каждую страничку было разумное количество сообщений. Варианты квантования — год, год и месяц, год месяц и день (дата), дата и час, дата часы и десятки минут, дата часы и минуты и т.д.
Ссылка на каждую страничку тем самым уникальна и постоянна во времени (в отличие от безликих «1 2 3 4 5», которые «съезжают» по мере поступления новых сообщений). Пагинация всегда отображается сверху списка.
2. логика бесконечной прокрутки действует, но вместо прокрутки автоматом подгружаются следующие странички пагинации; при этом всегда подгружена предыдущая и следующая страничка. что обеспечивает иллюзию непрерывности списка сообщений (то есть никаких визуальных перегрузок страницы не происходит, для пользователя это просто прокрутка).
4. по мере прокрутки подгружаются следующие странички и выгружаются предыдущие, что экономит память и не вызывает тормоза когда пользователь открутил слишком много.
Вот такая система ИМХО была бы идеальной или близкой к тому.
NeXTs_od
27.06.2016 12:31Чем больше пользователи прокрутят страницу вниз, тем больше контента будет загружаться на одной странице. В результате скорость обновления контента будет падать все сильнее.
Это решается «виртуальными» списками, т.е. рендерингом только видимых тегов для текущей позиции скролла.DistortNeo
27.06.2016 12:51+2Возможно, оно и решается, но на практике я не могу привести примеры успешной реализации бесконечной прокрутки, где ранее просмотренные элементы бы не замусоривали DOM или хотя бы не оказывали никакого влияния на страницу. Почему-то то, что естественно для десктопных приложений, не реализовывают в вебе.
Есть ещё один неприятный минус бесконечной прокрутки: слетает положение на странице при изменении размера браузера. Это особенно актуально для мобильных устройств с включённым поворотом экрана.NeXTs_od
27.06.2016 13:00По первому абзацу: https://www.pinterest.com/
По прокрутке — да, это уже нужно отдельно дописывать
izzholtik
27.06.2016 13:13Скажите, можно ли реализовать на «бесконечной» ленте комментариев, только часть которых отображается при прокрутке, работающий поиск средствами браузера?
По некоторым историческим причинам довольно большое число моих знакомых используют для переписки комментарии в закрытом блоге. Когда количество комментариев в теме превышает некий разумный предел, и сайт начинает тормозить, создаётся новый пост, и все перползают в него. Проблема в том, что, например, мой SGS3 на ~500 комментариях начинает спонтанно закрывать браузер из-за нехватки RAM (за что я люто ненавижу андроид) и вообще всячески тормозить.
Сейчас стоит вопрос о создании своего движка. В принципе, я могу реализовать серверную часть, но вот с вёрсткой у меня полный провал :<
Возможно ли технически сделать динамически отображаемый список, как, например, ListView в андроиде, для экономии ресурсов мобильных устройств, в то же время имея возможность использовать «якорь» для перехода на нужный комментарий (в принципе, представляю, как) и средства браузера для поиска на странице (очень не хотелось бы делать кастомный поиск)?NeXTs_od
27.06.2016 14:06Десктопный Firefox научился это делать «из коробки» чуть больше года назад, не знаю как насчет мобильной версии.
Средствами JS не получится одновременно совместить нативный поиск и 'виртуальную' прокрутку т.к. большинство тегов физически отсутствует в DOM'е и браузер не видит их.
Но можно перехватывать сочетание клавиш CTRL + F и отображать кастомный поиск, как это делает Codemirror, выглядит довольно интуитивно. Пример здесь, поставьте курсор среди текста и нажмите CTRL + F
Аналогов ListView среди JS библиотек много: мой Clusterize.js, Infinity.js от Airbnb, многофункциональный но заброшенный SlickGrid, React virtualized из реакт тусовки, core list из полимеров.
Прокрутку до определенного комментария можно было бы легко сделать если б высота комментариев была одинаковая, но она разная, из-за чего придется еще посидеть над предугадыванием положения комментария. Даже не знаю поддерживает ли какая из озвученных мною библиотек такой функционал из коробки.izzholtik
27.06.2016 15:43Нажатие перехватывать можно, согласен, но как быть с телефонами/планшетами, где люди используют не хоткеи, а меню?
DistortNeo
27.06.2016 14:41Возможно, проблема заключается не в большом количестве комментариев, а в чрезмерной заскриптованности страницы.
Например, пост на 1000 комментариев на dirty.ru (и других сайтах на его движке) с большим количеством картинок (на 100 мегов примерно) отображается через 10 секунд при включённом JS, через 2 секунды при выключенном JS и менее секунды, если ещё и картинки не грузить.
И дело не в скриптах как таковых, а в том, что после загрузки страницы скрипт начинает колдовать с комментариями на стороне клиента, например, рендерит поля даты. Почему это всё нельзя сделать на сервере, а клиенту передавать уже готовый HTML, мне не очень понятно.izzholtik
27.06.2016 15:40Вполне допускаю, что это так. Сейчас используется довольно сильно попиленный грубым напильником лайвстрит, а у него на JS довольно много всего повешено.
Впрочем, даже если это так, и страницу можно оптимизировать, окончательно проблема не исчезнет: чаты просто станут длиннее, и владельцы старых телефонов продолжат страдать, пусть даже не на 500 комментариях, а на 1000.staticlab
27.06.2016 22:40Никто ведь не мешает реально выводить вёрстку только для видимой части списка.
izzholtik
28.06.2016 09:58Нативный поиск же…
Я слышал, что shadow DOM как-то позволяет эту проблему решить, но сейчас вообще не знаю, что это за штука.staticlab
28.06.2016 10:07Shadow DOM предназначен, по сути, для инкапсуляции разметки и стилей. На производительность он повлиять вряд ли сможет. Для нативного поиска же, как мне кажется, лучше будет использовать всё-таки перехват Ctrl-F с кастомным поиском. Дело в том, что если мы находимся в начале страницы, то контент не прогружен и нативный поиск всё равно бесполезен, а чтобы найти что-то поиском, придётся прокрутить «с запасом» только лишь, чтобы прогрузился контент. Так что кастомный поиск здесь отработает лучше, тем более, что в нём можно будет предусмотреть и дополнительные возможности вроде нечёткого поиска. Для мобильных устройств тем более такое решение будет полезнее. Кто реально пользуется в мобильном браузере поиском по странице?
Aingis
04.07.2016 20:31В Яндекс.Браузере нативный поиск учитывает морфологию слов. Чтобы заменять его поиском на сайте, он должен быть не менее крутым.
staticlab
04.07.2016 21:42Ещё раз: какой будет смысл от хоть сколько крутого поиска, если контента на странице фактически нет?
Aingis
05.07.2016 00:01Ещё раз: какой смысл делать поиск, если для пользователя он не работает?
staticlab
05.07.2016 08:40Так или иначе, если браузеру контент не отдан, то не важно, насколько в нём крутой поиск. Опять же, даже просто строгий поиск лучше, чем никакого. А развернуть поисковый сервер с морфологией — не такая большая проблема. Бонусом получим возможность поиска и в других дискуссиях, если это необходимо.
olegpisarev
27.06.2016 13:15+1как ни странно, но пример реализации — пикабу. там бесконечная лента, верх которой выгружается из DOM. И из плюсов — можно скрыть просмотренные записи, чего так не хватает vk
Alex_ME
27.06.2016 12:40+11Я сошлюсь на классику:
XKCD
MonkAlex
27.06.2016 12:59Раздражает прокрутка, когда содержимое подгонано под экраны — картинки\комиксы\короткие_рассказы.
Прокрутка может порвать их пополам и приходится аккуратно, матерясь иногда на настройки мыши подкручивать почти каждый элемент отображения.
Aquarius-Michael
27.06.2016 13:04+1Как и сказано выше в комментариях. Для бесконечной прокрутки содержимых лучше реализовать механизм загрузки и выгрузки, чтобы не растрачивать память и отнимать производительность процессора. Даже на самых мощных процессорах с ёмкой памятью ощутимо падает производительность компьютера, когда прокручиваешь содержимое всё дальше и дальше. Довольно раздражает. Для бесконечной прокрутки полоса совершенно ненужна. Вернее, имеет больше смысла использовать полосу прокрутки временных промежутков или других разметок для конкретного проекта. Что-то похожее из реализаций программ в смартфонах с поддержкой FM-радио. До надо грамотно реализовать бесконечную прокрутку, чтобы не мешал общему интерфейсу. Например, доступ к шапке или подвалу. У ВК, для примера, непросто добраться до подвала.
springimport
27.06.2016 19:12> Даже на самых мощных процессорах
Вы немного загнули с этим. Например, чтобы на i7-3770 столкнутся с проблемой подтормаживания ленты в вк нужно прокрутить 5к записей. Сомневаюсь что это распространенный сценарий.Aquarius-Michael
27.06.2016 19:34У меня как раз процессор Core i7 3770 и стоит. А памяти 16 ГБ. ) Обычно прихожу с работы, вот и листаю до записей, начинающие с утра. Как-то так. Может, у других несколько иначе это происходит. Например, зависит ещё от браузера.
DistortNeo
27.06.2016 20:19У вк довольно лёгкий дизайн, благодаря которому рендеринг большого числа элементов не вызывает напрягов у браузера.
Darth_Malok
28.06.2016 09:58Поправка:
У VK пока довольно легкий дизайн. Да и то, у 10% счастливчиков — уже нет(
m1ld
28.06.2016 12:38В своей системе пока использую бесконечную прокрутку без выгрузки объектов, каждая строка простейшая ссылка в div, chrome начинает задумываться на загрузке после 20 тысяч, но продолжает при этом шурстеть, с каждой следующей сотней записей увеличивается уже значительно время загрузки.
springimport
28.06.2016 16:49Здесь нет ничего удивительного, браузеры и не затачивались для показа таких объемов.
m1ld
29.06.2016 10:00Не затачивались – не означает, что они не должны с этим работать.
Этот как текстовый редактор, который не способен открыть текстовый файл размером 2GB.
DeLuxis
27.06.2016 13:13+3Бесконечная прокрутка, это самое ужасное из всего что произошло последние 10 лет в вебе.
1. Бесит. Пропадает всякое желание в дальнейшем заходить на эту страницу. Если приходится, то смотрю только первые позиции и к прокрутке не притрагиваюсь. Как итог, я просматриваю значительно меньше контента.
2. Тормазит. Может у дизайнеров и других товарищей супер модные компы и айфоны, но у меня все еще телефон четырех летней давности, который я не собираюсь обновлять. Даже если предусмотрено удаление просмотренных позиций для сохранения ресурсов, то девайс все равно тормозит на том же этапе удаления. На компе съеденный гигабайт браузером можно смело умножать на три, а то и четыре раза.
3. Неудобно. Невозможно вернуться на страницу и найти где-то там когда-то заинтересовавший вас контент. Можно сделать календарь, но вы уверены, что пользователь помнит дату?!
4. Дискомфорт. Человек когда делает какое-то действие, подсознательно ожидает конца. В случае БП это может быть только старый контент до которого пользователь удосужился долистать.
5. Однообразно. Благодаря БП создатели сайтов не думают о дублях и повторяющейся информации. Всякие репосты и одинаковые новости могут составлять добрую половину контента. Хотя это уже проблема пользователя подписавшегося на столь большое количеств сообществ.
Как итог от БП теряют все.
Пользователь: нервы, заряд девайса, время.
Владелец сайта: падает конверсия, люди испытывают отторжение от такого сайта и не возвращаются (сужу по себе).
Пример хорошего тона, сайт dirty.ru
Прислушавшись к сообществу, они дали возможность включить пэджинатор обратно. Хотя я бы сделал наоборот, по дефолту выключил БП.
rrrav
27.06.2016 16:21+1Да, полностью согласен. Вероятно БП просто позволяет впихнуть больше рекламы, поэтому рекламщики ее и навязали где надо и не надо. Чтобы найти интересное место, придется прокрутить лишние километры ленты с рекламой.
khanid
28.06.2016 09:59Можно сделать календарь, но вы уверены, что пользователь помнит дату?!
Ну в некоторых старых стилях ЖЖ календарь есть, где в качестве гиперссылок только даты, когда были записи. Но там и нормальная паджинация была тоже. Но даже без оной календарём пользоваться вполне удобно. Искать старые заметки 2-3 летне давности проблем не составляет.
В новом стиле с БП, кстати, тормоза появляются после первой тысячи записей (и это на машине с i7 на 4 физ. ядра и 16 Гб). Что огорчает, поскольку первая тысяча-две заняты самыми популярными журналами (что не значит «самыми интересными»), а вот то, что себе отмечаешь обычно находится несколько дальше.
akuchkovsky
27.06.2016 13:20Хорошая статья, все верно, где-то это нужно, где-то нет, думать надо, ведь «все зависит от задачи».
Sergey6661313
27.06.2016 13:47+1Абсолютно без разницы как именно работает сайт — главное чтобы при обновлении страниц я мог бы продолжить с того-же места и чтобы всё что уже просмотрено не начинало свою догрузку…
TimsTims
27.06.2016 14:06Всё жду, когда появятся нормальные реализации чекбокса, включающий автоматическую бесконечную прокрутку, кнопки «загрузить еще» и одновременно с этим нормального перехода между страницами.
Т.о. те, кто хочет заюзать бесконечную прокрутку — будут её включать. А кого воротит от неё — не испытают неудобств.
Кто хочет просто глазами листать тонны информации — смогут юзать бесконечную прокрутку.
Кстати, при бесконечной прокрутке вполне реально реализовать изменение текущей ссылки в браузере и в истории посещений. Это значит, что если юзер поделится ссылкой — она откроется ровно в том месте, как её закодили. Обновление в браузере тоже вернет пользователя на нужную страницу. Поэтому минус один минус.
dmitry_ch
27.06.2016 14:19+1Однако с помощью бесконечной прокрутки Facebook делает все возможное, чтобы выставить как можно больше информации пользователям на обозрение
FB всего лишь убирает из взаимодействия с юзером момент, когда юзер говорит «хватит». Довольно легко сказать себе «дочитаю до низа страницы и назад к работе», но с бесконечной прокруткой оторваться по такому событию, как «долистали до низа» не получится. Что на выходе дает большее время, проведенное на сайте FB.
Об удобстве юзера FB, мягко говоря, заботится в последнюю очередь, чтобы бы не говорили «гуру» UI.
Идеально иметь выбор: пагинация или лента без конца. Как антипаттерн приведу ВК с их ссылками в конце страницы: в старом дизайне было несколько ссылок в футере страницы, которые, после введения бесконечно прокрутки, стали ну очень трудно достижимыми.
OGGSmith
27.06.2016 15:05+1Помню Яндекс баловался в поисковой выдаче бесконечной прокруткой. Выглядело странно, но как по мне, было интересно. Минусы этого перевесили плюсы и сейчас такого у них нет.
Я тоже из тех, кто если не склоняется к бесконечному скроллу, то за использование двух методов отображения контента одновременно.
KonstantinSamsonov
27.06.2016 15:53Бесконечная прокрутка и оглавление — два главных параметра для меня при выборе читалки, для windows 10 (fb2) нормальной до сих пор нет…
на андроид ZXReader (fb2) и ebookdroid
все почему-то делают только листание страницами…MonkAlex
27.06.2016 15:56Ээээ потому что привычка читать книги (и так привыкшим намного удобнее) выглядит лучше, чем читать бесконечную лапшу, которую придется видимо… тянуть?
izzholtik
27.06.2016 16:26Это очень удобно. Не приходится читать у краёв экрана, например. И нет постоянных перерывов на перелистывание страницы.
И да, очень многие люди читают светлый текст на чёрном фоне, несмотря на то, что в книгах обычно всё наоборот.
У традиционных книг всё же довольно много технических ограничений, которые совершенно необязательно эмулировать в книгах электронных.
Gitkan
27.06.2016 16:27Под андроид у программы Cool Reader есть режим «бесконечный список» — пробовал несколько раз, но каждый раз возвращался к страницам.
izzholtik
27.06.2016 16:33На винде использую банальнейший cr3. Все читалки из маркета либо не смогли открыть книгу на 650k слов, либо вылетели в процессе чтения, что очень печалит. Десктопный cr ведёт себя неадекватно при изменении ориентации экрана, так что приходится блокировать, но за неимением лучшего…
schetilin
27.06.2016 22:41Для fb2 можно попробовать AlReader2. Я пользуюсь Андроиде, Винде и на Kubuntu под Wine. Есть режим как бесконечной прокрутки (в том числе и автоматической), так и страничного листания. Из минусов — у ПК версии нет возможности подключать OPDS каталоги библиотек, и качать книжки прямо из читалки.
MasMaX
27.06.2016 15:56В вебприложении Instagram кнопка «Read More» появляется лишь один раз. После клика по ней страница листается бесконечно вниз.
XXXXPro
27.06.2016 17:30Автоматическая бесконечная прокрутка без других средств навигации (хотя бы поиска по дате) — это не просто плохое решение, это очень плохое решение почти для всех видов сайтов, кроме разве что развлекательных, где доступ к старому контенту не требуется.
На мой взгляд, в большинстве случаев оптимальным является следующий вариант: традиционное разбиение на страницы с полным обновлением страницы + большая кнопка «показать еще» в конце контента, которая догружает контент AJAXом на ту же страницу по нажатию. Первое обеспечивает удобство навигации, второе — помогает удержать внимание пользователя.
EndUser
27.06.2016 19:55+1Я добавлю одну тонкость — если разбитие на страницы происходит как «1, 2, 3...» начиная со свежего к старому, то на такую страницу очень трудно попадать из поисковика, так как номер при пополнении массива материалов сбивается. Найти материал из поисковика становится практически невозможным (а внутренний поиск весьма часто тупит не по-детски). В большинстве случаев Гугл индексирует содержание, но не содержимое. И очень приятно, когда нумерация идёт наоборот «941, 940, 939...», просто потому, что попадаешь на искомый фрагмент сразу.
P.S. У WarSpot любопытная реализация — можно листать и можно подгружать. Обе возможности одновременно, кому как удобно.
degs
27.06.2016 21:48В результате пользователи наслаждаются ...
не надо так переводить, пожалуйстаQthulu
28.06.2016 12:38Да не, ну что вы, для бесконечной прокрутки этот перевод очень хорошо подходит, imho.
p.s. А есть способы принудительно и универсально отключить это наслаждение?degs
28.06.2016 13:43если я не ошибаюсь, это дословный перевод выражения 'enjoy' — самая надоевшая имхо калька при переводе с английского, она значит совсем не то что дает дословный словарный перевод. Я имел ввиду только этот кусочек если что, не перевод в целом.
rosebud
27.06.2016 22:42На многих, не всех конечно, сайтах с постраничной разбивкой очень раздражает, когда нет возможности перейти сразу на нужную, далекую страницу. Обычно же как рисуют как — «1,2,3,4,5… следующая». И вот чтобы перейти на 17ю страницу нужно с 1й перейти на 5ю, потом с 5й до 17й перелистывать постранично! Люди, делающие такую гадость и владеющие такими сайтами, зачем вы так поступаете со своими пользователями, своими клиентами и покупателями??? Какова ваша задача — отпугнуть или привлечь?
Ну а прокрутка, конечно, раздражает своей бесконечностью и неопределенностью, я устаю от этого. И кнопка «загрузить еще» тоже не помогает, т.к. перейдя потом на любую другую страницу невозможно вернуться в первоначальную точку. Ты опять возвращаешься на кнопку «загрузить еще» и начинаешь все заново. Ну и при более-менее быстрой прокрутке следущая порция информации грузится столько же времени, как и просто другая страница.
В общем, если нумерация страниц сделана не коряво, я предпочитаю постраничную разбивку.Shannon
28.06.2016 13:49По поводу второй части:
https://market.yandex.ru/catalog/54545/list?hid=6427100&hid=6427100&in-stock=0
навигация по страницам или «Показать еще». При этом «показать еще» меняет и адресс страницы, тоесть случайный рефреш или мисс-клик не сломает просмотр
ModoStudio
27.06.2016 22:43Всегда бесила бесконечная прокрутка.Её сейчас лепят к месту и не к месту. Пример; Зашел я как то на один лэндинг. Прокрутив 7 экранов вниз, я достаточно ознакомился с инфой, и мне нужны были только координаты, чтобы связаться. Обратно крутить было жутко в лом, и я решил докрутить до футера, т.к. по логике там могла быть заветная инфа и даже возможно карта — схема проезда.
Но прокрутив еще 7 экранов, понял, что разработчики или полные мудаки или тупо тролили пользователей, потому что контент не заканчивался. В эту же секунду, моя мышка потянулась к крестику на вкладке, после чего название конторки было тут же забыто, а услуга была заказана на другом сайте.
OsmanovEmil
27.06.2016 22:46Тут тоже бесконечная прокрутка, если будут добавлены еще миллион комментариев то так же придется крутить. думаю решения применяются от типа задачи.Но можно и прибегнуть к универсальному решению когда прокрутка разбивается на куски страниц.
khanid
28.06.2016 10:11Камень в большинство реализаций бесконечной прокрутки — наличие некоторой значимой информации где-то в футере (ну или предположение наличия там оной, в случае, если с главной выхода на такую информацию нет), при этом бесконечная прокрутка, которая не даёт увидеть этот самый футер, поскольку даже при переходе хоткеями по странице каким-нибудь end'ом или ctrl+arrow начинает подгружаться следующая порция информации, которая убирает футер из зоны видимости.
OsmanovEmil
28.06.2016 10:21Это ошибка разработчика, Ведь при выборе такой функции надо продумывать и это тоже.
DrGluck
28.06.2016 14:39Господа дизайнеры, а можно делать как на одном несуществующем сайте, там есть разбиение на страницы и кнопка внизу страницы «Ещё? Ещё!», т.е. бесконечная прокрутка? Причём на одном «родственном сайте» есть только прокрутка и это ужасно бесит.
rosebud
28.06.2016 17:45Ну, ответственные дизайнеры и ценящие своих клиентов владельцы сайтов так и делают. Один известный магазин, в котором я часто отовариваюсь, применяет одновременно и прокрутку с кнопкой «загрузить еще», и постраничную разбивку — покупатель сам по желанию и настроению выбирает, что ему ближе. Вот это я понимаю — сервис и забота.
rrrav
28.06.2016 22:31Представляю, какой это кошмар для дизайнеров и программеров — поддерживать одновременно две столь разные ветки. Скорее бы уже признали бесконечную прокрутку глобальной ошибкой и отправили в архив истории.
IvanPanfilov
28.06.2016 20:53а это сложно да сделать поддеркжу два способа сразу?
для мобильных устройств (для людей алтернативно одаренных меньшинств) — бесконечная прокрутка
для деcктопов (для нормальных людей) — классический способ
или переключение каким то образом в профиле сайта
как говорил Задорнов «Ну тупыыеее»
alff31
В обсуждениях (discussion boards в группах) в ВК есть замечательный пример симбиоза бесконечной прокрутки и пагинации. Сообщения обсуждений имеют бесконечные прокрутку, но при достижении второй страницы обсуждения, сверху появляется блок pagination с цифрами страниц.
Firz
Он(симбиоз) особенно хорошо избавляет пользователя от желания ударить разработчика интерфейса чем-то тяжелым, когда нужная тебе кнопка только внизу страницы, а посередине — бесконечная прокрутка.(привет вконтакте и подобные)
Akdmeh
Сейчас вконтакте прикрепляет форму ввода внизу экрана (не страницы) — думаю, они давно уже поняли о подобной проблеме.
ilnuribat
Мне также нравится стиль Яндекс.Маркета, где можно как прокрутить дальше, так и перейти на следующую страницу
Иногда необходимо просто прокрутить, иногда перейти на следующую страницу, а там можно прокручивать вниз.
Такой хороший симбиоз получается
Пример
stetzen
Только в этой системе есть фатальный недостаток — безальтернативная сортировка от более ранних сообщений к более поздним. То есть юзаейс такой — у меня на руках обсуждение, которое началось в условном 2007 году, но мне тамошние посты совершенно неинтересны. Я прыгаю на последнюю страницу, скроллю вниз до конца и начинаю читать вверх (ну то есть строго в порядке, обратном хронологическому). Дочитав до начала страницы, я перехожу на предыдущую, после чего возникает проблемка — мне теперь сложно найти то место, в котором я остановился. Я не могу прыгнуть просто прыгнуть в конец страницы, потому что при таком пыжке я окажусь где-то в середине стены текста и мне придётся искать, где именно я остановился, ну и куча других такого рода проблем.