Энтони Ценг написал о боковой панели меню.

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

In English. #sidebar #menu

Юрий Марьенко написал об основных типах навигации на сайтах.

— Статичное меню в начале страницы. Если на странице содержимого много, пригодится кнопка возврата наверх, чтобы удобно было возвращаться к меню;
— Фиксированное меню — всегда остаётся на виду при скроле страницы. С ним в любой момент можно перейти в другой раздел сайта, но оно может мешать изучать содержимое страницы;
— Сочетание большого статичного и небольшого фиксированного меню — фиксированный вариант отображается при скроле, не занимает много места по вертикали и даёт быстрый доступ к самым важным разделам;
— Бургерное меню (статичное или фиксированное) — по нажатию на иконку бургера отображает список разделов. Хорошо работает на мобильных сайтах за счёт компактности. Часто используется на популярных сайтах (с большими каталогами), так что паттерн должен быть хорошо знаком пользователям;
— Многоуровневое меню — отображает основные разделы (4–7 пунктов), по нажатию на которые можно увидеть подменю с большим количеством подразделов. Подходит компаниям с несколькими направлениями бизнеса, узкоспециализированным интернет-магазинам;
— Меню помогает посетителям быстро понять, о чём сайт.

#navigation #menu

Кейт Каплан написала о контекстном меню.

— Контекстное меню включает набор действий, связанных с конкретным элементом или областью интерфейса. Оно помогает уменьшить визуальный шум и скрыть второстепенные действия;
— На десктопе оно может отображаться по нажатию правой кнопки мыши, но чаще всего используют иконку с тремя горизонтальными (митбол) или вертикальными (кебаб) кружками;
— Пользователи нормально их воспринимают. Но не используйте иконку бургера: она ассоциируется с основной навигацией;
— Минусы: по его внешнему виду не догадаться, какие действия доступны внутри. Если иконка мелкая, малоконтрастная и находится далеко от связанного объекта, её могут не заметить;
— Поэтому не размещайте в этом меню важные действия;
— Три кружка могут принять за индикатор прогресса или карусели (если они расположены рядом с картинкой, как в примере из статьи);
— Кнопку меню отображайте всегда, а не только при наведении курсора на связанный с ним элемент. Размещайте её рядом с этим элементом;
— Рядом можно разместить другие кнопки управления элементом, чтобы намекнуть пользователю на содержимое контекстного меню;
— Будьте последовательны: используйте иконку митбола или кебаба в своём интерфейсе только для контекстного меню. Даже для контрола раскрытия скрытой части текста не используйте «…»;
— Добавьте тултип, например с текстом «Действия с публикацией» или перечнем действий, как в Ноушене: «Style, export, and more…»;
— Если в меню мало действий (или вообще одно), попробуйте обойтись без контекстного меню.

In English. #menu