WEB-Дизайн

Основы WEB-дизайнаИнформационная архитектураВизуальная концепция сайтаПроектирование эффективных WEB-страницНаписание текстов для интернетаРазработка навигацииПринципы гипертекстовой разметки Структура WEB-документовБазовые теги HTMLТеги тела WEB - документаТеги списковГипертекстовые ссылкиСтруктура ссылок в HTML-документеДобавление стилейТаблицы в HTMLФормы в HTMLЗадание по таблицам и формамЭкзаменационные заданияПримеры решения заданий по WEB-дизайнуИнструменты для построения сайтовLorem ipsumЗаказать сайт

Предметы

WEB-ДизайнМетрология и СтандартизацияSEO оптимизацияМаркетингМаркетинговые исследованияТеория организацииОрганизация маркетинговой деятельности на предприяУправление проектамиУправленческие решенияИнформатикаИнформационные системы и Базы данныхТелекоммуникационные и компьютерные технологии в СИнтернет-маркетингМенеджментИстория МенеджментаПерсональный менеджментИнформационный менеджментМеждународный маркетингМировые Информационные РесурсыПланирование карьерыE-learn

Создайте сайт своими руками

Подпишитесь на бесплатные видеоуроки


Начни зарабатывать деньги в Интернете!!!

Подпишись на бесплатный курс

Ваш e-mail: *
Ваше имя: *
Подписчиков:

Разработка навигации

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

 

getsuprize.fw

 

Разработка интуитивно понятной навигации

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

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

Будьте последовательны

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

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

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

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

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

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

Сделайте систему навигации понятной для посетителя

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

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

Используйте визуальные средства

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

Цвет

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

Но у подобной методики есть и узкие места:

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

Выбирайте цвета с учетом визуальной метафоры.

Использование имен собственных

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

Цепочная навигация

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

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

«Главная страница ► Обо мне ► Любимые фильмы».

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

Ярлыки

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

Используя ярлыки, важно помнить о культурных различиях. Если, к примеру, среднестатистический пользователь из Северной Америки легко определит, какой раздел сайта скрывается за словом Ноmе, пользователю из Египта, Чехии или Малайзии оно ничего не скажет.

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

Визуальный словарь: элементы навигации

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

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

Различные способы переходов по сайту

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

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