TGViewer
UX Notes UX Notes @uxnotes · 23.7K subscribers
Post #1806 2.27K
Кейт Каплан написала о контекстном меню.

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

In English. #menu
uprock.webflow.io Проектируем контекстные меню: 10 рекомендаций — читайте на UPROCK 10 практических рекомендаций по проектированию контекстных меню, которые помогают уменьшить визуальный шум, не жертвуя удобством и понятностью интерфейса.. читайте полезные статьи о дизайне в блоге UPROCK
  • 👍 1
  • 👎 1
More from @uxnotes
  1. Sep 17, 2026Анастасия Ефанова написала, как сокращение количества пушей в 2,5 раза повысило конверсию…
  2. Sep 15, 2026Татьяна Бублик поделилась своей системой организации файлов в Фигме. — Все макеты продукта…
  3. Sep 13, 2026Стас Мельников написал, как с помощью CSS-свойств улучшить дизайн веб-страниц. — Чтобы, на…
  4. Sep 8, 2026UX Feedback запускает «Разговоры» — новый формат встреч онлайн. Несколько команд коротко р…
  5. Sep 6, 2026Илья Бирман написал о сценариях. — Они предшествуют проектированию, позволяют понять, каки…
  6. Sep 5, 2026Снежана Чепа написала об ошибках в работе с персональными данными на российских сайтах, ко…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →