14 июня 2008 в 22:44

Ошибки реализации постраничной навигации на сайте

Кросс-пост: Блог для вебмастеров
Ошибки в построении постраничной навигации по сайтуСегодня наткнулась на один сайт (уже обновили), который показался мне очень неудобным тем, как реализована постраничная навигация.
Пролистав контент вниз я по привычке нажала на _цифру_, не подозревая что это не номер страницы, а число товаров отображаемых на странице! И удивилась, когда обнаружила, что номера страниц расположены _вертикально_, слева от контента.
Это на мой взгляд самый наглядный пример как НЕ надо делать постраничную навигацию.
Давайте разберемся…

1: Не нужно изобретать велосипед

Уверена, что 99% пользователей Интернета привыкли видеть постраничную навигацию в горизонтальном расположении. Во-первых, это будет уместно, когда страниц много и можно обозначить переход на следующую/предыдущую страницу символами < и >, а переход к началу или концу « и ». Все логично и просто. В случае с данной вертикальной реализацией такая схема не пройдет и придется использовать новые символы, что опять скажется на восприятии их пользователями.

2: Всему свое место

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

3: «Серая мышь и в Африке серая»

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

4: В каждом слове должен быть смысл

Надпись «Показывать на странице по: 12 24 36 » некорректна. «По-русски» это должно звучать примерно так: «Число товаров на странице: 12 24 36». И вопрос «чего по?» не станет возникать. Числовые значения удобнее даже реализовать с помощью выпадающего списка, а не ссылочным перечислением.

5: Повторение — мать учения

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

Честно говоря, по этому сайту написать о «неюзабилити» я бы могу много. Да вот только не мне это нужно, а им. Поэтому остановимся на данных 5 пунктах и ошибок таких не повторяем. Помните, что каждый ваш пользователь — ваш потенциальный клиент, поэтому любая оплошность лишает вас такого клиента.
+19
283
13
Похожие публикации

Комментарии (34)

0
Ohotnik, #
К сожалению вот такие "шедевры" встречаюся довольно часто.
Незнаю почему досихпор делают столь кривые и не продуманные "сайты" и самое главное, почему заказчики никак не хотят понимать, что их сайт не просто представление их товар в сети интернет, а реальная площадка для извлечение прибыли, у которой есть свои законы и правила.
0
Prop13, #
Во многих случаях заказчик не в состоянии отличить плохой дизайн от хорошего. Он легко ориентируется во всех тонкостях своего бизнеса, он образован, успешен и далеко не дурак (как зачастую считают разработчики). Просто он не знает как нужно, а многие дизайнеры, программисты и менеджеры проектов, в силу различных причин, просто не могут нормально аргументировать плоды своей профессиональной деятельности и отстоять свою точку зрения...

Лично мне, глубоко посрать, из чего делают гипсокартон, или какое сечение должно быть у провода, идущего из аккумулятора моей машины на стартер. Я обращаюсь к специалисту и пусть он сам ебеться с моей проблеммой, будь то ремонт квартиры или машины. Мне важен итог.

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

Не в лесу же живем :)
0
Ohotnik, #
Соглашусь, что уметь обосновать свою точку зрения надо, но во-первых не все это умеют/осмеливаются, а во-вторых общение присходит чаще всего с лицами, должность который в районе генерального деректора. В моей практике бывали случаи, когда "хочу вот так и срать мне на вашу "юзабибилитю", я не знаю что это". Но всеравно в итоге всё сводится к одному - грамотно отстоять свою позицию, что многие просто не умеют.
+1
Prop13, #
Да забудьте вы слово «юзаблити». Особенно в общении с заказчиками, забудьте. И с людьми далекими от вашего ремесла. Нет в русском языке такого слова. Есть удобство и простота, красота и гармоничность.

Когда вы с заказчиком начинаете говорить фразами типа: «нарушение юзабилити» или «веб 2.0-ность», то он, само собой, начинает строить защитные стены, и огрызаться... И это первый шаг к неудачному проекту, который кстати, делаете вы!
0
Ohotnik, #
Хе, а вот и не совсем так. Почему? Да потому, что порой заказчик соглашается на улсовия студии тока тода, когда ему какараз начинают расказывать всё такими страшными словами.

