Постраничная навигация – один из самых частых элементов на веб ресурсах. Большинство сайтов оперируют информацией, а где есть информация, там обязательно будет постраничная навигация. Такая распространенность должна была положительно сказаться на эволюции элемента. Но этого не произошло. Подавляющее большинство сайтов используют навигацию с абсолютно архаичными элементами.
Я не являюсь экспертом в UX-дизайне, что-то изучал, что-то понимаю. Я не проводил статистические исследования, A/B-тестирования и опросов. Все изложенное ниже, всего лишь мое представление того, как люди должны пользоваться постраничной навигацией, исходя из Логики.
Популярный шаблон
Посмотрим на навигацию Google. Все таки один из самых популярных сайтов в интернете, поисковик номер один в мире.
Первое, что бросается в глаза в любой архаичной системе навигации – это цифры/номера страниц. Откинем визуальное обыгрывание числа букв o в слове google. Для чего нужно отображения N ближайших страниц с точки зрения функциональности? Вы при просмотре результатов перепрыгиваете между страницами? Или смотрите результаты в шахматном порядке? Нет, нет и нет. Нет адекватного кейса, когда вам нужно перейти на несколько страниц вперед или назад. Вы всегда переходите либо на следующую страницу, либо, реже – на предыдущую.
В любой постраничной навигации самая главная кнопка – следующая страница. Кнопка предыдущая менее важна, но ее обычно делают такой же по дизайну ради симметрии. И уже потом идет все остальное – номера страниц, кнопки на первую страницу, на последнюю, количество страниц всего и тд. В навигации Гугла все элементы навигации имеют одинаковую значимость.
Последнее, что хочется сказать про нумерацию страниц. Это элемент с повышенной вероятностью ошибки. Думаю, каждый ошибался в выборе страницы. Потому что, для выбора следующей страницы в блоке цифр нам приходится “прицеливаться”. Нажать на кнопку следующая страница намного проще.
Я не просто выбрал Гугл в качестве примера. Большинство навигаций выглядит подобным образом, плюс-минус. И имеют те же недостатки.
Навигация Хабра и Avito отличается небольшой деталью – кнопки следующая/предыдущая выделены в отдельный визуальный блок. Небольшое изменение, но это сильно улучшает навигацию.
В такой компоновке, блок цифр воспринимается больше как информационный блок, а не как функциональный. И в этом есть смысл: пользователь понимает, где находится. Еще лучше было бы этот громоздкий блок заменить текстом вида “<номер страницы> из <количество страниц>” – визуально стало бы намного чище.
В постраничной навигации есть еще один редкий, но заслуживающий внимания сценарий – переход на конкретную страницу. Все представленные выше навигации решают только частные случаи этого сценария – переход на первую и последнюю страницы и переход на соседнюю страницу в радиусе N. По какой то странной причине, эти конкретные случаи считаются важнее остальных, хотя это не так. Отмечу лишь, что на Aliexpress есть отдельный блок для перехода на конкретную страницу. Сайту он не сильно важен в силу специфики, но плюс за всеядность.
Удобная постраничная навигация
Исходя из вышесказанного, я собрал следующую панель постраничной навигации.
Возможно, визуально это не самый хороший пример, но он отлично показывает функциональные возможности постраничной навигации:
- Кнопки следующая/предыдущая имеют большую значимость, но не за счет визуального выделения, а за счет поведения. Теперь это единственные кликабельные элементы в постраничной навигации.
- Навигация хорошо информирует пользователя: отображается не только текущая страница, но и общее их количество.
- Есть возможность перейти на любую страницу. Это не очень очевидная возможность, так как в моем варианте переход будет происходить по кнопке Enter. Это можно обыграть визуально, или добавить подсказку. В любом случае это больше дело техники, а не функциональности. В большинстве случаев, input вообще можно заменить на текст, так как, повторюсь, сценарий перехода на конкретную страницу крайне редок и важен только в определенных системах.
Чем чаще используется та или иная функциональность, тем доступнее и проще в использовании она должна быть. Редкие действия, напротив, должны скрываться ради визуальной чистоты. В этом главная идея представленной панели постраничной навигации.