Сен 07 2007

Постраничная листалка

Категория: Юзабилитиgugglegum @ 21:26

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

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

Общее устройство постраничной листалки

Существуют две основные концепции постраничной навигации: индексная и относительная. Индексная навигация — это когда страницам присваивается порядковый номер и по этому номеру мы можем к ним обратиться. Относительная навигация — это когда мы можем двигаться вперед и назад относительно того места, где мы находимся в данный момент. Чаще всего относительная навигация реализуется как дополнение к индексной навигации и в чистом виде встречается редко.

В реализации относительной навигации особых хитростей нет, там все просто — две ссылки: “вперед” и “назад” (”следующая” и “предыдущая”), поэтому дальше мы будем говорить только про индексную навигацию — вот в ней-то уже есть достаточное поле деятельности для дизайнера.

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

Простейшая листалка

Пожалуй, простейшим примером постраничной листалки был бы блок, состоящий из полной последовательности всех существующих страниц упорядоченной по возрастанию или убыванию. Чаще всего такая листалка почему-то встречается на разного рода юмористических сайтах типа fishki.net. Недостаток такой листалки очевиден — с ростом числа страниц, листалка занимает все больше и больше места, и ориентироваться в ней становится неудобно.

Простейшая листалка

Десятичная листалка

Является усовершенствованым вариантом простейшей листалки — показываются не все номера страниц, а блоками по 10 номеров. Встречается очень часто во всяких фото-галереях, сайтах знакомств. Недостатком такой реализации является то, что пользователь ограничен в свободном перемещении в рамках этих десяти страниц. Находясь, к примеру, на десятой странице пользователь не видит сколько страниц есть впереди и не может за один клик переключиться скажем на 13-ую страницу, минуя 11-ую. И наоборот, находясь на 11-ой странице, пользователь не может за один клик перейти скажем на 9-ую страницу.

Десятичная листалка

Яndex-листалка

Листалка Яndex’а выглядит одной из наиболее проработанных с точки зрения удобства ее использования. Пользователю всегда показывается N номеров до и столько же после текущей страницы, если они есть. Это позволяет пользователю свободно перемещаться по страницам вперед и назад с шагом не превышающим число N. Дополнительно для обозначения незаконченности числовой последовательности на концах этой последовательности показывается “…”, являющееся в свою очередь ссылкой на N±1-ую страницу. Номера страниц находятся на приемлимом расстоянии друг от друга, причем кликабельная область ссылки немного шире ее визуального образа, что снижает вероятность промаха при клике мышью.

Яndex-листалка №1

Яndex-листалка №2

Google-листалка

Google’овская листалка напротив не шибко радует своим удобством. И хотя в целом интернет-проекты Google имеют хорошее юзабилити, на листалке в результатах поиска они явно сэкономили. Смотрите сами: номера страниц маленькие, налеплены друг к другу впритык так, что визуально почти сливаются в одну ссылку, номеров слишком много, при этом нет “…” и кликабельная область ссылок не расширена.

Google-листалка

Мой вариант листалки

И, наконец, хочу предложить свой вариант — “Модифицированная Яndex-листалка”. В основе моей модификации лежит наблюдение: находясь на некоторой странице пользователь с большей вероятностью пойдет на страницу следующую или предшествую текущей, чем на страницу находящуюся на несколько страниц вперед или назад. То есть вероятность возникновения у пользователя потребности в переходе на некоторую страницу обратно-пропорциональна ее удаленности от текущей. И ведь логично, находясь на странице 1, мы скорее всего пойдем на страницу 2, и вряд ли пойдем сразу на страницу 5.

Яndex-листалка по сути учитывает эту закономерность, но делает это слишком грубо — она скрывает номера страниц, которые слишком удалены от текущего, но при этом никак не ранжирует показанные номера относительно друг друга. Номера из диапазона N±r как бы равноправны.

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

Моя листалка №1

Моя листалка №2

Посмотреть “вживую” на мою листалку можно на одном из моих личных проектов — FTP-поисковике для локальных сетей (сегментов). Например, в результатах поиска.

Ошибки внутренней реализации

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

Чем это плохо? Это не плохо, но это не круто. Пользователь пришел через поисковик или через закладки/избранное и видит совсем не то, что ожидал увидеть. Ну и, напоследок, Tim Berners-Lee — бессмертное: “Cool URIs don’t change“.

