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

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

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

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

Традиционной навигации Menus

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

1. Меню bar
2. Регулярный раскрывающемся menu
3. Мега-menu
4. Отдельное page
5. Dynamic filters

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

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

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

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

Меню Bar

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

²
Первая и самая основная навигация якорь — горизонтальная или вертикальная полоса ссылки.( Большая preview ³ , источник изображения: верх: Sharify ⁴ , внизу: Арбор Restaurant ⁵ )

Recommendation

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

Explanation

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

Problems

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

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

⁶
Несколько строк навигации сделать его более трудным для доступа к содержимому.( Большая preview ⁷ , источник изображения: Bay Street Biergarten ^{11 8} )

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

⁹
Вертикальная навигация может помешать представления информации на широких экранах.( Большая preview ¹⁰ , адаптировано из Bay Street Biergarten ^{11 8} )

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

Регулярный Раскрывающийся Menus

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

¹²
выпадающее меню вертикально стеки свои записи в одном столбце.( Большая preview ¹³ , источник изображения: Blurb ¹⁴ )

Recommendation

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

Explanation

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

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

Problems

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

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

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

¹⁵
Если пространство экрана имеет решающее значение, регулировки меню для ориентации экрана является хорошим решением.( Большая preview ¹⁶ , источник изображения: солнцезащитных Hut ¹⁷ )

Мега-Menus

Особый тип раскрывающемся меню является так называемый мега-menu ^{Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров}