Аудит от независимых экспертов

поможет выявить проблемы на вашем сайте


 

 
 
 

10 видов представления на сайте элемента постраничной навигации

10 видов представления на сайте элемента постраничной навигации
Постраничная навигация, или paginal navigation, используется на сайтах, содержащих достаточно большие массивы однотипной информации (чаще всего это результаты поиска, новостные ленты, разделы статей, галереи и каталоги).

Постраничная навигация на сайтах – штука довольно старая, достаточно хорошо изученная и доведенная, наконец, до юзабильной формы. В этой статье собраны наиболее удачные варианты представления данного элемента страницы.

1. Универсальная форма
В стандартном виде постраничная навигация представляет собой список номеров страниц со ссылками на соответствующие страницы. Часто количество видимых номеров страниц сокращают до пяти (текущая и по 2 в обе стороны) и добавляют кнопки вперед/назад в начало/в конец (оно же на первую/последнюю страницу списка).


2. Поисковые системы
Характерная особенность пейджинга на страницах поисковых систем – открытая верхняя граница списка. Это и понятно: пользователи очень редко просматривает больше трех страниц выдачи, им важно получить наиболее свежую информацию или наиболее релевантную запросу. Поэтому часто рядом с постраничной навигацией размещают блок сортировки результатов поиска. Номер текущей страницы выделяют графически, и ссылку к нему не прикручивают.

yandex.ru


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

Озон


Wildberries


4. Библиотеки
В процессе работы над этой статьей я вспомнила про еще один очень интересный пейджинг на сайте электронной библиотеки. Вместо номеров страниц на там используются первые буквы фамилий писателя. Очень удобно! Подобное оформление навигации также иногда встречается в музыкальных каталогах и на сайтах караоке, где пользователи ориентируются именно на название/автора материала.

fictionbook.ru


5. Информационные ресурсы
Характерной особенностью информационных ресурсов и новостных лент является особое значение даты публикации материала. На некоторых из этих ресурсов даты выхода статьи заменяют привычные номера страниц.

lenta.ru


не помню какой именно блог


6. Фотобанки
Фотобанки содержат огромный объем графической информации, которую сложно однозначно идентифицировать вербально. При этом пользователю не важно, на какой странице он найдет нужную картинку, главное, чтобы она понравилась и по-хорошему имела как можно меньше шансов на то, что кто-нибудь другой ее выберет тоже.

Пользователи таких ресурсов редко выбирают картинку с первой страницы. И так как всего страниц в листинге может быть больше тысячи, в качестве блока навигации удобно использовать поле для ввода номера страницы и кнопки вперед/назад.

fotobank.ru


7. Банки аватарок
Пользователи банков аватарок имеют те же наклонности, что и пользователи фотобанков, плюс им важно видеть, какие страницы списка они посетили, а какие – нет. Поэтому владельцы таких сайтов в качестве блока постраничной навигации просто выводят весь список страниц раздела.



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



8. Небольшие сайты

Глупо ставить кнопки в начало-в конец, пред/след, если в списке всего две-три страницы. Для действительно маленьких сайтов в качестве постраничной навигации вполне подойдет простое меню с кнопками – номерами страниц.



9. Соцсети
Соцсети в большинстве своем выполняют развлекательные функции, поэтому основной целью интерфейса Social Network является привлечение и удержание внимания пользователя. Иными словами – зацепить и не дать уйти. Чтобы достичь этой цели, соцсети отказываются от постараничной навигации как таковой. Вместо перехода к следующей странице пользователь получает возможность «подклеить» ее к текущей ленте снизу.

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

flamp.ru


10. Хитрые соцсети

Некоторые соцсети, такие как Фейсбук, Твиттер и Вконтакте пошли еще дальше - они вообще удалили контролы постраничной навигации со страниц ресурса. Следующая страница подгружается автоматически в тот момент, когда пользователь домотал текущую до конца экрана.

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


 
Голосов: 7
Баллы рейтинга: 5

