Содержание

Эффективная навигация по сайту

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

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

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

Символы

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

Треугольник

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

Качественная навигация по сайту, пример: Меню разворачивается в соответствии с направлением, указанным значком треугольника, а пространство на странице используется эффективно.

+ (Плюс)

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

На сайте Nike используются сразу два навигационных символа – значок треугольника и «+». При этом треугольник указывает направление раскрытия для основного меню, в то время как «+» используется сугубо в динамическом меню.

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

Гамбургер

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

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

Последовательность в использовании символов

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

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

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

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

Целевые области

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

Читаемость текста

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

При хорошей читаемости и высоком контрасте надписей, расположенных в центре страницы («Laptops», «Desktops» и другие), ссылки в меню не отличаются столь же хорошей читаемостью. Это можно считать существенным недостатком, снижающим эффективность всей навигации сайта.

Размер

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

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

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

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

Последовательное расположение

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

Рассогласование целевых областей при использовании вложенного меню

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

 

 

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

Взаимодействие пользователя с интерфейсом меню

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

Курсор

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

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

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

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

Скрытая зона на сайте Amazon

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

  1. Пользователь не знает о том, что для его удобства на сайте есть подсказки. Он видит их только после наведения курсора.
  2. Почти всегда всплывающие подсказки в той или иной степени закрывают соседние элементы, которые пользователь мог хотеть видеть.
  3. Необходимо точно подбирать время демонстрации подсказки. Как и в случае с курсором, покидающим целевую область, мы сталкиваемся с дилеммой – если подсказка быстро исчезает, то пользователь может не успеть ознакомиться с ней, а если подсказка демонстрируется слишком долго, то пользователю придется потратить массу времени на то, чтобы изучить каждый элемент меню.
  4. Затрудняется сравнение различных пунктов меню.
  5. Этот метод бессмыслен, если пользователь просматривает сайт с помощью сенсорного устройства.
  6. Всплывающие подсказки на сайте Mini.

Клики

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

Скроллинг

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

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

Уровни

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

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

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

Однако наличие множества вложенных подразделов позволило сделать меню, ориентированные на мобильные устройства, в целом более лаконичными и компактными:

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

На сайте Sony Pictures при нажатии по каждому из пунктов демонстрируется отдельный экран с соответствующим контентом.

Мега-меню

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

Пример мега-меню, перегруженного категориями.

В этом отношении более предпочтительно «прятать» категории в отдельные вкладки – в таком случае мега-меню становится гораздо более удобным и удачным с точки зрения UX:

Динамические фильтры

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

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

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

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

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

Размещение фильтров на мобильных версиях сайтов

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

Некоторые UX-дизайнеры предпочитают использовать для демонстрации фильтров поп-апы, которые позволяют пользователю оставаться на одной и той же странице:

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

Мега-сайты и их особенности

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

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

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

 

Источник: rusability.ru

HTML5 | Создание панели навигации

Создание панели навигации

Последнее обновление: 27.04.2016

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

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

Вертикальное меню

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


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Панель навигации в HTML5</title>
		<style>
			ul. nav{
				margin-left: 0px;
				padding-left: 0px;
				list-style: none;
			}
			ul.nav a {
				display: block;
				width: 7em;
				padding:10px;
				background-color: #f4f4f4;
				border-top: 1px dashed #333;
				border-right: 1px dashed #333;
				border-left: 5px solid #333;
				text-decoration: none;
				color: #333;
			}
			ul.nav li:last-child a {
				border-bottom: 1px dashed #333;
			}
		</style>
    </head>
    <body>
		<ul>
			<li><a href="#">Главная</a></li>
			<li><a href="#">Контакты</a></li>
			<li><a href="#">О сайте</a></li>
		</ul>
    </body>
</html>

После установки свойства display: block мы можем определить у блока ссылки ширину, отступы и т.д.

Горизонтальное меню

Для создания горизонтального меню есть два метода. Первый заключается в применении свойства float и создании из ссылок плавающих элементов,
которые обтекают друг друга с слева. И второй способ состоит в создании строки ссылок с помощью установки свойства display: inline-block.

