Проектируем контекстные меню: 10 рекомендаций

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

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

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

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

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

ChatGPT 4: Доступ к контекстному меню чата осуществляется нажатием на значок «⋯»; оно включает действия «Архивировать», «Пожаловаться» и «Удалить».

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

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

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

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

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

Значки «⋮» и «⋯» легко узнаваемы

В ходе исследования, которое я проводил для книги «Digital Icons that Work», участникам показывали интерфейсы с различными значками, в том числе значками «⋮» и «⋯», и просили описать и предсказать их функции.

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

Как пояснил один из пользователей, описывая функциональность значка:

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

Такие иконки – это хороший выбор для отображения контекстных меню в интерфейсах.

Компромиссы контекстных меню

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

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

располагались слишком далеко от контента, к которому они относились;
отображались слишком мелко;
имели низкую контрастность.

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

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

❌ Приложение Trulia для iOS: в ходе нашего исследования некоторые участники перепутали значок «⋯» с каруселью и ожидали, что нажатие на него позволит им просмотреть дополнительные фотографии объекта недвижимости. На самом деле при нажатии на значок отображались два действия, связанные с постом: «Поделиться» и «Скрыть». (Примечание: эти два действия можно было бы легко вывести за пределы меню, что позволило бы вообще обойтись без значка.)

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

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

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

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

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

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

❌ AT&T.com: Контекстное меню в чате содержит функцию «Завершить чат», которая является критически важным и основным действием для любого пользователя, завершающего рабочий процесс в чате. Функция «Завершить чат» должна отображаться на первом уровне, в идеале в виде значка «x» в правом верхнем углу – широко используемого стандарта.

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

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

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

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

❌ Ramp.com: Непонятно, к чему относится крошечный значок «⋮» в правом нижнем углу. Поскольку он находится далеко от какого-либо конкретного элемента (и, следовательно, не кажется связанным с чем-то конкретным), он, скорее всего, останется незамеченным. Поскольку отображаемые действия связаны с самой транзакцией, этот значок следует разместить выше на странице, рядом с другими действиями, связанными с транзакцией.

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

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

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

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

❌ Ramp.com: Возможно, вы помните этот пример из рекомендации № 2: «Размещайте контекстные меню рядом с контентом, на который они влияют». Иконку «⋮» в правом нижнем углу легко пропустить, поскольку она маленькая, малоконтрастная и находится далеко от элемента, который она поддерживает.

✅ Мобильное приложение Rippling для iOS: рамка вокруг значка «⋯» повышает его заметность и дает полезные подсказки о том, что на значок можно нажать. Три черные точки на белом фоне обеспечивают достаточный контраст.

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

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

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

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

✅ Приложение Slack для macOS: пользователь может обоснованно предположить, что скрытые пункты меню будут связаны с первоначально отображаемыми действиями – в данном случае с действиями, которые можно выполнить над сообщением в рамках данной ветки. Действия, относящиеся конкретно к ветке, такие как добавление в избранное или перемещение всей переписки, должны быть (и находятся) в другом месте.

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

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

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

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

❌ Google.com (1 из 2): Пользователи никогда не могут быть полностью уверены в том, что их ждет, когда они нажимают на значок «⋮». Нажатие на значок рядом со спонсируемым объявлением открывает модальное всплывающее окно «Мой рекламный центр». Полезные действия, такие как «Нравится», «Заблокировать» и «Пожаловаться», скорее всего, никогда не будут обнаружены из-за их скрытого расположения и огромного количества контента, отображаемого в неожиданно появившемся всплывающем окне.

❌ Google.com (2 из 2): Нажатие на значок «⋮» для неспонсируемого результата открывает другой набор информации, элементов и расположение вторичного контента: боковую панель с дополнительными действиями и информацией об источнике. Опять же, полезные действия, такие как «Поделиться» и «Сохранить», вряд ли будут замечены. Поведение, связанное с открытием боковой панели, скорее всего, также будет неожиданным и шокирующим; пользователи ожидают, что этот значок раскроет краткий и понятный набор действий, а не полноценное объяснение того, как работает поиск.

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

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

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

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

❌ Patagonia.com: Когда-то главные изображения сайта можно было развернуть, нажав на значок «⋯». (Почему? Кто знает.) Описание значка при наведении курсора было «Многоточие». Очевидно, что более подходящей надписью было бы «Развернуть изображение». Но, конечно, еще лучшим подходом было бы использовать другой значок для отображения контекстных опций или действий (см. рекомендацию № 7: «Используйте значки контекстного меню для отображения действий, а не для развертывания контента»).

✅ Приложение Notion для iOS: при наведении курсора на значок в правом верхнем углу появляется описательная надпись, которая значительно повышает информационную наглядность: «Стиль», «Экспорт» и т. д. Эта всплывающая подсказка меняется контекстуально по всему приложению в зависимости от содержимого контекстного меню.

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

Не используйте значки «⋮» или «⋯» для раскрытия скрытого текста или изображений.

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

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

❌ Etsy.com: надпись «Подробнее» лучше подходит для развертывания контента, чем значок «⋯».

✅ Google.com: надпись «Еще» дает более четкий сигнал о действии, чем значок «⋯», для раскрытия полной версии отзыва. Это правильный шаг, поскольку еще не так давно в отзывах Google для этого действия использовался именно значок «⋯». К сожалению, значок «⋮» в правом верхнем углу по-прежнему раскрывает только одно действие – «Пожаловаться», что нарушает правило № 8: «Избегайте использования контекстных меню для одного (или очень небольшого числа) действий».

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

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

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

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

❌ Weather.com: При нажатии на значок «⋮» он превращается в черную кнопку с надписью «Удалить». Такой подход не экономит место, поскольку функция «Удалить», если бы она была видна изначально, заняла бы примерно столько же места на экране, сколько и значок «⋮».

✅ Pinterest.com: Вместо того чтобы скрывать важные действия в контекстном меню, Pinterest выводит их на первый план – в данном случае это действия «Сохранить» (кнопка вверху справа) и «Поделиться» (значок внизу справа), которые появляются, когда пользователь наводит курсор на пин.

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

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

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

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

❌ Bananarepublic.com: в окне чата сайта используется значок «гамбургер», содержащий одно контекстное действие: «Сохранить транскрипт». Значок меню «гамбургер» следует оставлять для размещения глобальной навигации или основных элементов сайта. Этот пример также нарушает рекомендацию № 8: «Избегайте использования контекстных меню для одного (или очень небольшого числа) действия (действий)».

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

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

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

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

Заключение

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

Больше классных проектов в uprock.design

Источник

NN/g