Сергей Иванов пишет:
15.11.2012 21:55
Качественная статья. Понравилось, как расписана взаимосвязь «функционал сайта – реализация пейджинга». Можно смело добавлять в избранное.
Елена Решедько пишет:
16.11.2012 06:15
Большая просьба к человеку, выставившему две звезды этой статье, обосновать свою оценку.

Каждому автору полезно знать недостатки своей работы, чтобы исправить их в дальнейшем.
Сергей Немеров пишет:
16.11.2012 10:04
в данной статье представлены отличные навыки умения пользования поисковиком и редактором paint для вырезания и вставления в текст иллюстраций. Полезной информации статья не содержит ни малейшей, например не указано какую пагинацию лучше использовать в мобильных приложениях, какую в планшетных, не рассмотрена пагинация в виде слайдера с бегунком, отсутствует статистика использования различных видов пагинации и тенденции развития рынка ИТ в будущем.
Сергей Немеров пишет:
16.11.2012 10:07
главное же разочарование лично для меня - нет ни одного слова о том, когда лучше вообще избегать постраничной навигации в принципе и как именно заменять этот действительно устаревший элемент на что-либо новое и оригинальное.
в целом собственных мыслей и мнений автора мною вообще в тексте не замечено, это просто пятерочное изложение других статей.
Елена Решедько пишет:
16.11.2012 10:34
Уважаемый collaps, данный текст - статья-обзор. Ее цель - не придумать что-то новое и оригинальное, а показать, что для разных типов ресурсов постраничная навигация в вебе может и должна выглядеть по-разному.

Навигация в мобильных версиях сайтов, на планшетах, тенденции рынка и т.д. - это материал, не вписывающийся как в концепцию статьи, так и в объем текста, предписанный форматом блога.


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

Сергей Немеров пишет:
16.11.2012 10:53
Елена, если суть всей статьи укладывается после просушки в единое действие: набери в поисковике "пагинация" и посмотри первые десять картинок на эту тему, то к своему глубокому сожалению, я никак не сумею выдавить из себя восторга по поводу сего обзора. Профессионал не должен отвечать на вопрос "что есть на свете белом", он должен говорить "что должно быть, патамушто". А у нас всегда конкретные предложения выходят за рамки статьи, обзора, аудита, беседы...
У меня конкретная проблема - есть таблица (только числовые значения) с кучей фильтров и сортировок, содержащая 5 млн строк. Как отображать ее пользователю - с прокруткой, с пагинацией, с помощью вертикального снижения (колесико мыши)над множеством и фокусировки камеры в нужной области?
Елена Решедько пишет:
16.11.2012 11:25
За решением своей конкретной проблемы вы можете обратиться в личном порядке. Стоимость моего часа как дизайнера UI - $30. Напишите мне в аську, обговорим детали.

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

По поводу всего остального: то, что вы разбираетесь в сабже лучше меня - просто отлично! Напишите статью в блог на ту же тему, подробно расписав все упущенные мной моменты. Мы все с удовольствием посмотрим, как должна выглядеть хорошая статья от профессионала.
Сергей Немеров пишет:
16.11.2012 11:45
всерьез рассчитываете что я еще раз подставлюсь на вашем ресурсе, написав статью, и вы сумеете отомстить?
Елена Решедько пишет:
16.11.2012 11:57
Я не вижу повода для мести. Вы высказали свое мнение - отлично, что оно у вас есть. Копить негатив на этой почве? Вы шутите?))

Мне интересно ваше видение проблемы постраничной навигации. Исключительно в целях повышения образованности. Ничего больше.
Сергей Немеров пишет:
16.11.2012 12:10
ми-ми-ми. как мило.
у меня если честно нет никакого видения, опыта и навыков, я вообще железнодорожник по образованию. просто иногда в голову приходят шальные мысли, я их воплощаю, клиенты дико ржут, а потом через год приходят с повинной и жалеют, что им не хватило смелости на нестандартное решение...

