Меню выезжающее слева: Выдвигающееся боковое меню на чистом CSS – Dobrovoimaster

Leave a Comment / Разное / By /

Содержание

html — Как заставить css меню открываться справа?

Сверстал код менюшки:

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
body {
  font-family: "Lato", sans-serif;
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
.sidenav a:hover {
  color: #f1f1f1;
}
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
.position-span {
  float: right;
  margin-top: -100px;
}
@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}
<div>
  <a href="javascript:void(0)">&times;</a>
  <a href="#">О нас</a>
  <a href="#">Сервис</a>
  <a href="#">Клиенты</a>
  <a href="#">Контакты</a>
</div>
<h3>Какая-то надпись</h3>
<p>Какой-то текст.
 
 </p>
<span>&#9776;</span>

Как заставить её раскрываться справа-налево, а не слева-направо? Появление реализовано элементарно через ширину, в js — присваивается значение width 250 при клике на кнопку. При клике на закрытие width=0.

  • html
  • css

Если я правильно понял, то тебе просто надо в .sidenav

left: 0; заменить на right: 0; И можно добавить туда же overflow:hidden; white-space: nowrap;, чтобы буквы не скакали при открытии и закрытии меню

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

UX пособие:меню и навигация — ScriptCraft

Глава 2: Меню и навигация

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

Рисунок №1 — Рекомендации для меню

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

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

https://www.boots.com/

https://www.zumiez.com/

https://www.victorianplumbing.co.uk/

Данные сайты имеют:

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

Рисунок №2 — Панель меню

  1. Телефонные номера в меню или возможность позвонить/написать(рис. 3)

https://casper.com/home/

https://www.arrow.com/

Рисунок №3 — Возможности для связи в меню

  1. Кнопка для поиска розничных точек(рис. 4).

https://www.boots.com/

https://m.sephora.com/

Рисунок №4 — Кнопка поиска розничных точек

  1. Динамическое меню, содержащее в себе все категории/подкатегории, которые работают по принципу аккордеона (сворачиваются/разворачиваются) и помещаются на один экран устройства(рис. 5).

https://www.dobell.co.uk/

https://www.farfetch. com/ua/

https://m.sephora.com/

Рисунок №5 — Динамическое меню

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

https://www.dobell.co.uk/

https://www.net-a-porter.com/ua/en/

https://www.patagonia.com/home/

Рисунок №6 — Пост продажные сервисы для пользователя

  1. Бонус: фиксированное меню, остается видимым/невидимым при скролле страницы(рис. 7).

https://www.moo.com/eu/

https://www.lyst.com/

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

Рисунок №7 — Фиксированное меню

  1. Бонус: навигация внизу страницы(рис. 8).

https://wordery.com/

https://www.glossier.com/

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

Рисунок №8 — Навигация снизу

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

А теперь возьмем несколько примеров наших сайтов и опишем их юзабилити(рис. 9).

Рисунок №9 — Примеры меню украинских сайтов

https://m.rozetka.com.ua/