Использование float

Алгоритм создания панели навигации с помощью float разделяется на два этапа. На первом этапе у элемента li, в который заключена
ссылка, устанавливается float: left;. Это позволяет расположить все элементы списка в ряд при достаточной ширине, когда правый элемент списка
обтекает левый элемент списка.

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


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Панель навигации в HTML5</title>
		<style>
			ul. nav{
				margin-left: 0px;
				padding-left: 0px;
				list-style: none;
			}
			.nav li { 
				float: left;
			}
			ul.nav a {
				display: block;
				width: 5em;
				padding:10px;
				margin: 0 5px;
				background-color: #f4f4f4;
				border: 1px dashed #333;
				text-decoration: none;
				color: #333;
				text-align: center;
			}
			ul.nav a:hover{
				background-color: #333;
				color: #f4f4f4;
			}
		</style>
    </head>
    <body>
		<ul>
			<li><a href="#">Главная</a></li>
			<li><a href="#">Блог</a></li>
			<li><a href="#">Контакты</a></li>
			<li><a href="#">О сайте</a></li>
		</ul>
    </body>
</html>
inline и inline-block

Для создания горизонтальной панели навигации нам надо сделать каждый элемент li строчным, то есть установить
для него display: inline. После этого для элемента ссылки, которая располагается в элементе li, мы можем
установить display: inline-block:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Панель навигации в HTML5</title>
		<style>
			ul.nav{
				margin-left: 0px;
				padding-left: 0px;
				list-style: none;
			}
			.nav li { 
				display: inline; 
			}
			ul.nav a {
				display: inline-block;
				width: 5em;
				padding:10px;
				background-color: #f4f4f4;
				border: 1px dashed #333;
				text-decoration: none;
				color: #333;
				text-align: center;
			}
			ul.nav a:hover{
				background-color: #333;
				color: #f4f4f4;
			}
		</style>
    </head>
    <body>
		<ul>
			<li><a href="#">Главная</a></li>
			<li><a href="#">Блог</a></li>
			<li><a href="#">Контакты</a></li>
			<li><a href="#">О сайте</a></li>
		</ul>
    </body>
</html>

Инструкция по работе с сайтом. Навигация по сайту

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

Все материалы сайта делятся на три типа:

  • Публикация. Это одна статья какой-либо рубрики нашего сайта. Например, Федеральный закон № 323-ФЗ, или памятка «О профилактике инсульта». Рубрика — это тема, объединяющая публикации в тематическую группу, например, рубрика «новости», рубрика «памятки», рубрика «федеральные законы» и т.д. Отдельно взятые публикации в меню не включаются.
  • Список публикаций, сформированный по какому-либо критерию (по ключевым словам поиска, публикации рубрики, публикации за месяц и т.д.). Типичным примером является список последних новостей. Списки публикаций всех рубрик включены в главное меню.
  • Страница. Страницы создаются для хранения некой информации, доступ к которой необходимо задать из меню, виджетов или других страниц. Они не входят в рубрики

Большинство пунктов меню «кликабельны» (исключение составляют некоторые пункты меню, которые созданы исключительно для объединения нескольких подпунктов в одну группу, но не привязаны к какой-либо странице сайта): при «щелчке» мышкой на любом из пунктов откроется соответствующий раздел сайта. Некоторые пункты меню для более удобной навигации содержат подпункты, которые появляются при наведении курсора мыши (навести курсор, но не щелкать!). Кроме того, некоторые подпункты содержат собственные подпункты, которые можно увидеть так же, наведя курсор мыши.

