Меня вот всегда напрягала необходимость при поиске чего-либо, каждый раз переключаться на следующую страницу. Хотелось как-то проще просматривать информацию, не отвлекаться на лишние телодвижения.
Если вам тоже хотелось «как-то проще» — тогда вам сюда. В статье хочу рассказать о новом, изобретенном, виде пагинации. Чтобы было понятно откуда растут ноги, вводной частью пущу небольшой рассказ о двух самых распространенных видах отображения контента. Их достоинства и недостатки. Потом перейду к сути.
Бесконечный скроллинг
позволяет просматривать поток контента как единое целое, без видимой финишной черты.
Достоинства:
- Эффективный способ потребления большого объема информации для поиска чего-то конкретного либо просто убить время;
- Обновление контента производится непрерывно, не требуя дополнительных затрат. Не нужно отвлекаться каждый раз, чтобы кликнуть на следующий номер страницы;
- Пользователям удобней скроллить, чем кликать.
Недостатки:
- Нет возможности добавить свое местоположение в закладки, если нужно вернуться позже;
- После закрытия сайта, чтобы попасть в эту точку снова, приходится проделать весь путь с самого начала;
- Невозможно определить свое положение и в результате испортится весь опыт взаимодействия с продуктом;
- Не отражает реального объема доступных данных;
- Тяжело (невозможно) добраться до футера.
Классическая пагинация
механизм, который делит контент на отдельные страницы.
Достоинства:
- Хорошо работает, когда пользователь ищет в списке что-то определенное, а не просто просматривает поток данных;
- Дает ощущение контроля. Видно общее количество результатов, соответственно проще оценить, сколько времени займут поиски нужного материала;
- Возможность держать в голове местоположение элемента. Естественно, пользователи не обязательно будут помнить точный номер страницы, но они будут примерно ориентироваться в списке результатов, а пронумерованные страницы помогут быстрее туда добраться;
- При прекращении поиска, всегда точно знаешь количество просмотренных результатов и можешь сделать вывод, где остановился и сколько результатов еще необходимо изучить.
Недостатки:
- Дополнительная нагрузка в виде клика;
- Прерывание состояния «потока» при поиске информации.
Новоизобретенная пагинация
Проанализировав достоинства и недостатки двух топовых видов, изобрела третий, который включает достоинства и выключает недостатки первых двух.
Надеюсь, на картинке все понятно, но, на всякий случай, даю пошаговый рецепт блюда:
- Берем постраничную пагинацию и «клеим» ее к правому краю сайта;
- Фиксируем. При прокрутке страниц пагинация остается, а страницы меняются. Как вариант, можно «клеить» внизу экрана.
Стрелки вниз/вверх — начало/конец страницы;
Высота, ширина, внешний вид — на свой вкус. Если страниц много — опять используем прием классической пагинации: 1 2 3 4 5… 10
Таким образом, мы не вырываем пользователя из потока поиска информации, снижаем нагрузку, даем контроль над ситуацией и местоположением, показываем сколько страниц найдено и уже просмотрено, даем возможность быстрого перехода в начало (конец) списка.
Никакой магии, все просто. Но почему-то на сайтах я такого способа не видела.
Чтобы не летать в облаках и проверить в бою, новая пагинация была протестирована на пользователях (4 человека) при проектировании каталога товаров интернет-магазина.
При тестировании пользователи понимали, что это за штука и для чего предназначена, переключались/ возвращались на страницы, знали где они находятся и сколько страниц еще впереди.
Мое мини-тестирование не обнаружило никаких проблем с элементом, поэтому, считаю это жизнеспособным решением, которое облегчит жизнь при поиске (просмотре) контента сайта и не заставит пользователя совершать лишних действий.
Если вы обнаружили серьезные недостатки, либо, по какой-то причине, такой элемент интерфейса вам кажется неудобным, буду рада услышать ваше мнение.
p.s. при написании статьи был использован материал и картинки из этой статьи
Комментарии (42)
aszhitarev
07.12.2017 13:27> Но почему-то на сайтах я такого способа не видела.
Комментарии вконтакте уже так лет много как сидят
annakanunikova Автор
07.12.2017 14:02я имела ввиду новостные сайты, интернет-магазины. И все в таком духе
aszhitarev
07.12.2017 14:03+1А в чём отличие? Что комментарии на Лентаче, что комментарии к распродаже в пабличке.
annakanunikova Автор
07.12.2017 14:08Отличия принципиального в подходе нет. Но пока я не сталкивалась ни с одним интернет-магазином, например, где сделали бы точно также. Поэтому, собственно, и родилась идея статьи.
aszhitarev
07.12.2017 14:09+1Регулярно вижу и пользуюсь.
annakanunikova Автор
07.12.2017 14:11а ссылку можно на такие интернет-магазины?
aszhitarev
07.12.2017 14:15Возьмите любой паблик, торгующий мерчем или китаем.
R-Esef
08.12.2017 19:01пагинация в комментариях в том же ВК жутко неудобная и по сути предлагает переход на новую страницу, никакого бесконечного скролла там нет, не придумывайте.
genew
08.12.2017 13:54Когда новости отсортированы в обратном порядке, да еще и постоянно дополняются свежими, такая схема теряет все свои достоинства
andreymal
07.12.2017 13:28+1В обсуждениях сообществ ВК то же самое есть уже лет пять, отличается лишь в мелких деталях
Spiceman
07.12.2017 13:35Идея хорошая, но не новая.
Вот пример реализации в гриде: swimlane.github.io/ngx-datatable/#client-sorting
Побольше бы таких готовых решений.
sidny_vicious
07.12.2017 13:39Это не ново, но очень круто и я, если честно, только сейчас это заметил.
gred
07.12.2017 14:04+1в одном моем случае оказалась удобной пагинация по принципу алфавитного указателя.
почему-то больше нигде не встречал, даже там где данные прямо просятся на такое разбиение.StrangerInTheKy
08.12.2017 11:56Телефонная книга в айфоне! 10 лет как существует. Ну или я не понял, о чем вы.
k12th
07.12.2017 14:14+1Эффективный способ потребления большого объема информации для поиска чего-то конкретного либо просто убить время;
Вот как раз для поиска чего-то конкретного очень плохо (особенно если выделенного поиска для контента нету, как в FB). Плюс тормозит на мобилках после 4-5 экрана, особенно если в потоке много картинок/гифок/видео.
andreymal
07.12.2017 14:26+2Плюс тормозит на мобилках после 4-5 экрана
На компьютере тоже начинает тормозить через десяток-другой экранов; если ленту ВК не читал несколько дней, то читать старые записи это боль) Но здесь тоже напрашивается элементараная идея: то, что давно проскроллили, выгружать и заменять на пустоту высотой с выгруженный контент (чтоб прокрутка не скакала), а при прокрутке обратно вверх подгружать выгруженный контент снова. Но я такого нигде не встречал
k12th
07.12.2017 14:29Да, по уму так и надо бы делать. Но либо там какие-то подводные камни, либо всем пофиг — тоже такого никогда не видел.
aamonster
08.12.2017 00:27+1Я вижу только один способ сделать это более-менее надёжно: грузить каждую страницу в отдельный iframe. Иначе наверняка что-нибудь где-нибудь сломается и не выгрузится при выгрузке страницы (останется ссылочка где-то в глубинах js на сайте).
И при этом всё равно останется пачка проблем бесконечного скролла — отсутствие URL на страницы, сломанный поиск по Ctrl-F...
dimashin
08.12.2017 15:14обычно данные не составляют проблемы и очищать их нет смысла. Это сильно усложнит реализацию и увеличит трафик/нагрузку на сервер.
Очищать стоит только ДОМ, при чем я даже думаю что заметную производетельность принесет просто вырезание ДОМ элементов из дерева и сохранение их целиком для последующей вставки обратно без создания нового элемента. Даже интересно стало проверить/сравнить подходы
Suntechnic
07.12.2017 23:48siffash
08.12.2017 10:31При скроллинге не меняется урл -> юзер не сможет поделиться с кем-то конкретной страницей.
annakanunikova Автор
08.12.2017 15:21Я вам не скажу за всю Одессу, но исключительно мои наблюдения: пользователи обычно делятся конкретной страницей (товар, новость и пр.), если им нужно поделиться конкретным комментарием со страницы — они его просто копируют, если под статьей (например) много интересных комментариев — дают ссылку на всю страницу.
Поэтому, мне кажется, проблема «Не может поделиться конкретной страницей» на которой есть один интересный комментарий слегка преувеличена. Они просто скопируют этот коммент и отправят кому надо.siffash
08.12.2017 20:36Если есть возможность добавить такую опцию (тем более, добавить её не составит труда), не стоит ей пренебрегать. Пользователи и ситуации бывают самыми разнообразными, и порой бывает довольно трудно их предугадать.
annakanunikova Автор
08.12.2017 15:23Вообще, хочу заметить, это не таблетка от всего. Где-то это может хорошо работать, где-то так себе, а где-то вместо удобства даст адскую головную боль.
Для интернет-магазина, мне кажется идеальный вариант
zahmTOD
08.12.2017 19:25А мне, как пользователю магазинов, нравится вариант, когда есть выбор типа «показывать на странице 20, 40, 60 товаров или все»
annakanunikova Автор
08.12.2017 19:55А чем он вам нравится? Можете рассказать почему этот способ вам удобен?
StrangerInTheKy
11.12.2017 10:53Мне тоже такое нравится. Например, можно найти по Ctrl+F конкретный текст в поисковой выдаче.
Methos
11.12.2017 10:32А как же показ рекламы?
Сейчас страничник теряется среди этой мишуры и это очень выгодно!
Очень важно запрятать страничник куда-нибудь в середину и сделать его малюсеньким, чтобы было трудно найти!
Посмотрите сайт форумхаус =)
idzenski
11.12.2017 11:37Интересная идея. Единственный минус (возможный) — перекрывание контента при развороте макета на полный экран.
Но в остальном — идея хороша.
Kyarginski
Вот из-за таких как Вы… мир становится лучше и удобнее!
Хорошая идея для реализации.
Спасибо за статью.
P.S.
Видел подобное на сайте с книгами.
см. тут.
Вроде бы по страницам, но в то же время бесконечная прокрутка.
Очень удобно.
Against-vegetables
Тяжело (невозможно) добраться до футера
iClo
Для таких страниц проще перенести футер в сайдбар.
annakanunikova Автор
Спасибо. Я рада, что понравилось.
Сайт тоже посмотрела, там недостаток в неочевидности пагинации + опять же нужно скроллить вверх/вниз для переключения.