Меню гамбургер, выезжает слева, содержит в себе:

  1. глобальную кнопку перехода в каталог;
  2. пост продажные ссылки(акции, скидки, корзина, желания, регистрация и пр.
  3. меню умещается на один экран

https://www.zolotoyvek.ua/ru/

Меню гамбургер, выезжает слева, содержит в себе:

  1. сверху весь каталог продукции
  2. пост продажные сервисы для клиентов с переходом на полный список
  3. разместили строку поиска в меню
  4. телефон для связи
  5. смена языка сайта
  6. меню длинное, поэтому легко прокручивается

https://comfy. ua/dnepropetrovsk/

Меню гамбургер, выезжает слева, содержит в себе:

  1. смена города и языка сверху
  2. каталог товаров по принципу аккордеон, иерархическая структура каталога
  3. сервисы для клиентов
  4. телефон для связи

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

Продолжение читайте в третьей главе Поиск…

Автор Ирина Старченко
практикующий веб разработчик
и seo-специалист

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 0 / 5. Количество оценок: 0

Оценок пока нет. Поставьте оценку первым.

Боковая панель W3.CSS

❮ Предыдущая Далее ❯

Вертикальные панели навигации W3.

CSS

С боковой навигацией у вас есть несколько вариантов:

  • Всегда отображать панель навигации слева от содержимого страницы
  • Использовать складную «полностью автоматическую» боковую навигацию
  • Открыть панель навигации над левой частью содержимого страницы
  • Открыть панель навигации по всему содержимому страницы
  • Сдвиньте содержимое страницы вправо при открытии панели навигации
  • Отображать панель навигации справа, а не слева

Всегда отображать боковую панель

Пример


  Ссылка 1
  Ссылка 2
  Ссылка 3
< /div>


… содержимое страницы …

Попробуйте сами »

Открытие боковой панели навигации по части содержимого

Пример

function w3_open() {
  document. getElementById(«mySidebar»).style.display = «block»;
}

function w3_close() {
 document.getElementById(«mySidebar»).style.display = «none»;
}

Попробуйте сами »

Открытие боковой панели навигации по содержимому

Пример

function w3_open() {
  document.getElementById(«mySidebar»).style.width = «100%»;
  document.getElementById(«mySidebar»).style.display = «заблокировать»;
}

function w3_close() {
  document.getElementById(«mySidebar»).style.display = «none»;
}

Попробуйте сами »

Складная адаптивная боковая навигация

Пример


  
  Ссылка 1
  Ссылка 2
  Ссылка 3


 
 

   

Моя страница


 


  document. getElementById("mySidebar").style.display = "заблокировать";
}

функция w3_close() {
document.getElementById("mySidebar").style.display = "нет";
}

Попробуйте сами »

Сдвиньте содержимое страницы вправо

Пример

function w3_open() {
 document.getElementById("main").style.marginLeft = "25%";
  document.getElementById("mySidebar").style.width = "25%";
  document.getElementById("mySidebar").style.display = "заблокировать";
 document.getElementById("openNav").style.display = 'нет';
}

function w3_close() {
 document.getElementById("main").style.marginLeft = "0%";
  document.getElementById("mySidebar").style.display = "нет";
 document.getElementById("openNav").style.display = "встроенный блок";

}

Попробуйте сами »

Правосторонняя навигация

Пример


  
Меню

  Ссылка 1
  Ссылка 2
  Ссылка 3


. .. содержимое страницы ...

Попробуйте сами »

Правосторонняя складная навигация

Пример

<дел id="моя боковая панель">
<кнопка
 >Закрыть ×
  Ссылка 1
  Ссылка 2
  Ссылка 3



 
  <дел >
   

Моя страница


 

Попробуйте сами »

Навигация слева и справа

Пример

Попробуйте сами »

Стиль боковой навигации

Добавьте класс w3- color на боковую панель w3, чтобы изменить цвет фона. Если вам нужна активная/текущая ссылка, чтобы пользователь знал, какая страницу, на которой он находится, также добавьте класс w3- color в одну из ссылок:

Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4


Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4


Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4


Пример


Попробуйте сами »

Боковая навигация с рамкой

Используйте класс w3-border , чтобы добавить рамку вокруг боковой навигации

3 Ссылка:

3 Ссылка 2 Ссылка 3

Пример

Попробуйте сами »

Добавьте класс w3-border-bottom к ссылкам для создания разделителей ссылок:

Ссылка 1 Ссылка 2 Ссылка 3

Пример

<дел>
Ссылка 1
  Ссылка 2
  Ссылка 3

Попробуйте сами »

Используйте класс w3-card для отображения боковой навигации в виде карточки:

Ссылка 1 Ссылка 2 Ссылка 3

Пример

Попробуйте сами »

Совет: Когда раскрывающееся меню открыто, ссылка раскрывающегося списка получает серый цвет фона, что указывает на то, что оно активно. Чтобы переопределить это, добавьте класс w3-hover-color для обоих «раскрывающихся»