Подпункты меню сконфигурированы по тематикам:

  • Все, что касается больницы, информация, реквизиты, руководство и т.д., объединено в раздел и пункт меню «О больнице». Для удобства вынесены в отдельный пункт меню только контакты.
  • Информация, полезная для пациентов, например информация о вакцинации и диспансеризации, раздел вопросов и ответов, страница записи на прием к врачам и т.д. объединена в раздел и пункт меню «Для пациентов».
  • Все публикации, такие как благодарности пациентов, программа госгарантий, федеральные законы, приказы правительства и прочая нормативно-правовая документация объединены в раздел и пункт меню «Публикации». Исключение составляют только публикации рубрики «Памятки и справочники», которые включены в раздел «Для пациентов».

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

Отдельные пункты меню отображают список рубрики «Новости», страницы вакансий и контактов. Так же в пункт «Прочее» объединены ссылки на карту сайта, фотоальбом и форум больницы и сайт реабилитационной АРТ-студии.

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

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

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

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

Навигация по сайту

Чтобы совершить первое знакомство с театральной-школой «Артист!» — прогуляйтесь по нашему сайту.

Мы постарались сделать его наиболее информативным, а также привлекли дополнительные полезные ресурсы.

Для вашего удобства сейчас вместе с вами совершим небольшую экскурсию!

Театральная школа «Артист!» предлагает следующие курсы:

  • Актерское мастерство для Жизни и Сцены
  • Актерское мастерство для подростков

С нашими профессиональными педагогами вы можете познакомиться здесь.

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

На наиболее популярные вопросы мы ответили в соответствующем разделе.

Социальные сети

Для вашего удобства наша школа остается всегда рядом с вами в социальных сетях!

Для того, чтобы быть всегда ВКонтакте — вступайте в нашу группу! Тут всегда вы найдете свежие новости, фотографии и полезную информация из жизни театральной школы.

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

Подписывайтесь и читайте основные новости на Twitter.

И, конечно же, проникнуться атмосферой нашей театральной школы-студии, сидя у себя дома, вы можете, посмотрев видеоролики на нашем основном канале Youtube и найти кое-что интересное в видеоархиве Youtube (видеоархив).

Ждем вас в театральной школе «Артист!«Мы с радостью представляем вам наших благодарных учеников в разделе Отзывы. Перед ними также стоял нелегкий выбор между всевозможными курсами актерского мастерства, но эти талантливые люди пришли именно к нам!

Немного теоретической информации из области театрального искусства можете получить в разделе Статьи.

Мы надеемся, что наша небольшая экскурсия по сайту и по ресурсам театральной школы-студии «Артист!» поможет сделать правильный выбор!

Ждем вас в нашей театральной школе!

P.S. Если вы уже готовы записаться на пробное занятие или на курс актерского мастерства — просто перейдите по этой ссылке.

Навигационная структура web сайта

Описание презентации по отдельным слайдам:

1 слайд

Описание слайда:

Когда вам в голову пришла хорошая идея, действуйте незамедлительно (Билл Гейтс)

2 слайд

Описание слайда:

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

3 слайд

Описание слайда:

Тема: Навигационная структура сайта

4 слайд

Описание слайда:

Сформировать навыки выбора структуры для навигации сайта

5 слайд

Описание слайда:

Ключевые слова Линейная структура Древовидная структура Решетчатая структура

6 слайд

Описание слайда:

Ситуация Ваш офис по созданию сайта поступил заказ подобрать меню навигации для сайта Сайт навигации

7 слайд

Описание слайда:

План Линейная структура Древовидная структура Решетчатая структура

8 слайд

Описание слайда:

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

9 слайд

Описание слайда:

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

10 слайд

Описание слайда:

ЛИНЕЙНАЯ СТРУКТУРА С АЛЬТЕРНАТИВАМИ И ВАРИАНТАМИ. Эта структура отличается от предыдущей лишь тем, что пользователю предоставляется дополнительная возможность выбирать между двумя ветками. Однако веб-мастеру здесь облегчается задача направления посетителей в определенное русло. Такая структура подходит для сайтов, где требуется регистрация с переходом на следующую страницу. Пример

11 слайд

Описание слайда:

Пример сайта http://torrent-soft.net/oc/torrent-windows_xp/

12 слайд

Описание слайда:

