Ключевой принцип навигации, или «скажите, где вы находитесь»?

Posted on by riasevastopol

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

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

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

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

  • Навигация с клавиатуры как оптимизация юзабилити сайта

Гости не всегда приходят через парадную дверь

Поисковые совокупности индексируют большая часть страниц вашего ресурса, и смогут выдать по запросу фактически любую из них. Другими словами, вы не понимаете, в какую из десятков «дверей» войдет визитёр — но в любом случае, на пороге он обязан заметить что-то, помогающее прийти к целевому действию. Более того, кроме того попавшие на домашнюю страницу люди смогут нуждаться в навигационных подсказках касаемо предстоящего продвижения.

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

Словом, визитёры с одного взора должны определять тему и цель как всего ресурса, так и отдельной страницы.

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

Обычные подходы

1. Логотипы и брендинг

Логотип компании может скоро донести сущность содержимого на ресурсе. Другие элементы брендинга, такие как товарные марки, неповторимая цветовая палитра, подписи и другое, смогут быть использованы для узнавания страниц и объединения «сайта» визитёрами ресурса. Так люди смогут осознать, что попали в том направлении, куда ожидали.

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

2. Трансформации в навигации

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

3. Рубрикация

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

4. Наименование окна (страницы)

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

5. URL

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

6. «Хлебные крошки», либо навигационная цепочка

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

7. Контекстные подсказки

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

8. Визуальные трансформации дизайна

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

9. Шаги

Списки шагов, либо другие последовательные перечни задач, в большинстве случаев, нумеруются либо именуются по фактору прогресса. Другими словами, «Ход 1» при заполнении формы разумеется дальше от целевого действия чем «Ход 7». Эти индикаторы в большинстве случаев отображаются горизонтально над полем действия, либо вертикально слева.

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

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:

//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). Лучше показывать даты либо диапазоны дат на страницах, поскольку информация, актуальная продолжительное время, возможно лучше осознана в контексте собственной эры.

Сайт New York Public Library меняет оформление выбранного пункта меню от тёмного к красному фону. Цветные кнопки показывают на цель страницы, а серый элемент — на контент. Заголовок в верхнем левом углу, вместе с перечисленными качествами, формирует целостное восприятие страницы.

В этом случае проблематично продемонстрировать изменение навигационной панели на нижних уровнях информационной архитектуры сайта. Вот где понадобятся «хлебные крошки». European Space Agency подает сильные сигналы по всем областям.

Одно легко сбивает с толку — фото, сделанное в 2014 году, подается в новости за 2015 год. Быть может, из-за даты выпуска

  • Создание мобильной навигации независимо от гамбургер-меню

Тест эффективности индикаторов расположения

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

Исходя из этого им тяжело поставить себя на место пользователя и посмотреть на макет свежими глазами.

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

Как проверить эффективность индикаторов положения

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

  • Спросите: «Представьте, что вы только что перешли на эту страницу. В каком месте сайта вы находитесь?».
  • По окончании ответа (верного либо неверного) спросите: «Из-за чего вы так решили?».
  • В случае если люди не уверены, спросите: «Что вам хотелось бы заметить на странице, дабы удостовериться в расположении?».
  • Если они все еще сомневаются, спросите: «Что вы в большинстве случаев делаете, дабы проверить собственный положение на ресурсе?».

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

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

  • Из-за чего навигация неудобна для визитёров вашего сайта?

Вместо заключения

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

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

Высоких вам конверсий!

По данным: nngroup.com

Случайные статьи:

Разведопрос: Михаил Васильевич Попов о профсоюзном движении


Подборка похожих статей:

riasevastopol

More Posts