Хватит делать сайты с бесконечной прокруткойǃ

Original author: Fatih Kadir Akin
  • Translation


TL;DR. Хотя бесконечная прокрутка подходит для некоторых случаев, но она может создать проблемы.

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

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

Краткая история скроллинга


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

scroll (свиток) (n.): c. 1400, “рулон пергамента или бумаги”

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

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

Эволюция свитков в компьютерах


1. Строки (и столбцы)


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

Горизонтальная прокрутка сделала скроллинг инструментом не только для чтения контента, но и для навигации по экрану.

2. Окна (не операционная система)


Наличие прокрутки подтолкнуло людей к созданию оконного интерфейса. С помощью окон можно одновременно просматривать несколько фрагментов содержимого.


В Диспетчере программ Windows 3.1 несколько «свитков»

3. Веб-страницы


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

Варианты навигации по веб-страницам


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

Начнём с некоторых серверных систем пагинации.

Разбивка страниц на основе смещения


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

-- All posts count
SELECT COUNT(*) AS total FROM posts

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

-- First page items
SELECT * FROM posts LIMIT 10

И если мы хотим перейти на страницу 3, то нужно пропустить первые 30 элементов, используя смещение (OFFSET):

-- Third page items
SELECT * FROM posts LIMIT 10 OFFSET 30

Клиенту отправляется информация следующим образом:

{
  "pagination": {
    "items_count": 100,
    "current": 3,
    "total_pages": 10
  },
  "items": [...]
}

Плюсы и минусы пагинации на основе смещения:


  • Хорошо: легко перейти на любую страницу
  • Хорошо: более свободный вариант для пользователя
  • Плохо: проблемы с производительностью
  • Плохо: при изменении данных могут отображаться повторяющиеся элементы

Пагинация по указателю


Большие данные затрудняют расчёт таблиц, так как данные постоянно прибывают (подумайте о Twitter). Таким образом, разработчики придумали новые методы разбиения данных на страницы: по указателям (cursor).

Каждой строке присваивается уникальный указатель. Не нужно обсчитывать всю таблицу и знать точное число страниц:

-- Get extra 1 item to get its cursor.
SELECT * FROM posts ORDER BY id DESC LIMIT 11

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

{
  "pagination": {
    "next": 1234 // extra item's ID (cursor), null if end of data.
  },
  "items": [...]
}

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

-- Offsetting records using 1234 cursor
SELECT * FROM posts WHERE id >= 1234 ORDER BY id LIMIT 11

Плюсы и минусы пагинации по указателям:


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

Рассмотрим некоторые методы навигации.

Следующий и предыдущий


Действие: на основе кликов
Техника: на основе смещения или по указателям

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


Пагинация WordPress

Нумерация страниц


Действие: на основе кликов
Техника: на основе смещения

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


Примеры нумерации

Google использует такую навигацию в результатах поиска:



Загрузить ещё


Действие: триггер
Техника: на основе указателей, хотя можно реализовать на основе смещения, но это будет неудобно

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


Кнопка «Загрузить ещё»

В приведённом выше примере пользователь нажимает кнопку «Загрузить ещё» (Load More), чтобы увидеть больше контента.

Бесконечная прокрутка


Действие: на основе прокрутки
Техника: на основе указателей, хотя можно реализовать на основе смещения, но это будет ОЧЕНЬ неудобно

Бесконечная прокрутка — новейшая техника пагинации на основе указателей.

Хью Уильямс утверждает, что изобрёл бесконечную прокрутку в 2005 году для Microsoft.
Metafizzy разработала open source инструмент, помогающий разработчикам реализовать бесконечную прокрутку.


Бесконечная прокрутка позволяет прокручивать страницу до бесконечности

Хватит делать сайты с бесконечной прокруткой!


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

Поиск футера


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

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

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


Футер Twitter на правой боковой панели

Не используйте бесконечную прокрутку, если у вас нет таймлайна или ленты


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

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

Дайте пользователям больше контроля


Пользователи, как правило, не любят UI, который не могут контролировать.

Событие прокрутки не ведёт явно к намерению что-то делать. Люди перемещаются по странице, а если хотят совершить действие, то обычно делают клик или прикасаются к экрану (это и есть триггеры). Они информируют UI о своем решении. Но бесконечная прокрутка срабатывает без какого-либо решения.

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

Вместо бесконечной прокрутки поставьте кнопку «Загрузить ещё», которая является триггером. Это даст пользователю контроль. (Я бы предпочел старый стиль нумерации страниц, но мы предполагаем, что сейчас используем пагинацию по указателям).

Разрешите пользователям идти куда они хотят


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

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

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

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

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

Вывод