и .

Боковая панель с аккордеоном

Пример


Ссылка 1

 

Ссылка
    Ссылка

  <дел>

   
 

  Ссылка 2
  Ссылка 3

Попробуй сам "

Анимированная боковая панель

Используйте любой из классов W3-Animate- для исчезновения, увеличения или скольжения в боковой навигации:

Пример

Попробуйте его самостоятельно »

7.

Класс w3-overlay можно использовать для создания эффекта наложения при открытии боковой панели. Класс w3-overlay добавляет черный фон с 50% непрозрачность для «содержимого страницы» — этот эффект «подсветит» боковую навигацию.

Пример



 
  Ссылка 1
  Ссылка 2
  Ссылка 3



<кнопка >☰


Наложение боковой панели


 

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



Попробуйте сами »

Содержимое боковой панели

Добавьте все, что вам нравится внутри боковой навигации:

Пример

<дел>
  <дел class="w3-container w3-dark-grey">
   

Меню

 

  Главная
  Проекты
    8
 
  О нас
  Контакт

 


X
   

Лорем ipsum box...


 

 

Попробуйте сами »

❮ Предыдущая Далее ❯


Масштабируемость, отзывчивость и простота сканирования

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

Автор: Пейдж Лаубхаймер

  • Стр. Лаубхаймер

на 2021-05-16 16 мая 2021 г.

Темы:

Навигация, информационная архитектура, визуальный дизайн, гамбургер, размер экрана

  • Навигация Навигация,
  • Информационная архитектура,
  • Визуальный дизайн

Поделиться этой статьей:

Каждый раз, когда я говорю о широких иерархиях в нашем курсе UX Conference по информационной архитектуре, возникают два вопроса:

  1. Можно ли иметь больше 7-9категории верхнего уровня в глобальной навигации? (Осторожно, спойлер: все в порядке, вам просто нужно правильно спланировать это. )
  2. Если мы используем большое количество категорий верхнего уровня, они не помещаются на горизонтальной панели навигации. Куда им идти?

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

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

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

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

Преимущества вертикальной навигации

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

  1. Определенные категории повышают вероятность поиска и снижают стоимость взаимодействия.

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

  1. Вертикальная навигация предлагает пространство для роста.

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

  1. Вертикальная навигация обеспечивает более эффективное сканирование, чем горизонтальная навигация.

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

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

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

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

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

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

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

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

Вертикальная навигация требует больше места

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

Nua Bikes старого и нового дизайна. (Слева) Предыдущий дизайн Nua Bikes использовал вертикальную левостороннюю навигацию с соотношением контента и хрома приблизительно 5:1. (Справа) редизайн сайта, перенесенный на горизонтальную панель навигации с соотношением контента и хрома 12:1 на экране того же размера. Хотя новый дизайн предоставляет гораздо меньше категорий верхнего уровня в видимой навигации, он занимает гораздо меньше места для контента.

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

IBM Watson Studio: на очень большом дисплее влияние вертикальной навигации на соотношение контента и хрома незначительно, поскольку сайт добавляет пробелы (или, в данном случае, пустое темное фоновое пространство) слева и справа.

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

Рекомендации по использованию вертикальной навигации

  1. Разместите вертикальную навигацию слева и используйте заметный дизайн.

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

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

Дизайн-система Audi использовала высокую контрастность и темный фон, чтобы обеспечить заметную левостороннюю навигацию и читаемость ссылок.
  1. Не дублируйте меню как по вертикали, так и по горизонтали.

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

BDO Advisory использовала два дублирующих интерфейса глобальной навигации: горизонтальную полосу и меню-гамбургер в правой части экрана. Эти два меню содержат одни и те же элементы, но гамбургер-меню также включает элементы из служебной навигации сайта (Местоположения, События, Новости, и т. д.). Это дублирование является ненужным и сбивает с толку.
  1. Не прячьте навигацию за значками.

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

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

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

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

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

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