Заключение

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

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

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

По материалам: crazyegg.com

31-07-2017

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

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

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

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

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

Верхняя панель навигации

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

Вот, например, как выглядят главные страницы мобильной версии сайта BBC и приложения Google Play Apps:

Обратите внимание, что Google Play смог уместить больше элементов в панели навигации, используя «карусель»

Панель вкладок

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

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

В качестве примеров можно привести ленту новостей Facebook на мобильных платформах. Facebook на iPhone (слева) и Android (справа) использует панель вкладок для основной навигации по приложению. Вкладки расположены в соответствии с официальными принципами данных операционных систем: внизу — на iPhone и в верхней части страницы — на Android. При этом навигационные иконки на IOS еще и подписаны:

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

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

Пример — старая версия приложения Weather Channel: здесь панель вкладок реализована так, что не сразу понятно, что каждая вкладка внизу скрывает под собой еще несколько. И тем более сложно угадать, какие именно пункты там содержатся:

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

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

Например, вот как выглядит страница результатов поиска сайта AutoZone:

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

Скрытые меню (сэндвич и другие варианты)

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

Пример использования сэндвич-меню — сайт USA Today. Здесь оно применяется для основных навигационных опций. Открывается нажатием на значок в левом верхнем углу экрана:

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

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

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

Навигационный хаб

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

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

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

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

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

Выводы

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

Суть в том, чтобы выбрать такие решения, недостатки которых меньше всего будут проявляться конкретно на вашем сайте:

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

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

По материалам nngroup.com, image source: Georgie Pawlers 

10-12-2015

Эффективное упрощение навигации, часть 2: Навигационные системы / Хабр

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

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

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

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

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

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

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

Первый и самый базовый навигационный якорь – горизонтальная или вертикальная строка ссылок.

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

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

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

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

Несколько рядов навигации затрудняет доступ к содержимому.

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

Вертикальная навигация может помешать презентации контента на широких экранах.

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

Элементы в выпадающем меню вертикально укладываются в один столбец.

Рекомендация
Если элементы лучше всего объясняются словами и меню не слишком длинное, тогда обычное выпадающее меню – самое простое и эффективное решение.

Пояснение
В сравнении с мега-меню, обычное выпадающее меню имеет следующие преимущества:

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

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

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

Если места на экране мало, то подстройка меню под ориентацию экрана – хорошее решение.

Мега-меню больше и сложнее обычного выпадающего меню.

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

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

• Они загружаются быстрее;
• Умственная нагрузка на пользователей ниже. С отдельной страницей пользователю нужно больше подумать. «Что из этого реклама?» «Где само содержание?» «Где навигация?». Выпадающее меню показывает только навигацию, и оно появляется ближе к курсору или пальцу пользователя.

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

На отдельной странице подкатегории размещаются свободно.

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

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

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

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

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

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

Динамические фильтры часто добавляются к традиционной навигации.

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

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

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

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

Ниже представлены четыре наиболее распространённых типа альтернативной навигации:
1. Поиск
2. Карта сайта
3. Указатель от А до Я
4. Тэги

Поиск – это прямой путь к желаемому контенту в сложной многоуровневой системе навигации.

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

Рекомендация
Представьте поиск в качестве дополнения к традиционной навигации, а не в качестве равноценного или прямого средства навигации.

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

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

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

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

Как бы то ни было, даже если поиск более эффективен в нахождении определённых товаров, он не столь популярен среди пользователей. Пользователи предпочитают традиционную навигацию поиску, даже при поиске определённого продукта. Одна из проблем поиска заключается в том, что со всеми специфическими и часто региональными различиями в названиях продуктов, воспроизвести точное название не всегда просто («Было ли это GS-50 или G-150?»). С помощью динамических фильтров, пользователи могут точно указать характеристики товара, который они ищут, вместо того, чтобы вспоминать модель, тип или номер версии.

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

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

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

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

Указатель от А до Я сортирует весь контент на сайте в алфавитном порядке.

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

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

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

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

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

