Проектирование навигационной системы сайта

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

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

Где я нахожусь? 2. Где я уже был? 3. Куда я могупойти?

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

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

На любой странице сайта должны присутствовать следующие элементы

• логотип компании, который являетсяссылкой на стартовую страницу, а также краткое описание сферы деятельности

•центральная навигация, отображающая структуру основных информационных блоковсайта (разделов и подразделов)

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

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

Внутреннюю навигацию можно разделить на основную и вспомогательную.Центральный элемент основной навигации – это панель или меню переходов.

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

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

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

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

Для разделения звеньев навигации не рекомендуется использовать символы «:» и«|», т.к они не информируют о вложенности и соподчиненности страниц. Оптимальнымвариантом будет выбор в качестве разделителей «/» или «>».

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

Некорректно использовать ссылки с текстом «Вперед», «Следующая глава» и т.п.Особенно неуместна ссылка «Назад» на странице, на которую пользователь попадаетс поисковой системы, т.к. ее можно интерпретировать как возврат к окнурезультатов поиска. Лучше использовать информативные ссылки подобного типа:«Следующая глава:

Основы визуального проектирования»

Полезно заполнять для ссылок атрибут «title», который при наведении указателямыши выводит всплывающую подсказку с описанием ссылки.

Иногда в отдельный тип выделяют ссылки глобальной навигации, которые ведут настраницы типа About us, Contact us и т.п. Глобальные ссылки должны быть доступныс любой страницы сайта. Причем часто такие ссылки располагают как внизу, так ивверху страницы.

Существует тематическая навигация, которая представлена ссылками, списоккоторых генерируется и выдается в зависимости от того, какая информация былазагружена пользователем на данной странице. Например, если это статья, то вконце можно представить ссылки на статьи подобной тематики, расположенные впорядке убывания релевантности относительно рассматриваемой темы. Дляэлектронного магазина это могут быть ссылки на список наиболее покупаемыхтоваров в данной категории, ссылки на аксессуары или сопутствующие товары,ссылки на товары этой же категории, но других производителей и т.д. URL-адрескак элемент навигации URL-адрес сайта может быть удобным для пользователя, еслиназвания каталогов и файлов являются информативными.

Очевидно, что по данному адресу находится страница учебного пособия повизуальному HTML-редактору Dreamweaver от фирмы Macromedia, которая посвященаработе со ссылками.

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

Если в URL-адресе используются нумерованные страницы или подкаталоги,например, «page_1», то изменив цифру, можно быстро попасть на требуемуюстраницу.

Т.о. использование простого и логически структурированного URL-адреса — ещеодин способ облегчить пользователям навигацию по сайту.

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

В каком окне отображать содержимое внешних ссылок

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

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

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

Навигационные элементы сайта должны быть легко узнаваемы. Глаз пользователядолжен однозначно выделять их среди других элементов страницы. Якоб Нильсен(www.useit.com) до сих пор настоятельно рекомендует использовать для оформленияссылок классический, но уже морально устаревший стандарт с синим цветом иподчеркиванием. Этот вопрос очень спорный, и однозначной рекомендации здесь бытьне может. Однако в данный момент, когда практически неограниченны возможности понастройке внешнего вида элементов страниц с помощью CSS, трудно согласиться сНильсеном.

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

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

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