Главная Услуги Работы Персона Юзабилити анализы
IMG тел. +7(901) 370-1796
Постраничная навигация. Если у вас на сайте реализована навигация она должна быть юзабильна.




ПОИСК по сайту


    Полный список статей
/ Постраничная навигация / Версия для печати / translit / абракадабра :-)


<-предыдущая следующая ->

 
  google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru smi2.ru twitter.com Яндекс закладки text20.ru RuSpace RuSpace toodoo


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


К сожалению, очень немногие люди пытаются сломать стереотипы, ипродолжают творить нечто странное подвидом навигации постраницам. Сегодня я постараюсь свашей помощью решить эту ситуацию, чтобы сделать интернет лучше.

Задачи

  1. Дать возможность водно действие переключать страницу.
  2. Удобный переход напоследнюю ипервую страницу.
  3. Правильное переключение наследующую ипредыдущую страницы.
  4. Удобочитаемый вывод списка страниц.
  5. Выделение активной страницы.
  6. Сделать всё вышеперечисленное повозможности впростом исимпатичном виде.

Решение задач:

Перед началом решения вышесказанных задач нужно определиться стем, что нам нужно улучшать. Для этого перейдем насайты, укоторых есть навигация постраницам, иэтих страниц явно больше 100. Для того, чтобы их найти, достаточно перейти вgoogle инабрать поисковый запрос вида «719720721». После этого выбираем наиболее интересные примеры иизучаем их.

Я выбрал вкачестве примеров недоработанной навигации постраницам следующие сайты:

1. PhotoUA
Украинское агентство цифровой фотографии создано сцелью предоставления цифрового новостного фото.

[1] Постраничная навигация

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

2. EuroLine
Довольно известная грузинская авиакомпания EuroLine предоставляет перелеты вЕвропу иАзию.

[2] Постраничная навигация

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

3. Пресс-КIT
Украинское независимое агенство, предлагающее широкий спектр информационных, рекламных услуг, иразнообразные возможности фото-службы.

[3] Постраничная навигация

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

4. Форум посвященный Гарри Поттеру.
Кому-то может показаться смешным то, что я выбрал вкачестве примера этот сайт, нодолжен вас разочаровать: выбрал я его потому, что он имеет огромное количество страниц.

[4] Постраничная навигация

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

5. Фишки.Нет
Аннотации заненадобностью тут небудет. Все знают, что это засайт ис чем его едят.

[5] Постраничная навигация

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

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

Дать возможность водно действие переключать страницу
Под этой фразой я понимаю функцию быстрого выбора нужной страницы в3 клика именьше. Т.е. если пользователю нужно найти 761-ю страницу, ненужно его гонять по10 страниц зараз. Нужно просто дать ему эту страницу выбрать.

Постраничная навигация

Решить эту ситуацию довольно просто: либо выпадающим списком спрокруткой (прокрутка длятого, чтобы список был меньше чем 2000px при1000 страницах), илиже перемоткой списка движениями мыши. Тут всё зависит отличных предпочтений дизайнера. Лично я предпочитаю движения курсором. Что я подразумеваю подэтим — смотрите накартинку сверху.

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

При этом желательно эти ссылки выводить полярно: “Первая” справа, “Последняя”слева .

Постраничная навигация

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

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

Постраничная навигация

Лучше всего совместить спомощью типографического форматирования стрелочку (они есть почти вовсех стандартных шрифтах Windows) инадпись. Т.е. вот так: [6] ← Следующая | [6] Предыдущая →

Удобочитаемый вывод списка страниц
Тут всё просто. Не стоит показывать массив извсех страниц сайта сразу. Пример сайта Фишки.Нет ясно показывает нам, что навигация потакому списку— неиз легких. Лучше всего выводить 5-7 страниц, которые находятся пососедству.

Постраничная навигация

У некоторых людей существуют трудности свосприятием списка, если внем находится больше семи элементов, поэтому выводить более семи соседних страниц нестоит.

Выделение активной страницы

Постраничная навигация

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

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

Постраничная навигация

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

Posted By Ярослав Бирзул http://www.birzool.com/page-navigation/print/

Создание эксклюзивных сайтов, юзибилити анализ и бесплатный анализ под запросы основных поисковых машин
Контактная информация :
тел. +7(901) 370-1796

Написать письмо на e-mail
icq 415547094  romverрейтинг на mail.ru сайта romverinbox.ru
© 1997 - 2017 romver.ru

Полная карта сайта Display Pagerank  
CMS version 3.6.3 | PTG 0,0226 s.