Когда занимаешься проектированием, уже в режиме «автопилот» замечаешь не только интересные фишки, но и шероховатости во взаимодействии, вещи, которые хотелось бы исправить на некоторых сайтах. Одна из таких вещей — пагинация (назовем это так) или способы подачи и поиска контента на сайте.
Меня вот всегда напрягала необходимость при поиске чего-либо, каждый раз переключаться на следующую страницу. Хотелось как-то проще просматривать информацию, не отвлекаться на лишние телодвижения.
Если вам тоже хотелось «как-то проще» — тогда вам сюда. В статье хочу рассказать о новом, изобретенном, виде пагинации. Чтобы было понятно откуда растут ноги, вводной частью пущу небольшой рассказ о двух самых распространенных видах отображения контента. Их достоинства и недостатки. Потом перейду к сути.
Бесконечный скроллинг
позволяет просматривать поток контента как единое целое, без видимой финишной черты.
Достоинства:
- Эффективный способ потребления большого объема информации для поиска чего-то конкретного либо просто убить время;
- Обновление контента производится непрерывно, не требуя дополнительных затрат. Не нужно отвлекаться каждый раз, чтобы кликнуть на следующий номер страницы;
- Пользователям удобней скроллить, чем кликать.
Недостатки:
- Нет возможности добавить свое местоположение в закладки, если нужно вернуться позже;
- После закрытия сайта, чтобы попасть в эту точку снова, приходится проделать весь путь с самого начала;
- Невозможно определить свое положение и в результате испортится весь опыт взаимодействия с продуктом;
- Не отражает реального объема доступных данных;
- Тяжело (невозможно) добраться до футера.
Классическая пагинация
механизм, который делит контент на отдельные страницы.
Достоинства:
- Хорошо работает, когда пользователь ищет в списке что-то определенное, а не просто просматривает поток данных;
- Дает ощущение контроля. Видно общее количество результатов, соответственно проще оценить, сколько времени займут поиски нужного материала;
- Возможность держать в голове местоположение элемента. Естественно, пользователи не обязательно будут помнить точный номер страницы, но они будут примерно ориентироваться в списке результатов, а пронумерованные страницы помогут быстрее туда добраться;
- При прекращении поиска, всегда точно знаешь количество просмотренных результатов и можешь сделать вывод, где остановился и сколько результатов еще необходимо изучить.
Недостатки:
- Дополнительная нагрузка в виде клика;
- Прерывание состояния «потока» при поиске информации.
Новоизобретенная пагинация
Проанализировав достоинства и недостатки двух топовых видов, изобрела третий, который включает достоинства и выключает недостатки первых двух.
Надеюсь, на картинке все понятно, но, на всякий случай, даю пошаговый рецепт блюда:
- Берем постраничную пагинацию и «клеим» ее к правому краю сайта;
- Фиксируем. При прокрутке страниц пагинация остается, а страницы меняются. Как вариант, можно «клеить» внизу экрана.
Стрелки вниз/вверх — начало/конец страницы;
Высота, ширина, внешний вид — на свой вкус. Если страниц много — опять используем прием классической пагинации: 1 2 3 4 5… 10
Таким образом, мы не вырываем пользователя из потока поиска информации, снижаем нагрузку, даем контроль над ситуацией и местоположением, показываем сколько страниц найдено и уже просмотрено, даем возможность быстрого перехода в начало (конец) списка.
Никакой магии, все просто. Но почему-то на сайтах я такого способа не видела.
Чтобы не летать в облаках и проверить в бою, новая пагинация была протестирована на пользователях (4 человека) при проектировании каталога товаров интернет-магазина.
При тестировании пользователи понимали, что это за штука и для чего предназначена, переключались/ возвращались на страницы, знали где они находятся и сколько страниц еще впереди.
Мое мини-тестирование не обнаружило никаких проблем с элементом, поэтому, считаю это жизнеспособным решением, которое облегчит жизнь при поиске (просмотре) контента сайта и не заставит пользователя совершать лишних действий.
Если вы обнаружили серьезные недостатки, либо, по какой-то причине, такой элемент интерфейса вам кажется неудобным, буду рада услышать ваше мнение.
p.s. при написании статьи был использован материал и картинки из этой статьи
Автор: annakanunikova
