До недавнего времени все переключатели страниц во всех наших интерфейсах были корявыми. Мне немного стыдно об этом писать, но, с другой стороны, (а) мы сами это заметили и исправили и (б) к счастью, проблема проявлялась только в некоторых случаях.
Вот этот переключатель (с сайта Dreamstime.com) наглядно показал, в чём именно мы ошибались:
Как по вашему, в чём проблема? Как обычно в нашей викторине, пока не ответите на этот вопрос, не читайте далее.
Проблема в том, что при переключении страниц кнопка > смещается. Номера страниц имеют разную ширину (1 ýже, чем 11, а 22 ýже, чем 222), поэтому строка заметно изменяет свою длину всякий раз, когда в номерах страниц увеличивается число разрядов. Вот этот эффект показан наглядно на предыдущей версии интерфейса Dreamstime (я запасся скриншотом):
В результате всякий раз, когда деятельность требует механически переключать страницы в поиске нужного элемента, интерфейс либо замедляет работу, либо продуцирует операторскую ошибку и замедляет работу. С ним невозможно механически жать кнопку мыши, снова и снова следуя по ссылке Далее, нужно еще следить, чтобы указатель находился на этой ссылке. По моему, это замечательный пример ситуации, в которой отсутствие стабильности интерфейса этот интерфейс явно портит.
Решить проблему просто – достаточно всего лишь принудительно делать ширину кнопок перехода на конкретную страницу шириной в три знака. Вдобавок, получившиеся кнопки будут лучше и с точки зрения закона Фиттса.
PS. Забавно, что при модицификации дизайна разработчики Dreamstime ухитрились несколько испортить интерфейс, закон Фиттса проигнорировав — раньше была большая кнопка Next, а теперь маленькая > (справедливости ради надо сказать, что они засунули очень большую кнопку в сам список результатов поиска).
1 июня 2009 в 13:40
Мне в последнее время нравится вот такое решение для пейджера:
http://daemdobro.ru/CE_quest.jpg-20090601-134014.jpg
Есть ли у него недостатки?
1 июня 2009 в 13:52
Смотря где появляется ссылка на пред. страницу. Если не смещает ссылку Далее, вполне работоспособная переключалка.
5 июня 2009 в 21:25
Ну да, там просто всегда слева быть ссылка на предыдущую, на первой странице — засеренная.
7 июня 2009 в 20:34
Тут нужно сделать уточнение, что такой подход важен, если переключение доступно без прокрутки экрана. В противном случае ценность теряется.
8 июня 2009 в 13:32
Наличие или отсутствие прокрутки никак не сказывается на положении постраничного навигатора относительно нижней границы экрана, и (при наличии мышиного колеса) не влияет на ценность такого подхода.
9 июня 2009 в 01:48
Я же не слепой, я вижу что сказывается. У страниц контент по высоте не пиксель-в-пиксель.
9 июня 2009 в 11:02
> У страниц контент по высоте не пиксель-в-пиксель.
Сверху - да. Но снизу у качественного сайта все ровно. Т.е. переходишь на другую страницу, прокручиваешь ДО КОНЦА, и тамошние элементы управления находятся на тех же самых местах.
11 июня 2009 в 18:32
>> прокручиваешь ДО КОНЦА
Это лишнее телодвижение. Даже если и делать, наклыдывается ещё одно условие: предыдущая страница также должна быть прокручена до конца, иначе все собьется.
Пример на фликре - там последовательный просмотр альбома возможен без движения мыши. И это важно, я всегда пролистываю фотки просто кликая мышкой.
Пример результатов поиска Google - никаких “подводок” под мышь. Подозреваю, что тут просто: просматривая страницу с результатами поиска пользователь водит мыщь за взглядом и/или открывает другие страницы (они релевантнее ссылки “далее”).
5 августа 2009 в 16:51
Вот ссылка на не мое исследование ещё 2008 года:
http://www.birzool.com/page-navigation/
Полезная мне кажется. Особенно для многостраничного сайта Dreamstime.com или подобного фотобанка. Я дизайнер, и очень страдаю от плохой “листалки” на фотостоках.