кстати предлагаю в продолжение борьбы за чистоту расы... то бишь коллектива: запретить оценивать и комментить статьи людям со званием ниже майора, дабы данная площадка окончательно не превратилась в ристалище для сведения личных счетов и утоления амбиций.
Сергей Иванов пишет:
16.11.2012 17:34
Статья, без сомнений, хороша наличием оригинальной авторской позиции. Правда, лично меня несколько отталкивает форма подачи. Это тот случай, когда категоричность указывает на ограниченность взгляда.  Разделяю мнение о соотношение СЕО и юзабилити. Уверен, никто не станет спорить с тем, что СЕО НЕ направлено на развитие Веба в целом. Поисковая оптимизация не делает Интернет лучше. Это реальность. Но в краткосрочной перспективе для отдельно взятого сайта СЕО имеет большую коммерческую значимость. И с этим тоже надо считаться, принцип адекватности ещё никто не отменял.
Сергей Иванов пишет:
16.11.2012 17:38
Оу, не в ту ветку, комментарий для, Сollaps’а.
Надежда Дмитриевна пишет:
16.11.2012 23:29
хахах, а у коллапса я так поняла комментарий Шерлока не в той ветке)))))
Сергей Анатольевич пишет:
19.11.2012 19:52
Спасибо за статью! В целом хочу сказать, что хорошая познавательная статья, которая знакомит пользователя с различными видами навигации. Нового, конечно, ничего не было открыто, но если буду создавать на сайте постраничную навигацию обязательно загляну в данный раздел, чтобы не выдумывать снова велосипед.
В целом вывод : Хорошая, ознакомительная статья, собравшая в себе полный спектр имеющихся постраничных навигаций! Подача материала на пятерку с плюсом.
Гэми пишет:
30.11.2012 22:36
Несомненно, полезная статья. Кто-то и "Робинзона Крузо" на 20-ой странице забросит и скажет - "Муть!" и по своему будет прав, ведь  для себя он ничего полезного там не почерпнет. А кто-то "Войну и Мир" будет перечитывать несколько раз за жизнь и каждый раз открывать для себя что-то новое. Это я к тому, что спорить о полезности или бесполезности статей в блоге не совсем корректно. Они все полезны. Просто у каждой свой читатель и почитатель. Я, лично, всегда с удовольствием читаю твои, Ален, статьи, и черпаю в них что-то новое, полезное. За то тебе и благодарен безмерно.
Надежда Дроздова пишет:
12.12.2012 03:12
вот по шестому пункту руками и ногами ЗА! я вообще не понимаю зачем эта функция-мы в соцсетях. кому это надо? в соцсетях я и без них могу погулять. если я к ним пришла зачем меня отсюда гонят? а про многообразие... выбор, все-таки, нужен. а если консультант не справляется, то зачем он такой нужен. это неправильно подгонять сайт под консультанта-должно быть наоборот
Елена Решедько пишет:
13.12.2012 18:50
Это, наверное, к какой-то другой статье комментарий, да?
Надежда Дроздова пишет:
14.12.2012 04:13
странно, я абсолютно точно помню, как в этой статье отвечала коллапсу. а этот коммент вовсе не сюда. хм... или у меня крыша окончательно съехала или с сайтом чего...
Надежда Дроздова пишет:
14.12.2012 04:16
восстановила историческую справедливость :)
Надежда Дроздова пишет:
14.12.2012 04:16
позволю себе не согласиться с господином Коллапсом-это всего лишь обзор без претензий на оригинальность и новые идеи. Собственно об этом в названии.
Надежда Дмитриевна пишет:
20.12.2012 19:04
Профессионализм зачастую соседствует с "сухостью" - это правильно)
Гэми пишет:
25.12.2012 17:33
А дилетантство с... влажностью?)))
Тема пишет:
21.01.2013 11:09
collaps , сначала поменяйте аватарку, в глазах рябит от этого г-на (нестандартность и революционность рунета)вы наша)).

Статья может не несет практической пользы, но достаточна интересна и информативна (читается легко и понятна абсолютному большинству читателей).
Сергей Немеров пишет:
08.02.2013 08:35
Артемий Андреевич, слушаю и повинуюсь.  
ПС вы мой кумир.