Бесконечная прокрутка хороша в некоторых случаях, но как правило, она создаёт больше проблем, чем решает. Дизайнеры не должны рассматривать бесконечную прокрутку как серебряную пулю, которая решает все проблемы с разбиением на страницы. Хватит делать сайты с бесконечной прокруткой!
Support the author
Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 208

    +23
    Очевидно, что это сугубо маркетинговый ход, который призван задержать пользователя у сайта, ни каким удобством тут и не пахнет
      +6
      Надо различать работу с информацией и энтертеймент. Очевидно, что для развлекательного контента навигация должна быть потребительской, с минимальным (не раздражающим) управлением. В этой ситуации бесконечный скроллинг — идеальное решение, потому что минимальное управление — это колёсико мышки. Нужно больше? Крути вниз. Нужно меньше? Не крути. Пропустил что-то интересное? Крути вверх. Просто, удобно.

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

      Т.е. это разные модели использования и у них разные критерии оценки.
        +4
        с минимальным (не раздражающим) управлением

        Ткнул куда угодно, почитал, перешёл назад, и снова крути с самого верха, пока не найдёшь, на чём остановился. И это ещё в идеале, если вообще найдёшь, а не попадёшь на совершенно другую ленту с другим контентом (привет, новостной фид андроидного Хрома). Не знаю, какой выдержкой надо обладать, чтобы считать это не раздражающим.
          0
          Развлекательный контент не подразумевающий кнопки «назад». Повторю, что для работы с информацией не годится.
            +4
            Не могу представить ни одного реального примера сервиса, в котором есть только одна бесконечная лента без единой ссылки.

            Даже если сам по себе контент не предполагает перехода куда-либо, ссылки всё равно будут. Как минимум рекламные и навигационные. Как-то же пользователь пришёл читать этот контент, значит и путь назад у него есть.
              0
              тот же pixiv, например. Ссылки есть, но core часть — бесконечная лента картинок.
            0
            Простое техническое решение: фиксация указателя при скроллинге. Но что бизнес оно не интересует.
              0
              При правильной реализации сделать работающую функцию «назад» — не проблема.
                +2
                Ткнул куда угодно, почитал, перешёл назад, и снова крути с самого верха, пока не найдёшь, на чём остановился

                Ладно ткнул. Вот главная coub'а — пролистнул где-то полсотни видео и вкладка падает. Бесит страшно.
                  +1
                  этим страдают большинство бесконечных прокруток
                  яндекс дзен и жж на мобильных в частности
                  разница только в количестве прокрученного контента до зависания
                    0
                    На пикабу эту проблему отлично решили, нажатие назад возвращает в то положение, где ты был в этой бесконечной прокрутке
                      0
                      На пикабу и в настройках можно включить постраничную навигацию, хвала им
                0
                Что мешает по скролу двигаться по страницам? И бесконечная прокрутка и позиция в тексте win-win.
                Сайтами с бесконечной прокруткой стараюсь не использовать — уважаю свое время. Далеко не все отдают верстку и дизайн профессионалам, а у гиковой молодежи все новое — хорошее, все старое — плохое.
                Со времен оконного интерфейса парадигма пользовательского интерфейса не изменилась, немного добавилась адаптивонсть и динамичность. Возможно такие даже и не представляют, что с UI можно работать только на клавиатуре, при чем достаточно быстро, да останется Tab+(shift/ctrl) во веки веков.
                На хабре при переходе tab'ом на кнопки сохранить фокус не показывается :(, но по space срабатывают
                  0
                  Вы имеете в виду «движение колёсика = прокрутка на 1 страницу»?
                  Некоторые люди специально настраивают размер прокрутки и расчитывают, что никакой дизигнер ломать его им не будет. И они будут не рады.
                    0
                    Мне кажется, ту имелось в виду, что скролл то бесконечный, но при этом он как бы постраничный с возможностью перехода на определенную страницу, а не tail -f.
                      0
                      Такое в комментариях ВК.
                      Только пагинация от начала, поэтому через час на 5-й странице чатика будут совсем другие каменты.
                      0
                      Нет, как раз по примеру ВК, когда кртиш вниз, потом вверху начинают пролистываться страницы. и как уже заметели ниже, по идее отсчет страниц должен осуществляться в прямом порядке: последнее сообщение имеет бОльший номер, но отображение надо делать с конца. Т.е. я открываю и сразу не последней странице например 13456.
                      Парадигма так себе и людей придется приучать. Зато нет никакой однозначности.
                      На первой странице первое сообщение, на N поновее, находясь на Nой, если кто-то допишет еще 10 страниц, то ок, мотаем конец.
                    0

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

                      –3
                      «Хочу на следующий день полистать с того момента, где я закончил. » — это уже не развлекательный контент, это уже работа с информацией.
                        +1

                        А развлекательный контент — не информация? Тогда я не понимаю вашего деления на развлекательный контент и информацию.

                          –3
                          Развлекательный контент — это контент, который подразумевает пассивное (почти пассивное) потребление. Этакий телевизор в интернете.

                          Работа с информацией подразумевает активный фокус — если что-то пропущено, то необходимо вернуться к пропущенному. В развлекательном контенте это не важно — одно заменяется другим.
                            +2
                            Ну представьте. Я новенький на ДжойРеакторе и мне по ночам вообще-вообще нефиг делать. И вот я три часа перед сном читаю «новости» на главной. Возможно, вместо этого я бы смотрел видосики на коубе, но там главная сделана через жопу бесконечную прокрутку и потому пару дней ее посмотрев — я уже не могу продолжить просмотр, а новый контент на главной появляется, увы недостаточно быстро.
                  +2
                  Этот безумный безумный мир
                  Бесконечная прокрутка, монобровь… что дальше?
                    +28

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

                      –2
                      А какими только эпитетами не чмырили МС, когда они стали активно продвигать свой плиточный интерфейс… Такими, видимо, что даже они сдались, и в десятке, сначала в мобильной, потом в настольной, стали местами заниматься вот этой ерундой, о которой вы сказали.
                        0
                        Согласен. Мне теперь надо аватарку переделывать из-за этого. (Слава б-гу Хабр тут выделяется в лучшую сторону)
                          +3
                          Слава б-гу Хабр тут выделяется в лучшую сторону

                          .user-info__image-pic {
                              ...
                              border-radius: 3px;
                          }
                            0
                            3 пикселя это не так страшно, как 100%
                              0
                              Для скругления достаточно 50%, а так да, согласен.
                        +6
                        Эта прокрутка реально эпидемия. Из последних примеров.
                        1) ВКонтакте. Раньше люди в закладках отображались табличкой. На одной странице помещались все. Неделю назад сделали столбиком и скроллишь, скроллишь, скроллишь. Зачем?
                        2) Роутеры Zyxel Keenetic. Был удобный лаконичный интерфейс, все настройки (во вкладках) умещались на 1 экране. Недавно сделали стильный-модный-молодёжный редизайн. Добавили межстрочный интервал по 2 см и теперь на любой странице с тремя настройками скроллинг!
                        Заголовок спойлера
                        image
                          –2
                          Добавили межстрочный интервал по 2 см

                          так это не от хорошей жизни, а из-за распространения тач-девайсов, на которых не так просто попасть пальцем в кнопочку 16x16px

                            +9
                            Это правда, но ведь нужно иногда включать голову. Все же только со смартфонов роутеры и настраивают.
                              –1
                              Хороший тон выпускать для своих роутеров отдельное приложение для управления под девайсы.
                                +4
                                Популярное поветрие — да. Хороший тон — серьёзно?
                                  –2
                                  Ну да. Уважение к пользователям.
                                    +4
                                    Заставлять пользователя качать приложение, вместо того чтобы просто зайти на сайт — это издевательство, а не уважение.
                                      +1
                                      Мы сейчас про что говорим? Я про админку роутера. Мне не влом скачать приложение для нормальной работы.
                                        +1
                                        Про админку роутера и говорим. Мобильное приложение по сравнению с сайтом может быть оправдано, если браузер не справляется с вашими требованиями к производительности (3D-рендеринг, работа с камерой, какие-то особо хитрые интерфейсы). В админке роутера же — поля ввода, кнопки и текст, которые можно отлично показывать в браузере. Кроме того, я захожу в админку роутера один раз при покупке и потом, возможно, раз в пару лет. Ради чего тут делать приложение?
                                          +1
                                          А как же показывать рекламу, снифать трафик, доступ к контактам? Любая уважающая себя прошивка в качестве интерфейса должна иметь только приложение. Естественно ios-only.
                                          +2

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

                                            +1

                                            А ведь когда-то так и было: драйвера от сидирома в интернете, драйвера от модема на диске.

                                              +3
                                              И все они в архивах, а рядом лежит архиватор, тоже в архиве.
                                      +1
                                      Задолбали уже с этими приложениями для каждого сервиса, в некоторые банк-клиенты уже браузером с телефона нормально не зайти. Боюсь, эта концепция и на десктопы переползет когда-нибудь, забудем, что такое фаерфокс, а будем открывать приложение «гугл», вводить туда запрос, и открывать ссылки в приложениях «хабр», «технет», «ньюсру» и тд.
                                        +1
                                        Ладно еще с телефона не зайти, с ноутбука или дестопа заходишь в такой «полноценный» интернет банк, а там бывает нужных функций/опций нет.
                                        Спрашиваешь у поддержки:
                                        — А как у вас сделать Х в ИБ? У вас же заявлялось/рекламировалась Х, но не вижу где подключить/настроить, обманули?
                                        — X у нас есть, оно доступно в нашем мобильном приложении.
                                        — Но я не пользуюсь моб. приложением и не собираюсь.
                                        — Как так?! Почему?! Это же так удобно!
                                          0
                                          И даже с антивирусом!
                                            0
                                            Вот например отключить видимость по номеру телефона в тинькове. Вроде до сих пор не сделали ползунок в инетбанке.
                                        +2
                                        Так может, надо было менять размер кнопок, а не расстояние между ними?
                                          +4

                                          Адаптивная верстка как раз для этого вроде?

                                            0
                                            Да, но она требует наличия пункта в ТЗ и мозгов у дизайнера
                                            +1
                                            Не у всех же тач-девайсы) В первой версии был переключатель «новый-старый дизайн», можно было менять по желанию. В следующей прошивке его выпилили. А ведь старый дизайн настолько кондовый, что весил, наверное, килобайт 50. Периодически дорабатывать его, вставляя какие-то новые чекбоксы — пустяк, тем более для одного из лидеров рынка.
                                            0
                                            Недавно сделали стильный-модный-молодёжный редизайн.

                                            Ужас. Хотел себе покупать новый роутер этой фирмы, а сейчас даже в сомнениях. Может получится поправить это юзерстилями?
                                              0
                                              Даже не знаю. После обновления откатился на ту прошивку, где была возможность выбора. Ну и можно через Telnet настраивать)
                                          +19

                                          Как это — о бесконечной прокрутке, и без ссылки на https://xkcd.ru/1309/ ?

                                            –32
                                            Ну полный же бред! 2019 год. У вас умный поиск на основе тегов. И вот вы выбрали альбомы по жанрам «Дима Билан» и «Нюша». Поисковик выдал три страницы. Вы уже на второй и вдруг в голову приходит забить уже на Дмитрия. Вы убираете тег «Дима Билан»… И что дальше? Вжух и вы оказываетесь снова на первой странице? А если страниц тысяча, то вы снова окажитесь на первой и потом ищите, где же вы остановились? С бесконечной прокруткой увас только Димок пропадет и даже экран не дрогнет.
                                              +13
                                              Не надо мне 10000 Димков показывать сразу, я готов увидеть 100 страниц по 100 Димков с сортировкой
                                                –18
                                                Вы о чем вообще? Только в этот раз прежде чем ответить хорошенько подумайте.
                                              • UFO just landed and posted this here
                                                  +2
                                                  Поздравляю, вы всё таки не программист.
                                                  • UFO just landed and posted this here
                                                  +3
                                                  Так если он меня оставит на «второй» странице другого запроса с другими фильтрами, на котором только альбомы «Нюша», то их же меньше и значит, оставшись на второй странице, я могу пропустить некоторые альбомы.
                                                    0
                                                    Всё будет именно так как вы хотите, если использовать пагинацию на основе смещения.
                                                      +5
                                                      Соль в том, что, в случае с пагинацией, можно хотя бы примерно оценить количество элементов и прикинуть, а стоит ли оно того. Т.е, стоит ли вообще в «этом» копаться.

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

                                                        Обычно пишут сколько найдено элементов, если это поиск какой-то

                                                        +1
                                                        С бесконечной прокруткой увас только Димок пропадет и даже экран не дрогнет.

                                                        Это как? Если убрать элементы выше текущей позиции вьюпорта — разве нижние элементы нe «поедут» наверх?
                                                        +27
                                                        А также хватит делать сайты с паджинацией по 10 элементов!
                                                          0
                                                          Надо больше или меньше?
                                                            +9
                                                            Я зануда, мне нравится, когда можно выбрать (ну там, 10...30...50...100… Все)
                                                              +1
                                                              Я как-то включил «всё» в одной маленькой информационной системе. Да, оно честно мне подгрузило все 400Гб. Точнее, попыталось подгрузить, после чего ядро моей ОС решило, что браузер офигел и убило его. На моей машине были жалкие 16Гб памяти, чего явно не достаточно для показа 400Гб данных в режиме «всё».
                                                                +1
                                                                А откуда вы узнали, что там именно 400?
                                                                  0
                                                                  Информационная система сказала. Ей-то посчитать не влом.
                                                                +4
                                                                И желательно запоминать выбор. А то нажал 50, перешел в другую категорию, а там снова 10
                                                                  0
                                                                  Ага! А если нажал «Всё», то… уже всё :-)
                                                              +1
                                                              Так делают, чтоб показывать рекламу на каждой из страниц с результатами. Видели когда-нибудь гайды или туториалы по какой-нибудь теме, где пять абзацев размазаны на три страницы?
                                                                +1

                                                                И хватит делать paging на 5 "страниц" плюс стрелочки "Начало" и "Конец".


                                                                << | 1 | 2 | 3/100 | 4 | 5 | >>


                                                                Сделайте хотя бы так


                                                                << | 1 | 2 | 3 | 4 | 5 | 6/100 | 7 | 8 | 9 | 10 | 11 | >>


                                                                А то достает листать через 2 странички, хотя уже очевидно, что результат примерно на 50-й

                                                                  0
                                                                  хотя уже очевидно, что результат примерно на 50-й

                                                                  Для этого делают поле перехода на конкретную страницу. А гики могут и через адресную строку перейти.
                                                                    0

                                                                    Лучше тогда уж вот так:


                                                                    1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |… | 100


                                                                    А то никогда не знаешь что эти стрелочки означают...

                                                                  +6

                                                                  Неплохое сравнение бесконечной прокрутки с другими вариантами приводил недавно один из разработчиков веб-интерфейса Google Photos в своей статье о том, как они этот интерфейс делали. Кстати, мне их итоговое решение (когда скроллбар не «растёт» по мере прокрутки вниз, а сразу примерно отображает общий масштаб контента и позволяет быстро «мотать» его к началу или к концу) очень понравилось!

                                                                    0
                                                                    Крутая работа. Странно только после прочтения этого когда пользуешься последней версией gmail.
                                                                      +1

                                                                      Гугл большой, команды разные...

                                                                    +40

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

                                                                      +5
                                                                      Этим даже сайты с асинхронной подгрузкой грешат нефигово — на том же Амазоне нижние блоки страницы подгружаются асинхронно, нажимаешь кнопку End, пытаешься ткнуть в ссылку с условиями и ценой доставки, а тут подгружаются две горизонтальные ленты Related… и footer убегает.
                                                                        0

                                                                        Я видел сайт у которого выдвигается футер когда листаеш обратно.

                                                                          +2
                                                                          Это совершенно дурацкий костыль.
                                                                            0
                                                                            Простите, а почему дурацкий? Честно говоря, я даже не назвал бы его костылём, но тут вопрос скорее классификации, но дурацкий ли? Он даже мобильные приложения уже в добесконечноскролловую эпоху подпирал, и современные очень даже юзабельными делает. Или он дурацкий с точки зрения разработчика?
                                                                              +1
                                                                              Потому что это не очевидно для пользователя. Во-первых, само существование футера — это то, что основано на типичном UX. А если его приходится «ловить» или, тем более, он показывается только при действии, которое обратно действию, которое интуитивно совершает пользователь, чтобы его увидеть, это буквально переворачивает логику UX вверх ногами.
                                                                              Я понимаю, что есть ненормальные дизайнеры, которые считают, что «нестандартно=хорошо», всегда и при любых условиях, но на то они и ненормальные.
                                                                                0
                                                                                Когда Synaptics лет -дцать назад выпустили драйверы с опцией разворота скролла на своих тачпадах, а я купил набор MS Wireless 7000 (долгих лет ему жизни) с аналогичной опцией, у меня состоялся с отцом небольшой разговор (возраст на тот момент около 25 vs 50). Я был в восторге: ну наконец-то, ты делаешь мышкой или тачпадом то же, что делаешь пальцем на экране телефона, ты скроллишь, прокручиваешь свиток снизу вверх. Он ответил: неудобно, колесом мыши я должен прокручивать сверху вниз линию, на которой лежит мой взгляд на контенте. Я не возразил ни единого слова, потому что совершенно чётко понял, что именно ему удобно, и почему. Интуитивность у всех разная, точка.
                                                                                Касаемо сабжа, я вижу это так: пролистывая контент движением пальца снизу вверх, мы получаем уборку области чтения путём сокрытия адресной строки браузера и шапки сайта, а также подвала сайта и управляющих элементов браузера. Чтобы вернуть их, нужно совершить обратное действие: опустить палец вниз по экрану. На мой взгляд, это предельно интуитивно: совершил действие — получил результат, чтобы отменить результат, соверши обратное действие. Вот если сайт не загрузился с футером и не убрал его с началом прокрутки, то он неправ, он не обучил пользователя, фу, плохой сайт.
                                                                                Вашу позицию я понял чётко и ясно, вы хотите доскроллиться до подвала промоткой свитка; спасибо что ответили. Но есть проблема, не связанная со вкусом фломастеров: а для бесконечной прокрутки (да и не только для неё, не вижу смысла тратить место на что-то кроме фокусного контента) есть варианты лучше? Кроме твиттеровского не вижу, но его тоже бракуют выше, и я с бракующими согласен, но по другой причине, всё той же моей любимой: нехай занимать место на экране. Есть ещё варианты?
                                                                                  0
                                                                                  Я детально описал use case в первом же комментарии:
                                                                                  … нажимаешь кнопку End ...

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

                                                                                  По поводу «не тратить место» — не аргумент, потому что место на экране денег не стоит. То есть вы говорите о том, чтобы избегать чего-то, что, на самом деле, избегать бессмысленно.
                                                                                    0
                                                                                    нажимаешь кнопку End, … и footer убегает.

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

                                                                                    при действии, которое обратно действию, которое интуитивно совершает пользователь, чтобы его увидеть, это буквально переворачивает логику

                                                                                    Это не вопрос вкуса

                                                                                    Так вам нужен низ страницы или футер? Вам самый быстрый или интуитивный? Искать конец бесконечной страницы (а не она ли предмет статьи и ветки начатой Marsikus?) — ну, наверное в этом что-то есть, как выбирать подходящее место завершения мелодии музыкальной шкатулки. Если всё же вам футер, то добраться до футера быстрее всего — не убирая руку с мыши, скролл обратно, ну или стрелка вверх, если вы на клавиатуре; в то время как тянуться до end, когда клавиатура далеко, — это вообще ни разу не самый быстрый способ для некоторых, к вопросу о деле вкуса. А вот если всё-же вы не о скорости, а об интуитивности, то это самый что ни есть вопрос вкуса, привычки, восприятия и прочего. Я просто не очень понимаю, вы то об одном, то о другом.


                                                                                    место на экране денег не стоит

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

                                                                                +1
                                                                                Потому что есть люди, использующие 3.1" экраны с высокой плотностью пикселей, с разрешением 720×720. Если на таком экране «прибито» меню или подвал, то на основной контент остается всего несколько строк.
                                                                                  0
                                                                                  Так я спросил о дурацкости вот этого
                                                                                  Я видел сайт у которого выдвигается футер когда листаеш обратно.
                                                                                  костыля. У мобильного Хабра, например, где что чем прибито?
                                                                              0
                                                                              Вот ни разу не очевидное решение.
                                                                                0
                                                                                почему бы просто футеру не сделать
                                                                                position: fixed;
                                                                                bottom: 0;
                                                                                  +6

                                                                                  Есть и такие сайты. В таком случае футер постоянно отъедает полезное пространство экрана.


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

                                                                                    0
                                                                                    Это более очевидно, но еще хуже.
                                                                                      +1
                                                                                      И смотреть в амбразурную щель между прибитым хедером и футером.
                                                                                        0
                                                                                        И… теперь все повадились еще писать на пол экрана, что мол кукисы примите или не примите…

                                                                                        Все, кроме хабра, кстати.
                                                                                  +2
                                                                                  Постоянно встречаю такие сайты :) В том же вк достаточно долго была эта проблема (сейчас сходу найти не смог, похоже таки поправили)
                                                                                    0
                                                                                    Вынесли всё, что в нём было в другие места. Дико бесило, да.
                                                                                    +5
                                                                                    И футер убегал при попытке добраться до него.

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

                                                                                    И судя по тому, что ссылки на поддержку сейчас вообще нет — в этом есть доля правды.
                                                                                      0

                                                                                      Ещё можно было зайти на мобильную версию сайта ;-)

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

                                                                                        А с полгода назад написать им можно было, только имея прямую ссылку на форму обращения. Редкостный пример наплевательства сервиса на своих пользователей.
                                                                                          +2
                                                                                          Вот тоже захотел привет передать.
                                                                                          Раздел «Разработчикам» в свое время висел там же, при ковырянии каких-то проектов, юзающих ВК API попытка быстро залезть в мануалы вызывала особые чувства к этой соцсети.
                                                                                          Приходилось переходить куда-нибудь в «Группы» или «Настройки», чтобы дотянуться до футера.
                                                                                            0
                                                                                            или поиске небесконечной страницы.
                                                                                            Настройки же
                                                                                            0
                                                                                            Так было на старом варианте дизайна VK, но его можно было докрутить до конца, если стена кончалась :)

                                                                                            Кстати, не видел еще одного «бага» инфинити скролла, по нему фигово работает текстовый поиск. По крайней мере огнелиса не ищет по вновьподгруженному контенту.
                                                                                              +1
                                                                                              При подгрузке поиск действительно не обновляется. Но если ещё раз нажать F3, то ищет по всему текущему контенту страницы.
                                                                                                0
                                                                                                Ах вот оно что. Спасибо милчеловек.
                                                                                                0
                                                                                                Лиса ищет. Проверил только что на ВК.
                                                                                                0

                                                                                                Мобильная версия nix.ru ;] Чтобы переключиться в списке товаров на десктопную версию, нужно нажать на ссылку в футере. Но как только докрутил до него, то подгружается новая страница товаров и… всё заново.

                                                                                                +5
                                                                                                Тоже не люблю бесконечные прокрутки.
                                                                                                А лучшим вариантом пагинации считаю умную пагинацию с метками времени. То есть если за какой-то период времени сформировалось достаточное количество контента (скажем от N1 до N2 элементов), то формируется страница, ссылка на которую содержит метку времени свободного формата: начиная от года (когда контента очень мало) и заканчивая год&месяц&день&час&минута (когда контента очень много).
                                                                                                Что это дает? То что на любую страницу можно сослаться постоянной ссылкой, и то что из этой ссылки понятно к какому периоду относится контент. Кнопки «вперед/назад» вполне вписываются в это, ну и для любителей бесконечной прокрутки — тоже можно ее сюда вписать, опцией в виде чекбокса, который всплывает прямо над/под лентой новостей. «Включить бесконечную прокрутку» — и она появляется, «выключить» — и исчезает вся бесконечная лента кроме текущего (просматриваемого в данный момент) фрагмента.
                                                                                                  +4

                                                                                                  Со временем интересное решение. Я давно думаю о обратной нумерации страниц от старых к новым. Пользователь попадает на страницу с новым контентом на страниц 555 и постепенно просматривает старые (554, 553 и так далее). В это время более новый контент заполняет страницу 556.


                                                                                                  Ну и проблема то вся в том что создатели бесконечных страниц видимо не обновляют URL страницы в соответствии с положением в ней пользователя при помощи history.pushState(). И не разделяют страницы элементом на котором будет указан её номер и ссылка на неё.


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


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

                                                                                                    +3
                                                                                                    Я давно думаю о обратной нумерации страниц от старых к новым.

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

                                                                                                      С фильтрацией нет проблем. Просто страницы на которых останется мало контента сольются с предыдущими.


                                                                                                      С сортировкой отличной от времени публикации уже надо думать по ситуации.

                                                                                                    0
                                                                                                    К сожалению, подойдет тольк для статической ленты, безо всяческих фильтраций/поисков и т.д.
                                                                                                    +8
                                                                                                    Выключаю бесконечную прокрутку везде, где есть такая возможность. А если нет, то смотрю только первую страницу.
                                                                                                      +44

                                                                                                      Какая приятная ирония в контексте бесконечной страницы.

                                                                                                      +1
                                                                                                      Не проще ли отказаться от футеров полностью? Спокойно живём без них в мобильных приложениях. Юридическую информацию (в том числе и копирайт) можно перенести на отдельную страницу.
                                                                                                        0
                                                                                                        А ссылки на юридическую информацию и копирайт куда-нибудь поглубже? Вместе со ссылкой на контакты и техподдержку, да.
                                                                                                          0
                                                                                                          Нет. Просто можно добавить пункты «Поддержка» и «О сайте» в меню (в Twitter это иконка с аватаром пользователя) или панель навигации (левая панель во ВКонтакте).
                                                                                                      • UFO just landed and posted this here
                                                                                                          –1
                                                                                                          Я как раз недавно подробно расписывал именно про такой способ организации ленты: habr.com/post/416555
                                                                                                          • UFO just landed and posted this here
                                                                                                              0

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


                                                                                                              Промотал — значит пользователь не против видеть что-то такое, но конкретно этот материал его не заинтересовал. Оставляем в истории. Продолжаем подкладывать такого.


                                                                                                              Смахнул — значит он не хочет такое видеть вообще. Удаляем из истории и стараемся похожего не подкидывать.


                                                                                                              Зашёл или даже откомментировал — значит тема интересна. Даём больше на эту тему.

                                                                                                                +4
                                                                                                                По поводу «зашёл-интересная тема» ответ не правильный. Не работает с вирусными заголовками. Я когда в первый (и в последний) раз установил Facebook мне такой мусор пошел, что вылечил через неделю только удалением фейсбука. Вообще. И да, для сравнения в YouTube есть хоть история и закладки, которые здорово помогают с организацией контента.
                                                                                                                  –3
                                                                                                                  Прекрасно работает если различать тему тизера и тему контента на который он ведёт. Бывает это совершенно разные темы. Например, в данную статью я зашёл, потому что мне интересна тема скроллинга. При этом само содержание статьи весьма не интересное. Я бы смело поставил ей минус. Но это не значит, что мне не интересна тема скроллинга. Это лишь значит, что конкретно эта статья мне не понравилась.
                                                                                                                    0
                                                                                                                    Однако, если пользователь сливает все темы про скроллинг, значит он ему не интересен как явление.
                                                                                                                      +2
                                                                                                                      Если сливает даже не заходя в них — да. Если читает, но сливает, значит что-то не так с качеством контента, а не темой.
                                                                                                            0
                                                                                                            Да это же переизобретение NNTP-читалок со скорингом.
                                                                                                              0
                                                                                                              Для сайтов типа хабра приходится использовать свой парсер. Мне достаточно только заголовка, по которому будет понятно, интересна мне данная статьи или нет. Вместо этого приходится прокручивать

                                                                                                              — Поле с автором.
                                                                                                              — Огромных размеров H1 заголовок.
                                                                                                              — Тэги
                                                                                                              — Чрезвычайно длинное «краткое» содержание статьи.
                                                                                                              — Кнопку «читать дальше»
                                                                                                              — Футер статьи с лайками.

                                                                                                              И прокручиваешь эту километровую страницу. Среди которой бесполезные рисунки. И переодически встречаются дополнительные блоки с рекламой… Или «Мой Круг». И если рекламу ещё можно понять, чтобы хабр зарабатывал. То бесполезный мне поиск работы. Очередное навязывание услуг. И сколько времени уходит на прокрутку страницу колёсиком? Много. Очень много. И это для того, чтобы в конце встретится со вторым «проклятием» после бесконечной прокрутки. Пагинацией. И всё началось сначала. (а через неделю опять сначала). Вот так вот только прокрутить до 5 страницы и привет «прокрастинация». Сколько же времени убили этим «дизайном» только одному мне. А сколько тысяч человек здесь? Жизни целые уходят на бесполезную прокрутку.

                                                                                                              При этом вся необходимая информация из заголовков нормальным шрифтом и ссылками умещается НА ОДИН экран смартфона и ~ 10 секунд для оценки стоит ли тут чего-то читать или нет. Можно совсем чуть-чуть усложнить и добавить в парсер хабы, чтобы высвечивалась только необходимая тематика.
                                                                                                              +1
                                                                                                              Было трудно развернуть папирус до комментариев в вашей статье…
                                                                                                                0
                                                                                                                Как вариант, можно сделать всплывающий футер: если пользователь подвёл курсор к нижней границе окна браузера — показываем, т.к. если пользователя привлекла кнопка или ссылка, то в случае бесконечной прокрутки он просто промотает вниз, чтобы этот объект был ближе к центру экрана и виден целиком.
                                                                                                                  +4
                                                                                                                  А если нет мышки, но есть тачскрин?
                                                                                                                    0
                                                                                                                    На некоторых сайтах меню остаётся на экране при проматывании контента вниз. Ничто не мешает футеру иметь это свойство: контент всплывает из-под футера (промотка вниз) и заезжает под футер (промотка вверх).
                                                                                                                      +2
                                                                                                                      Как вариант, но это сужает область видимого контента, что особенно неприятно на мобильных устройствах. Ведь футер может быть и вообще не нужен посетителю, а в Вашем предложении он будет постоянно маячить перед глазами и занимать место.
                                                                                                                        0
                                                                                                                        Я предложил возможные костыли, исходя из того, что автору футер нужен везде и всюду. А вообще считаю, что на страницах с бесконечной прокруткой не нужен, а всю информацию можно в меню убрать в раздел о сайте.
                                                                                                                          +2
                                                                                                                          Подозреваю, что такие штуки как Terms & Conditions, Privacy Policy, Copyright по какому-то там законодательству должны быть явно доступны без каких-либо особых телодвижений со стороны посетителя. Так что не показывать футер, как минимум на главной странице (а то и вообще на всех страницах, не требующих аутентификации), может быть чревато.
                                                                                                                            0
                                                                                                                            Я писал про футер только на страницах с бесконечной прокруткой. На остальных он вполне может быть. «Какое-то там законодательство» могло принять этот закон до массового появления страниц с бесконечной прокруткой или принималось несведущими людьми.
                                                                                                                              +3
                                                                                                                              Надо же, тот редкий случай, когда законодательство приносит пользу против кривых решений типа бесконечной прокрутки!
                                                                                                                      0

                                                                                                                      Показывать и футер, и хедер по клику на "бургере",

                                                                                                                        0
                                                                                                                        Ну, как вариант.
                                                                                                                          +4
                                                                                                                          Бургер — вообще неинтуитивная фигня на десктопе.
                                                                                                                          Ко мне несколько раз в неделю стабильно обращаются на предмет, где найти те или иные разделы сайта. Каждый раз отправляю к дизайнерам. Нарисовали — будьте добры страдать за свои добрые дела. У меня только хостинг.
                                                                                                                          А сколько пользователей вообще не доходит до нужных разделов и тупо забивает, даже не представляю. По подозреваю, что больше тех, кто спрашивает. Итог: сотрудники организации осуществляют поиск инфы о разделе сайта этой же организации через гугл.
                                                                                                                            0
                                                                                                                            Так никто не говорит показывать бургер на десктопе. Это про мобильную версию, где экран надо сильно экономить, а всплытие по наведению сделать нельзя.
                                                                                                                        +5
                                                                                                                        Ох уж эти всплывающие менюшки. Ведёшь курсор к какой-нибудь ссылке — вылезла менюшка! На автомате кликаешь куда-нибудь, но задеваешь менюшку, попадаешь не туда куда хотел. Убрал курсор, чтобы не мешался — вылезла менюшка! Убрал в другую сторону, а там тоже менюшка! А эти вложенные друг в друга менюшки в интернет-магазинах, когда ты аккуратно ведёшь курсор так, чтобы он ни в коем случае ни на пиксель не слез со всплывающих менюшек, иначе начинай всё заново. Я иногда жду когда вылезет скример в таких местах. Если теперь ещё и футер будет всплывать, на фоне бесконечной прокрутки…
                                                                                                                          +3
                                                                                                                          Как вариант, можно сделать всплывающий футер

                                                                                                                          НЕ НАДО. ДЕЛАТЬ. НИЧЕГО. ВСПЛЫВАЮЩЕГО. ВООБЩЕ. НИКОГДА, Только по нажатию!
                                                                                                                          –9
                                                                                                                          Нижний колонтитул — базовая единица анатомии веб-страницы, как и заголовок. Сайты указывают там подробные сведения и ссылки: номера телефонов, адреса, ссылки на разделы справки и поддержки.

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


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

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


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

                                                                                                                          Сложность-то в чём?


                                                                                                                          Но бесконечная прокрутка срабатывает без какого-либо решения.

                                                                                                                          Ну конечно, а за скроллбар кто мацает? А пальчиком кто по экрану теребит? Бесконечная прокрутка как раз таки избавляет пользователя от лишней абстракции "страница" и позволяет работать с коллекцией, как с единым целым.


                                                                                                                          Пользователи также могут столкнуться с глюками прыжков.

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


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

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


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

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


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

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


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

                                                                                                                          Ну да, фильтрация — классная штука. Только при чём тут паджинация? На букву К может быть точно также 100500 элементов.


                                                                                                                          Когда он обновляет страницу с бесконечной прокруткой, то будет отброшен в самое начало

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


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


                                                                                                                          Лента новостей: почему мы делаем это неправильно?
                                                                                                                          Популярные антипаттерны: паджинация

                                                                                                                            +4
                                                                                                                            В списках на основе элементов пользователь хочет именно найти конкретный элемент. Бесконечная прокрутка делает это практически невозможным.

                                                                                                                            Сложность-то в чём?
                                                                                                                            Сложность в том, что некоторые сайты типа я.музыки выгружают из памяти часть списка вне экрана и поиск их уже не ищет, например. Т.е. вот только элемент был перед глазами, чуть сдвинул ползунок и браузер его уже не видит. Хоть автор не совсем это имел в виду, но я припишу к этому и такой баг.
                                                                                                                              –4
                                                                                                                              А когда вы переходите между страницами ничего никуда не выгружается что ли? Правильное решение — поиск по выборке. На правильном фреймворке реализуется пятью строчками кода.
                                                                                                                                +1
                                                                                                                                Я предпочитаю как на сайтах магазинов выбрать 10-20-100 результатов по алфавиту и искать на сотне, которая не помещается на одном экране, но поместится на 10 экранах по высоте.
                                                                                                                                  +8
                                                                                                                                  Выгружается. Но если я перешел на следующую страницу я понимаю, что перешел на следующую страницу (с), а то что смотрел до этого — осталось на предыдущий.

                                                                                                                                  Когда же я никуда НЕ переходил, то поведение когда часть только что просмотренного (причем неизвестно заранее какая) самопроизвольно исчезает
                                                                                                                                  1 — не интуинтивно
                                                                                                                                  2 — разражает
                                                                                                                                    0
                                                                                                                                    Бесконечная прокрутка как раз таки избавляет пользователя от лишней абстракции «страница» и позволяет работать с коллекцией, как с единым целым.
                                                                                                                                    А когда вы переходите между страницами ничего никуда не выгружается что ли?

                                                                                                                                    Ну такая себе текущая абстракция, значит.
                                                                                                                                    0
                                                                                                                                    Ну кривые реализации и при погинации есть. Ведь можно сделать удобную бесконечную страницу? А если можно, то следовало назвать не «Хватит делать сайты с бесконечной прокруткойǃ», а «Делайте сайты с бесконечной прокруткой правильно!»
                                                                                                                                    +8
                                                                                                                                    Ничто не выбешивает меня так как мобильное приложение Facebook, которое перекидывает меня на начало прокрутки, стоит только его свернуть, притом оно также обновляет ленту, а т.к. там «алгоритмы Цукерберга», то что-то пропадает, что-то остаётся, но в другом порядке и после такого хочется разбить телефон об лицо Марка Ц.
                                                                                                                                      –1
                                                                                                                                      Именно об этом и первая статья. Почитайте.
                                                                                                                                        +4

                                                                                                                                        Инстаграм делает так же. Иногда ещё "веселее": листаешь его листаешь, а он вдруг решил обновить данные сам. И тот же итог — все убежало.

                                                                                                                                          0

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

                                                                                                                                            0
                                                                                                                                            Разворачиваешь комментарии под постом, в это время кто-то пишет новый и — оп! — страница проматывается на несколько экранов вниз.
                                                                                                                                        +2
                                                                                                                                        Бесконечная прокрутка как раз таки избавляет пользователя от лишней абстракции «страница» и позволяет работать с коллекцией, как с единым целым.

                                                                                                                                        И лагать оно потом будет как единое целое, когда память кончаться начнет.
                                                                                                                                          0
                                                                                                                                          Добавляем с одной стороны, удаляем с другой. Неужели это какое-то никому не известное ноу хау? Пойду запатентую…
                                                                                                                                            +1
                                                                                                                                            Добавляем с одной стороны, удаляем с другой.

                                                                                                                                            Скачет при удалении, по всему загруженному контенту не поискать браузером. Так себе решение.
                                                                                                                                              0
                                                                                                                                              В хроме не скачет. А с js-костылями и нигде не скачет. А зачем вам поиск по загруженному, если есть поиск по всему?
                                                                                                                                                0
                                                                                                                                                В хроме не скачет.

                                                                                                                                                Наверное магия.
                                                                                                                                                А с js-костылями

                                                                                                                                                костылями

                                                                                                                                                Эх…
                                                                                                                                                А зачем вам поиск по загруженному, если есть поиск по всему?

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

                                                                                                                                                  Справедливости ради, такая «магия» существует, более того, для нее уже потихоньку пишут CSS-спецификацию.

                                                                                                                                                  0
                                                                                                                                                  А зачем вам поиск по загруженному, если есть поиск по всему?
                                                                                                                                                  О себе
                                                                                                                                                  Любые ограничения должны приносить пользу, иначе они не нужны.
                                                                                                                                                  Объясните, какая польза лишении возможности искать по загруженному?
                                                                                                                                                    –3
                                                                                                                                                    Какая польза ограничивать поиск загруженным? Зачем пользователю вообще знать, что загружено, а что нет? Хороший клиент абстрагирует пользователя от сетевых коммуникаций.
                                                                                                                                                +1
                                                                                                                                                И ломаем ctrl + f. Или это настолько редкий юзкейс, что всем пофиг?
                                                                                                                                            +3
                                                                                                                                            Мне нравилась скролло-пагинация на предыдущей версии озона (недавно сломали).
                                                                                                                                            Скролл бесконечный, но все равно было логическое деление на страницы по мере прокрутки.
                                                                                                                                            Визуально страницы отделялись линией с надписью «страница N». И, что важно, при этом в адресной строке менялся параметр с номером страницы.
                                                                                                                                            То есть при перезагрузке страницы или копипасте URL можно хотя бы грубо попасть в нужное место.
                                                                                                                                            Проблема с дублями/пустотами при обновлении элементов при этом остается, но ее можно решить, если забить на неравномерное кол-во элементов на «странице». При расположении в виде грида, как на озоне, это не страшно. Состав элементов в случае озона тоже нечасто меняется. А вот что касается сортировки и фильтрации… тут наверное абсолютно идеального решения нет. При изменении сортировки ИМХО логично показывать снова первую страницу… А вот по поводу фильтров у меня нет четкого мнения.
                                                                                                                                              +2
                                                                                                                                              Примерно такая же ситуация в топиках ВК (правда страницы визуально не отделяются, и URL не обновляется автоматически, но получить ссылку на страницу — не проблема). Немного допилить и будет идеально. Жаль, что такой подход используется только в топиках.
                                                                                                                                              Пример
                                                                                                                                              Ссылка — vk.com/topic-21168_7277052




                                                                                                                                              image




                                                                                                                                              image



                                                                                                                                              Ну и обошли стороной проблему индексации. Почти любая ссылка на VK, ведущая на страницу паблика или профиля, почти бесполезна — нужный текст фиг найдёшь.
                                                                                                                                                0
                                                                                                                                                Да, хороший пример. При прокрутке всплывает полупрозрачный пагинатор и в нем меняются номера страниц. С индексацией тоже сталкивался, действительно, приходится все прокручивать, чтобы найти нужный текст. Если топик не огромный конечно.
                                                                                                                                              –13
                                                                                                                                              А мне как раз очень нравится бесконечная прокрутка, это самый удобный тип просмотра данных которым я пользуюсь. Ее критику я не принимаю, а эти переключения страниц как раз раздражают. Когда вы читаете какой нибудь pdf-файл и или электронную книгу вы именно бесконечную прокрутку используете. Конечно. Кому нравится конечно может использовать кнопку перелистнуть страницу нажимая ее мышью, но врядли вы так делаете постоянно.
                                                                                                                                              Можете ставить свои любимые минусы, которыми тут богаты за любое отличие мнения от положенного.
                                                                                                                                                +5
                                                                                                                                                В pdf файле можно нажать кнопочку end и попасть в конец, всякие прокрутки будут по экрану-два добавлять.
                                                                                                                                                  +8

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

                                                                                                                                                  +5

                                                                                                                                                  Конечно же, нет. И pdf, и ebooks разбиты по страницам, на которые всегда можно перейти по номеру. Всегда есть переход в им начало и конец, всегда понятно, на какой вы странице. Так что это НЕ бесконечная прокрутка, минусы которой как раз в отсутствии этих возможностей навигации.

                                                                                                                                                    0
                                                                                                                                                    Почему вы путаете «бесконечную прокрутку» и «кривую реализацию бесконечной прокрутки»?
                                                                                                                                                    Ведь можно добавить вывод номера записи на странице с бесконечной прокруткой.
                                                                                                                                                    Можно сделать ссылки на эти номера, чтобы по ним можно было переходить.
                                                                                                                                                    Можно загружать текст записи, но не загружать картинки чтобы память не захламлять.
                                                                                                                                                    Можно сделать удобный встроенный поиск чтобы не грузить все записи, а только просматриваемые.
                                                                                                                                                    Всё это можно сделать и это будет удобно, но кто-то делает не не так и вы говорите — «Идея говно, и пытаться не надо.». Что это за ретроградство?
                                                                                                                                                      +2

                                                                                                                                                      Знаете, есть опыт пользования, тот самый user experience. И он говорит, что на одну нормальную реализацию этой бесконечной прокрутки (см. выше коммент про Озон) приходятся неисчислимые сотни и тысячи убогих, с им кучей недостатков. Причем на очень посещаемых сайтах — соцсети, магазины.


                                                                                                                                                      То есть де-факто сама идея может и хороша, но её реализации — плохи.

                                                                                                                                                        0
                                                                                                                                                        Если вы разделите по номерам, позволите на них ссылаться и искать сразу по всем записям, да еще и будете своевременно выгружать предыдущие (ненужные) записи с корректно работающим скроллом, то внезапно изобретете обычную прокрутку. Ну или как тут выражаются «как в pdf для смартфонов». А кликать по номеру страницы как в гугле или передвигать скролл это дело десятое.
                                                                                                                                                        Да и никакой пользы бесконечная прокрутка не приносит. Переключать страницу можно и по достижении конца страницы тем же колесиком мыши или по хоткею.
                                                                                                                                                    • UFO just landed and posted this here
                                                                                                                                                        0
                                                                                                                                                        Вы не сможете сделать сайт, который угодит и тем и другим (ну за редким исключением кнопки «переключиться на старую версию сайта»), так что должны ориентироваться или на большинство хотелок или максимум прибыли.
                                                                                                                                                      +12
                                                                                                                                                      Бесконечные страницы это то еще зло:
                                                                                                                                                      -сложнее парсить
                                                                                                                                                      -тяжело вернуться к контенту/искать контент
                                                                                                                                                      -нельзя пропустить контент\определить шаг перелистывания
                                                                                                                                                      -нагрузка на браузер больше
                                                                                                                                                      -требует js
                                                                                                                                                      -нельзя достать до футера
                                                                                                                                                      -ломает полосу прокрутки
                                                                                                                                                      +их нет
                                                                                                                                                        –7
                                                                                                                                                        сложнее парсить

                                                                                                                                                        Бесконечные страницы обычно получают данные в виде json. Что сложного в его парсинге?


                                                                                                                                                        нельзя пропустить контент\определить шаг перелистывания

                                                                                                                                                        А это зачем? Впрочем, вы вольны скроллить с любой скоростью.


                                                                                                                                                        нагрузка на браузер больше

                                                                                                                                                        С чего бы?


                                                                                                                                                        требует js

                                                                                                                                                        А ещё требует css.


                                                                                                                                                        ломает полосу прокрутки

                                                                                                                                                        Не ломает, а меняет её поведение.

                                                                                                                                                          +13
                                                                                                                                                          Не ломает, а меняет её поведение.

                                                                                                                                                          Когда я учился, у нас встречались «одаренные» студенты. Они вырывали кнопки с клавиатуры и вставляли их в другом порядке. Таким образом, они тоже «меняли поведение» клавиатуры и потом дико угорали, когда кто-то на ней печатал.
                                                                                                                                                            –5
                                                                                                                                                            Не преувеличивайте. Скроллбар не начинает проматывать в противоположном направлении.
                                                                                                                                                              0
                                                                                                                                                              define true false
                                                                                                                                                              +7
                                                                                                                                                              вы вольны скроллить с любой скоростью

                                                                                                                                                              если эта скорость не превышает скорости подгрузки новых порций контента (почти цитата Форда:)


                                                                                                                                                              меняет её поведение

                                                                                                                                                              на крайне неинтуитивное и малополезное (вместо того, чтобы ориентировать пользователя, какую часть контента он уже просмотрел и сколько еще осталось, ползунок начинает жить своей жизнью, ёрзая вверх-вниз в уголке)

                                                                                                                                                              0
                                                                                                                                                              1) сложно, но реализуемо
                                                                                                                                                              2) нормальные сайты реализуют возвращение назад/искать контент через поиск в сайте
                                                                                                                                                              4) если удалять то что было прокручено(например то что дальше пяти штук «контента») то нагрузка обычная
                                                                                                                                                              5) что в этом плохого?
                                                                                                                                                              6) избавится от этого устаревшего понятия футер и размещать эту информацию в другом месте, но очевидном для юзера и легко-доступном. Если юзер ищет футер, то значит у сайта есть проблемы с юзабилити и дизайном.
                                                                                                                                                              0

                                                                                                                                                              Отличный пример бесконечной прокрутки есть в discourse.

                                                                                                                                                                –2
                                                                                                                                                                deleted
                                                                                                                                                                  0
                                                                                                                                                                  Так за это же канделябром по голове! ©
                                                                                                                                                                    +5
                                                                                                                                                                    Начал намного реже пользоваться соц сетями из-за бесконечной прокрутки.

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

                                                                                                                                                                      Эх, я был уверен что это я изобрёл — пагинацию по указателю(

                                                                                                                                                                        +1
                                                                                                                                                                        Так же возникали проблемы на прокрутке в телефоне, когда нужные ссылки находящиеся в footerе, полностью согласен с автором!
                                                                                                                                                                          0
                                                                                                                                                                          Ничего вы не понимаете, это же удобно, листаешь все элементы, а как захотел увидеть футер — выткнул провод интернета и любуйся
                                                                                                                                                                            +1

                                                                                                                                                                            Не про бесконечность, но в тему прокрутки — ещё одна опасная тенденция.


                                                                                                                                                                            Делают скроллбары, на которые нельзя кликнуть, нельзя за них потащить и прокрутить.


                                                                                                                                                                            Даже в окне отправки комментария на Хабре (в мобильной версии) — при прокрутке мелькает скролл, но ухватиться за него — никак.


                                                                                                                                                                            Бесит.

                                                                                                                                                                              +3
                                                                                                                                                                              Зато для них будет сделан отдельный вид котлов.
                                                                                                                                                                              С бесконечно отдаляющимся дном…
                                                                                                                                                                                0
                                                                                                                                                                                всё это можно комбинировать, бесконечная прокрутка с пагинацией, просто при прокрутке выделение с номера страницы перескакивает на след. или предыдущий, а выбор другого номера подгрузит немедленно нужную страницу. И т.д. таких примеров я на память не вспомню, но их тоже хватает
                                                                                                                                                                                  +2
                                                                                                                                                                                  Я делал подобное, работало неплохо
                                                                                                                                                                                  При прокрутке делал history.pushState /page/$page_number, при этом менялся адрес в адресной строке. Это решало некоторые проблемы:
                                                                                                                                                                                  При обновлении страницы сервер получал адрес типа blog.ru/page/33 и отдавал контент 33 страницы, так же это срабатывало при переходе в пост и возврате обратно(назад). Так что пользователь не терялся и возвращался примерно к тому же месту откуда ушел.
                                                                                                                                                                                  0
                                                                                                                                                                                  Предположим, мы показываем 10 элементов на странице.
                                                                                                                                                                                  И если мы хотим перейти на страницу 3, то нужно пропустить первые 30 элементов.

                                                                                                                                                                                  По логике:


                                                                                                                                                                                  • первая страница отображает первые 10 элементов
                                                                                                                                                                                  • вторая — вторые 10, то есть с 11 по 20
                                                                                                                                                                                  • третья (на которую мы и переходим) — третьи 10, то есть с 21 по 30

                                                                                                                                                                                  И вот чтобы отобразить элементы 3-й страницы необходимо пропустить первые 20 элементов.

                                                                                                                                                                                    +1
                                                                                                                                                                                    Иногда встречаю сайты с футером и прокруткой :)
                                                                                                                                                                                      0
                                                                                                                                                                                      Однако бесконечная прокрутка не может сохранить состояние по своей сути. Пользователи не могут делиться текущим состоянием. Это также означает, что вы не можете отслеживать действия пользователей с помощью инструментов аналитики.

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

                                                                                                                                                                                      На счет того, что часто пихают ее куда не надо — полностью согласен.
                                                                                                                                                                                      • UFO just landed and posted this here
                                                                                                                                                                                          +1
                                                                                                                                                                                          Прокрутки со страничником для новостной информации (когда появляются новые статьи) сейчас делают неправильно.

                                                                                                                                                                                          Они прямые, а должны быть обратные.

                                                                                                                                                                                          Например, здесь, на хабре, страничник прямой и это проблема.

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

                                                                                                                                                                                          Через 12 часов дочитываю последние две статьи и жму на третью страницу (на следующую).

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

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

                                                                                                                                                                                          Я реализовал на своём сайте обратный страничник, уже очень давно, году так в 2010 вроде. Очень удобно.
                                                                                                                                                                                            0
                                                                                                                                                                                            Можно сделать «бесконечную прокрутку», только с возможностью для пользователя самому выбирать, загрузить ли еще несколько записей или нет. Типа докрутили до футера, а там такая кнопка "загрузить след записи"… Вот так, по мне, очень даже удобно!
                                                                                                                                                                                              +1
                                                                                                                                                                                              Это почти ничего не решает. Точнее, решает только проблему доступа к футеру.

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

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

                                                                                                                                                                                              Добавление «приложений сообществ» позволяет встраивать сайты прямо в VK. Всё сделано для того, чтобы однажды попав в сеть, вам было сложно из неё выбраться)

                                                                                                                                                                                              Так что есть некое непонимание явления. Бесконечная прокрутка сделана не для удобства пользователя.
                                                                                                                                                                                                0
                                                                                                                                                                                                Вообще да, согласен с вами!
                                                                                                                                                                                              0
                                                                                                                                                                                              А мне нравится. Когда скучно, зажимаю PgDn и медитирую…
                                                                                                                                                                                                0
                                                                                                                                                                                                Ещё одна проблема бесконечной прокрутки — скачущая полоса прокрутки. Бесконечная прокрутка имеет право на жизнь, но для этого нужно модифицировать сам виджет полосы прокрутки. Но почему-то я нигде не видел даже попыток.
                                                                                                                                                                                                  0
                                                                                                                                                                                                  Но почему-то я нигде не видел даже попыток.

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

                                                                                                                                                                                                  Я тоже не люблю бесконечную прокрутку и согласен со многими тезисами автора. Но я не понимаю некоторые тезисы:


                                                                                                                                                                                                  • Боковая панель — это решение проблемы, но не очень хорошее. Футер должен оставаться футером.

                                                                                                                                                                                                    Какие задачи решает футер, которые не могут решить другие места страницы?


                                                                                                                                                                                                  • Они информируют UI о своем решении. Но бесконечная прокрутка срабатывает без какого-либо решения.

                                                                                                                                                                                                    Прокрутка информирует UI о том, что пользователь смотрит строки и хочет посмотреть ещё.


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

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



                                                                                                                                                                                                  Я бы ещё добавил следующие минусы бесконечной прокрутки:


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

                                                                                                                                                                                                  Only users with full accounts can post comments. Log in, please.