Карта сайта наглядно показывает навигационную структуру сайта.

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

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

Тэги с пометкой «Больше о».

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

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

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

Хотя многие сайты с упором на контент (content-based websites) заменяют сложные традиционные меню гибридной навигацией. Они, в лучшем случае, широко категорируют тэги, изначально опираясь на другие навигационные модели, вроде внешних и внутренних поисковых систем, лент событий и ссылок социальных медиа. Этот тип системы позволяет пользователям быстро находить нужные статьи, но у пользователей возникают сложности с идентификацией интересующей его статьи среди других. В качестве компенсации некоторые дизайнеры просто заканчивают статью перечнем ключевых слов, например, «Барак Обама», «Демократы», «Республиканцы», «здравоохранение», «прекращение работы». В таком случае пользователи получают доступ к тегу и могут посмотреть связанные интересующие их статьи.

В традиционной навигации пользователь будет идти через категории, которые содержат и согласовываются с ключевыми словами, в которых он заинтересован, например, Новости → Политика → США → Внутренняя политика → Здравоохранение. В таком случае пользователь будет заинтересован в данной статье, потому что она обсуждает здравоохранение США, не обязательно потому что в ней упоминается Барак Обама, Демократы, Республиканцы или прекращение работы. Чтобы увидеть связанные статьи пользователям достаточно будет перейти на родительскую категорию.

Традиционное основанное на уровнях меню – наиболее точный метод навигации.

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

Более сложный вопрос – стоит ли и как реализовать альтернативные навигационные модели в дополнение к традиционным.

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

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

Рекомендации в этой статье кратко изложены ниже.

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

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

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

Базовые модели мобильной навигации / Productivity Inside corporate blog / Habr

В своей статье Ник Бабич, специалист по разработке мобильных приложений и UX дизайну, рассматривает три базовых модели навигации — меню-гамбургер, Tab bar и управление жестами — и описывает их сильные и слабые стороны.

Меню-гамбургер

Пример

Как видите, собственно меню скрыто за иконкой.

Плюсы

Большое количество вариантов навигации. Главное преимущество навигационного меню в том, что с его помощью можно уместить большое количество вариантов на маленьком участке.

Аккуратный дизайн. Освободите место на экране, перенеся все варианты с него на боковое меню.

Минусы

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

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

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

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

Советы

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

Если у вас небольшое количество пунктов меню с высоким приоритетом, подумайте о том, чтобы перенести их во вкладки или на Tab bar.

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

Tab bar

Пример

В Твиттере Tab bar позволяет пользователю переходить непосредственно на экран, связанный с выбранным объектом.

Плюсы

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

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

Минусы

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

Логика и расположение панели вкладок у iOS и Android отличаются. У каждой из этих платформ свои правила и рекомендации, касающиеся UI и юзабилити; их следует принимать во внимание, создавая Tab bar для того или иного устройства. Панель может находиться в верхней (преимущественно на Android) или нижней (преимущественно на iOS) части страницы. Кроме того, на iOS нижняя панель часто используется, чтобы переключаться между экранами приложения. На Android же, напротив, принято отображать вкладки для визуального управления сверху. К тому же на нижнюю панель иногда выводятся действия.

Советы

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

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

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

Управление жестами

Жесты быстро приобрели популярность среди дизайнеров; появилось множество приложений, которые экспериментировали с управлением жестами.

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

Пример

Tinder совершил переворот в своей индустрии при помощи жеста swipe, который стал практически визитной карточкой продукта. У людей это приложение ассоциируется с «проведите вправо» и «проведите влево».

Плюсы

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

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

Минусы

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

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

Советы

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

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

Вывод

Меню и навигация » Страница 6

Многоуровневое выпадающее меню

Многоуровневое выпадающее меню на чистом CSS3 основанное, как принято, на UL — LI. Подменю будут появляться не при наведении курсора на пункт меню, а при клике.

Плагин уведомлений

