Разработка эффективных контекстных меню: 10 рекомендаций

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

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

Что такое контекстное меню?

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

Меню «Фрикаделька» (три горизонтальные точки) с опциями «Архив», «Пожаловаться» и «Удалить».
Эти меню являются контекстными, поскольку их содержимое зависит от того, с чем взаимодействует пользователь. Например:

• В контекстном меню публикации могут быть такие опции, как Редактировать, Закрепить или Удалить.
• В контекстном меню фотографии могут быть такие опции, как Поделиться, Скачать или Установить в качестве фона.
• В контекстном меню события в календаре могут быть такие опции, как Удалить, перенести, Дублировать или Пригласить.

Как должны отображаться контекстные меню в интерфейсе?

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

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

Недостатки контекстных меню

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

Кроме того, некоторые контекстные меню вообще не отображались, если соответствующие иконки были:

• Расположены слишком далеко от контента, на который они влияют
• Отображаются слишком маленькими
• Созданы с низкой контрастностью

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

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

Рекомендации по использованию контекстных меню

1. Используйте контекстные меню для второстепенных, некритичных действий

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

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

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

2. Размещайте контекстные меню рядом с контентом, на который они влияют

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

• Рекомендация: Если контекстное меню относится к конкретному элементу (а не ко всему экрану или странице), разместите его значок непосредственно внутри объекта, который оно контролирует или поддерживает, или рядом с ним.
• Не следует: Не размещайте его в интерфейсе случайным образом или в неоднозначном месте, а также далеко от связанного с ним элемента.

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

3. Обеспечьте видимость значков контекстного меню, сделав их достаточно крупными и контрастными

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

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

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

4. Используйте контекстные меню для группировки связанных контекстных действий

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

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

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

5. Обеспечьте единообразное представление и поведение контекстных меню во всем интерфейсе

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

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

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

6. Используйте всплывающие подсказки или метки для уточнения неоднозначных значков контекстного меню

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

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

Почему: Значки переполнения несут мало информации; текстовые подсказки повышают ясность.

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

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

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

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

8. Избегайте использования контекстных меню для одного (или очень немногих) действий.

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

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

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

9. Избегайте значков гамбургера для запуска контекстных меню

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

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

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

10. Сделайте контекстные меню доступными с помощью клавиатуры и программы чтения с экрана

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

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

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

Заключение

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