Постраничная навигация
Переключение страниц на сайтах, несомненно, является очень важной, концептуальной деталью. Поэтому реализовывать эту систему нужно очень внимательно, и с аккуратностью. Детали тут играют несравненно большую роль по сравнению с остальными компонентами дизайна.
К сожалению, очень немногие люди пытаются сломать стереотипы, и продолжают творить нечто странное под видом навигации по страницам. Сегодня я постараюсь с вашей помощью решить эту ситуацию, чтобы сделать интернет лучше.
Задачи
- Дать возможность в одно действие переключать страницу.
- Удобный переход на последнюю и первую страницу.
- Правильное переключение на следующую и предыдущую страницы.
- Удобочитаемый вывод списка страниц.
- Выделение активной страницы.
- Сделать всё вышеперечисленное по возможности в простом и симпатичном виде.
Решение задач:
Перед началом решения вышесказанных задач нужно определиться с тем, что нам нужно улучшать. Для этого перейдем на сайты, у которых есть навигация по страницам, и этих страниц явно больше 100. Для того, чтобы их найти, достаточно перейти в google и набрать поисковый запрос вида «719 720 721». После этого выбираем наиболее интересные примеры и изучаем их.
Я выбрал в качестве примеров недоработанной навигации по страницам следующие сайты:
1. PhotoUA
Украинское агентство цифровой фотографии создано с целью предоставления цифрового новостного фото.
предоставлять пользователю удобную навигацию, так как страниц много, контента на страницах и того больше. Но, увы, этот сайт может представить только набор ошибок связанный с навигацией: невменяемые стрелочки, невозможность выбрать страницу, активная страница никак не выделяется, и др.
2. EuroLine
Довольно известная грузинская авиакомпания EuroLine предоставляет перелеты в Европу и Азию.
К сожалению, болезнь навигации не обошла и такую крупную компанию: переключение на страницы сделаны неудобно, переход на первую и последнюю страницу вовсе отсутствует, а ссылки на следующие и предыдущие страницы сделан в виде двойных стрелочек. К счастью, активная страница выделена.
3. Пресс-КIT
Украинское независимое агенство, предлагающее широкий спектр информационных, рекламных услуг, и разнообразные возможности фото-службы.
Увы и ах. Опять информационное агенство, которое должно дать возможность быстро путешествовать по страницам сайта, но… не дает. Более или менее интуитивные, стрелочки не позволяют быстро выбрать нужную страницу. Прибавьте к этому слабое выделение текущей страницы и возможности пролистать все сразу.
4. Форум посвященный Гарри Поттеру.
Кому-то может показаться смешным то, что я выбрал в качестве примера этот сайт, но должен вас разочаровать: выбрал я его потому, что он имеет огромное количество страниц.
К сожалению, волшебные сайты не имеют иммунитета от болезни навигации и страдают большим количеством симптомов: не дают возможности интуитивно перейти на следующую\предыдущую страницу. Есть возможность перейти на нужный номер страницы, но, увы, очень корявая эта возможность.
5. Фишки.Нет
Аннотации за ненадобностью тут не будет. Все знают, что это за сайт и с чем его едят.
Этот сайт, по сути — кошмарный сон юзабилиста, но навигация по его страницам дает ему анти-фору еще больше. Судите сами: простой список из страниц. Более идиотского способа вывести почти 900 чисел найти сложно. При этом страницы расположены в шахматном порядке, что, по идее, должно было улучшить навигационные качества, но не улучшает. Активная страница выделяется, но банально теряется среди такого массива информации. Создатели сайта решили не делать ссылки на последнюю\первую страницы и на следующие\предыдущие. Видимо, посчитав их ненужными при возможности быстро (как им казалось) выбрать нужную пользователю страницу.
Итак, с проблемами мы разобрались. Теперь стоит перейти к решению поставленных нами задач.
Дать возможность в одно действие переключать страницу
Под этой фразой я понимаю функцию быстрого выбора нужной страницы в 3 клика и меньше. Т.е. если пользователю нужно найти 761-ю страницу, не нужно его гонять по 10 страниц за раз. Нужно просто дать ему эту страницу выбрать.
Решить эту ситуацию довольно просто: либо выпадающим списком с прокруткой (прокрутка для того, чтобы список был меньше чем 2000px при 1000 страницах), или же перемоткой списка движениями мыши. Тут всё зависит от личных предпочтений дизайнера. Лично я предпочитаю движения курсором. Что я подразумеваю под этим — смотрите на картинку сверху.
Удобный переход на последнюю и первую страницу.
Если пользователь забрел вглубь сайта и хочет вернуться на первую страницу из списка, нужно дать ему способ сделать это быстро. По статистике, это одна из самых часто используемых функций навигации. Единственное ограничение в данном случае состоит в том, чтобы называть вещи своими именами и писать слова «Первая» и «Последняя» словами.
При этом желательно эти ссылки выводить полярно: «Первая» справа, «Последняя»слева .
Также при создании этих ссылок учитывайте, что они не должны забирать внимание у ссылок «Следующая»/«Предыдущая» — ведь они самые важные в навигации по страницам.
Правильное переключение на следующую и предыдущую страницы
Самый важный пункт списка. По статистике, при наблюдении за пользователями, эти ссылки используют чаще всего. Именно поэтому они должны быть довольно большого размера (не огромного, но такого, чтобы пользователю не нужно было прицеливаться). Их не стоит представлять в виде одиночных стрелочек, как это любят делать создатели движков.
Лучше всего совместить с помощью типографического форматирования стрелочку (они есть почти во всех стандартных шрифтах Windows) и надпись. Т.е. вот так: ? Следующая | Предыдущая ?
Удобочитаемый вывод списка страниц
Тут всё просто. Не стоит показывать массив из всех страниц сайта сразу. Пример сайта Фишки.Нет ясно показывает нам, что навигация по такому списку — не из легких. Лучше всего выводить 5-7 страниц, которые находятся по соседству.
У некоторых людей существуют трудности с восприятием списка, если в нем находится больше семи элементов, поэтому выводить более семи соседних страниц не стоит.
Выделение активной страницы
Принципы те же, что и для всех остальных ссылок. Чтобы человек быстро понял, где он находится, выделять активную страницу нужно также активно: полужирным начертанием, изменением цвета и, что немаловажно, стоит убирать ссылку с этой цифры. Ведь ссылаться на страницу, на который пользователь уже находится — плохой тон.
Сделать всё вышеперечисленное в простом и симпатичном виде
Под этой фразой я подразумеваю отсутствие сложных графических эффектов, которые отвлекают внимание пользователя, и сложностей программных — глюков. Симпатичность вида каждый определяет для себя сам, но общие принципы еще никто не отменял: каждый элемент должен быть вровень относительно других, иметь размеры пропорциональные своим функциями. Также стоит соблюдать строгую графическую сетку и отступы от элементов.
Результатом этого пункта у меня вышла вот такая вот навигация. Все написанные выше принципы в ней соблюдаются. Практическая реализация и способ решения в скором времени будут опубликованы в блоге Lampochek.Net, где я и еще один человек расскажем вам, как это всё делалось технически.
Немного новостей
- Информация к прочтению была обновлена. Тем кто еще не читал — читать в обязательном порядке.
- Была добавлена страница моих компаний-друзей. В скором времени ожидайте такую же, но с конкретными людьми.
- Я в твиттере. Кто там есть — отслеживайте!
Тем временем
- Миша Квакин продолжает продвигать свой новый проект — RuBurner.
- Сергей Чаботько пишет о формах обратной связи для гос. контор.
- Егор Чернев рассказывает о CSS3 библиотеке Peppy.
- А также Егор рассказывает о программной реализации постраничной навигации.
Телефон: +38 091 314-600-4,
E-mail: my@birzool.com,
Skype: dezmaster,
jabber: dezmaster@gmail.com,
icq: 486914
Имхо «Следующая» и «Предыдущая» без надобностиж; само собой, если вы на странице 5, то 6 — это следующая, а 4 — это предыдущая. Это аксиома
> Это аксиома
Нет.
Аксиома в этом случае звучит так: «Самый важный пункт списка. По статистике наблюдения за пользователями — эти ссылки используют чаще всего», и она прозвучала и в статье.
Соседние ссылки нажимают очень редко. Видимо из психологических причин.
Как на твой вкус постраничная навигация Лепры (Дёрти? Хабра?)
Миша, на дёрти используется paginator, и он следует почти всем принципам нормальной навигации. Поэтому — более-или-мение хорошие, на мой вкус.
а где можно взять исходники данной навигации на .php ? И чтобы можно было прикрутить к любому сайту на php+mysql
плк, читайте внимательно:
> Практическая реализация и способ решения в скором времени будут опубликованы в блоге Lampochek.Net, где я и еще один человек расскажем вам, как это всё делалось технически.
www.smashingmagazine.com/... -good-practices/ — неплохая коллекция пэйжеров. Оттуда же Dirty.ru — использует скроллинг для пэйжера. + еще стоит рассмотреть ручной ввод номера страницы.
>Соседние ссылки нажимают очень редко. Видимо из психологических причин.
Попробуем убрать "“Следующая” и “Предыдущая”. по каким ссылкам тогда будут кликать пользователи? ;)
Добавлю, если мы находимся на первой странице ссылка «Первая» абсолютно не нужна, то же касается ссылки «Последняя», когда мы находимся на последней странице. Встречаются еще такие ощибки. По поводу фишек.нет — юзабилити, конечно не фонтан, но с тз семантики нумерация страниц — это действительно список.
спасибо за статью. Одно но:
Как правило, нумерация страниц в постраничной навигации выполняется в обратном порядке. Т.е. читая самую последнюю новость, мы находимся на последней странице, а не на первой. Поэтому нумерация должна выполняться справа налево и ссылки «Последняя» и «Первая», соответственно, должны поменяться местами. Если я не прав, расскажите, почему.
Спасибо
Интересные идеи, особенно мне понравилась иллюстрация рулетки, неплохо было бы сделать такое на флеше или svg.
Кстати, тебе надо было сослаться на мой пост, который как раз, про навигацию — chernev.ru/udobnaya-navigaciya.html
Cuprum, давайте сразу уберем все ссылки кроме страничных. Вот уж ими пользоваться вволю будут! Я вам говорю факт — люди из двух элементов предпочитают «Предыдущий\следующий».
> По поводу фишек.нет — юзабилити, конечно не фонтан, но с тз семантики нумерация страниц — это действительно список.
Не фонтан? Даже ни капли влаги.
С точки зрения семантики мало какой человек может осилить такой большой массив информации.
> engine
И я прав, и вы правы. Главное чтобы вывод был полярным, а не сумбурным. Чтобы прослеживалась логика. А она прослеживается в обоих случаях, т.е. оба расположения имеют право на существование.
Егор, я хотел, но не придумал как мне её впиндюрить в текст. Хотя можно вставить в блок «Тем временем».
@Ярослав Бирзул
дискуссию по поводу «Предыдущий\следующий» не вижу смысла продолжать ;) и я и вы останемся при своем.
ну а про семантику — тут во мне больше говорит веб-технолог, имел в виду, что верстать нумерацию страниц, имхо, правильно списком ......
Cuprum, во мне же говорит юзабилист, который считает, что вывод 1000 номеров одним списком — сплошная глупость.
Сампла дико не хватает :-/
Vialiy, пример будет, но чуть позже. Я не программист всё-таки.
Ярослав, я считаю, что ссылка «предыдущая» должна находиться слева, а «следующая» справа – по направлению чтения. Странно, что от первой до последней навигация направляется слева направо, а по относительному порядку – наоборот.
Ваше имя *, спасибо за внимательность. Через несколько минут сменю изображения.
Изображения изменены.
След./Пред. по-прежнему поменяны местами. Даже в тексте :-!
zencd, если бы я поменял местами отображение чисел и «След\пред» то никакого смысла бы не было.
Внимательно посмотрите.
Если мы на странице 7, то следующей по логике вещей будет 8. 8 у нас слева (в порядке новый левее (новее) старого), следовательно «следующая» должна быть слева.
[...] К сожалению, очень немногие люди пытаются сломать стереотипы, и продолжают творить нечто странное под видом навигации по страницам. Сегодня я постараюсь с вашей помощью решить эту ситуацию, чтобы сделать интернет лучше. [...]
www.picamatic.com/show/20...33872_516x22.jpg
Вот, набросал свой вариант, случайностей никаких нет, все продумано. Что скажешь, Ярик?
Если нужны пояснения по каким-либо решениям — спрашивай. Днём думал, вечером рисовал :)
Ярослав, то, что ты слил всё в одну полосочку не сделало навигацию более продуманой и не исключило какие-то сложности.
Сейчас в этом варианте у тебя просто каша из ссылок намазанная тонким слоем.
Минусы:
1. Неинтуитивный выбор нужной страницы.
2. Ссылки «первая\последняя» слишком большие, оттягивают на себя внимание.
3. Следующая\предыдущая слились с цифрами и с «первая\последняя».
4. Кол-во соседних цифр слишком маленькое. Лучше всего людьми воспринимается 5-7 по бокам.
В общем и целом — реализация неудачная, ты уж извини.
PS: «экономия места — самый первый враг удобства восприятия чего-либо».
Согласен, но не совсем. Если не против — сделаю еще версию, кину сюда, когда дома буду. С минусами согласен, но не со всеми. Последняя фраза понравилась.
Ярик, а за что ты извиняешься? Это абсолютно нормально, я предложил вариант, ты адекватно прокомментировал его, ясно и аргументированно. Все идеально, извиняться не за что:) это поиск, пробы и они не имеют конца, сам понимаешь. В общем, вечером будет еще.
Ярослав, чтобы не было обид. Я очень долго искал идеальную форму навигации, и постарался её реализовать в статье, комментарии к которой мы сейчас пишем. Чем тебя мой результат не устраивает?
В ней всё аргументировано, без каких либо «потому что я так решил». Просто сборник фактов, и положительное решение проблем навигации.
Да, я согласен. Но на то это и блог, чтобы все могли высказать свое мнение о проблеме, найти какое то собственное решение и обсудить его с автором. Мне ОЧЕНЬ нравится твой вариант, но ты же не отрицаешь возможность наличия других. Отчего бы мне не предложить свой, основанный на моем опыте и моих взглядах?;)
Ярослав Патрикеев, предлагай, поглядим
[...] Постраничная навигация Переключение страниц на сайтах, несомненно, является очень важной, концептуальной деталью. Поэтому реализовывать эту систему нужно очень внимательно, и с аккуратностью. Детали тут играют несравненно большую роль по сравнению с остальными компонентами дизайна… [...]
Предложенный вариант хорош, и я как человек близкий к веб-разработке, понимаю, почему использован реверс в выводе навигации. Но вот только вопрос: понятно ли это обычным юзерам?
Опробовав ваш вариант на своих домашних
кроликахпользователях, от каждого услышал вопрос: «Почему ссылки наоборот?» Главная страница сайта (блога) воспринимается пользователями как первая, а не последняя страница. Поэтому требуется еще и тестирование, одних размышлений недостаточно.И дело тут не в нашем с вами понимании информационной архитектуры (например блога или фотогалереи), а в условностях и выработанных понятиях у пользователей на том, что они уже видели и использовали ранее. Я говорю не только про сайты.
Например по направлению «следующая/предыдущая».
Не знаю почему, но в двумерном пространстве за направление вперед (следующая) принимается стрелка вправо, а за направление назад (предыдущая) - стрелка влево. Примеров масса: аркадные компьютерные игры, кнопки на пультах управления, направление чтения (во всяком случае у европейцев и их потомков), расположение дверей для входа/выхода, психологические аспекты и т.д.(можно даже припомнить Лебедева с его матрицей эмоций). И всё это вырабатывалось веками, поэтому изменить данное представление у людей будет сложно, да и вообще нужно ли.
Ну и небольшие замечания по варианту:
— не видно на сколько страниц вообще разбита навигация;
— ссылки «последняя» и «первая» почему-то выделены другим цветом и режущим глаз размером по отношению к «предыдущая/следующая», следуя логике, располагаться все-таки они должны по краям навигации.
Не принимайте всё вышенаписанное за критику, просто, действительно, еще есть что доработать в предложенном варианте.
Андрей, я тоже тестировал на юзверях, и у них были такие же вопросы касательно направленности страниц, но в обратную сторону. Поэтому нельзя однозначно ответить как лучше.
Размышления о пагинации хорошие, особенно на предложенных примерах.
Спорна, правда, категоричность — такой подход работает в случае как раз многостраничных сайтов, а на блогах такая навигация избыточна. Возможно, лучше в таком случае идти в сторону навигации по архивам — по месяцам и т.п., чтобы уменьшить объемы и сделать больше структуры.
Рулетка — клево, но это флеш, к которому тоже не очень хочется приходить. Полоска в последнем примере — интересна (хотя и не лучший пример удобства), да и с помощью js занимает достаточно мало кода.
Семантичность, о которой говорит Cuprum — вбивание выводимых цифр в ul тоже немного спорная штука. Хотя если текущую помещать в спан (класс=куррент), а 7 предыдущих и 7 следующих — в отдельные ul, то вполне и вполне. И то, особого смысла нет.
То же про нумерацию страниц. Большинство движков сейчас использует главную, как первую страницу, остальные идут «вглубь». И подход нумерации «от настоящего к прошлому» кажется лучше, чем «от прошлого к настоящему» — потому что точкой отсчета для обычного пользователя обычно является как раз главная страница. Если использовать вместо непонятных «следующая-предыдущая» связку со временем, то получается вполне понятно и удобно для юзера. Да и сразу делаем понятнее расположение к новым слева (а не как превыкли, «следующие» справа).
И, кстати, в твоем примере «предыдущая» связывается со страницей, на которой все записи были написаны «позже», т.е. на лицо разнобой с временем появления самих постов и нумерацией страниц.
По поводу замечаний Андрея Новогородцева — да, количество страниц вообще тоже важный элемент. А вот выделение элементов «следующая» и «предыдущая» нужно обязательно — Их используют чаще.
И если говорить о юзабилити — уже вашего блога и комментариев на нем. Нет анкоров на каждый комментарий (не сослаться), огромные отступы между абзацами.
Ну это так :)
Сергей, по порядку:
1. такой подход работает в случае как раз многостраничных сайтов, а на блогах такая навигация избыточна
—
Если вы читали статью, то должны были видеть, что я НИ РАЗУ не употребил слово «блог».
2. Полоска в последнем примере - интересна (хотя и не лучший пример удобства)
—
Полоска лишь показывает относительное положение. А принцип рулетки реализовывается на JS и будет присутствовать в работающем прототипе.
3.Да и сразу делаем понятнее расположение к новым слева (а не как превыкли, “следующие” справа).
—
Понимаете ли, я забыл сказать комменаторам одну важную мысль, которая меня терзала: представьте себе, что я сделаю как вы говорите - первая страница - главная, а остальные уходят в глубь сайта.
Я часто сталкиваюсь с одной концептуальной проблемой - если материал появляется на главной странице, а потом уходит в глубь - то я не знаю на какой странице он будет находится. В моем же варианте достаточно запомнить номер страницы и выбрать его если понадобится.
Это самый главный минус инвариантности, который вы предлагаете как положительный.
4. И, кстати, в твоем примере “предыдущая” связывается со страницей, на которой все записи были написаны “позже”
—
В моем примере «предыдущая» указывает в сторону «пред», т.е. если мы находимся на 5й странице, то ПРЕДЫДУЩЕЙ будет 4я. Именно в ту сторону она и указывает, не путайте себя.
5. Когда я рисовал этот дизайн я пришел к выводу, что анкоры не нужны, из-за того, что кол-во комментариев к статье тогда не превышало 20 штук. Сейчас 50 и выше комментариев уже правило, и анкоры я введу.
Размер абзацев вообще очень спорная штука, и я с вашем мнением не согласен, вы уж извините.
Да, уплывание материалов при таком способе навигации — плохо (но ведь она и не для этого). Но как же может получиться, что страницы пагинации будут статичны? Если так, то на текущей «последней» странице будет недобор, если количество текущих постов не кратно разбиению. Т.е. либо главная не будет совпадать с последней 720-й, либо при переходе на 719, мы увидим старые посты (в количестве остатка от деления количества постов на разбиение).
Простой навигации ленты в прошлое достаточно, чтобы «листать». Для более глубокого проникновения, что на блогах, что на информационных сервисах нужна альтернатива обычным категориям и пагинации — та же привязка к датам. Хотя в некоторых случаях это практически единственный вариант что-то найти — как на Лепре, с ее плавающими постами.
Материал как всегда стоящий, спасибо за возможность высказать свое мнение :)
По абзацам — дело в том, что расстояние между абзацами в комментариях даже больше, чем оно же в посте. И расстояние между блоками комментариев даже меньше, хоть и выделено цветом. Т.к. это не печать все-таки и не используем красную строку, то расстояние между абзацами должно быть 1, 1.5 или 2 интерлиньяжа. А у вас аж три строки — чего спорного, если длинный коммент «разваливается»?
> Да, уплывание материалов при таком способе навигации — плохо (но ведь она и не для этого)
Именно для этого. Навигация делается для того, чтобы путешествовать по страницам было удобно. А уплывающий контент хоть и добавляет нотку неожиданности в нашу скучную жизнь — всё так же хренов.
Пример реализации можете глянуть на Хабрахабре — там всё прекрасно разбито по статическим страницам, и ничего не уплывает от пользователя.
> Для более глубокого проникновения
А что вы понимаете под глубоким проникновением? Задача постраничной навигации — удобное путешествие по страницам, и не более того. Этот инструмент узкоспециализирован, и делать из него франкенштейна от навигации не стоит. Пресыщение функциями этому блоку не к лицу.
> А у вас аж три строки — чего спорного, если длинный коммент “разваливается”?
У меня 2. Вы не учитываете междустрочное расстояние, поэтому и ошибаетесь.
Как-то глупо что-то доказывать по поводу личных предпочтений. На то они и личные.
Ну преувеличиваете ценность пагинации как всего лишь одного способа навигации, причем на аморфных сайтах. Все-таки разные проекты — разные решения.
Уплывающий контент хренов, но не вижу в этом ничего плохого — пагинацию используют для того, чтобы пролистать назад, а не найти. Для «путешествий» по страницам тоже лучше иметь альтернативу. Для поиска есть (как ни странно) поиск, архивы, категории, выборка по дням и т.д. Вот именно об этом я и понимал под, хех, «проникновением», что вы и подтвердили. На многих проектах и «индикатор» местоположения — лишнее, в таких случаях проще использовать точный номер последней страницы вместо «последняя». Точно так же, как перечисление всего списка номеров в некоторых случаях отличный вариант (не фишки, конечно же).
На Хабре, кстати, все отлично плавает, — собственно, там вполне обычная пагинация, циферки от 1 (главная) в прошлое, уплывание.
Вот как вы предлагаете сделать статику в обратной нумерации? Есть 37 записей при выводе 5 на страницу. Получается, что где-то должно «висеть» 2 из них. При этом при добавлении еще одной записи, ничего не должно измениться и будет висеть уже 3. В случае если главная (в вашем случае — последняя) полная и все-таки все плавает, да, определенная «статичность» будет. Но в пределах плюс-минус четырех постов, которые будут таки плавать. Нет?
>У меня 2. Вы не учитываете междустрочное расстояние, поэтому и ошибаетесь.
>Как-то глупо что-то доказывать по поводу личных предпочтений. На то они и личные.
Именно из-за того, что междустрочное увеличено, визуально получается три строки. Только вот почему личные предпочтения? Есть типографика, есть осмысленность элементов в рамках проекта.
По идее, должны быть только: хорошо читаемые, четко разделяемые, легко идентифицируемые по автору. Увеличенное расстояние между абзацами в них — единственное место на блоге, где это встречается. И оно просто огромное даже в случае моей любви к толстым абзацам.
Ну ладно, мне было просто интересно. Пусть будет личное мнение.
Сергей М., я заметил, что вам больше импонирует система каталогизации по архивам (месяцы\дни). Вы упрекаете меня в преувеличении значимости навигации по страницам (sic!), в то же время — я могу вас упрекать в ПРЕУМЕНЬШЕНИИ.
> перечисление всего списка номеров в некоторых случаях отличный вариант
Есть конкретные примеры с количеством страниц более 500?
> На Хабре, кстати, все отлично плавает
Поправка: было на предыдущей версии хабра от Футурико: web.archive.org/web/20071...ww.habrahabr.ru/
> Вот как вы предлагаете сделать статику в обратной нумерации?
Да элементарно. Создать баласт из (максимум) 9 записей, которые заполняют собой первую страницу в случае если есть недостача на самой последней странице. Записи эти принципиально не особенно важны, но восполняют недостаток. Например записи о проекте. Читать их не особенно интересно, но они всегда есть. Пример механики в картинке.
> Есть типографика, есть осмысленность элементов в рамках проекта.
О, Ярослав Патрикеев, я взываю к тебе!
Я про все Хабры говорил — и на старом все плавало, хотя вернулись они к навигации от 1 на СХ.
Балласт — полная хрень, т.к. уменьшает количество полезной информации, что на блогах, что на «газетах», что на соцсетях.
Я пойду тоже позову кого-нибудь!
А вот и я! :) Как я понимаю, в данной ситуации требуются мои комментарии по поводу расстояния между абзацами в комментариях (о, какая тонкая игра слов ;)
Мой взгляд на данную проблему таков: комментарии — небольшие блоки текста и абзацное разбиение присутствует в них лишь в случае перехода от одной мысли к другой (как в вашей беседе — параллельное обсуждение различных аспектов) или разбиения одной большой мысли на части.
Поэтому большие абзацные отступы (равные удвоенному интерлиньяжу) вполне оправданы в данной ситуации именно потому, что они разделяют параллельные (по смыслу) блоки или же последовательные, но удаленный друг от друга в повествовании.
Такие отступы позволяют читать („сканировать“) быстрее, когда пробегаешь глазами по тексту комментариев (случай „параллельной“). Когда же вдумчиво и медленно вчитывешься в текст длинной мысли, они позволяют передохнуть, обдумать прочитанное, тем самым структурируя восприятие.
Таким образом, я считаю, что такое расстояние между абзацами в данном формате вполне оправдано осмысленным выбором автора, хотя ничуть не хуже смотрелось бы и одинарное. Но если вы прочитали предыдущие два абзаца, то, я думаю, вы всё поняли ;)
Сергей М., я дал ссылку на веб архив. Там мой вариант навигации — инвертированный. Не помню чтобы кто-то испытывал с ней проблемы. А вы?
> уменьшает количество полезной информации
ничего не уменьшает. максимум что балласт делает — добавляет (ничего не удаляя\замещая) максимум 9 записей к одной странице — самой первой.
Если судить объективно — первую страницу никто не читает. (только давайте без криков «Читает!», я прошу объективно подумать над этой ситуацией).
Лично для меня недостаток «плавающего контента» по всему сайту перевешивает недостаток на одной странице.
> Я пойду тоже позову кого-нибудь!
Зовите. Справки ради: Ярослав — типограф. Вы тоже зовите кого-нибудь из этой области.
Эй, да знаю я о вас обоих достаточно давно, и вполне себе уважаю как профессионалов. Да и сам, хотя по профессии не верстальщик и не «типограф», с вполне компетентными людьми по долгу службы достаточно много общался. Тут такое дело — интересный разговори и желание выжать максимум мыслей на эту тему, заодно пробежавшись по альтернативам. Да и как раз прикручиваю свой парсер к своему блогу — так что пища для размышлений.
Вот начиная с комментариев (стихийно возникшая тема, ага). Нет ничего такого в двойном интерлиньяже на самом деле плохого — расстояние между абзацами как раз и служит для отбивки отдельных «параллельных»и «последовательных» мыслей. Но. Но тут такая штука — парсер превращает один перевод строки в бр, а два — в параграф, что, во-первых, избыточно. А во-вторых, превращает комментарии в неоднородную кашу.
Наглядный пример — мой коммент с большими разделенными абзацами, опять же мой, но по одному короткому предложению (после каждого надо не то, что передохнуть,а прямо переносить взгляд ниже и ниже), потом сплошная простыня Патрикеева, потом автор с фидошным стилем цитат вместо блокквот. Для блога оно, конечно, пойдет — но то, что каждый комментатор использует абзацы по своему усмотрению, превращает эту область в кашу.
То есть я поясню мое мнение — использование конкретно только параграфов (типа, семантика) и отбивка одной строкой как раз увеличит читаемость. Все равно большинство читает по диагонали и им важнее перейти к следующему комментарию, а дискутирующим все равно надо прочитать только последний коммент, чтобы ответить, а значит, он не должен быть ни простыней в кучу, ни разреженными лесопосадками. Зерно истины есть?
Но возвращаясь к теме.
Статика. Когда вообще требуетсяпоказать страницу с записями/новостями вместо ссылки на их самих? Даже когда нужно указать группу новостей, опять же логично, что они связаны и указание в архиве по дате или по категории более вероятно. Т.е. вы, Ярослав, правы по поводу того, что на больших проектах-не-блогах я предпочту высказаться о необходимости альтернативной навигации относительно пагинации, просто потому что на таких объемах нужны разные инструменты, т.к. каждый из них удобен толькодля своей задачи. У пагинации она проста — тупо отлистать «10 надписей назад». Все, не более того — другой информации она не дает. Т.е. остается только проблема с поисковиками, которым приходится индексировать изменющийся контент (счем они часто не справляются). К тому же, вероятность выпадения страниц в индексе означает, что пользователи придут на страницу, на которой интересующего поста уже нет — он сместился вглубь. Решается это внутренней оптимизацией, а также дополнительными инструментами, которая позволяет исключить подобное.
Следующий пункт — инвертирование. Против которого ничего против не имею. Даже наоборот, мне нравится метафора «первая страница — это та, на которой первые самые посты». В ней есть и свои проблемы, и не неразберихе, что творится сейчас. на разных проектах цифры идут в разные стороны, «10 предыдщих» может значить совершенно противоположное действие, да и располагаться то справа, то слева, элементы могут появляться и исчезать (а когда они не привязаны к месту, они сдвигаются). На Яндекс.Ленте первое время чисто на автомате нажимал не то, что нужно — так же и множество других пользователей не сильно думает, когда работает с сервисом. Опрос мнений не сильно репрезентативен в этом случае, т.к. разные юзеры привыкли к разным сервисам (некоторые, о ужас, к фишкам), да и не всегда успевают прочитать прежде чем нажать.
Не знаю, возможно, этот вид пагинации станет таким же трендом, как в свое время переход сайдбара в правую сторону (ведь юзабилисты достоверно доказали, что глаза у насдвигаются не так, как привыкли, а только слева-направа, захватывая и обрабатывая все, что попадется на их пути, да). Это хорошо, потому что когда 90% сайтов имеют единый стандарт в интерфейсных штуках — это всегда хорошо. С точки зрения конечного пользователя.
Но вот про балласт вы, Ярослав, удивили меня несказанно. Смотрите, речь же идет не о блогах, как вы сказали. Но ведь первую страницу читают везде и всегда — и это объективно. Новости — обязательно, подборка картинок — а что, мне надо сразу бежать на следующую? На блогах самые свежие посты — это показатель, буду ли я подписываться на блог или хотя бы листать дальше. Не может быть, что вы говорите о первой странице в вашей пагинации — т.е. самой старой, потому что в таком случае нет статики. Т.е. речь все же о главной, которая первая, которая последняя, которая — лицо.
У меня, собственно, нездоровый юмор именно с этого и проснулся. Представьте себе любой сайт больших объемов информации-текучки (фото, ньюсы, анонсы, статьи) — как себе можно представить, что 4 из 10 (или рассматривая худший вариант с _всего лишь_ 9 из 10!) — балласт на первой же странице, куда вы зашли. Какой к черту минимум кликов, если я по первой странице не могу понять, а нафига мне кликать дальше? Я не понимаю такого отношения к первой странице, которая и так часто становится для посетителей остается последней...
Даже если сделать раздельной «первую» и главную, то при переходе с главной на вторую, у нас опять косячок — мы видим до 5 из 10 повторяющегося контента, что опять же отпугивает почище Бабы Яги.
Ну нету адекватного решения, которое побьет плавающий контент (у которого и недостатки можно не замечать, если думать о нем так, как я написал). Ровно как и вот нет единого и абсолютно адекватного решения древовидных комментариев (хотя далеко уже продвинулись, да).
Впрочем, я тут пишу и пишу, наверное, уже давно надоел, судя по некоторым деталям ответов. Если не продолжим, я не обижусь. Честно-честно.
Сергей, вы написали много букв по теме даже не потрудившись спросить что я подразумеваю под «первой страницей».
Взяв за аксиому то, что я говорю о главной (как бы я мог сказать, что её никто не читает?), вы развернули свои аргументы.
Я вас сильно удивлю, но я в говорю о самой первой\самой старой, которую действительно никто никогда не читает.
Я вас сильно удивлю, но балласт на 1ой ни чему не поможет, как и написано в тех «много буквах». Во-первых, это бесмысслено, забивать чем-то последнюю страницу, которой сам бог прописал быть не до конца заполненной. И я в толк не могу взять, почему вы пишете о юзабилити и интерфейсах и не можете нормально пояснить простой вопрос, постоянно увиливая от ответа. Ведь во-вторых то, что вы уже второй раз повторяете, не сделает страницы статичными.
Новые посты добавляются в начало (у вас это 13, 52, 76 — без разницы). А значит, сдвиг идет именно с этой стороны, нет? Т.е. ваша пресловутая «статика» — это страницы, которые имеют всего лишь более менее статичный контент, т.к. они изменяются с периодом обращения N-1, где N — это количество постов на страницу.
Так о какой статике речь? Что за глупость?
вот более или менее наглядно:
А то все ваши аргументы выглядят еще более бесмыссленней, пока без наглядности разговариваем.
П. С.
Не забыть поставить бинды 'ctrl + ?' — очень удобная вещь, к которой быстро привыкаешь, но, к сожалению, встречаешь крайне редко.
Дмитрий, спасибо, учтем в прототипе.
Сергей, я понимаю вашу позицию по поводу «плавающей девятки» из постов.
Я также понимаю и её минусы. Но нельзя отрицать, что у неё есть и бесспорные плюсы.
Для меня всё-таки предпочтительнее запомнить страницу контента (+ — 1 страница), чем вообще не знать где нужный мне контент находится, ведь страница за месяц может уползти глубоко внутрь, и ищи её потом.
Выход из этой ситуации есть — я его предоставил. У него есть минус — на самой старой странице, в разное время будет разное количество постов, но как я уже сказал, это тоже выход из ситуации, и лучшего я не нашел.
Если у вас есть мнение как «минус плавающей девятки» компенсировать — буду рад услышать.
Но и вариант с нумерацией страниц в виде «1, 2, 3, 4 ... 874», я тоже не могу принять по вышеуказанным причинам, вы уж извините.
Ну вот как клево иметь фидбек на собственном блоге )
Собственно, я и хотел получить признание вот этой плавающей 9ки, ведь плохого в обратной нумерации ничего нет, кроме как увеличение количества разных вариантов. Ваш способ имеет смысл, и, возможно, станет трендом. Но пока его принять не могу я. Ну да ладно, время покажет.
Решение «плавающей девятки» нет, к сожалению. Вот и мне было интересно, есть ли оно у вас.
Балласт в этом свете представляется вещью не особо нужной, — посудите сами, это может пригодится только для более-менее сохранение верстки и только. Потому что пагинацией в 90% пользуются только для того, чтобы отлистать чуть назад записи. И, когда доходят до конца, 3 записи вместо 10 говорят только о том, что все, это последние. И ничего в этом такого нет.
И опять же, для крупных многостраничников выплывают на первую роль другие виды навигации, так что большего, чем решение в том виде, что уже существует или представили вы, особо и не надо.
Но спасибо за разговор, да.
Сергей, я не спорю, что для крупных порталов потребуются дополнительные способы навигации, но и уделять мало времени и сил постраничной тоже нельзя.
Всегда пожалуйста.
Классная статья очень понравилось, много полезного узнал
[...] Более или менее. Только следует хоть как-то следовать рекомендациям по юзабилити. В меру, конечно [...]
Как раз вчера придумывал что-то подобное. И придумал))) Сегодня дорвался до фриланса и т натолкнулся на этот пост. В голову пришла еще одна хорошая мысль как можно сделать переходы по страницам )
and0ne, и какая же? Поделитесь с общественностью вашей прекрасной мыслью.
в хорошей навигации должны быть следующие ссылки:
1. следующая страница — единстенная необходимая в любом случае
2. первая страница — вполне можно совмещать с соответствующей ссылкой в менюшке (ссылка на текущий раздел)
3. предыдущая страница — ставится обычно для симметрии, ибо дублирует кнопку «назад» браузера.
а вот следующие ссылки являются лишними:
1. последняя страница — бесполезная ссылка. если пользователю, например, захочется почитать посты в хронологическом порядке — лучше предоставить ему возможность сортировки, зем заставлять листать страницы с конца и просматривать их снизу вверх.
2. переход на конкретную страницу — если список настолько огромен, что потребовалас листалка, то конкретная страница не представляет интереса, ибо афайк, пользователь не может знать какая именно страница ему нужна. если ему надо найти что-то конкретное — дайте уме возможность фильтрации и сортировки. если просто хочется посмотреть материалы — необходимо и достаточно ссылки «следующая страница»
получаем, что идеальная листалка выглядит вот так:
? Свежее Старее ?
при этом левая прижата влево, а правая — вправо.
должна реагировать на ctrl+стрелка
текст должен быть не просто «следующая-предыдущая», а соответствующим контексту.
в случаях, когда кроме «следующая-предыдущая» ничего не подходит — следующая должна быть справа, а предыдущая — слева. ибо это естественные ассоциации для европеоидов. для арабов, японцев и ко — естественно, наоборот.
ps: зачем ты сделал цвет текста в текстарии светлосерым? читать невозможно. если будут ачепятки — сам виноват.
tenshi
www.birzool.com/info/ (пункт 6).
проблема девятки решается просто:
1. нужно понять, что главная страница — это не первая и не последняя. главная — этоотдельная страница с выжимкой свежих материалов.
страница | кол-во материалов
1 | 10
2 | 10
3 | 10
4 | 10
5 | 7
главная | 17
ссылка с главной вида «море, море материала!» ведёт на страницу 3
таким образом — главная страница полностью динамична, от этого не уйти. остальные страницы — полностью статичны — они оседают в кэше, запоминаются поисковиками и тд.
если не орать пользвателю, что «вы попали на страницу 3!», то никакого диссонанса у него от этого не будет.
Ярослав Бирзул
lurkmore.ru/Правила_демагога (пункт 13)
Ярослав, почему время «идет» вправо, а не влево? Почему тогда постраничная навигация новейшую страницу показывает слева, а не справа?
хех... почитал я тут местные рулезы... у автора гипертрофированное чсв в стадии опухания гондураса... чего впрочем и следовало ожидать, от человека, использующего свою фамилию в качестве домена...
Александр Киссель, время идет вправо, т.е. старейшие страницы уходят в правую сторону. Это не противоречит навигации, ведь страница под номером 1 — самая старая.
tenshi, по-моему это мой личный сайт, который работает по моим личным правилам. Если не нравится — проваливайте.
2 tenshi:
я понимаю, что обвиняя Ярослава в (в чём вы его там обвиняете?) вы преследуете исключительно мирные цели? Действуете на благо здравого смысла, логики, объективности? В противном случае вы — тролль, и ваши слова не стоят ни гроша.
Но предположим первое. Ваши действия:
не прислушиваться к мнению Ярослава по поводу юзабилити (верится, что вы этого и так не делаете);
не посещать его недружелюбный сайт (действительно, оно вам надо?);
рассказать о его недостатках на своём ресурсе (или наоборот — замолчать, чтобы не пиарить лишний раз недостойного, по вашему мнению, эксперта).
А что вы делаете? Разводите пыль? Или вы надеетесь, что Ярослав «всё поймёт», станет на колени и посыпет голову пеплом? Закроет сайт и на его обломках напишет вам благодарность? Серьёзно. Определитесь со своими действиями, иначе они бессмысленны.
Время идет вправо, неотвратимо. И старое остается слева, а новое — справа.
------>>>----->>>----->>>----->>>>-----
Александр Киссель, о времени мы можем полемизировать довольно долго, но смысла в этом нет, т.к. мы оба не знаем истины.
[...] пост уважаемого Жомарта (после увидев статью Ярослава Бирзул) и посмотрев функционал navi.php, решил внести свои 5ть [...]
Последний вариант уже давно сделал у себя на сайте. Идея стукнула, когда сказал себе «нет» на «1 2 3». Но только до ума и хорошего вида так и не довел, но функцию свою выполняет.
спасибо за статью
[...] Переключение страниц на сайтах, несомненно, является очень важной, концептуальной деталью. Поэтому реализовывать эту систему нужно очень внимательно, и с аккуратностью. Детали тут играют несравненно большую роль по сравнению с остальными компонентами дизайна. [...]
как насчет этого: karaboz.ru/2007/11/19/pag...ciya-budushhego/ ? Все давно придумано и реализовано :)
Paginator3000 — классная штука, вот только не то, что придумано и реализовано в этой статье.
Здравствуйте Ярослав , а что это за полоска между «первая» и «последняя»?
Правильно сказал Андрей Новгородцев, в нашел обестве приняты направления — влево=назад, вправо=вперед, мы читаем слева направо, так что если инвертированную нумерацию можно принять, то вот от кнопок ? Следующая | Предыдущая ? не на своих местах просто голова кружится.
Здравствуйте Ярослав , а что это за полоска между “первая” и “последняя”?
Правильно сказал Андрей Новгородцев, в нашем обществе приняты направления — влево=назад, вправо=вперед, мы читаем слева направо, так что если инвертированную нумерацию можно принять, то вот от кнопок ? Следующая | Предыдущая ? не на своих местах просто голова кружится.
Извиняюсь за ошибки.
Denis, есть две логики.
1. По первой из них «следующая» это «следующая цифра». А так как следующая цифра у нас идет слева — поэтому ссылка «следующая» именно там и находится.
2. По второй из них «Следующая» означает «На право».
Так вот — я следую первой версии, а вы второй. Из-за этого возникает диссонанс. Если я сейчас поменяю как вам нравится, придет кто-то еще, и скажет, что это не правильно, и аргументирует первым пунктом.
Это бесконечный цикл. Выход из него — просто смирится с моим мнением.
Да я прекрасно понимаю какой логике следуете вы, просто пополнил копилку людей которые против, ведь вы иногда меняете свое мнение в пользу большинства.
И на 1й вопрос вы не ответили, если это скролбар между номерами страниц, то он явно маловат.
По поводу скроллбара: он динамически увеличивается при наведении, а в свернутом виде показывает относительное месторасположение в списке страниц.
Изначально он даже не был скроллбаром, но уж слишком полоска для этого подходит интуитивно, поэтому в прототипе он прокруткой всё-таки будет.
По моему вы пытаетесь сломать стереотипы. Всегда и у всех(у большинства) нумерация была с лева направо. Блог это подобие книги, но в книге самая первая (старая) мысль написана на первой страничке, а самая свежая на последней.
Если исходить из вашей реверсивной нумерации то страница 1 должна означать самое старое что есть в блоге, а стр.345 это последние мысли автора. Так?
Тогда надо не только визуальную пагинацию менять, но и в самом WordPress поменять логику обработки УРЛов. Кстати оно и на индексацию в поисковиках будет влиять положительно, потому как если стр.1 самая старая и она уже есть в индексе, то смысла её индексировать нет. А в текущей ситуации получается что при добавлении новых страниц у нас старый матерьял получает совсем другую нумерацию что отрицательно сказывается на индексации.
Казалось бы логично всё перевернуть, но ведь есть привычка. Привычка к тому что при заходе на сайт ты видишь сразу первую страницу, а не последнюю.
Где истина?
Valentin, у каждого из способов вывода есть свои недостатки и преимущества. Каждый сам решает под какую задачу ему нужна навигация, и как её выводить, но общим принципам логики следовать всё-же стоит.
Истина где-то рядом.
В таком случае может и на странице архива сначала показывать декабрь, а потом август? И пусть 2008-й год следует за 2012?
Впрочем, я считаю постраничную навигацию невыразимым бредом, от которого нужно избавляться. Сейчас вижу ее приемлимой только на проектах, где нужно больше трафика ради прибыли с рекламы.
Александр Киссель, какой метод навигации по страницам на крупных сайтах предлагаете вы? Наверняка какой-то революционный. Делитесь, поглядим.
Ярослав, хорошо. Вы правы. Мне нужно открыть блог.
Александр Киссель, я не имел ввиду, что вы не правы.
Я сказал: если постраничная навигация говно, и от неё нужно избавляться — нужно ведь что-то дать взамен.
Вот и спрашиваю: что вы предлагаете взамен постраничной навигации?
Первое, что пришло на ум:
В большом блоге можно показать 3 заметки развернуто и заголовки заметок за этот месяц, к примеру. Остальное в архиве. Тут можно устроить даже помесячную навигацию взад-вперед.
Александр Киссель, т. е. вместо постраничной навигации вы предлагаете помесячную?
А если человек за месяц ничего не написал, или наоборот, в большом сообществе за месяц будет около 300 статей?
Какая навигация будет действовать «внутри месяца»?
Куча заголовков-ссылок на развернутые заметки.
Слово «месяц» с тем же успехом можно заменить на «день», «неделя», «год», «тег», «категория».
Никакой универсальности здесь нет. Как решит сделать проектировщик, так и будет.
помоему листалка с промежуточными циферками , по середине листалки ближайшие +1 боле отдаленные по +10, еще более отдаленные по +100 . Вполне нормальное решение, хотя скролбарик тоже ничего. Смущает только что он должен очень быстро перелистыватся, если страниц уж очень много.
balfin, всё завист от того, насколько грамотно его реализуют. А я думаю, что его реализуют хорошо.
А я не согласна с тем, что «удобный доступ к последней странице» является необходимостью. Почему именно последняя? Почему не та, которая посередине? Откуда вообще пошел этот миф, что пользователю нужна последняя страница?
Очевидно, что даже в самый скучный рабочий день пользователь вряд ли просмотрит больше 20-30 страниц.
Или, например, результаты поиска. Ну 300 страниц. Ну выводятся они по релевантности, как правило. Зачем ему последняя?
Я считаю, что наиболее удачная постраничная навигация реализована на dirty.ru. Ну то есть она логична.
> Откуда вообще пошел этот миф, что пользователю нужна последняя страница?
Из eye-трекинга, и CrazzyEgg.
Человеческое внимание, и правда, может удержать, в среднем 7±2 элемента одновременно.
соответственно, всего цифр-номеров страниц должно быть 7: одна активная и по три соседних с каждой стороны.
(перечитываю Ваш блог) :)
В списке постов первая страница нужна что бы узнать с чего все началось, а последняя нужна что бы узнать чем закончилось, так что нужны обе ссылки.
Так как читаем мы слева направо, а предыдущая страница была раньше следующей, слева — предыдущая, справа следующая, даже если цифры идут в обратном порядке.
И не забываем про навигацию с клавиатуры.
Самая последния версия, супер — вот именно она мне понравилась.
> Это не удобно, потому что в реальности никто так не пишет.
Это не аргумент. По-крайней мере не веский. На чем базируется ваше мнение?
> Хотелось бы почитать причину, по которой вы решили выбрать такой порядок.
По причине здравого смысла. В комментариях уже несколько раз поднимали этот вопрос:
1. Благодаря такой навигации нужный контент можно найти за пару секунд зная номер страницы. Если же сделать обратный порядок — то это попросту невозможно, т.к. контент будет «уплывать» всё глубже с каждой новой страницей.
2. Первая страница «не равно» главная страница. И не нужно говорить про то, что «точка отсчета в голове пользователя берется за главную страницу» — опыт показывает, что это не так. В больших проектах вроде старой версии Хабрахабра или iWorker эта навигация прекрасно работает и не вызывает отторжения.
Поистине актуальная проблема, в том числе и для меня как для пользователя. Отличный материал, отличные пути решения. Себе и другим на заметку.
Привет спамерам! Этот блог защищен плагином Parasite Eliminator, спамить его бесполезно.
Большое спасибо, прекрасная статья!
Полностью исчерпывающая информация, большое спасибо.
Надо обозначать последнюю, так как пользователям важно снать сколько страниц вообще можно пролистать.
И следующая должна быть справа, а предидущая слево хоть какие бы доводы не были.
С обратным расположением страниц не согласен, так как я читаю слева направо, и чтобы перейти на вторую страницу, приходится перемещать курсор вправо.
Стрелка на предыдущую страницу тоже удобнее справа, постоянно напрягает в некоторых блогах, когда наоборот.
Тут действует другая логика. Слева более новые посты, справа старые. Я читаю сначала новые.
Вывод страниц лучше делать так:
1 … 2 3 4 5 6 7 8 9 10 11 [следующие 11] … последняя
?(очень длинная кнопка назад) (очень длинная кнопка вперёд)?
Очень удобный плагин. Помнтся давно выходила первая весия ее — очень полезная штука.
Особенно учитывая, что индексируется сразу все страницы, а не только те, которые показываются.
Уважаемый автор! Почему-то не отображаются иллюстрации, а без них статья не статья. И на многих других страницах та же картина.
Уважаемый Негодник. Я знаю об этой проблеме и в самое ближайшее время исправлю её.
У меня тоже никакие иллюстрации не отображаются...
А может стоит еще как-то обозначать общее количество страниц?