Плагин для добавления уведомлений в любое ваше меню.

Выпадающий элемент

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

Навигация с выпадающими пунктами

Навигация использующая jQuery плагины hoverIntent, easing и naviDropDown. Эффекты slideUp и slideDown можно установить самим. В демке два примера с горизонтальным и вертикальным вариантом меню.

Роскошная навигация

Сделаем вертикальную навигацию с красивым эффектом при наведении на пункт меню. Цвета, метод easing и продолжительность можно настроить на свой вкус. Реализуется всё jQuery плагиноми flashyNav, hoverIntent и easing.

Размытое меню

Сегодня сделаем простой эффект размытого меню с помощью CSS. Учтем и привередливость нашего старого… другом называть не хочется… Internet Explorer. Так что данный метод работает во всех браузерах.

Меню в стиле lava lamp

Эффект плавного скольжения от одного элемента меню к другому. Одним словом лава ламп.

Меню ввиде листьев

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

Улетное куфонизированное меню

Непугайтесь. Меню использующее шрифты с помощью cufon-yui.js, но с очень классным уплывающим (улетающим) эффектом на всю страницу.

Анимированное навигационное меню

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

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

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

Анимированное меню на CSS или jQuery

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

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

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

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

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

Перво-наперво:

Первичная и вторичная навигация

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

Первичная навигация

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

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

Вторичная навигация

Вторичная навигация — это второй интересный пользователю контент сайта.

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

Какие существуют типы навигации по сайту?

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

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

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

Вертикальное меню навигации более индивидуально и стильно.

Нижняя панель навигации

Нижняя панель навигации обычно используется в мобильном дизайне.

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

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

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

Меню навигации гамбургера

Меню навигации гамбургера представлено тремя горизонтальными линиями и является очень распространенным типом дизайна панели навигации.Тем не менее, эта статья считает, что кривая обучения навигации в Гамбурге действительно высока для пользователей, а пользовательский опыт оставляет желать лучшего. Взгляните: http://mor10.com/hamburger-bad/

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

Связано: 22 лучших примера гамбургерного меню для мобильных приложений и веб-сайтов

Раскрывающееся меню навигации

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

Статья по теме: Как создать раскрывающееся меню при наведении курсора мыши с помощью Mockplus?

Мегаменю

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

Связано: 10 лучших примеров мегаменю для справки в 2019 году

Адаптивная навигация по сетке

Статья по теме: 20 лучших бесплатных адаптивных веб-шаблонов HTML5 в 2018 году

Статья по теме: 8 лучших бесплатных адаптивных CSS-шаблонов веб-сайтов для создания вашего веб-сайта

Прокрутка меню навигации

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

Лучшие практики дизайна навигации по сайту

Прозрачный

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

Точный описательный текст

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

Оптимизация для SEO

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

Добавить поле поиска

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

Единый стиль

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

Меньше значит больше

Не размещайте более 7 элементов в навигации по сайту, это может отвлечь внимание пользователя.

Адаптивный дизайн

Убедитесь, что все, что у вас есть на вашем веб-сайте, отражено и в мобильной версии. Фактически, большая часть меню навигации веб-сайта будет отображаться в гамбургер-меню на мобильном телефоне.

Лучшие практики дизайна навигации для веб-сайтов электронной коммерции

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

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

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

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

Статья по теме: 15 лучших бесплатных шаблонов веб-сайтов электронной коммерции на 2018 год

8 лучших примеров навигации по сайту для пользователей

Гарри

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

Никсон

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

Погг

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

Смеющаяся корова

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

MAC

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

Kiehl’s

Kiehl’s — это бренд средств по уходу за кожей. В мегаменю можно показать больше продуктов.

Squarespace

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

Краткое описание

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

Креативные примеры дизайна навигации по сайту

Адриен Лоран

Анонимный гамбургер

Waaark

Уракавашота

Dataveyes

Как создать сложную панель навигации?

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

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

3 лучших ресурса кода дизайна навигационной панели

