UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Подробное руководство по созданию интуитивно понятных контекстных меню
Редакція
Редакція

Опубліковано

Подробное руководство по созданию интуитивно понятных контекстных меню

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

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

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

Основы

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

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

Исторические примеры контекстных меню от Windows 95 до macOS 12 и Height.app 2021.

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

Правильно располагайте меню

В наши дни есть два основных способа открыть контекстное меню: щелчок правой кнопкой мыши или нажатие кнопки.

Вот пример открытия контекстного меню в нашем приложении:

Большинство контекстных меню открываются по щелчку правой кнопкой мыши.

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

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

При необходимости переместите меню

Меню должны автоматически позиционироваться в зависимости от доступного места.

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

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

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

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

Меню следует переориентировать по мере изменения окружающего его пространства.

Добавьте навигацию с помощью клавиатуры

Type-to-select

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

Хотя это и кажется очевидным, type-to-select – это функция, о которой часто забывают в новых приложениях. Наиболее распространенной ее реализацией является автоматический выбор первого пункта меню, соответствующего набранному префиксу. В Height мы создаем решение, использующее сортировщик совпадений, прощающий ошибки и опечатки, потому что, быстро набирая текст, люди могут пропустить клавишу.

Навигация по меню с помощью клавиатуры

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

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

Сочетание клавиш Действие
Enter Выбрать действие
Выбрать следующий пункт
Выделить предыдущий пункт
Закрыть подменю
Открыть подменю
Esc Закрыть меню

Дайте пользователю подсказки

Обратная связь по клику

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

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

Анатомия меню

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

  • Разделите пункты меню на основе их сходства или отношения друг к другу.

Image description
Анализ анатомии контекстного меню по типу действия.

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

Простые и быстрые переходы

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

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

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

Интуитивно понятный доступ к подменю

Существует интересная проблема с подменю: как получить к ним доступ с помощью курсора до того, как они исчезнут? В частности, вы увидите эту проблему при перемещении мыши по диагонали в сторону подменю.

Наивный подход к реализации подменю. В этом примере попытка быстрого доступа к подменю «Sortby» приводит к разочарованию.

Существуют разные решения этой проблемы:

Задержка

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

Применение задержки к подменю.

К сожалению, у этого решения есть две проблемы:

  • Немного неудобно открывать подменю, когда выбран другой пункт меню. Например, выбран пункт «Showvisualizationsoptions», но отображается подменю «Sortby».
  • При быстром просмотре различных пунктов меню подменю появляются с задержкой, из-за чего кажется, что интерфейс перестает отвечать на запросы.

Безопасный треугольник

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

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

Вот демонстрация концепции безопасного треугольника.

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

Когда пунктов меню слишком много

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

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

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

macOS использует стрелки для прокрутки пунктов меню один за другим.

Height использует полосу прокрутки для навигации по длинному контекстному меню.

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


Перевод статьи height.app

Найновіші коментарі (2)

Згорнути/розгорнути
 
shvydkyi_ profile image
Dmytro Shvydkyi

Полезно, спасибо

Згорнути/розгорнути
 
glebaj profile image
Gleb

Про безопасный треугольник не знал — классно