Контекстное меню

Первое использование всплывающих меню (англ. pop-up menu) произошло в середине 1970-х годов в среде программирования Smalltalk на компьютере Xerox Alto. Изобретателем этого элемента интерфейса считается Дэн Инглс^[4].

Предшественником контекстных меню стала концепция «листов свойств» (англ. property sheets), реализованная в системе Xerox Star в 1981 году^[5]. Они представляли собой контекстно-зависимые диалоговые окна, позволявшие просматривать и изменять атрибуты выбранного объекта.

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

• На компьютерах под управлением Microsoft Windows, macOS или Unix с системой X Window меню вызывается нажатием вспомогательной кнопки мыши (обычно правой), и открывается для области под указателем мыши.
• На системах с мышью с одной кнопкой меню обычно вызываются длительным нажатием основной кнопки (например, на иконках Dock в macOS) либо сочетанием клавиатуры и мыши (например, Ctrl-клик в классическом Mac OS и macOS). Альтернативно в macOS можно активировать мышиную клавиатуру через универсальный доступ; тогда на ноутбуках или компактных клавиатурах сочетание Function+Ctrl+5, либо Ctrl+5 (на цифровой клавиатуре) или Function+Ctrl+i (для ноутбуков).

• В некоторых интерфейсах рядом с пунктами контекстного меню отображаются значки, чтобы ускорить их визуальное распознавание при навигации^[2].
• Контекстные меню могут также содержать верхний ряд пиктограмм для быстрого доступа к наиболее часто используемым опциям^[6].

Особенностью поведения Windows является то, что меню открывается не в момент нажатия правой кнопки мыши, а только после её отпускания; пользователю требуется ещё раз кликнуть (на этот раз левой кнопкой), чтобы выбрать пункт. Это поведение отличается от macOS и большинства других графических интерфейсов.

В Windows 11 применяется концепция «разделённого контекстного меню» (Split Context Menu), предполагающая группировку связанных команд под одним расширяемым пунктом для повышения компактности меню^[7].

• В устройствах с мультитач-интерфейсом, как MacBook или Surface, контекстное меню открывается двойным нажатием или касанием двумя пальцами вместо одного.
• Основными жестами вызова контекстного меню в мобильных операционных системах являются длительное нажатие (Long press) в Android и Haptic Touch (долгое нажатие) в iOS^[8][9].
• Для улучшения обнаруживаемости меню часто используются видимые элементы интерфейса, такие как иконка «три точки» (Kebab menu)^[1].
• В операционной системе Android распознавание объектов и вызов контекстных действий реализуются через библиотеки машинного обучения, такие как ML Kit^[10].

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

Для программного вызова контекстного меню в современных приложениях на базе WinUI 3 используется класс MenuFlyout^[11]. В операционной системе macOS при разработке интерфейсов на SwiftUI для этих целей применяется модификатор .contextMenu^[12].

Следующие оконные менеджеры поддерживают контекстные меню:

• 9wm
• IceWM
• olwm
• Openbox
• Sawfish

В современных дистрибутивах Linux, использующих Wayland, поведение контекстных меню определяется протоколом xdg-shell, в частности его компонентом xdg_popup^[13]. Подходы к дизайну и функциональности контекстных меню различаются в зависимости от среды рабочего стола:

• В GNOME 47 основной упор делается на минимализм и строгое следование руководству по человеческому интерфейсу (HIG)^[14].^[15]
• В KDE Plasma 6.1 меню отличаются гибкостью и широкими возможностями кастомизации, в том числе за счёт использования «Служб» (Service Menus)^[16].^[17]

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

Ещё одним поводом для критики стал редизайн контекстного меню в Windows 11. Стремясь визуально разгрузить интерфейс, разработчики скрыли часть привычных команд за пунктом «Показать дополнительные параметры». Это вызвало недовольство из-за проблемы «лишнего клика»: необходимость совершать дополнительное действие для доступа к часто используемым функциям замедлила рабочие процессы и нарушила устоявшуюся мышечную память пользователей^[18].^[7][19]

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

Современные исследования пользовательского опыта (UX) указывают на необходимость баланса между динамическим позиционированием элементов и сохранением мышечной памяти. Адаптивные меню могут снижать когнитивную нагрузку, показывая только релевантные действия, однако эксперты подчёркивают важность предсказуемости интерфейса. Для сохранения мышечной памяти рекомендуется использовать статичные меню для основных функций (визуально отключая недоступные пункты вместо их скрытия), применяя динамическое отображение только для специфических или контекстно-зависимых опций^[1].^[20][21]

Следующий пример демонстрирует создание контекстного меню на JavaScript^[22]:

<p id="noContextMenu">noContext = document.getElementById('noContextMenu');

noContext.addEventListener('contextmenu', e => {
  e.preventDefault();
});

Атрибут contextmenu признан устаревшим и удалён из спецификаций HTML5^[23]. Современный подход к разработке пользовательских контекстных меню заключается в использовании библиотек компонентов без встроенных стилей (headless UI), таких как Radix UI или Headless UI, с соблюдением паттернов доступности WAI-ARIA^[24].