https://codemyui.com/tag/navigation-menu/

https://www.w3schools.com/css/css_navbar.asp

https: // medium.com / level-up-web / 20-отзывчивый-navi …

Заключение

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

8 типов современных меню навигации для веб-сайтов

Сегодня из-за расширенного использования Интернета есть различные предположения о меню навигации.Навигация — это основной ключевой элемент пользовательского интерфейса. Мы даже не можем представить себе веб-сайт без меню навигации, поскольку всегда существует группа ссылок, которая находится где-то на веб-странице. В зависимости от того, какой тип пользовательского интерфейса используется, даже некоторые скучные и устаревшие меню могут быть нам полезны. Тем не менее, мы можем отметить, что меняющиеся тенденции диктуют правила, поэтому всегда будет место для любимых навигационных меню. Здесь, в TemplateToaster CSS menu maker, я предлагаю вам 8 лучших современных навигационных меню или решений.

1. Интерактивная навигация

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

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

2. Боковая панель статической навигации

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

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

3. Навигация на веб-сайтах с параллаксом

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

4. Гамбургер-меню

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

5. Мультимедийное меню

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

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

6. Центрированное расположение Навигация

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

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

7. Огромные выпадающие окна

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

8. Нижний колонтитул

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

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

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

Добавление меню в область навигации — Business Central

• 01.10.2020
• 3 минуты на чтение

В этой статье

Область навигации отображается в верхней части окна Dynamics 365 Business Central и содержит несколько разделов, которые позволяют пользователям быстро перемещаться и выполнять действия в Dynamics 365 Business Central.В клиенте область навигации разделена на три отдельные области: меню навигации, область навигации и область действий. Для иллюстрации, которая идентифицирует различные области в ролевом центре, см. Проектирование ролевых центров. В AL эти области определяются элементом управления area () , как описано в следующих разделах.

Добавление в меню навигации

Область навигации верхнего уровня называется меню навигации. Меню навигации содержит один или несколько пунктов корневого меню, которые раскрываются для отображения набора ссылок на страницы и других объектов, таких как отчеты, XMLPorts и кодовые модули.Эти ссылки определяются элементами управления action () . Вы также можете сгруппировать элементы управления action () в подменю. Это позволяет вам создать логическую иерархию, соответствующую потребностям роли пользователя. Страницы, на которые указывают ссылки в меню навигации, откроются в области содержимого Ролевого центра.

Примечание

Клиент Dynamics NAV, подключенный к Business Central, не поддерживает подменю в меню навигации.

Меню навигации определяется с помощью элемента управления области (Разделы) в коде страницы.

Пример

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

  pageextension 50120 ExtendNavigationArea расширяет «Ролевой центр обработчика заказов»
{

    действия
    {
        addlast (разделы)
        {
            группа («Мои клиенты»)
            {
                действие («Список банковских счетов клиента»)
                {
                    RunObject = страница «Список банковских счетов клиентов»;
                    ApplicationArea = Все;
                }
                 действие («Записи в бухгалтерской книге клиентов»)
                {
                    RunObject = страница «Записи в бухгалтерской книге клиентов»;
                    ApplicationArea = Все;
                }

                // Создает подменю
                группа («Торговые документы»)
                {
                    действие («Сущность торгового документа»)
                    {
                        ApplicationArea = Все;
                        RunObject = page «Сущность торгового документа»;
                    }
                    действие («Сущность строки торгового документа»)
                    {
                        ApplicationArea = Все;
                        RunObject = page «Объект строки торгового документа»;
                    }
                }
            }
        }
    }
}
  

Вы также можете включить отображение страниц и отчетов в поиске Dynamics 365 Business Central для быстрой поддержки навигации.Для получения дополнительной информации см. Добавление страниц и отчетов в Tell Me.

Добавление на панель навигации

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

Панель навигации определяется с помощью элемента управления области (внедрение) в коде страницы.

Пример

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

  ...
