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

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

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

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

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

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



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

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

Недостатки:

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

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

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



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

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

Недостатки:

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

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

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



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

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

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

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

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

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

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

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

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