| сохранено

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

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

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

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

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


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



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

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

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

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


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



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

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

Недостатки:

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

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


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



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

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

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

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

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

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

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

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

p.s. при написании статьи был использован материал и картинки из этой статьи
+16
~5800

комментарии (44)

+1
+2 –1
Kyarginski ,  
Вот из-за таких как Вы… мир становится лучше и удобнее!
Хорошая идея для реализации.
Спасибо за статью.

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

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

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

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

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

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

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

0
k12th ,  

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

+1
aamonster ,  

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


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

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

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

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

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

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

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

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

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

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

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