Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 72
В обсуждениях (discussion boards в группах) в ВК есть замечательный пример симбиоза бесконечной прокрутки и пагинации. Сообщения обсуждений имеют бесконечные прокрутку, но при достижении второй страницы обсуждения, сверху появляется блок pagination с цифрами страниц.
Он(симбиоз) особенно хорошо избавляет пользователя от желания ударить разработчика интерфейса чем-то тяжелым, когда нужная тебе кнопка только внизу страницы, а посередине — бесконечная прокрутка.(привет вконтакте и подобные)
Мне также нравится стиль Яндекс.Маркета, где можно как прокрутить дальше, так и перейти на следующую страницу
Иногда необходимо просто прокрутить, иногда перейти на следующую страницу, а там можно прокручивать вниз.
Такой хороший симбиоз получается
Пример
Иногда необходимо просто прокрутить, иногда перейти на следующую страницу, а там можно прокручивать вниз.
Такой хороший симбиоз получается
Пример
Только в этой системе есть фатальный недостаток — безальтернативная сортировка от более ранних сообщений к более поздним. То есть юзаейс такой — у меня на руках обсуждение, которое началось в условном 2007 году, но мне тамошние посты совершенно неинтересны. Я прыгаю на последнюю страницу, скроллю вниз до конца и начинаю читать вверх (ну то есть строго в порядке, обратном хронологическому). Дочитав до начала страницы, я перехожу на предыдущую, после чего возникает проблемка — мне теперь сложно найти то место, в котором я остановился. Я не могу прыгнуть просто прыгнуть в конец страницы, потому что при таком пыжке я окажусь где-то в середине стены текста и мне придётся искать, где именно я остановился, ну и куча других такого рода проблем.
Пользователи понимают негласный закон Facebook, согласно которому посмотреть абсолютно все посты у них не получится, ведь контент обновляется слишком часто.
Это откуда такое?
Я и многие мои знакомые придерживаются «негласного закона»:
Если нет возможности за разумное время раз в сутки просмотреть ленту подписки — значит пора подписку чистить.
Вокруг слишком много информации и у нас слишком мало времени, чтобы тратить его на бессмысленную информацию, которую даже просматривать не успеваешь.
Постоянно заходить на интересные ресурсы и проверять, не появилось ли что-то интересное — это же трата времени.
Подписка позволяет увидеть интересные объявления и новости, не тратя времени на перебор ресурсов.
Плюс есть ресурсы, которые очень редко публикуют новости, но это новости важные. Заходить к ним каждый день — бессмысленно. Заходить реже — есть риск пропустить важную и интересную новость.
Подписка позволяет увидеть интересные объявления и новости, не тратя времени на перебор ресурсов.
Плюс есть ресурсы, которые очень редко публикуют новости, но это новости важные. Заходить к ним каждый день — бессмысленно. Заходить реже — есть риск пропустить важную и интересную новость.
Из очевидного, что нужно оперативно видеть — продажа всяких ништяков. Вкусные ништяки очень быстро продаются и редко появляются.
Из не очевидного, вот товарищ написал, что ему нужна машина на гонку:
https://vk.com/makakencia?w=wall42291753_7726%2Fall
Дать крутому пилоту на гонку свой авто — тоже многого стоит. :)
Из не очевидного, вот товарищ написал, что ему нужна машина на гонку:
https://vk.com/makakencia?w=wall42291753_7726%2Fall
Дать крутому пилоту на гонку свой авто — тоже многого стоит. :)
C фэйсбуком ваша система не слишком-то работает ибо он, ФБ, в любом случае не показывает вам всех постов а только те которые вам, как он считает, будут интересны :)
Сейчас в играх популярен такой прием: удерживайте клавишу, чтобы выполнить действие (при удержании заполняется специальный бар). Эдакая элегантная защита от ошибочного действия. К вебу тоже можно применить. Если у бесконечной прокрутки один из плюсов заключается в отсутствии лишних щелчков, то кнопка «Показать еще» этот плюс нивелирует (все равно придется щёлкать). А можно прикрутить бар, заполняющийся от прокручивания колеса мышки в нужную сторону (в мобильной версии — от времени оттягивания экрана вверх), который, соответственно, при заполнении подгрузит новый контент.
Как вариант, можно, конечно, просто ховерить над этим баром, но обычно на бесконечных страницах я стараюсь держать курсор в стороне, чтобы из карточек контента ничего не всплывало при ховере (бесит этот прием, кстати).
И да, присоединяюсь к alff31: у ВК лучшая реализация компромисса между бесконечной прокруткой и пагинацией.
Как вариант, можно, конечно, просто ховерить над этим баром, но обычно на бесконечных страницах я стараюсь держать курсор в стороне, чтобы из карточек контента ничего не всплывало при ховере (бесит этот прием, кстати).
И да, присоединяюсь к alff31: у ВК лучшая реализация компромисса между бесконечной прокруткой и пагинацией.
Бесконечная прокрутка нужна в основном пользователям мобилок и планшетов, т.к. у них нет мыши чтобы нажимать на пагинацию. Ну или совсем ленивым (коих увы большинство). Мне всегда удобнее пагинация.
Как уже было отмечено, иногда бывают примеры симбиоза (vk), хотя и они на мой взгляд неидеальны. После прочтения статьи у меня окончательно сформровались давние идеи о том как было бы идеально:
1. в качестве ссылок для пагинации использовать не безликие номера, а квантованные промежутки времени, причем время квантуется в зависимости от количества сообщений по определенному алгоритму — чтобы на каждую страничку было разумное количество сообщений. Варианты квантования — год, год и месяц, год месяц и день (дата), дата и час, дата часы и десятки минут, дата часы и минуты и т.д.
Ссылка на каждую страничку тем самым уникальна и постоянна во времени (в отличие от безликих «1 2 3 4 5», которые «съезжают» по мере поступления новых сообщений). Пагинация всегда отображается сверху списка.
2. логика бесконечной прокрутки действует, но вместо прокрутки автоматом подгружаются следующие странички пагинации; при этом всегда подгружена предыдущая и следующая страничка. что обеспечивает иллюзию непрерывности списка сообщений (то есть никаких визуальных перегрузок страницы не происходит, для пользователя это просто прокрутка).
4. по мере прокрутки подгружаются следующие странички и выгружаются предыдущие, что экономит память и не вызывает тормоза когда пользователь открутил слишком много.
Вот такая система ИМХО была бы идеальной или близкой к тому.
Как уже было отмечено, иногда бывают примеры симбиоза (vk), хотя и они на мой взгляд неидеальны. После прочтения статьи у меня окончательно сформровались давние идеи о том как было бы идеально:
1. в качестве ссылок для пагинации использовать не безликие номера, а квантованные промежутки времени, причем время квантуется в зависимости от количества сообщений по определенному алгоритму — чтобы на каждую страничку было разумное количество сообщений. Варианты квантования — год, год и месяц, год месяц и день (дата), дата и час, дата часы и десятки минут, дата часы и минуты и т.д.
Ссылка на каждую страничку тем самым уникальна и постоянна во времени (в отличие от безликих «1 2 3 4 5», которые «съезжают» по мере поступления новых сообщений). Пагинация всегда отображается сверху списка.
2. логика бесконечной прокрутки действует, но вместо прокрутки автоматом подгружаются следующие странички пагинации; при этом всегда подгружена предыдущая и следующая страничка. что обеспечивает иллюзию непрерывности списка сообщений (то есть никаких визуальных перегрузок страницы не происходит, для пользователя это просто прокрутка).
4. по мере прокрутки подгружаются следующие странички и выгружаются предыдущие, что экономит память и не вызывает тормоза когда пользователь открутил слишком много.
Вот такая система ИМХО была бы идеальной или близкой к тому.
Чем больше пользователи прокрутят страницу вниз, тем больше контента будет загружаться на одной странице. В результате скорость обновления контента будет падать все сильнее.
Это решается «виртуальными» списками, т.е. рендерингом только видимых тегов для текущей позиции скролла.
Возможно, оно и решается, но на практике я не могу привести примеры успешной реализации бесконечной прокрутки, где ранее просмотренные элементы бы не замусоривали DOM или хотя бы не оказывали никакого влияния на страницу. Почему-то то, что естественно для десктопных приложений, не реализовывают в вебе.
Есть ещё один неприятный минус бесконечной прокрутки: слетает положение на странице при изменении размера браузера. Это особенно актуально для мобильных устройств с включённым поворотом экрана.
Есть ещё один неприятный минус бесконечной прокрутки: слетает положение на странице при изменении размера браузера. Это особенно актуально для мобильных устройств с включённым поворотом экрана.
Десктопный Firefox научился это делать «из коробки» чуть больше года назад, не знаю как насчет мобильной версии.
Средствами JS не получится одновременно совместить нативный поиск и 'виртуальную' прокрутку т.к. большинство тегов физически отсутствует в DOM'е и браузер не видит их.
Но можно перехватывать сочетание клавиш CTRL + F и отображать кастомный поиск, как это делает Codemirror, выглядит довольно интуитивно. Пример здесь, поставьте курсор среди текста и нажмите CTRL + F
Аналогов ListView среди JS библиотек много: мой Clusterize.js, Infinity.js от Airbnb, многофункциональный но заброшенный SlickGrid, React virtualized из реакт тусовки, core list из полимеров.
Прокрутку до определенного комментария можно было бы легко сделать если б высота комментариев была одинаковая, но она разная, из-за чего придется еще посидеть над предугадыванием положения комментария. Даже не знаю поддерживает ли какая из озвученных мною библиотек такой функционал из коробки.
Средствами JS не получится одновременно совместить нативный поиск и 'виртуальную' прокрутку т.к. большинство тегов физически отсутствует в DOM'е и браузер не видит их.
Но можно перехватывать сочетание клавиш CTRL + F и отображать кастомный поиск, как это делает Codemirror, выглядит довольно интуитивно. Пример здесь, поставьте курсор среди текста и нажмите CTRL + F
Аналогов ListView среди JS библиотек много: мой Clusterize.js, Infinity.js от Airbnb, многофункциональный но заброшенный SlickGrid, React virtualized из реакт тусовки, core list из полимеров.
Прокрутку до определенного комментария можно было бы легко сделать если б высота комментариев была одинаковая, но она разная, из-за чего придется еще посидеть над предугадыванием положения комментария. Даже не знаю поддерживает ли какая из озвученных мною библиотек такой функционал из коробки.
Возможно, проблема заключается не в большом количестве комментариев, а в чрезмерной заскриптованности страницы.
Например, пост на 1000 комментариев на dirty.ru (и других сайтах на его движке) с большим количеством картинок (на 100 мегов примерно) отображается через 10 секунд при включённом JS, через 2 секунды при выключенном JS и менее секунды, если ещё и картинки не грузить.
И дело не в скриптах как таковых, а в том, что после загрузки страницы скрипт начинает колдовать с комментариями на стороне клиента, например, рендерит поля даты. Почему это всё нельзя сделать на сервере, а клиенту передавать уже готовый HTML, мне не очень понятно.
Например, пост на 1000 комментариев на dirty.ru (и других сайтах на его движке) с большим количеством картинок (на 100 мегов примерно) отображается через 10 секунд при включённом JS, через 2 секунды при выключенном JS и менее секунды, если ещё и картинки не грузить.
И дело не в скриптах как таковых, а в том, что после загрузки страницы скрипт начинает колдовать с комментариями на стороне клиента, например, рендерит поля даты. Почему это всё нельзя сделать на сервере, а клиенту передавать уже готовый HTML, мне не очень понятно.
как ни странно, но пример реализации — пикабу. там бесконечная лента, верх которой выгружается из DOM. И из плюсов — можно скрыть просмотренные записи, чего так не хватает vk
Я сошлюсь на классику:
XKCD
Это ужасно раздражает.
Раздражает прокрутка, когда содержимое подгонано под экраны — картинки\комиксы\короткие_рассказы.
Прокрутка может порвать их пополам и приходится аккуратно, матерясь иногда на настройки мыши подкручивать почти каждый элемент отображения.
Прокрутка может порвать их пополам и приходится аккуратно, матерясь иногда на настройки мыши подкручивать почти каждый элемент отображения.
> Даже на самых мощных процессорах
Вы немного загнули с этим. Например, чтобы на i7-3770 столкнутся с проблемой подтормаживания ленты в вк нужно прокрутить 5к записей. Сомневаюсь что это распространенный сценарий.
Вы немного загнули с этим. Например, чтобы на i7-3770 столкнутся с проблемой подтормаживания ленты в вк нужно прокрутить 5к записей. Сомневаюсь что это распространенный сценарий.
Да, полностью согласен. Вероятно БП просто позволяет впихнуть больше рекламы, поэтому рекламщики ее и навязали где надо и не надо. Чтобы найти интересное место, придется прокрутить лишние километры ленты с рекламой.
Можно сделать календарь, но вы уверены, что пользователь помнит дату?!
Ну в некоторых старых стилях ЖЖ календарь есть, где в качестве гиперссылок только даты, когда были записи. Но там и нормальная паджинация была тоже. Но даже без оной календарём пользоваться вполне удобно. Искать старые заметки 2-3 летне давности проблем не составляет.
В новом стиле с БП, кстати, тормоза появляются после первой тысячи записей (и это на машине с i7 на 4 физ. ядра и 16 Гб). Что огорчает, поскольку первая тысяча-две заняты самыми популярными журналами (что не значит «самыми интересными»), а вот то, что себе отмечаешь обычно находится несколько дальше.
Абсолютно без разницы как именно работает сайт — главное чтобы при обновлении страниц я мог бы продолжить с того-же места и чтобы всё что уже просмотрено не начинало свою догрузку…
Всё жду, когда появятся нормальные реализации чекбокса, включающий автоматическую бесконечную прокрутку, кнопки «загрузить еще» и одновременно с этим нормального перехода между страницами.
Т.о. те, кто хочет заюзать бесконечную прокрутку — будут её включать. А кого воротит от неё — не испытают неудобств.
Кто хочет просто глазами листать тонны информации — смогут юзать бесконечную прокрутку.
Кстати, при бесконечной прокрутке вполне реально реализовать изменение текущей ссылки в браузере и в истории посещений. Это значит, что если юзер поделится ссылкой — она откроется ровно в том месте, как её закодили. Обновление в браузере тоже вернет пользователя на нужную страницу. Поэтому минус один минус.
Т.о. те, кто хочет заюзать бесконечную прокрутку — будут её включать. А кого воротит от неё — не испытают неудобств.
Кто хочет просто глазами листать тонны информации — смогут юзать бесконечную прокрутку.
Кстати, при бесконечной прокрутке вполне реально реализовать изменение текущей ссылки в браузере и в истории посещений. Это значит, что если юзер поделится ссылкой — она откроется ровно в том месте, как её закодили. Обновление в браузере тоже вернет пользователя на нужную страницу. Поэтому минус один минус.
Однако с помощью бесконечной прокрутки Facebook делает все возможное, чтобы выставить как можно больше информации пользователям на обозрение
FB всего лишь убирает из взаимодействия с юзером момент, когда юзер говорит «хватит». Довольно легко сказать себе «дочитаю до низа страницы и назад к работе», но с бесконечной прокруткой оторваться по такому событию, как «долистали до низа» не получится. Что на выходе дает большее время, проведенное на сайте FB.
Об удобстве юзера FB, мягко говоря, заботится в последнюю очередь, чтобы бы не говорили «гуру» UI.
Идеально иметь выбор: пагинация или лента без конца. Как антипаттерн приведу ВК с их ссылками в конце страницы: в старом дизайне было несколько ссылок в футере страницы, которые, после введения бесконечно прокрутки, стали ну очень трудно достижимыми.
Помню Яндекс баловался в поисковой выдаче бесконечной прокруткой. Выглядело странно, но как по мне, было интересно. Минусы этого перевесили плюсы и сейчас такого у них нет.
Я тоже из тех, кто если не склоняется к бесконечному скроллу, то за использование двух методов отображения контента одновременно.
Я тоже из тех, кто если не склоняется к бесконечному скроллу, то за использование двух методов отображения контента одновременно.
Бесконечная прокрутка и оглавление — два главных параметра для меня при выборе читалки, для windows 10 (fb2) нормальной до сих пор нет…
на андроид ZXReader (fb2) и ebookdroid
все почему-то делают только листание страницами…
на андроид ZXReader (fb2) и ebookdroid
все почему-то делают только листание страницами…
Ээээ потому что привычка читать книги (и так привыкшим намного удобнее) выглядит лучше, чем читать бесконечную лапшу, которую придется видимо… тянуть?
Под андроид у программы Cool Reader есть режим «бесконечный список» — пробовал несколько раз, но каждый раз возвращался к страницам.
Для fb2 можно попробовать AlReader2. Я пользуюсь Андроиде, Винде и на Kubuntu под Wine. Есть режим как бесконечной прокрутки (в том числе и автоматической), так и страничного листания. Из минусов — у ПК версии нет возможности подключать OPDS каталоги библиотек, и качать книжки прямо из читалки.
В вебприложении Instagram кнопка «Read More» появляется лишь один раз. После клика по ней страница листается бесконечно вниз.
Автоматическая бесконечная прокрутка без других средств навигации (хотя бы поиска по дате) — это не просто плохое решение, это очень плохое решение почти для всех видов сайтов, кроме разве что развлекательных, где доступ к старому контенту не требуется.
На мой взгляд, в большинстве случаев оптимальным является следующий вариант: традиционное разбиение на страницы с полным обновлением страницы + большая кнопка «показать еще» в конце контента, которая догружает контент AJAXом на ту же страницу по нажатию. Первое обеспечивает удобство навигации, второе — помогает удержать внимание пользователя.
На мой взгляд, в большинстве случаев оптимальным является следующий вариант: традиционное разбиение на страницы с полным обновлением страницы + большая кнопка «показать еще» в конце контента, которая догружает контент AJAXом на ту же страницу по нажатию. Первое обеспечивает удобство навигации, второе — помогает удержать внимание пользователя.
Я добавлю одну тонкость — если разбитие на страницы происходит как «1, 2, 3...» начиная со свежего к старому, то на такую страницу очень трудно попадать из поисковика, так как номер при пополнении массива материалов сбивается. Найти материал из поисковика становится практически невозможным (а внутренний поиск весьма часто тупит не по-детски). В большинстве случаев Гугл индексирует содержание, но не содержимое. И очень приятно, когда нумерация идёт наоборот «941, 940, 939...», просто потому, что попадаешь на искомый фрагмент сразу.
P.S. У WarSpot любопытная реализация — можно листать и можно подгружать. Обе возможности одновременно, кому как удобно.
P.S. У WarSpot любопытная реализация — можно листать и можно подгружать. Обе возможности одновременно, кому как удобно.
В результате пользователи наслаждаются ...
не надо так переводить, пожалуйста
На многих, не всех конечно, сайтах с постраничной разбивкой очень раздражает, когда нет возможности перейти сразу на нужную, далекую страницу. Обычно же как рисуют как — «1,2,3,4,5… следующая». И вот чтобы перейти на 17ю страницу нужно с 1й перейти на 5ю, потом с 5й до 17й перелистывать постранично! Люди, делающие такую гадость и владеющие такими сайтами, зачем вы так поступаете со своими пользователями, своими клиентами и покупателями??? Какова ваша задача — отпугнуть или привлечь?
Ну а прокрутка, конечно, раздражает своей бесконечностью и неопределенностью, я устаю от этого. И кнопка «загрузить еще» тоже не помогает, т.к. перейдя потом на любую другую страницу невозможно вернуться в первоначальную точку. Ты опять возвращаешься на кнопку «загрузить еще» и начинаешь все заново. Ну и при более-менее быстрой прокрутке следущая порция информации грузится столько же времени, как и просто другая страница.
В общем, если нумерация страниц сделана не коряво, я предпочитаю постраничную разбивку.
Ну а прокрутка, конечно, раздражает своей бесконечностью и неопределенностью, я устаю от этого. И кнопка «загрузить еще» тоже не помогает, т.к. перейдя потом на любую другую страницу невозможно вернуться в первоначальную точку. Ты опять возвращаешься на кнопку «загрузить еще» и начинаешь все заново. Ну и при более-менее быстрой прокрутке следущая порция информации грузится столько же времени, как и просто другая страница.
В общем, если нумерация страниц сделана не коряво, я предпочитаю постраничную разбивку.
По поводу второй части:
https://market.yandex.ru/catalog/54545/list?hid=6427100&hid=6427100&in-stock=0
навигация по страницам или «Показать еще». При этом «показать еще» меняет и адресс страницы, тоесть случайный рефреш или мисс-клик не сломает просмотр
https://market.yandex.ru/catalog/54545/list?hid=6427100&hid=6427100&in-stock=0
навигация по страницам или «Показать еще». При этом «показать еще» меняет и адресс страницы, тоесть случайный рефреш или мисс-клик не сломает просмотр
Всегда бесила бесконечная прокрутка.Её сейчас лепят к месту и не к месту. Пример; Зашел я как то на один лэндинг. Прокрутив 7 экранов вниз, я достаточно ознакомился с инфой, и мне нужны были только координаты, чтобы связаться. Обратно крутить было жутко в лом, и я решил докрутить до футера, т.к. по логике там могла быть заветная инфа и даже возможно карта — схема проезда.
Но прокрутив еще 7 экранов, понял, что разработчики или полные мудаки или тупо тролили пользователей, потому что контент не заканчивался. В эту же секунду, моя мышка потянулась к крестику на вкладке, после чего название конторки было тут же забыто, а услуга была заказана на другом сайте.
Но прокрутив еще 7 экранов, понял, что разработчики или полные мудаки или тупо тролили пользователей, потому что контент не заканчивался. В эту же секунду, моя мышка потянулась к крестику на вкладке, после чего название конторки было тут же забыто, а услуга была заказана на другом сайте.
Тут тоже бесконечная прокрутка, если будут добавлены еще миллион комментариев то так же придется крутить. думаю решения применяются от типа задачи.Но можно и прибегнуть к универсальному решению когда прокрутка разбивается на куски страниц.
Камень в большинство реализаций бесконечной прокрутки — наличие некоторой значимой информации где-то в футере (ну или предположение наличия там оной, в случае, если с главной выхода на такую информацию нет), при этом бесконечная прокрутка, которая не даёт увидеть этот самый футер, поскольку даже при переходе хоткеями по странице каким-нибудь end'ом или ctrl+arrow начинает подгружаться следующая порция информации, которая убирает футер из зоны видимости.
Ну, ответственные дизайнеры и ценящие своих клиентов владельцы сайтов так и делают. Один известный магазин, в котором я часто отовариваюсь, применяет одновременно и прокрутку с кнопкой «загрузить еще», и постраничную разбивку — покупатель сам по желанию и настроению выбирает, что ему ближе. Вот это я понимаю — сервис и забота.
а это сложно да сделать поддеркжу два способа сразу?
для мобильных устройств (для людей алтернативно одаренных меньшинств) — бесконечная прокрутка
для деcктопов (для нормальных людей) — классический способ
или переключение каким то образом в профиле сайта
как говорил Задорнов «Ну тупыыеее»
для мобильных устройств (для людей алтернативно одаренных меньшинств) — бесконечная прокрутка
для деcктопов (для нормальных людей) — классический способ
или переключение каким то образом в профиле сайта
как говорил Задорнов «Ну тупыыеее»
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Бесконечная прокрутка против разбивки на страницы