Вообще вы не до конца поняли преидущий пост: не все умеют отстаивать свою точку зрения и обосновывать её. Это совсем не значит что нужно ругатся всякими "юзабилити" и "веб два ноль". Нужно всегда понимать клиента и видеть что он из себя представляет, и только после этого выбирать как с ним разговаритьва: про красоту или удобство или про "юзабилити" и "веб 2.0". Так что первый шаг к провалу проекта - это не правильное определение характера заказчика.
0
ivan_suroegin, #
Хорошая статейка. Полезно. ;)
+1
reushkin, #
эти бы слова, да заказчикам в уши. тогда контор однодневок и пиздящих дизайн у отличных студий стало бы намного меньше, а то и вовсне исчезли.
0
RAMe0, #
Я думаю такой элемент был бы удобен, если бы его сделали "плавающим", тоесть при скролле страницы, он скролился бы тоже. Тогда бы он непременно приковал внимание пользователя.
0
khim, #
Есть проблема и имя ей: Internet Explorer 6. Это убожище не реализует полноценно даже CSS1, посему подобные элементы прыгают. Что привлекает, конечно, внимание - но совсем не того сорта. В MS IE7+, Firefox, Opera, Safiri - можно сделать просто фиксированную область, которая, наоборот, вимания привлекать не будет - но будет всегда под рукой.
+1
zencd, #
Как я понимаю, технологи Лебедева (гспди прсти!) решили эту прблему в одном из техногретов: http://www.artlebedev.ru/tools/technogre…
0
khim, #
Они придумали замечательный хак, но (как обычно в борьбе с MS IE) результат - связь ранее не связанных между собой вещей. И в любом случае он требует отдельную вёрстку для MS IE, которую требуется проверять и отлаживать...
+1
zencd, #
/* Числовые значения удобнее даже реализовать с помощью выпадающего списка, а не ссылочным перечислением. */

Можете обосновать… (Уж больно общО.)

/* В случае с данной вертикальной реализацией такая схема не пройдет и придется использовать новые символы, что опять скажется на восприятии их пользователями. */

Ну перевернут эти же символы « » < > на 90°, и будут они точно так же опознаваемы, как и «горизонтальные» …
_______

А вообще тупая постраничная навигация, как уже неоднократно замечалось, имеет немного прав на существование. То есть я бы вёл речь о более глобальных изменениях, как например сращивание с различными сортировками:

50$100$150$

P.S. Ну позвольте же себе сказать «это нужно и мне тоже» ;-)
0
habratchanka, #
Простой пример выпадающего списка с выбором количества товаров для отображения на одной странице:
http://www.gold4u.ru/catalog/item94.html (Выводить по:..)
>> Ну перевернут эти же символы « » < > на 90°, и будут они точно так же опознаваемы, как и «горизонтальные»

Это непривычно для пользователя. Зачем заставлять его думать?
0
zencd, #
неужели я не посеял и тени сомненья? :'-(
–1
habratchanka, #
а в чем тут сомневаться?
0
zencd, #
Ну и счёт дюжинами — вроде и сайт русский, а делал мессопотам что ли? :-D
0
Vadim_Kasparov, #
На самом деле мне понравилось!
Согласен с Вами по поводу того, чтобы шрифт покрупнее сделать и надпись поменять на "Количество товаров на странице", а еще добавлю, что меню прокрутки страниц расположил бы справа.

И тут решил переделать одну старую поговорку известную по одному классному мультику:
"Сайт- цепь, а мелочи в нем- звенья.
Нельзя звену не придавать значенья"
0
awful_roger, #
Согласен с 1, 2 и 5 пунктами.

Пункт 3 мне кажется несколько надуманным, похоже на попытку реанимировать труп. "Если уж хотите неудобный пейджер, пусть он будет хотя бы не очень неудобным".

По поводу пункта 4: надпись "показывать по" имеет право на существование, но она должна быть в контексте (например, справа над верхних пейджером).