addlast (встраивание)
{
    действие («Циклы продаж»)
    {
        RunObject = страница «Циклы продаж»;
        ApplicationArea = Все;
    }
}
  

Добавление к действиям

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

Действия можно определить с помощью трех различных элементов управления area () .

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

Пример

  ...
addlast (Создание)
{
    действие («Журнал продаж»)
    {
        ApplicationArea = Все;
        RunObject = страница «Журнал продаж»;
    }
}
  

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

Пример

  ...
addlast (обработка)
{
    группа (Документы)
    {
        действие («Сущность торгового документа»)
        {
            ApplicationArea = Все;
            RunObject = page «Сущность торгового документа»;
        }
        действие («Сущность строки торгового документа»)
        {
            ApplicationArea = Все;
            RunObject = page «Объект строки торгового документа»;
        }
    }
}
  

Действия в области (Отчетность) Элемент управления появятся последними в области действий и отображаются со значком отчета по умолчанию.Этот элемент управления предназначен для нацеливания на объекты отчета, и в следующем примере открывается отчет Customer Sales Statistics .

Пример

  ...
addlast (Отчетность)
{
    действие («Статистика клиентов»)
    {
        ApplicationArea = Все;
        RunObject = отчет «Статистика продаж клиентов»;
    }
}
  

См. Также

Среда разработки AL
Объект расширения страницы
Обзор действий
Добавление страниц и отчетов для сообщения

Как настроить меню навигации в AMP

Шаги для создания меню:

Вы можете создавать меню в WordPress, посетив Внешний вид -> Меню в админке WordPress.

3 . Нажмите на создать новое меню.

4. Введите имя для своего меню в поле «Имя меню» и затем нажмите кнопку «Создать меню».

6. Затем вам нужно нажать «Страницы» и «Просмотреть все». Вы можете выбрать поля для страниц, которые вы хотите в своем меню, и нажать кнопку «Добавить в меню».

7: Перейдите в «Внешний вид» -> «Меню» и создайте новое меню, например «Меню AMP».

Теперь добавьте элементы, которые вы хотите отображать в меню AMP.

В AMP есть три флажка, в которые можно добавить меню навигации. Один - это верхний колонтитул, а другой - область нижнего колонтитула.

Заголовок

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

Нижний колонтитул

Если вы хотите добавить меню навигации в нижний колонтитул, установите флажок AMP Footer Menu для этого конкретного меню и нажмите кнопку сохранения меню.

Примечание: Вы также можете добавить меню одновременно в верхний и нижний колонтитулы.

Альтернативное меню AMP - под заголовком

Если вы хотите добавить альтернативное меню AMP под заголовком, установите флажок Альтернативное меню AMP - под заголовком для этого конкретного меню и нажмите кнопку сохранения меню.

Установка Swift Theme

Выполните следующие простые шаги.

1. С панели инструментов мы переходим в левую часть строки меню, переходим к панели опций AMP -> Нажмите на Design Option -> Themes , как показано на скриншоте ниже.

2. Дошло до Вариант дизайна -> Темы -> Селектор тем вариант. Когда вы нажмете на Themes Selector, будет показан список . выберите тему Swift .

3. При выборе темы swift эта связанная с темой опция отображается в заголовке . Перейдите на панель опций AMP -> Дизайн -> Заголовок.

Дизайн заголовка:

Существует три типа дизайна заголовка. Какой тип дизайна заголовка вы хотите выбрать, вы можете выбрать Тип заголовка.

1. Тип заголовка 1 (по умолчанию)
2. Тип заголовка 2
3. Тип заголовка 3

Перейти на панель опций AMP -> Дизайн -> Заголовок -> Дизайн заголовка

Дизайн меню навигации:

Это тип меню по умолчанию в дизайне меню навигации.

1. Перейдите на панель опций AMP -> Дизайн -> Заголовок -> Дизайн заголовка

Поиск по меню:

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

Авторское право меню:

Если вы включите опцию «Авторское право меню», оно будет отображаться на веб-сайте.

