Навигация – это “оглавление” сайта.
Проектирование навигации похоже на проектирование системы дорожных знаков.
Помните, что навигация - это, помощь для читателя.
Дайте читателям знать, куда они идут.






10 Принципов проектирования навигации или почему качество навигации так важно

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


Навигация – это “оглавление” сайта. В книге у вас есть нумерация страниц, чтобы помочь вам ориентироваться. Вы можете держать издание в руках и пролистывать его. Если это крупная публикация, то в конце обычно есть оглавление, которое можно использовать. Однако вы не можете держать веб-сайт в своих руках.


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


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


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


10 Принципов навигационного проектирования



1. Дизайн для читателя


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


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


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


2. Обеспечьте различные варианты навигации


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


Чтобы позволить читателю перемещаться по контенту любым способом, который он пожелает:
• обеспечьте различные варианты навигации;
• используйте множественную классификацию.


3. Дайте читателям знать, где они находятся


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


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


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


4. Дайте читателям знать, где они были


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


5. Дайте читателям знать, куда они идут


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


Количество способов достижения большей ясности:
• Когда читатели нажимают на ссылку, они ожидают, что перейдут на HTML-страницу. Если вы хотите, чтобы они перешли на страницу без HTML (PDF, Microsoft Word и т. д.), сообщите им об этом заранее.
• Если читатели нажимают на ссылку, они ожидают, что останутся в окне браузера, в котором они в данный момент работают, если вы специально не скажете им об обратном. Открывайте новые окна браузера для читателя только тогда, когда есть веская причина.
• Если навигационный элемент представляет собой изображение, например логотип компании, и связан с домашней страницей, вставьте текст ALT, который говорит что-то вроде “Домашняя страница компании.”
• Измените цвет ссылки, когда мышь будет скользить по ней. Это полезно, когда есть много ссылок, расположенных близко друг к другу. Поскольку ссылка меняет цвет, читатель точно знает, какую ссылку он собирается выбрать.
• Рассмотрим выпадающую навигацию, показывающую более низкие уровни меню, когда мышь перемещается по определенной ссылке. Это позволяет читателю при желании перемещаться дальше по сайту.
• Там, где пользователя просят принять участие в процессе, таком как покупка продукта онлайн, может быть полезна навигация по диаграмме прогресса. Это показывает пользователю, сколько стадий существует в процессе и на какой стадии он находятся.


6. Предоставьте контекст


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


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


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


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


Навигационный дизайн требует:
• последовательная классификация;
• последовательный графический дизайн навигации;
• последовательные цвета гипертекста.


8. Следуйте веб-конвенции


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


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


Следуйте правилам навигации и классификации, которые появились в Интернете. Они включают в себя:
• Глобальную навигацию – это относится к навигации, которая проходит через верхнюю и нижнюю части каждой страницы, содержащей ссылки на основные разделы этого веб-сайта.
• “Главная страница” – это, условное обозначение названия общей домашней страницы.
• “О компании” содержит информацию, описывающую историю, финансовые показатели, цели, миссию и т. д. организации, например “О компании Sony”.
• “Контакты” или “Свяжитесь с нами” содержит контактную информацию, такую как адрес электронной почты, телефон, адрес или местоположение.
• Логотип организации должен появляться в левом верхнем углу каждой страницы. Он также должен быть связан с домашней страницей.
• Окно поиска должно быть доступно на каждой странице сайта. Оно должно быть расположено в дальнем правом углу.
• Каждая страница должна иметь нижний колонтитул, содержащий глобальную навигацию в виде гипертекста.


9. Не удивляйте и не вводите читателя в заблуждение.


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


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


10. Обеспечьте читателя поддержку и обратную связь


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


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


Например, если читатель заполнил форму из 30 полей и нажал на кнопку “Отправить”, сайт должен предоставить следующий тип обратной связи – “Спасибо. Ваша форма успешно заполнена.” Если форма не была успешно заполнена, она должна сказать: “Ваш адрес электронной почты был введен неправильно.”


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


Вывод


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