Сен 07 2007
Постраничная листалка
С давних пор меня интересует вопрос проектирования казалось бы такого простого элемента интерфейса как “постраничная листалка” (она же “блок постраничной навигации”). Постраничная листалка, пожалуй, один из самых древних интерфейсных элементов веба, она применяется в случаях когда кол-во информации (например, элементов списка) слишком велико для отображения на одной веб-странице и в ее задачи входит быстрое переключение пользователя между страницами, на которые была разбита эта информация.
Существует множество реализаций данного механизма, каждый имеет свои плюсы и минусы. Ниже я постараюсь проанализировать основные разновидности постраничных листалок с точки зрения юзабилити и представить свой собственный, в чем-то может быть даже инновационный, вариант постраничной листалки.
Общее устройство постраничной листалки
Существуют две основные концепции постраничной навигации: индексная и относительная. Индексная навигация — это когда страницам присваивается порядковый номер и по этому номеру мы можем к ним обратиться. Относительная навигация — это когда мы можем двигаться вперед и назад относительно того места, где мы находимся в данный момент. Чаще всего относительная навигация реализуется как дополнение к индексной навигации и в чистом виде встречается редко.
В реализации относительной навигации особых хитростей нет, там все просто — две ссылки: “вперед” и “назад” (”следующая” и “предыдущая”), поэтому дальше мы будем говорить только про индексную навигацию — вот в ней-то уже есть достаточное поле деятельности для дизайнера.
В общем случае индексная навигация реализуется как упорядоченная последовательность номеров страниц, являющихся ссылками на соответствующие этим номерам страницы. При этом номер текущей страницы визуально выделяется и не является ссылкой. Такой подход позволяет быстро переключаться между некоторыми страницами по их номеру и сообщает пользователю его текущее положение. Начнем с примера простейшей листалки.
Простейшая листалка
Пожалуй, простейшим примером постраничной листалки был бы блок, состоящий из полной последовательности всех существующих страниц упорядоченной по возрастанию или убыванию. Чаще всего такая листалка почему-то встречается на разного рода юмористических сайтах типа fishki.net. Недостаток такой листалки очевиден — с ростом числа страниц, листалка занимает все больше и больше места, и ориентироваться в ней становится неудобно.
Десятичная листалка
Является усовершенствованым вариантом простейшей листалки — показываются не все номера страниц, а блоками по 10 номеров. Встречается очень часто во всяких фото-галереях, сайтах знакомств. Недостатком такой реализации является то, что пользователь ограничен в свободном перемещении в рамках этих десяти страниц. Находясь, к примеру, на десятой странице пользователь не видит сколько страниц есть впереди и не может за один клик переключиться скажем на 13-ую страницу, минуя 11-ую. И наоборот, находясь на 11-ой странице, пользователь не может за один клик перейти скажем на 9-ую страницу.
Яndex-листалка
Листалка Яndex’а выглядит одной из наиболее проработанных с точки зрения удобства ее использования. Пользователю всегда показывается N номеров до и столько же после текущей страницы, если они есть. Это позволяет пользователю свободно перемещаться по страницам вперед и назад с шагом не превышающим число N. Дополнительно для обозначения незаконченности числовой последовательности на концах этой последовательности показывается “…”, являющееся в свою очередь ссылкой на N±1-ую страницу. Номера страниц находятся на приемлимом расстоянии друг от друга, причем кликабельная область ссылки немного шире ее визуального образа, что снижает вероятность промаха при клике мышью.
Google-листалка
Google’овская листалка напротив не шибко радует своим удобством. И хотя в целом интернет-проекты Google имеют хорошее юзабилити, на листалке в результатах поиска они явно сэкономили. Смотрите сами: номера страниц маленькие, налеплены друг к другу впритык так, что визуально почти сливаются в одну ссылку, номеров слишком много, при этом нет “…” и кликабельная область ссылок не расширена.
Мой вариант листалки
И, наконец, хочу предложить свой вариант — “Модифицированная Яndex-листалка”. В основе моей модификации лежит наблюдение: находясь на некоторой странице пользователь с большей вероятностью пойдет на страницу следующую или предшествую текущей, чем на страницу находящуюся на несколько страниц вперед или назад. То есть вероятность возникновения у пользователя потребности в переходе на некоторую страницу обратно-пропорциональна ее удаленности от текущей. И ведь логично, находясь на странице 1, мы скорее всего пойдем на страницу 2, и вряд ли пойдем сразу на страницу 5.
Яndex-листалка по сути учитывает эту закономерность, но делает это слишком грубо — она скрывает номера страниц, которые слишком удалены от текущего, но при этом никак не ранжирует показанные номера относительно друг друга. Номера из диапазона N±r как бы равноправны.
Попасть мышкой в мелкую ссылку (а номера страниц обычно меньше чем слова) довольно сложно, однако, сделать все ссылки крупными невозможно, да и не нужно. И моя модификация сводится к изменению размера шрифта номеров страниц в зависимости от их удаленности от текущего номера. Чем номер ближе — тем он крупнее, чем дальше — тем мельче.
Посмотреть “вживую” на мою листалку можно на одном из моих личных проектов — FTP-поисковике для локальных сетей (сегментов). Например, в результатах поиска.
Ошибки внутренней реализации
Одной из распространенных ошибок внутренней реализации постраничной навигации является неправильное формирование ссылок. Дело в том, что когда мы показываем некоторый список, который постоянно пополняется, в обратном порядке (например, ленту новостей или записей в блоге), то при нумерации страниц в порядке их отображения приводит к тому, что при добавлении новых элементов вся нумерация страниц сдвигается.
Чем это плохо? Это не плохо, но это не круто. Пользователь пришел через поисковик или через закладки/избранное и видит совсем не то, что ожидал увидеть. Ну и, напоследок, Tim Berners-Lee — бессмертное: “Cool URIs don’t change“.
Сентябрь 22nd, 2007 at 03:58
Паша, это зачет.
Как только начал читать сей пост(суть проблемы) - в голову “закралась” та же самая “идея” воплощения…
что-то в этом есть…
Ноябрь 24th, 2007 at 23:11
Доброго времени суток! Подскажите пожалуйста, как сделать страницу :”Мой вариант листалки” подскажите ссылки или опишите подробнее, у меня никак не получается.Огромное Вам спасибо!
Ноябрь 26th, 2007 at 20:49
Это элементарно. Берете Яndex-листалку, и просто прописываете для каждого номера страницы размер шрифта, обратно-пропорциональный степени отдаленности номера страницы от текущего номера страницы.
Декабрь 1st, 2007 at 03:44
А где скачать то?
Декабрь 1st, 2007 at 08:37
Я здесь говорил о концепции листалки, а не о ее технической реализации на том или ином языке программирования. Я думаю, для любого веб-программиста не составит большого труда написать такую листалку самостоятельно в качестве домашнего задания.
Январь 5th, 2008 at 17:50
Писарь глаголет истину. Истина абсолютна, если речь идет о листалке в результатах поиска. Если же листалка в блоге, статьях или фотогалерее, то здесь может понадобиться перескок на страницу, находящуюся невесть где. Для таких случаев можно просто предусмотреть выбор конкретного номера страницы, как это реализовано на некоторых сайтах (очень часто - в форумах)
Февраль 19th, 2008 at 15:14
Идея - супер, мне понравилась. Надо будет подумать еще, как реализовать чтобы урлы не менялись.
Февраль 20th, 2008 at 17:35
Z-Den, решение, которое напрашивается само собой, состоит в нумерации страниц с конца. То есть если у нас список с обратной сортировкой, то страница номер 1 должна соответствовать самой старой странице.
Правда в этом случае есть проблема. Как правило нам нужно показывать страницу с самыми свежими записями, а в силу нумерации с конца, самая свежая (последняя) страница может быть не полностью заполнена. В худшем случае на ней будет всего один элемент списка.
Однозначного решения этой проблемы нет, но как вариант — объединить ее с предпоследней, если на ней допустим меньше N элементов. Для пользователя не критично, если он вместо 10 увидит 15 результатов.
Апрель 11th, 2008 at 00:41
Привет Павел.
Наконец-то пишу тебе в блог (помнишь я подходил к тебе в Пан Сметане и мы сидели у барной стойки, это было на сборе ИТшников).
Так вот, собственно, к делу. Я тут тоже написал свой вариант постраничной прокрутки (тоже интересуюсь повышением удобства различных контролов). И вот что получилось.
1. http://netbranch.ru/files/pagination/standard.jpg - так выглядит постраничная прокрутка в “спокойном” состоянии
2. http://netbranch.ru/files/pagination/mouseon.jpg - при наведении мыши появляется прокрутка (на картинке курсор наведен на страницу 266, а текущая страница - 270).
3. http://netbranch.ru/files/pagination/first.jpg - постраничная прокрутка в начале. Курсор наведен на страницу 1 и видно, как формируется ссылка.
Как бонус - этот список можно прокручивать колесиком мыши.
Апрель 11th, 2008 at 00:42
Упс, надо так “Привет, Павел.”.
Июль 10th, 2008 at 02:48
venom, да, сделано весьма удобно. Есть лишь несколько небольших замечаний:
1. Весь список страниц загружается в браузер и лично я успеваю увидеть его прежде, чем он обрежется до нескольких номеров. Номера в таком случае можно было бы формировать и джаваскриптом. А без джаваскрипта оставить простую яндекс-like листалку.
2. блок листалки мог бы быть пошире или хотя бы быть по центру страницы.
3. Было бы здорово как-то показать пользователю, что видимый им номер странице, находящийся на границе видимой области прокрутки, отображен неполностью. Возможна ситуация когда пользователь видит только часть цифр номера или очевидно обрезанный номер и у пользователя такое поведение по началу создает недоумение. Пользователь видит белое полотно внизу страницы и номера страниц обрезаются по некоей невидимой границе. Можно было бы, например, заменять на “…” не влезшие номера.
4. Скроллинг мыши — это как правило не очень хорошо, т.к. большинство пользователей используют скролл мыши для пролистывания самой страницы, а тут вдруг ни с того, ни с сего начинает скроллироваться постраничная листалка, причем он специально на нее не наводил, а попал на нее уже в процессе скроллирования. Аналогичная проблема лично меня очень раздражает в фотоальбомах на http://66.ru
5. При открытии страницы скроллинг номеров листалки позиционируется на самый последний номер, а не на текущий. Текущий номер страницы оказывается скрыт и пользователь не знает на какой странице он находится в данный момент — это серьезная ошибка.
Кстати, не понимаю, как тебе удалось сделать так, чтобы и на первой, и на последней странице было ровно по 20 фильмов?
Февраль 5th, 2009 at 10:45
Ну, с точки зрения визуальности и восприятия - да, симпотично.
Но вот с точки зрения юзабилити… Не факт. Пытаться ткнуть в мини число… Ведь не дураки же в Яндексе и Гугле сидят. О народе думают, а не о том, как бы извертеться покрасивше.
Февраль 5th, 2009 at 13:15
Главная суть не в том, чтобы ткнуть в мини число, а как раз наоборот — в том, чтобы тыкать в крупное число. В 95% случаев, ты будешь кликать на номер соседней страницы, а он достаточно крупный. Вряд ли ты будешь перескакивать через 5 номеров, но если захочешь, то в принципе сможешь. Можно, конечно, все номера страниц сделать 48-ым кеглем, но тогда много их не влезет. Моя идея листалки в том, чтобы при той же занимаемоей площади, сделать навигацию более удобной.
Апрель 3rd, 2012 at 13:17
abjured…
High heel shoes and replica are the two things that women can’t without !A charming women should be with a nice handbags which is just fit for her,then the Color should be nice in look and of high quality!Everthing will look nice and wonderful in !…