Новая жизнь старой пагинации

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

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

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

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


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



    Достоинства:

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

    Недостатки:
    • Нет возможности добавить свое местоположение в закладки, если нужно вернуться позже;
    • После закрытия сайта, чтобы попасть в эту точку снова, приходится проделать весь путь с самого начала;
    • Невозможно определить свое положение и в результате испортится весь опыт взаимодействия с продуктом;
    • Не отражает реального объема доступных данных;
    • Тяжело (невозможно) добраться до футера.

    Классическая пагинация


    механизм, который делит контент на отдельные страницы.



    Достоинства:

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

    Недостатки:

    • Дополнительная нагрузка в виде клика;
    • Прерывание состояния «потока» при поиске информации.

    Новоизобретенная пагинация


    Проанализировав достоинства и недостатки двух топовых видов, изобрела третий, который включает достоинства и выключает недостатки первых двух.



    Надеюсь, на картинке все понятно, но, на всякий случай, даю пошаговый рецепт блюда:

    1. Берем постраничную пагинацию и «клеим» ее к правому краю сайта;
    2. Фиксируем. При прокрутке страниц пагинация остается, а страницы меняются. Как вариант, можно «клеить» внизу экрана.

    Стрелки вниз/вверх — начало/конец страницы;
    Высота, ширина, внешний вид — на свой вкус. Если страниц много — опять используем прием классической пагинации: 1 2 3 4 5… 10

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

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

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

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

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

    p.s. при написании статьи был использован материал и картинки из этой статьи
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 44
    • +1
      Вот из-за таких как Вы… мир становится лучше и удобнее!
      Хорошая идея для реализации.
      Спасибо за статью.

      P.S.
      Видел подобное на сайте с книгами.
      см. тут.
      Вроде бы по страницам, но в то же время бесконечная прокрутка.
      Очень удобно.
      • +2
        Тяжело (невозможно) добраться до футера
        • 0

          Для таких страниц проще перенести футер в сайдбар.

        • 0
          Спасибо. Я рада, что понравилось.
          Сайт тоже посмотрела, там недостаток в неочевидности пагинации + опять же нужно скроллить вверх/вниз для переключения.
        • +5
          > Но почему-то на сайтах я такого способа не видела.
          Комментарии вконтакте уже так лет много как сидят
          • 0
            я имела ввиду новостные сайты, интернет-магазины. И все в таком духе
            • +3
              А в чём отличие? Что комментарии на Лентаче, что комментарии к распродаже в пабличке.
              • 0
                Отличия принципиального в подходе нет. Но пока я не сталкивалась ни с одним интернет-магазином, например, где сделали бы точно также. Поэтому, собственно, и родилась идея статьи.
                • +1
                  Регулярно вижу и пользуюсь.
                  • 0
                    а ссылку можно на такие интернет-магазины?
                    • 0
                      Возьмите любой паблик, торгующий мерчем или китаем.
                      • 0
                        пагинация в комментариях в том же ВК жутко неудобная и по сути предлагает переход на новую страницу, никакого бесконечного скролла там нет, не придумывайте.
              • 0
                Когда новости отсортированы в обратном порядке, да еще и постоянно дополняются свежими, такая схема теряет все свои достоинства
            • +4
              В обсуждениях сообществ ВК то же самое есть уже лет пять, отличается лишь в мелких деталях

              • 0
                Да да, тоже вспомнил про vk. Они это давно уже придумали и сделали. Гибридный режим: стандартная пагинация и «бесконечный» скролл. При всём этом показывает индикацию на какой текущей странице находится пользователь. Очень удобно.
              • +3
                Идея хорошая, но не новая.
                Вот пример реализации в гриде: swimlane.github.io/ngx-datatable/#client-sorting
                Побольше бы таких готовых решений.
                • 0
                  Спасибо. Не видела. Интересно самой попробовать, как работает
                • +1
                  Это не ново, но очень круто и я, если честно, только сейчас это заметил.
                  • +1
                    в одном моем случае оказалась удобной пагинация по принципу алфавитного указателя.
                    почему-то больше нигде не встречал, даже там где данные прямо просятся на такое разбиение.
                    • 0
                      Википедия же.
                      • +1
                        Телефонная книга в айфоне! 10 лет как существует. Ну или я не понял, о чем вы.
                      • +1
                        Эффективный способ потребления большого объема информации для поиска чего-то конкретного либо просто убить время;

                        Вот как раз для поиска чего-то конкретного очень плохо (особенно если выделенного поиска для контента нету, как в FB). Плюс тормозит на мобилках после 4-5 экрана, особенно если в потоке много картинок/гифок/видео.

                        • +2
                          Плюс тормозит на мобилках после 4-5 экрана

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

                          • 0

                            Да, по уму так и надо бы делать. Но либо там какие-то подводные камни, либо всем пофиг — тоже такого никогда не видел.

                            • +1

                              Я вижу только один способ сделать это более-менее надёжно: грузить каждую страницу в отдельный iframe. Иначе наверняка что-нибудь где-нибудь сломается и не выгрузится при выгрузке страницы (останется ссылочка где-то в глубинах js на сайте).


                              И при этом всё равно останется пачка проблем бесконечного скролла — отсутствие URL на страницы, сломанный поиск по Ctrl-F...

                              • 0
                                обычно данные не составляют проблемы и очищать их нет смысла. Это сильно усложнит реализацию и увеличит трафик/нагрузку на сервер.
                                Очищать стоит только ДОМ, при чем я даже думаю что заметную производетельность принесет просто вырезание ДОМ элементов из дерева и сохранение их целиком для последующей вставки обратно без создания нового элемента. Даже интересно стало проверить/сравнить подходы
                          • +1
                            Давайте к этому еще добавил однозначный URL для коммента и для страницы, где он размещен. Первое важно для посетителей (захочу я переслать ссылку на коммент знакомому, и что мне, на эту динамическую страницу слать ссылку, со словами «зайди, грузи комменты, пока не встретишь номер 123 от ivanpetrov»?), второй — для поисковиков, чтобы они могли найти текст комментария на строго одной странице (не получалось бы дублей в индексе), и чтобы они закидывали ищущего человека именно на нее — по прямому URL, именно что.

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

                            Интересное у вас «изобретение», просто пересказ того, что и так есть, но без решения самых насущных проблем текущих реализаций.
                            • 0
                              А вот это вот очень интересно. Часто об этом думал, но никто из заказчиков такого сам не просил.
                              Встречал один раз — на www.tumblr.com
                              Идеи как реализовать такое для общего случая честно говоря нет, только догадки.
                              Основной проблемой кажется то, что комментарии «ползут» по странице — один и тот же коммент может быть первым, где-нибудь в середине и в конце.
                              Так же проблемой представляется нумерация страниц. Допустим я буду использовть для нумерации id первого кометария, тогда проблема описанная абзацем выше встает в полный рост.
                              Если я буду использовать двойную нумерацию — номера страниц при пролистывании скажем page=N и отдельный параметр page_with=IdComment для перехода на страницу с нужным комментом, я лишаюсь возможности дать пользователю возможность скопировать урл из адресной строки и вернуться к нему, чтобы увидеть там интересующие его коменты.
                              В итоге я прихожу к идеи «номера» страницы состоящего из id всех элементов на ней. Вроде page=n1:n2:n3 и т.д. Если при этом используется еще и например сортировка — вообще тупик.

                              Если вы знаете технологии реализации — поделитесь с общественностью.
                              • 0
                                Это старая проблема. Можно решить либо созданием ссылки на комментарий (не на ленту, где он есть, а именно на него, либо на тред, где он есть, с подветкой нудного комментария), либо еще как-то.

                                Я потому и написал, что проблема в этом огромная, сослаться на содержимое сообщения на форуме порой почти невозможно. В то же время, если речь о старых хороших наполненных форумах, то отписать, скажем, в ответ на вопрос — «посмотри, вот здесь и здесь эту тему обсуждали, а здесь вроде бы решили» прямо очень просится.
                              • 0
                                При скроллинге не меняется урл -> юзер не сможет поделиться с кем-то конкретной страницей.
                                • 0
                                  Да, есть такое. Упущение.
                                  • 0
                                    Я вам не скажу за всю Одессу, но исключительно мои наблюдения: пользователи обычно делятся конкретной страницей (товар, новость и пр.), если им нужно поделиться конкретным комментарием со страницы — они его просто копируют, если под статьей (например) много интересных комментариев — дают ссылку на всю страницу.
                                    Поэтому, мне кажется, проблема «Не может поделиться конкретной страницей» на которой есть один интересный комментарий слегка преувеличена. Они просто скопируют этот коммент и отправят кому надо.
                                    • 0
                                      Если есть возможность добавить такую опцию (тем более, добавить её не составит труда), не стоит ей пренебрегать. Пользователи и ситуации бывают самыми разнообразными, и порой бывает довольно трудно их предугадать.
                                  • 0
                                    Спасибо) Пополню свою копилку знаний
                                    • 0
                                      Вообще, хочу заметить, это не таблетка от всего. Где-то это может хорошо работать, где-то так себе, а где-то вместо удобства даст адскую головную боль.
                                      Для интернет-магазина, мне кажется идеальный вариант
                                      • 0
                                        А мне, как пользователю магазинов, нравится вариант, когда есть выбор типа «показывать на странице 20, 40, 60 товаров или все»
                                        • 0

                                          А чем он вам нравится? Можете рассказать почему этот способ вам удобен?

                                          • 0
                                            Мне тоже такое нравится. Например, можно найти по Ctrl+F конкретный текст в поисковой выдаче.
                                            • 0
                                              А он дает выбор, что важно. В одном магазине, в каком-то разделе товаров на две-три страницы, тогда сразу тыкаешь «показать все» и не паришься с перелистыванием. А в другом их может быть за сотню, пусть лучше постранично отображается, чем забивает память, да и проще вернуться к какому-то товару, или отвлечься на минуту/час/день, а страница примерно та же будет.
                                      • 0
                                        А как же показ рекламы?

                                        Сейчас страничник теряется среди этой мишуры и это очень выгодно!

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

                                        Посмотрите сайт форумхаус =)
                                        • 0
                                          Интересная идея. Единственный минус (возможный) — перекрывание контента при развороте макета на полный экран.
                                          Но в остальном — идея хороша.
                                          • 0
                                            Пагинация конечно интересная, но она все же не решает проблему с тем, что нельзя добавить текущую страницу в закладки

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