ЛИНЕЙНАЯ СТРУКТУРА С ОТВЕТВЛЕНИЯМИ. Является наилучшим способом для расширения сайта без его глобальных изменений. Структуре характерны тупиковые ответвления, по которым пользователь может при желании перейти и потом снова вернуться в основной поток страниц. Пример

13 слайд

Описание слайда:

ДРЕВОВИДНАЯ СТРУКТУРА. Самый универсальный способ размещения страниц и подходящий практически для всех типов сайтов. Такой принцип организации страниц заставляет посетителя постоянно делать выбор, продвигаясь к цели.

14 слайд

Описание слайда:

Вопросы для закрепления Что такое навигация по сайту? Для чего необходимо навигация по сайту? Какая структура подойдет для сайта визитки? Древовидная структура?

15 слайд

Описание слайда:

Тема: Каскадные таблицы стилей http://www.webmasterwiki.ru/CSS

16 слайд

Описание слайда:

http://rutracker.org/forum/viewtopic. php?t=4764167 — Создание Интернет-магазина на PHP и MySQL Дом. задание Скачать

17 слайд

Описание слайда:

http://lifeexample.ru/php-primeryi-skriptov/pishem-internet-magazin-na-php.html — Пишем интернет магазин на php | php скрипт интернет магазина

Курс повышения квалификации

Курс профессиональной переподготовки

Учитель математики и информатики

Курс повышения квалификации

Найдите материал к любому уроку,
указав свой предмет (категорию), класс, учебник и тему:

Выберите категорию:
Все категорииАлгебраАнглийский языкАстрономияБиологияВнеурочная деятельностьВсеобщая историяГеографияГеометрияДиректору, завучуДоп. образованиеДошкольное образованиеЕстествознаниеИЗО, МХКИностранные языкиИнформатикаИстория РоссииКлассному руководителюКоррекционное обучениеЛитератураЛитературное чтениеЛогопедия, ДефектологияМатематикаМузыкаНачальные классыНемецкий языкОБЖОбществознаниеОкружающий мирПриродоведениеРелигиоведениеРодная литератураРодной языкРусский языкСоциальному педагогуТехнологияУкраинский языкФизикаФизическая культураФилософияФранцузский языкХимияЧерчениеШкольному психологуЭкологияДругое

Выберите класс:
Все классыДошкольники1 класс2 класс3 класс4 класс5 класс6 класс7 класс8 класс9 класс10 класс11 класс

Выберите учебник:
Все учебники

Выберите тему:
Все темы

также Вы можете выбрать тип материала:

Общая информация

Номер материала:

ДБ-1608124

Похожие материалы

Вам будут интересны эти курсы:

Оставьте свой комментарий

Навигация по сайту

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

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

Типы навигации по сайту

Существуют разные типы навигации по сайту:

  • Иерархическая навигация по сайту

    Структура навигации сайта построена от общего к частному.Это обеспечивает ясный и простой путь ко всем веб-страницам из любой точки веб-сайта.

  • Глобальная навигация по сайту

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

  • Локальная навигация по сайту

    Локальная навигация — это ссылки с текстом ваших веб-страниц, ведущие на другие страницы внутри веб-сайта.

Стили навигации по сайту

Стили навигации по веб-сайту относятся к тому, как представлена ​​система навигации.

  • Текстовые ссылки

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

  • Панировочные сухари

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

  • Панель навигации

    Панель навигации — это совокупность сгруппированных вместе навигационных ссылок веб-сайта.Панель навигации может быть горизонтальной или вертикальной.

  • Вкладка навигации

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

  • Карта сайта

    Карта сайта — это страница вашего веб-сайта, на которой перечислены все разделы и веб-страницы (если их не так много), которые содержатся на этом веб-сайте. Это отличается от Google Sitemaps и Yahoo Sitemaps.

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

  • Раскрывающееся меню

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

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

  • Всплывающее меню

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

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

  • Именованные анкеры

    Именованные якоря — это тип ссылок, которые направляют вас прямо к месту на текущей странице или на другой веб-странице.

Использование навигации по веб-сайту

