Сегодня, во время социальных сетей и различных блогов, множество сайтов используют схожую структуру. Основной частью которой является перечень сообщений, разделённых на несколько страниц. Практически на каждом таком ресурсе, в качестве элемента (иногда единственного) для навигации, предлагается постраничная навигация.
Мало того, что не везде элемент такой навигации выделяется при наведении, но даже если и так, то в большинстве случаев курсор перекрывает большую часть элемента, что делает выделение практически незаметным для пользователя.
Избавиться от вышеописанного неудобства отчасти можно, используя редко используемое значение overline свойства text-decoration.
Как видите, одна строчка может сделать пользование сайтом более удобным. Поэтому, старайтесь держать на вооружении все возможности CSS, чтобы в нужный момент применить их.
Если вы знаете аналогичные простые примеры, повышающие юзабилити, напишите о них в комментариях.
Loading ...
Подчёркивание сверху — это не юзабилити, это паника: «О, боже, что случилось с моей ссылкой? Почему она перевернулась?!». А вот действительно хорошие примеры решений:
http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/
Спасибо за ссылку.
Что касается удобства, то да, безусловно, когда у ссылки при наведении меняется фон, появляется рамка и т.п., это сложно не заметить. Я же имел ввиду варианты когда в оригинале у ссылки лишь убирается подчеркивание. Вы считаете лучше оставить как есть?
В приведенной вами статье, к сожалению, тоже обнаружилась парочка таких примеров.
А как отцентровать UL у которого li элементы не inline? Надо когда у номеров страниц есть border
Так например.
Я бы еще поставил всему блоку навигации cursor:pointer. Всегда раздражало, что курсор мигает при движении по номерам страниц.
Чтобы еще больше запутать пользователя?
Настоящая проблема всех этих постранично-пролистывающих навигаций кроется явно не в этом.
Быстро можно выделить две проблемы.
1) Область нажатия на номер страницы. Так как ширина да и высота цифры (числа) очень маленькая, учитывая то, как обычно поступают с отступами у ссылок, попасть точно в них очень сложно, как и в вашем примере в частности.
2) Совершенно не понятно на какую цифру мне нажимать если я хочу найти какую-то определенную запись в громадном списке. Сообщение за какую-то дату, какой-то элемент в сортированном списке.
А надчеркивать ссылки — это ни разу не юзабилити, и уж тем более не решение действительно узких мест такой навигации.
Вы говорите об изначальных проблемах таких элементов. Я же привёл пример быстрого решения в тех случаях когда такая навигация уже присутствует на сайте.
Посмотрите на сайты примеры которых я привёл:
- http://news.sportbox.ru/
- http://filmz.ru/
- http://www.gamer.ru/ (нужна регистрация)
Не вижу ничего плохого если добавить ссылкам overline именно в данном случае.
Возможно кто-то проводил юзабилити тестирования на предмет реагирования людей на такое поведение. И возможно пользователи хватались за голову, обнаружив такой эффект. В таком случае я поменяю своё мнение )
Ну а по хорошему конечно, в плане внешнего вида, лучше делать так, как в статье, которую предложил Вадим в первом комментарии.
«Шедевр» юзабилити в оформлении постраничной навигации — это сайт Одноклассники.
Куда попадаем, нажав на кнопку «Следующая»?
Правильно, на страницу 21.
Картинку не пропустил, жаль:
http://lozhkin.net/lj/screen%2034.png
Визуальное восприятие примера не очень, а вот за то что напомнил про не слишком широко используемое свойство — спасибо.
Честно говоря, я скорее именно этого и хотел — напомнить об этом свойстве. Просто лучшего применения на данный момент не придумал.
[...] Делаем постраничную навигацию удобной Сегодня, во время социальных сетей и различных блогов, множество сайтов используют схожую структуру. Основной частью которой является перечень сообщений, разделённых на несколько страниц. Практически на каждом таком ресурсе, в качестве элемента (иногда единственного) для навигации, предлагается постраничная навигация… [...]