.

Правило “от пяти до семи”

Назначая приоритет группам с помощью звездочек, вы легко определитесь с главными, вторичными и дополнительными элементами навигации. Главные элементы навигации — это основные возможности перехода по сайту; они расположены обычно по центру на переднем плане каждой страницы Web-сайта. Взгляните 3.3. Четыре наиболее приоритетные группы (Childrens, Womens, Mens, Toddlers), выделенные 3.2, стали основными навигационными кнопками сайта. Используя раскрывающиеся списки, вы получаете доступ к подпунктам каждой группы На каждой странице Web-сайта располагаются также вторичные и дополнительные элементы навигации. Визуально эти элементы меньше, располагаются сбоку или внизу Web-страниц. (Вторичные и дополнительные элементы навигации стоит использовать для сайтов, содержащих большие объемы информации.)

Еще один набор дополнительных элементов навигации

Набор вторичных элементов навигации Набор главных элементов навигации

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

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

Набросок, который вы создали для Web-сайта, можно преобразовать непосредственно в карту сайта (site map). Такая карта поможет с визуализацией структуры будущего Web-сайта, которая называется архитектурой информации. Для создания карты сайта нужно, используя ваш набросок, преобразовать каждую группу элементов и ее подпунктов в блок-схему. Блоки связать линиями со стрелками для обозначения возможных переходов по сайту. Создание карты сайта — очень важный этап проектирования. В ходе последующей разработки вы часто будете обращаться к созданной карте.

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

Для преобразования наброска в карту сайта выполните следующую последовательность действий.

1. Возьмите большой лист бумаги.

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

Для построения карты сайта на компьютере можно воспользоваться программным пакетом Inspiration (www.inspiration.com) или программой Microsoft Visio. Эти программные инструменты позволяют быстро создавать блок-схемы. Существуют и специализированные программные средства для дизайнеров — это Illustrator или Freehand (лично я пользуюсь последней программой). С помощью этих программ можно украсить карту сайта собственным логотипом, как показано 3.4.

2. Обозначьте прямоугольниками каждую Web-страницу.

Начиная с главной страницы, изобразите в виде прямоугольников каждую Web-страницу сайта. Расположите прямоугольник главной страницы наверху листа бумаги. Затем, как показано 3.4, начните с новой строки и нарисуйте прямоугольник для каждого названия группы элементов навигации (для главных, вторичных и дополнительных).

3. Добавьте прямоугольники для групп элементов.

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

4. Пронумеруйте элементы блок-схемы.

Важным моментом является нзмсрация каждого прямоугольника. Это необходимо для того, чтобы впоследствии можно было легко сослаться на соответствующий элемент, указав его номер, а также связать прямоугольники между собой по индексу относительно главной страницы (более детально о данной операции рассказано ниже). Назначьте главной странице номер 1.0, как показано 3.4. Группам элементов навигации присвойте номера 2.0, 3.0, 4.0 и т.д. В пределах каждой группы пронумеруйте прямоугольники, как 2.1, 2.2, 2.3 и т.д. Для второго уровня навигации (Web-страниц, идущих после внутренних страниц) используйте номера 2.1.1, 2.1.2, 2.1.3 и т.д.

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

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



Hosting Ukraine
Hosting Ukraine


Предложить

Дата Окончане проекта

Сумма проекта

×