Для эффективной работы системе навигации по сайту необходимо:

  • Чтобы быть последовательным на всем сайте.

    Посетители сайта узнают, через повторение, как перемещаться по сайту.

  • Основные навигационные ссылки хранятся вместе.

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

  • Уменьшен беспорядок за счет группировки ссылок в разделы.

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

  • Минимальное нажатие, чтобы попасть туда, куда хочет попасть посетитель.

    Если количество кликов на веб-страницу, которую желает посетить посетитель, минимально, это приводит к лучшему восприятию.

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

Создание системы навигации веб-сайта на этапе планирования веб-сайта повлияет на общий дизайн макета веб-страницы и поможет разработать общий план веб-сайта.

Дополнительная литература

Информационный бюллетень Якоба Нильсена от 31 марта 2008 г. указывает:

«В возрасте от 25 до 60 лет способность людей использовать веб-сайты снижается на 0,8% в год — в основном из-за того, что они проводят больше времени на странице, но также из-за трудностей навигации. … Проблема в том, что с возрастом у людей возникает больше проблем с навигацией по веб-сайтам… »

Снижение веб-производительности для пользователей среднего возраста (оповещение Якоба Нильсена)

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

Web Pages That Suck и Son of Web Pages That Suck Винсент Фландерс и соавторы — еще один хороший набор книг для чтения. Г-н Фландерс придумал фразу «бесплотная навигация» для навигационных систем, которые оставляют посетителей веб-сайта невежественными в отношении того, для чего предназначен каждый символ в навигации веб-сайта.

Дальтонизм в Интернете написал человек с дальтонизмом. В статье он указывает:

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

Дальтонизм в Интернете

Важность архитектуры ссылок — часть серии статей блога Google Webmaster Central по ссылкам, октябрь 2008 г.

«… Архитектура ссылок — метод внутренних ссылок на вашем сайте — является важным шагом в дизайне сайта, если вы хотите, чтобы ваш сайт индексировался поисковыми системами…».

Важность архитектуры ссылок.

Авторские права © 2005-2020 Web Page Mistakes.
Все права защищены.

Что дальше?

Следите за нашими новыми статьями через RSS,
Следуйте за нами на Twitter
и отправьте в свою любимую социальную сеть:

Эта запись была последний раз изменена
6 января 2013 в
12:21 и подана под
Дизайн сайта. Вы можете следить за любыми ответами на эту запись через
RSS 2.0 канал.
Вы можете перейти к концу и оставить отзыв. Пинг в настоящее время
не допускается.

8 инновационных способов оптимизации навигации по сайту

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

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

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

8 Рекомендации по навигации по веб-сайту

1. Оптимизируйте навигацию своего мобильного веб-сайта

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

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

Ferrum Pipe имеет очень эффективное мобильное меню, которое, хотя и очень простое, сообщает пользователям: 1) что они продают и 2) как с ними связаться (см. Пример ниже). Это действительно так просто. Любую несущественную информацию, которую вы, возможно, захотите предоставить пользователям, можно (и нужно) переместить в нижний колонтитул вашего сайта.

2. Заменить раскрывающееся меню

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

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

3. Сделайте поиск по сайту беспроблемным

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

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

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

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

4. Обеспечьте контекст

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

Например, вкладка «Категория» на Awwwards не просто отображает различные категории — она ​​также сообщает вам, сколько записей содержится в каждой из них.

Хотите просматривать веб-сайты по оттенку? Каждый выбор в меню «Цвет» имеет удобную цветовую кодировку.

Swiss Gear использует интересный подход к разработке вложенного меню навигации. Для категорий продуктов верхнего уровня они включают небольшое изображение каждой подкатегории, чтобы предоставить некоторый контекст относительно того, что вы увидите в этой подкатегории. Например, в подкатегории «Коллекция 1900» (см. Ниже) они предоставляют небольшое изображение, чтобы дать покупателю образец того, как выглядит эта линейка продуктов.

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

5. Создание отдельных меню для разных аудиторий

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