Перейдите на панель опций AMP -> Дизайн -> Заголовок -> Дизайн заголовка -> Тип заголовка

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

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

• B Тип заказа: Какой тип границы вы хотите, просто выберите тип границы.

Вывод будет выглядеть следующим образом:

Альтернативное меню:

Если вы активируете альтернативное меню, оно будет отображаться на веб-сайте.

Вывод опции альтернативного меню

• Заполнение альтернативного меню : Вы можете добавить отступ для альтернативного меню.
• Текст альтернативного меню: С помощью этой опции вы можете добавить цвет текста для альтернативного меню.
• Фон альтернативного меню: С помощью этой опции вы можете добавить цвет фона для альтернативного меню.

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

Настройки заголовка:

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

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

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

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

Дополнительные параметры заголовка:

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

Результат Swift Theme:

Настройка темы Design Three

1. Сначала перейдите в WordPress Admin Area -> Панель опций AMP -> Design -> Темы

2. Перейти к Вариант дизайна -> Темы -> Селектор тем вариант. Когда вы нажмете на Themes Selector, будет показан список .выберите тему Design Three .

3. Выбранные вами темы Design Three , эта связанная с темой опция отображается в заголовке . Перейдите на панель опций AMP -> Дизайн -> Заголовок.

Дизайн меню навигации:

Меню навигации: После включения этой опции в заголовке меню будет создано в левой части.

Настройки заголовка:

Кнопка вызова: После включения этой опции в разделе заголовка будет создан значок вызова.

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

Сделать заголовок неприлипчивым: Включение этого параметра удалит липкую головку из дизайна.


Поиск: Если вы включите эту опцию, опция поиска будет отображаться в разделе заголовка.

Фон заголовка: В этом варианте вы можете выбрать цвет фона для заголовка в третьем дизайне.

Элементы заголовка: В этом варианте вы можете выбрать цвет текста для заголовка в третьем дизайне.

Результат работы темы Design Three:

Настройка темы Design Two

1. Сначала перейдите в WordPress Admin Area -> Панель опций AMP -> Design - > Темы

2. Перейти к Вариант дизайна -> Темы -> Селектор тем вариант. Когда вы нажмете на Themes Selector, будет показан список .выберите тему Design Two .

3. Вы выбираете тему Design Two , эта связанная с темой опция отображается в заголовке . Перейдите на панель опций AMP -> Дизайн -> Заголовок.

Дизайн меню навигации:

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

Вывод меню навигации:

Настройки заголовка:

Кнопка вызова: После включения этой опции в разделе заголовка будет создан значок вызова.

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

Поиск: Если вы включите эту опцию, опция поиска будет отображаться в разделе заголовка.

Результат Design Two Theme:

Настройка Design One Theme

1. Сначала перейдите в WordPress Admin Area -> Панель опций AMP -> Design -> Темы

2. Перейдите к Вариант дизайна -> Темы -> Селектор тем вариант. Когда вы нажмете на Themes Selector, будет показан список . выберите тему Design One .

3. Если вы выбрали тему Design One , эта связанная с темой опция отображается в заголовке . Перейдите на панель опций AMP -> Дизайн -> Заголовок.

Дизайн меню навигации:

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

Вывод меню навигации:

Настройки заголовка:

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

Поиск: Если вы включите эту опцию, опция поиска будет отображаться в разделе заголовка.

Результат Design One Theme:

Вот и все!

Надеемся, вам это помогло.Если у вас есть какие-либо отзывы или вопросы, поделитесь ими в разделе комментариев ниже.

 {% show_breadcrumb 2 "myapp / breadcrumb.html "%}
 

 {% show_breadcrumb 0 "menu / breadcrumb.html" 0%}
 

 

    {% block breadcrumb%}
    {% show_breadcrumb%}
    {% endblock%}

 

 {% block breadcrumb%}
  домой  
 Моя текущая страница 
{% endblock%}
 

 {{node.get_absolute_url}}