В прошлых постах мы рассмотрели поиск и несколько правил навигации.
Теперь же давайте остановимся на постраничной навигации в каталоге или в поисковой выдаче.
Как обычно делают такую навигацию (встречаются термины «пагинация» или «листалка»)?
Представили номера страниц в виде ссылок, на этом и остановились.
Так не пойдёт, давайте улучшать.
Ссылки раздвигаем, теперь по ним легче попасть (мы вспомнили закон Фиттса!), добавили сортировку. Можем листать вперёд и назад, да ещё и с клавиатуры.
Вроде бы всё выглядит неплохо. Казалось бы, какие здесь могут быть проблемы?
Проблема этого примера в том, что не сразу ясно, что будет, если нажать на правую стрелку. Попадём мы на следующую страницу, или на последнюю, 10-ю?
Поэтому внесём ещё небольшие изменения.
Теперь мы разнесли навигационные ссылки, но просится уже смысловое улучшение. Так как нумерация не информативна, можно по наведению на ссылку выводить подсказку с помощью атрибута title, какой уровень цен (мы же сортируем по цене) у нас на каждой странице.
Ведь может быть 5 страниц выдачи товаров практически одного уровня цены, и только с 6-й страницы пойдут более дорогие.
А уж что там после десятой страницы, сложно даже предположить.
Тут в голову приходит очередное улучшение. Зачем делать две сущности: безликую нумерацию и подсказки? Давайте объединим их!
Такой стала наша постраничная навигация. Правда, в этом случае у нас будет не равное количество товаров на странице, но в этом и плюс. Зачем пользователю просматривать ровно по 20 товаров (попробуйте ответить, почему не по 30? 40? 50?), если ему нужны все в рамках его бюджета?
Такую же листалку можно сделать и с буквенными диапазонами.
В примере выше у нас есть сортировка по цене и по производителям, которых можно выдавать в алфавитном порядке.
В случае листалки по алфавиту у нас складывается система, похожая на энциклопедию. При таком разбиении, как на рисунке, в каждый интервал, условно говоря, попадает равное количество пунктов выдачи. Если мы делаем разделение по каждой букве — то в интервал может попасть любое количество пунктов.
Перерабатываем весь блок в следующий вид.
Диапазоны очень удобны! Они говорят с нами на одном языке привычными сущностями — диапазонами цен, букв и даже дат, а не абстрактных номеров страниц.
Вот как делает постраничную навигацию в сообщениях «Мегаплан».
Удобно искать нужное сообщение, особенно если вы примерно помните, что оно полугодовалой давности. Представьте сколько страниц нужно было бы посмотреть, если бы там была листалка по номерам страниц. (Внимательные заметят, что для приведённого примера можно ввести календарь и смотреть нужные месяца).
Да, обычная листалка встречатся везде, но совсем не факт, что обычное — удобное. К такому решению все просто привыкли из-за отсутствия альтернативы.
Вас ещё не посетила мысль, зачем нам вообще делать листалку?
Тесты, проведённые Software Usability Research Laboratory, показывают, что пользователи не прерывают чтение, если могут быстро прокручивать информацию, а не переходить на новые страницы.
http://www.surl.org/the-impact-of-paging-vs-scrolling-on-reading-online-text-passages/
Крутить колесо проще, чем прицелиться для клика по следующей странице. Пагинация — барьер для кликов.
Поэтому можно прийти к так называемой «бесконечной прокрутке» для вашего сайта — pageless/bottomless pagination.
Бесконечный скролинг хорош там, где нет цели просмотреть всё. Если у пользователя нет задачи изучать и сравнивать результаты выдачи, и ему достаточно просто листать результаты, не упорядоченные по какому-либо принципу, то лучше не делить выдачу на страницы.
Такая прокрутка используется в Твитере, ВКонтакте и пр. сайтах, где есть лента не очень важных и упорядоченных данных.
Минусы «бесконечной прокрутки»:
- пропадает возможность использовать подвал сайта на страницах такой выдачи (до него будет нереально докрутить)
- при большом количестве информации тратится много трафика, и на странице будет загружено слишком много данных, что будет «подвешивать» браузер
Существует альтернатива — гибридное решение, так называемый скролинг «по запросу».
По нажатию на кнопку подгружается очередная порция результатов.
Хорошим тоном будет после нажатия на кнопку оставить метку для этой «страницы», чтобы можно было дать на неё ссылку или вернуться позже.
Либо делать, как популярная социальная сеть, и показывать блок со ссылками, чтобы можно было быстро промотать страницу к нужной порции. Кроме того, так пользователю понятно, сколько всё же у вас результатов, и что «бесконечная прокрутка» не так уж устрашающе бесконечна.
И снова можно ввести небольшое улучшение и упростить клик, раз мы вводим «псевдобесконечную прокрутку» для облегчения кликов по номерам страниц.
Увеличим размер кнопки, чтобы в неё не нужно было прицеливаться (-:
На каком решении остановиться? Всё зависит от целей. Нужно помнить о преимуществах и недостатаках каждого варианта и выбирать подходящий для решения задачи.
При «бесконечных» результатах вы можете нажать Ctrl+F и найти нужное словосочетание по всей выдаче, а не по текущей странице.
Чем лучше обычная нумерованная навигация? Она показывает, где мы находимся относительно всего контента («я просмотрел уже 50 результатов, пора прекращать, ничего толкового здесь нет»), показывет прогресс.
В обычной постраничной навигации проще сослаться на нужную страницу. Но стоит помнить, что в динамично изменяемых результатах нет гарантии, что товар останется на той же странице хотя бы до завтра. Например, если в каталог загрузят ещё 5-10 новинок, то позиции всех товаров сместятся.
Если нажать «назад» в обычной листалке, мы вернёмся на ту же страницу, на то же место. При бесконечной прокрутке так сделать сложнее.
Если бесконечно листать, то пользователю сложно решить, какой вариант товара лучше. Они для него все одинаковы, т. к. эффект «первой страницы выдачи» смазан лёгкостью прокрутки к остальной выдаче.
Пользователю хочется знать, сколько всего есть результатов, и иметь контроль над положением.
Люди хотят, чтобы у них была возможность вернуться к списку результатов поиска, чтобы проверить пункты выдачи, которые они только что видели. Сравнить их с тем, что они нашли где-то ниже в этой выдаче. Интерфейс постраничной навигации позволяет пользователю удержать в голове ментальное расположение объекта. Совсем не обязательно знать точный номер страницы, но пользователи будут помнить примерно, что это было, и ссылки постраничной навигации позволят им легко туда попасть.
Кроме того что бесконечная прокрутка ломает этот шаблон поведения, она также затрудняет перемещение вверх и вниз по списку. Особенно, когда вы возвращаетесь на страницу через некоторое время и оказываетесь вверху. В этой ситуации вы вынуждены прокрутить список вниз и дождаться, когда подгрузятся результаты. Таким образом интерфейс бесконечной прокрутки на самом деле медленнее, чем постраничный.
Дмитрий Фадеев, http://www.usabilitypost.com/2013/01/07/when-infinite-scroll-doesnt-work/
Некогда делать самому? Настроим, чтобы все работало .
Что выбрать? Решать вам.