Кстати, хочу поделиться ссылкой на статью по теме: http://www.smashingmagazine.com/2007/11/…
0
slawa, #
Для колличества товаров отлично подойдет всеми любимый и уже вошедший в модуползунок
0
galkin, #
чет у меня ссылка не пашет :(
0
slawa, #
http://habrahabr.ru/blog/javascript/4304… – странно...по ней только-что заходил
НЛО прилетело и опубликовало эту надпись здесь
0
slawa, #
Мне нравиться этот ресурс. И при этом сайт для айтишников не должен обладать такими косяками.
0
Atilla, #
Насчёт < > и >.
Думаю что не стоит их применять, Я долго не мог догадаться что значит > в листалке, а < > я вообще не пользуюсь.
0
Atilla, #
Пардон. :-)
Насчёт < > и « ».
Думаю что не стоит их применять, Я долго не мог догадаться что значит « » в листалке, а < > я вообще не пользуюсь.
+1
brook, #
Ползунок яваскриптовый конечно удобен и весьма наглядный, но никак не для числа товаров. Оптимально ползунок подходит, например для цены. Для постраничной навигации НЕ придумали и врядли придумают лучше чем числовая навигация.

Главное - сделать ее максимально четкой и выраженной, не делать извращенств как на этом сайте - это просто треш. Из последних интересных решений мне лишь приглянулся http://re.search.wikia.com/ - интересна идея с выпадением списка ниже.

Также отличные примеры есть на замечательном ресурсе - http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/.
0
zencd, #
аааа! а я думаю, что это страница всё никак не догрузится. молодцы в wikia — не думал что уже можно что-то новое придумать :)

хотя в google reader такая идея эксплуатируется, но не думал что её можно применить для выдачи результата

хотя в конец перейти не удастся :)
0
1234567890, #
Господи, да поменять их просто местами: кол-во предметов на странице и постраничную навигацию, а в "Показывать на странице по:" добавить слово "предметов или товаров". Какие-то ползунки, всплывающие меню, зачем усложнять-то...
0
diamant, #
ошибка у них всего одна — когда изменяешь размер страницы (Показывать на странице по), не происходит пересчёта страниц и обновления/изменения текущей страницы
страница легко обозрима и полоска перехода по страницам хорошо видна.

по вашей статье:
>>Числовые значения удобнее даже реализовать с помощью выпадающего списка, а не ссылочным перечислением
гораздо удобнее сделать один клик по номеру, чем клик по комбобоксу, пролистать его и выбрать нужную цифру
+1
MASe, #
я так понял - уже исправили что ль???
+1
1234567890, #
:)))) Ага. Вот это я понимаю - реакция на критику.
0
majesty, #
>> Число товаров на странице: 12 24 36
По-русски будет "Количество". Числа - они в математике.
А форма "Показывать по ... товаров" хороша при использовании выпадающих списков, да. Когда вся фраза читается в одну строку.

ЗЫ: Я бы вообще поднял вопрос об уместности кнопок < и >. Возможно, я конченный идиот, но я ими никогда не пользуюсь. Зачем переходить на соседнюю страницу посредством этой кнопки (расположенной, как правило слева/справа списка), если рядом есть кнопка с номером следующей страницы и абсолютно тем же функционалом? :)
0
naething, #
Кнопками < и > я тоже не пользуюсь, если они маленькие. Если же это ссылки с надписью "далее"/"следующая страница" и т. п., то пользуюсь — по ним проще попасть мышкой :)
0
colobot, #
Листалки с номерами страниц хорошо подходят только для записей, которые выводятся без всякой внятной сортировки. Например, результаты поиска в Яндексе :) Для других целей они совершенно неинформативны. Номер страницы ничего не говорит посетителю о ее содержании. А если контент постоянно меняется, то в следующий раз, когда посетитель зайдет на "страницу № 5", на ней будет уже не то, что он видел раньше. Лучшее решение - это делать листалки, основанные на принципе сортировки записей. Если, например, записи отсортированы по алфавиту, вместо постраничной листалки лучше сделать алфавитный указатель.

А рядом с переключением числа результатов на странице полезно ставить ссылку "показать все". Посетители с быстрым коннектом порадуются.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.