maxresdefault 1160x620 - Как использовать контекстное меню в дизайне интерфейсов

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

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

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

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

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

1

В Microsoft Word выделение фрагмента текста, удерживая клавишу «Control» и клик мышью, открывает контекстное меню, которое содержит только команды, относящиеся к выбранному фрагменту данных.

2

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

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

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

Триггеры для раскрытия контекстных меню

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

В десктопных приложениях к основным взаимодействиям, которые раскрывают контекстные меню, относятся:

  • Клик правой кнопкой мыши
  • Нажатие клавиши Control (Ctrl), а затем клик мышкой
  • Клик двумя пальцами по трекпаду

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

Советы по созданию эффективных контекстных меню

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

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

Контекстное меню для выбранной заметки в OneNote содержит команды, относящиеся к редактированию содержимого заметки. Имеет смысл добавить такие действия, как «Paste» и «Insert Link», но такие глобальные действия, как «Save» или «Print», не имеет смысла добавлять, поскольку эти команды относятся ко всей записной книжке, а не к выбранной заметке.

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

В Photoshop согласованные контекстные действия для управления слоями были доступны либо щелчком правой кнопки мыши по слою на панели «Слои» (вверху), либо выбором слоя и щелчком по метке «Слой» в главной навигации (внизу). Подобный дизайн предоставил пользователям удобные опции для доступа к командам.

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

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

6

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

  • Для скрытых контекстных меню (1) добавляют советы для повышения осведомленности и (2) позволяют пользователям выполнять те же действия другим способом. Например, в мобильных приложениях, часто контекстные меню будут доступны с помощью специальных жестов, таких как 3D Touch или свайп. Хотя мобильные жесты становятся все более и более привычными для пользователей, эти жесты не обнаруживаются и еще не стали стандартными. Обязательно добавьте другие способы выполнения действий, которые не зависят от жестов. Например, свайп не всегда можно обнаружить для контекстных действий, поэтому предоставьте вспомогательные подсказки, чтобы помочь пользователям найти ваши меню. Даже если ваше приложение использует первоначальный совет для раскрытия жестов, таких как действия, инициируемые свайпом, маловероятно, что люди не забудут использовать его позже. Таким образом, контекстные действия могут быть никогда не обнаружены.
7

Жесты свайпа не используются последовательно во всех списках, поэтому люди не всегда подумают использовать их, и в результате жесты становятся менее заметными. Действия свайпа – это ускорители взаимодействия для опытных пользователей, но действия, доступные с помощью жеста, также должны присутствовать в видимом интерфейсе. Например, приложение «Почта» iOS предлагало избыточные команды в контекстной строке меню внизу сообщения электронной почты. Эти команды также были доступны после свайпа по письму в списке и клика по варианту «More».

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

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

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

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

10

Функция Apple 3D Touch позволяет пользователям нажимать и удерживать иконку приложения, открывая одноуровневое контекстное меню с наиболее распространенными действиями, связанными с приложением. Это меню помогло пользователям быстро получить доступ к простым инструментам и командам без необходимости запускать приложение, а затем искать эти команды.

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

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

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

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

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

Мобильное приложение Zillow предлагает контекстное меню, которое отображает статистику по недвижимости. В меню было 9 пунктов, все они были связаны с контекстом экрана. Длина меню позволила легко понять доступные параметры и выбрать один без прокрутки.

  • Отключите элементы, которые не имеют отношения к контексту пользователя. Вместо того, чтобы скрывать ненужные действия, отключите их, чтобы пользователям не приходилось искать пункты меню, и им не нужно было определять, как вернуть систему в надлежащий контекст, чтобы выявить конкретную команду. Кроме того, убедитесь, что вы включили все параметры (а не один) в семейство связанных команд. Например, если у вас есть пункт «Назад», также должен быть «Вперед». Если есть «Вырезать», также должны быть пункты «Скопировать» и «Вставить».
14

Контекстное меню в Evernote позволяло пользователям настраивать элементы, отображаемые на боковой панели приложения. Поскольку все заметки (All Notes) не могут быть удалены с боковой панели, этот параметр был отображен как отключенный. Если бы он был удален из меню, пользователи могли бы задаться вопросом, почему и где его можно найти, чтобы скрыть его или показать.

Вывод

Хотя существует много способов запуска и представления контекстных меню, в своей основе эти элементы интерфейса нацелены на то, чтобы предоставить пользователям наиболее важные команды и актуальные инструменты, необходимые им для легкого выполнения задач в заданном контексте. Для получения дополнительной информации о разработке эффективных контекстных меню воспользуйтесь нашими однодневными курсами Application Design for Web and Desktop и Mobile User Experience.

Подпишитесь на рассылку

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

Похожие записи

5 UX способов начать разработку дизайна правильно

Проблема в том, что если вы работаете с не-дизайнерами, красивые экраны – то, что нужно. Вы сможете предоставить “вау-эффект” клиенту, а как этот вау-эффект будет реализовываться, уже значения не имеет. А мы все-таки предпочитаем создавать нечто в духе “Все довольны”.

OOUX: Основа дизайна взаимодействий

Свой подход “Объектно-ориентированного UX” (Object-Oriented UX – OOUX) я представил в прошлом году на A List Apart. Подход подразумевает дизайн объектов перед проработкой действий.

Полное руководство по процессу продукт-дизайна

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