Дизайнеры делают навигационные структуры, чтобы помочь людям двигаться через веб-сайты, но хорошей структуры и функций недостаточно. Навигация должна показать не только туда, куда вы можете пойти, но и где вы сейчас находитесь. Почти каждая страница сайта может быть первой, которую посетители увидят, поэтому очень важно передать достаточный контекст, чтобы люди могли сразу приступить к своим целям.
Посетители не всегда используют парадную дверь
В мире, где поисковые системы могут отправить посетителей на любую страницу вашего сайта, важно, чтобы был сигнал, который поможет пользователям прийти к целевому действию. Даже когда посетители приходят через домашнюю страницу, они могут нуждаться в навигации того, как они пересекают сайт.
Соответствующие сигналы убеждают людей, что они идут к тому, что им нужно. Как и на железнодорожной станции, показатели веб-местоположения могут представлять собой сочетание цветового кодирования, освещения, знаков, стрелок, пути и имен ориентиров. Когда люди путаются, обеспокоены или потеряны, знаки и сигналы часто помогают им быть более уверенными в том, как действовать.
Словом, посетители с одного взгляда должны определять тему и цель, как всего ресурса, так и отдельной страницы. В Интернете, местоположение обычно указывается за счет изменения внешнего вида навигационного меню или значков. При совершении покупок и заполнения форм, как правило, используют многоступенчатую последовательность с указанием названия этапа.
Типичные механизмы
Логотип и брендинг: Представление логотипа показывает владение контентом. Логотипы должны быть связаны с домашней страницей. Другие элементы брендинга, такие как: товарные знаки, цветовые палитры, а также подписи шрифтов могут быть использованы, чтобы вызвать признание установленного доверия организации. Обычно это усилие сосредоточено в верхнем левом углу веб-сайтов, которое, скорее всего, будет первым на экране, независимо от размера устройства.
Изменения в навигации: Ссылка или графический элемент (закладка, кнопки, этикетки и т.д.), связанные с навигацией становятся визуально более заметным, когда пользователь выбирает эту тему. В свою очередь, выбранная тема изменяется за счет выделенной окраски или компенсируя элемент в пространстве.
Рубрики: выравнивание по левому краю заголовков помогает читателям, которые читают слева направо, быстро сканировать элементы в поисках нужного. Несколько уровней заголовков могут быть выставлены сразу, чтобы показать больше контекста и информации о компании.
Название окна (страницы): HTML названия отображаются в верхней части каждого окна или вкладки, в результатах поисковых систем, RSS-каналы, агрегаторы новостей, закладки и списки истории. Описательные, уникальные названия помогают указать собственность, сведения об организации, а также отдельное содержимое страницы.
URL: Хорошо подобранные, легко считываемые веб-адреса имеют важное значение для обмена, доверия, признания и отзыва. Веб-адрес на странице может быть использован, чтобы выявить некоторое из информационной архитектуры, чтобы помочь контекстуализировать содержание.
Навигационная цепочка: Качественная информационная иерархия характеризуется четкой, интуитивно считываемой последовательностью. Как и URL-адреса, структура навигационной цепочки может помочь раскрыть поблизости контент, но более очевидным образом.
Контекстные подсказки: Дата, теги, значки и другие символы и знаки могут быть использованы для размещения информации в нужном контексте, как во времени, так и в информационной архитектуре сайта.
Визуальные изменения дизайна: Цветовое кодирование, изменения в области брендинга, а также другие видимые различия могут сигнализировать об изменении местоположения. Цвет кодирования (где преобладают изменения цвета в зависимости от раздела сайта) обычно находятся на веб-сайтах с резко различными типами контента. Например, журналы, новостные сайты, а также многие организации, использующие цветные и бренд изменения для дифференцирования среди функций, отделов и семейств продуктов.
Шаги: Перечни шагов или другие последовательные потоки задач, как правило, именуются и нумеруются по показателям прогресса. Эти показатели шага обычно работают горизонтально над страницами приложения или отображаются в виде вертикального списка слева. Они показывают, всю последовательность шагов и шаг, на котором вы сейчас находитесь, чтобы правильно помочь установить ожидания.
BBC News указывает на местоположение через: 1) логотип и брендинг; 2) изменение внешнего вида меню; 3) заголовки; 4) контекстные подсказки.
Ресурс OpenCourseWare использует больше подобных элементов: 1) брендинг; 2) изменение навигационной панели; 3) «хлебные крошки»; 4) заголовки, названия страниц и URL. Но здесь упущен важный аспект, а именно — контекст времени
Названия страниц и URL-адреса также полезны для отображения контекста информации и местоположения:
Заголовок страницы Массачусетского технологического института:
Readings | Introduction to Technical Communication: Explorations in Scientific and Technical Writing | Comparative Media Studies/Writing | MIT OpenCourseWare
А вот его URL:
http://ocw.mit.edu/courses/comparative-media-studies-writing/21w-732-5-introduction-to-technical-communication-explorations-in-scientific-and-technical-writing-fall-2006/readings/
На OpenCourseWare, даты публикации учебника (1995-2003), но только URL обеспечивает намеренную реплику о годе курса (2006). Лучше всего, показать видимые даты или диапазоны дат на страницах, поэтому информация, которая выживает в течение долгого времени, может быть понята в контексте своей эпохи. Авторские права на колонтитуле страницы (для всего веб-сайта) указывают на то 2001-2015, но это слишком широкий диапазон для технического или научного содержания.
Сайт New York Public Library меняет оформление выбранного пункта меню от черного к красному фону. Цветные кнопки указывают на цель страницы, а серый элемент — на контент. Заголовок в верхнем левом углу, вместе с перечисленными аспектами, формирует целостное восприятие страницы
В данном случае проблематично показать изменение навигационной панели на нижних уровнях информационной архитектуры сайта. Вот где пригодятся «хлебные крошки». European Space Agency подает сильные сигналы по всем областям. Одно слегка сбивает с толку — фото, сделанное в 2014 году, подается в новости за 2015 год. Возможно, из-за даты выпуска
Тест эффективности индикаторов местоположения
В дизайне многих ресурсов используют индикаторы местоположения, которые являются недостаточно заметными. Дизайнеры замечают все об их конструкции и имеют прочную ментальную модель структуры сайта. Они знают, как обойти сайт и они не нуждаются в ориентации, так что им трудно увидеть дизайн, так, как его видят другие. Посетителям сайта, с другой стороны, сайт может быть в новинку или же они могут использовать его редко, так, что все там является новым и потенциально интересным. По этой причине, сигнал, который может показаться недовольно очевидным для дизайнера часто совсем не заметный для посетителя. Люди не замечают тонкие изменения.
Существующие веб-сайты могут проверить местоположение в любое время сигнализации.
Для нового веб-дизайна, тестирование для ориентации местоположения лучше всего делать, когда ваш сайт визуального дизайна находится в стадии высокой точности. Показать реальное содержание со всеми типами отвлекающих факторов, которые, как предполагается, существуют, когда веб-сайт живет, особенно рекламой, анимацией и фотографиями — потому, что эти элементы дизайна, скорее всего, влияют на то, что люди обращают внимание.
Как проверить эффективность индикаторов местоположения
Покажите людям различные страницы на разных уровнях вашего сайта, по одному за раз без перехода к ним.
- Спросите: «Представьте, что вы только что прибыли на эту веб-страницу. Где вы сейчас на сайте?»
- После ответа (правильного или неправильного), спросите: «Почему вы так решили?»
- Если люди говорят, что они не уверены, спросите: «Что бы вы ожидали увидеть здесь, чтобы это помогло вам знать, где вы находитесь?»
- Если они все еще не уверены, где они находятся, спросите: «Что бы вы обычно делаете для того, чтобы это выяснить?»
Избегайте навигационных тупиков. Иногда пользователь может вбить неверный адрес или перейти по несуществующей ссылке. В этом случае покажите людям, куда они пытались перейти, оставляя URL в адресной строке. Если была допущена опечатка, пользователь сможет увидеть это и исправить. Для всех остальных предоставьте полезные навигационные решения, ведущие на другие разделы сайта — как это сделано у Telegraph
Только тестирование с пользователями может сказать вам точно, но если аналитика показывает, что многие люди бродят по ресурсу беспорядочно, не приближаясь к целевым действиям — это значит, что существует проблема с информационной архитектурой. Визуальные сигналы определения местоположения не могут быть достаточно сильным или иметь хорошее расположение; навигационные метки, заголовки могут быть недостаточными или вводят в заблуждение; или все вместе взятое.