13 отзывов на “Постраничная листалка”

  1. Le says:

    Паша, это зачет.
    Как только начал читать сей пост(суть проблемы) - в голову “закралась” та же самая “идея” воплощения…
    что-то в этом есть…

  2. Ирина says:

    Доброго времени суток! Подскажите пожалуйста, как сделать страницу :”Мой вариант листалки” подскажите ссылки или опишите подробнее, у меня никак не получается.Огромное Вам спасибо!

  3. gugglegum says:

    Это элементарно. Берете Яndex-листалку, и просто прописываете для каждого номера страницы размер шрифта, обратно-пропорциональный степени отдаленности номера страницы от текущего номера страницы.

  4. Artembs says:

    А где скачать то?

  5. gugglegum says:

    Я здесь говорил о концепции листалки, а не о ее технической реализации на том или ином языке программирования. Я думаю, для любого веб-программиста не составит большого труда написать такую листалку самостоятельно в качестве домашнего задания. :)

  6. motan says:

    Писарь глаголет истину. Истина абсолютна, если речь идет о листалке в результатах поиска. Если же листалка в блоге, статьях или фотогалерее, то здесь может понадобиться перескок на страницу, находящуюся невесть где. Для таких случаев можно просто предусмотреть выбор конкретного номера страницы, как это реализовано на некоторых сайтах (очень часто - в форумах)

  7. Z-Den says:

    Идея - супер, мне понравилась. Надо будет подумать еще, как реализовать чтобы урлы не менялись.

  8. gugglegum says:

    Z-Den, решение, которое напрашивается само собой, состоит в нумерации страниц с конца. То есть если у нас список с обратной сортировкой, то страница номер 1 должна соответствовать самой старой странице.

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

    Однозначного решения этой проблемы нет, но как вариант — объединить ее с предпоследней, если на ней допустим меньше N элементов. Для пользователя не критично, если он вместо 10 увидит 15 результатов.

  9. venom says:

    Привет Павел.
    Наконец-то пишу тебе в блог (помнишь я подходил к тебе в Пан Сметане и мы сидели у барной стойки, это было на сборе ИТшников).

    Так вот, собственно, к делу. Я тут тоже написал свой вариант постраничной прокрутки (тоже интересуюсь повышением удобства различных контролов). И вот что получилось.

    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 и видно, как формируется ссылка.

    Как бонус - этот список можно прокручивать колесиком мыши.

  10. venom says:

    Упс, надо так “Привет, Павел.”.

  11. gugglegum says:

    venom, да, сделано весьма удобно. Есть лишь несколько небольших замечаний:

    1. Весь список страниц загружается в браузер и лично я успеваю увидеть его прежде, чем он обрежется до нескольких номеров. Номера в таком случае можно было бы формировать и джаваскриптом. А без джаваскрипта оставить простую яндекс-like листалку.

    2. блок листалки мог бы быть пошире или хотя бы быть по центру страницы.

    3. Было бы здорово как-то показать пользователю, что видимый им номер странице, находящийся на границе видимой области прокрутки, отображен неполностью. Возможна ситуация когда пользователь видит только часть цифр номера или очевидно обрезанный номер и у пользователя такое поведение по началу создает недоумение. Пользователь видит белое полотно внизу страницы и номера страниц обрезаются по некоей невидимой границе. Можно было бы, например, заменять на “…” не влезшие номера.

    4. Скроллинг мыши — это как правило не очень хорошо, т.к. большинство пользователей используют скролл мыши для пролистывания самой страницы, а тут вдруг ни с того, ни с сего начинает скроллироваться постраничная листалка, причем он специально на нее не наводил, а попал на нее уже в процессе скроллирования. Аналогичная проблема лично меня очень раздражает в фотоальбомах на http://66.ru

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

    Кстати, не понимаю, как тебе удалось сделать так, чтобы и на первой, и на последней странице было ровно по 20 фильмов?

  12. Витал says:

    Ну, с точки зрения визуальности и восприятия - да, симпотично.
    Но вот с точки зрения юзабилити… Не факт. Пытаться ткнуть в мини число… Ведь не дураки же в Яндексе и Гугле сидят. О народе думают, а не о том, как бы извертеться покрасивше.

  13. gugglegum says:

    Главная суть не в том, чтобы ткнуть в мини число, а как раз наоборот — в том, чтобы тыкать в крупное число. В 95% случаев, ты будешь кликать на номер соседней страницы, а он достаточно крупный. Вряд ли ты будешь перескакивать через 5 номеров, но если захочешь, то в принципе сможешь. Можно, конечно, все номера страниц сделать 48-ым кеглем, но тогда много их не влезет. Моя идея листалки в том, чтобы при той же занимаемоей площади, сделать навигацию более удобной.

Напишите что Вы об этом думаете


*


*


rel=nofollow включен, спам не поднимет Page Rank Вашего сайта



Anti-Spam Image
Введите этот код, чтобы подтвердить, что вы человек
*

* — Обязательно для заполнения

Перейти на главную страницу