У Muse, например, две аудитории: ищущие работу и работодатели. Первые четыре ссылки в верхней панели навигации предназначены для ищущих работу, а пятая — перенаправляет компании в их собственный раздел сайта. Ссылка серого, а не белого цвета, что указывает на то, что она отличается от других.

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

6. Добавьте мегафутер

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

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

Взгляните на нижний колонтитул Бакстера, чтобы получить представление.

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

7. Стратегический выбор порядка меню

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

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

Чтобы привлечь посетителей к наиболее важным ссылкам, разместите их в начале и в конце меню.

Digital Kitchen добавила в панель навигации «Клиенты» и «Контакты». Это был мудрый выбор: сначала агентство строит социальное доказательство с помощью списка предыдущих клиентов, а затем направляет посетителей на контакт.

8. Перечислить дополнительные варианты выбора

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

Меню

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

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

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

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

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

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

Об авторе: Джон Макдональд — основатель и президент The Good, компании по оптимизации коэффициента конверсии, которая добилась результатов для некоторых из крупнейших онлайн-брендов, включая Adobe, Nike, Xerox, Verizon, Intel и других.Джон регулярно добавляет материалы по оптимизации конверсии в такие публикации, как Entrepreneur и Inc. Он знает, как побудить посетителей к действию.

Планирование и реализация навигации по сайту SharePoint — SharePoint в Microsoft 365

  • Читать 9 минут

В этой статье

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

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

В этой статье:

Навигация по сайту SharePoint

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

Связь, навигация по сайту

Навигация по сайту группы

Концентратор навигации

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

Почему важна навигация

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

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

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

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

Основы навигации по сайту и страницам

Планирование навигации по сайту и страницам требует размышлений о:

  • Организация — Группировка по логическим и аналогичным намерениям
  • Маркировка — Написание четких этикеток, которые сразу поймут ваши пользователи
  • Удобство использования — Возможность пользователей легко перемещаться от начала до конца
  • Возможность поиска — Пользователи могут быстро найти то, что им нужно

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

Следовательно, организация и маркировка ваших навигационных ссылок критически важна для удобства использования и поиска. Если 70% посетителей приходят на ваши сайты в ожидании просмотра информации, удобство использования вашего сайта зависит от создания удобного просмотра. Дополнительные сведения см. В разделе «Участники информационной архитектуры в SharePoint

».

Организация

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

  • Услуги
  • Продукты
  • Деятельность
  • Аудитории (если ваши зрители могут четко определить аудиторию, к которой они принадлежат, например, ученик или учитель)
  • Сферы или функции

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

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

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

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

Меню навигации в SharePoint

Существует два типа стилей меню навигации для сайтов SharePoint — каскадное и мегаменю. Сайты групп поддерживают только стиль каскадного меню, но сайты связи поддерживают как мегаменю, так и каскадные меню. Центры, будь то сайты групп или сайты для общения, добавляют на сайт дополнительное мегаменю. Мега-меню недоступны на внутренних сайтах.Узнайте о том, как настроить навигацию на вашем сайте SharePoint.

Каскадное меню

Мега меню

Ссылки меню

Есть два типа навигационных ссылок: метка и ссылка. Ярлык — это просто ссылка на категорию — она ​​позволяет группировать связанные ссылки, но не является самой ссылкой. Ссылка требует гиперссылки и представляет собой «интерактивный» интерфейс для пользователя. У ярлыка всегда должна быть хотя бы одна ссылка внизу.

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

Меню

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

Символы меню

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

Выберите смайлик, относящийся к теме ярлыка. Вы можете искать смайлики на emojipedia.org или использовать клавишу Windows с точкой (.). Скопируйте смайлик и добавьте его на этикетку при редактировании навигации.

Ссылка на страницы, а не на отдельные документы

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

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

Практика прогрессивного раскрытия информации

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

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

  • Где я?
  • Что я могу здесь сделать?
  • Куда я могу пойти дальше?

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

Управление навигационными ожиданиями

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

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

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

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