Представляю вашему вниманию перевод статьи под названием "Context Menu design" от Hagan Rivers. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением компании Two Rivers Consulting Corporation.
Что такое контекстное меню?
Контекстное меню это меню, которое содержит команды, относящиеся к объекту, на который в данный момент указывает курсор. Это меню еще часто называют меню правого клика — из-за того, что исторически оно вызывалось правым кликом мыши в Windows.
Контекстное меню сообщения в Apple Mail (слева) и Windows Mail (справа).
Стоит ли использовать контекстные меню?
Контекстные меню подходят не для всех приложений. Я настоятельно не советую использовать их для интернет-магазинов, как, например, Lands End или Amazon. Я также не советую использовать контекстные меню для потребительских сайтов, не требующих сложных взаимодействий: банковских сайтов, сайтов знакомств, даже для Facebook.
Cчитаю, что контекстные меню наиболее эффективны в серьезных корпоративных приложениях, которые пользователь использует часто и в которых хорошо разбирается. В таких приложениях контекстные меню чрезвычайно полезны. Почему?
Прежде всего, контекстные меню помогают экономить движения мыши. Если пользователь вынужден часто использовать повторяющиеся действия, то использование контекстного меню помогает уберечь от ненужных движений — вместо того, чтобы выбирать объекты, а затем «идти курсором» в тулбар для того, чтобы выбрать какое-либо действие, пользователь может сделать все прямо на месте.
Во-вторых, контекстные меню помогают пользователям больше узнать об объектах в приложении. Открывая контекстное меню, они видят, какие команды доступны для этого объекта. Это помогает пользователям понять с чем они взаимодействуют в данный момент времени и что приложение позволяет сделать с объектом этого типа.
Однако даже в таких приложениях вы можете заметить что многие пользователи вообще не пользуются контекстным меню. В большинстве своем это та же группа пользователей, которая также не использует горячие клавиши. Поэтому следует смириться с тем, что не все ваши пользователи будут пользоваться контекстными меню, и создавать свой продукт исходя из этих соображений (об этом дальше).
Итак, если вы твердо решили что без контекстного меню вам не обойтись, то давайте подумаем как нам правильно его сделать.
Как вызывается контекстное меню?
Традиционно в Windows-приложениях контекстное меню вызывается наведением курсора на объект и кликом по нему правой кнопкой мыши. В MacOS-системах пользователь также может использовать правую кнопку мыши или же может кликнуть по объекту левой кнопкой, зажав при этом кнопку Control. Обычно это действие называется просто «правый клик».
Правый клик в любой точке объекта должен вызывать контекстное меню. Если это иконка с подписью, то правый клик и по иконке, и по подписи должны вызывать одно и то же контекстное меню. Если объект — это строка в таблице, то одно и то же меню должно открываться независимо от того, в каком месте этой строки пользователь кликнет. Никогда, слышите, никогда не показывайте разные контекстные меню в зависимости от того, в каком столбце этой строки кликнул пользователь.
Небольшое замечание: В мире устройств с сенсорным экранами (таких, к примеру, как iPad), у нас нет курсора, который можно навести на объект. В таком случае можно быстро назвать три возможных способа указывать на объект:
- Показывать контекстное меню сразу после нажатия на объект (однако это может раздражать)
- Показывать контекстное меню после нажатия пальцем и удержания нажатия на долю секунды (в таком случае всегда возникает проблема неочевидности, но это лучше чем первый вариант)
- Добавление контрола, который вызывает контекстное меню (возможно, это лучший путь решения проблемы — о нем рассказано ниже).
Контекстное меню для графического файла в MacOS X (слева) и Windows Vista (справа).
Добавление элемента для вызова контекстного меню
В некоторых веб-приложениях есть элемент интерфейса, нажатие по которому вызывает контекстное меню. Он обычно называется «иконкой меню» — это иконка, изображающая стрелочку вниз, которая находится прямо возле названия (или изображения) объекта.
При использовании такого контрола пользователь может нажать левой или правой кнопкой мыши, чтобы открыть контекстное меню (никогда не используйте наведение мышкой в качестве способа открытия меню). Худшее, что вы можете сделать в данном случае это не показывать меню только потому, что пользователь нажал по контролу не правой кнопкой мышки, а левой.
Контрол меню, показывающий что в данном случае меню доступно.
Если вы собираетесь использовать контрол меню, то стоит сделать так, чтобы нажатие на него отличалось от нажатия на сам объект. В примере выше если пользователь кликает где-нибудь в строке Ahmed Hassain, то он просто выделяет всю строку Ahmed Hassain, однако если он кликает по иконке меню для этой строки, то он получает контекстное меню (и строка не выделяется).
Кроме того, пользователь также должен иметь возможность просто кликнуть правой кнопкой в любом месте строки, чтобы открыть контекстное меню — без необходимости нажимать на иконку.
Стоит ли использовать контрол меню? Оно отлично решает одну из больших проблем с контекстными меню: многие пользователи не знают, что контекстное меню доступно. В веб-приложениях пользователи часто предполагают что контекстного меню нет (его иногда нет даже в десктопных приложениях).
Контрол меню помогает показать что контекстное меню есть и подталкивает пользователя использовать его. С другой стороны, есть такие пользователи, которые всегда предполагают что меню доступно, и они будут сами пытаться открыть его. Если вы делаете приложение для этой группы пользователей, то вам не обязательно делать заметный контрол для вызова меню.
Большая проблема с иконкой меню состоит в том, что она часто повторяется на экране и засоряет его. Решить эту проблему можно, показывая иконку только тогда, когда курсор мыши наводится на объект.
Контрол меню, который появляется при наведении курсором мыши.
Еще одна проблема контрола меню заключается в том, что его сложно прикрепить к некоторым объектам. Возьмем, к примеру, контекстное меню для тулбара: тулбар сам по себе является большим элементом интерфейса, и не совсем понятно, куда в нем ставить контрол меню, так чтобы было понятно, что здесь есть меню. Поэтому, контролы меню работают далеко не везде.
Что должно содержаться в контекстном меню?
Контекстное меню должно содержать команды, которые относятся к выделенному элементу. Это означает что оно может содержать команды из строки меню или панели инструментов, которые можно применить к выделенному элементу.
Контекстное меню не должно содержать ВСЕ доступные для объекта команды — это делает меню огромным и трудным для использования. Сосредоточьтесь на наиболее часто используемых и самых важных командах. Перегрузить меню ненужными командами — это самое плохое, что вы можете с ним сделать. Сфокусируйтесь на важном, уменьшайте бардак.
Вот, к примеру, три контекстных меню для выделенного фрагмента текста: в Dreamweaver, Microsoft Word и Apple Pages. Меню Dreamweaver пытается быть похожим на швейцарский складной ножик и предлагает все возможные команды в одном контекстном меню. Из-за этого оно получается настолько большим, с кучей вложенных списков, что им становится трудно пользоваться. Лично я избегаю вызывать контекстное меню в Dreamweaver.
В нем наиболее часто используемые функции (например «Копировать» или «Вставить») располагаются ближе к концу списка. В Word и Pages наоборот, часто используемые команды выносятся наверх списка, а команды, содержащие вложенные списки — в конец. Они также отобрали для меню только самые важные функции, и лучше организовали их.
Если вы хотите сделать свое контекстное меню удобнее, оставьте в нем только 60% самых важных команд вместо всех 100%. Если в одном меню попытаться уместить все важные команды, то это не приведет ни к чему хорошему — размеры меню увеличатся, а удобство его использования и скорость работы с ним наоборот, снизится.
Помните: главная причина, по которой контекстные меню вообще используются — это возможность сэкономить время пользователя.
Контекстные меню в Dreamweaver, Microsoft Word и Apple Pages
Контекстное меню не должно содержать команды, не относящиеся к выделенному объекту (такие, например, как «Обновить страницу»). Концентрируйтесь на тех командах, которые были бы полезны для работы с тем объектом, на который наводит пользователь.
Когда возможно, группируйте команды в блоки от 1 до 6 штук в каждом. Отделяйте блоки линиями. Наиболее часто используемые команды следует выносить наверх списка, наименее часто используемые — убирать вниз. Если команда используется особенно редко, то, возможно ей не место в контекстном меню.
Не стесняйтесь использовать вложенные списки, однако команды со вложенными списками следует уносить вниз контекстного меню. Мне не нравятся вложенные списки, потому что из-за них пользователь может совершить ошибку, и кроме того на их открытие тратится много времени — в то время как смысл контекстных меню сводится к экономии времени.
Помимо этого вы можете использовать нестандартные элементы меню.
Например, вместе с контекстным меню в Microsoft Word 2007 открывается плавающая палитра, а в контекстном меню файла в Mac OS есть специальные цветные кнопки выбора цвета ярлыка. Только потому что мы говорим «меню», не значит что оно должно быть ограничено только текстом.
Контекстное меню может быть больше чем просто список команд
В контекстном меню не могут содержаться уникальные команды, свойственные только для него. Другими словами, любая команда контекстного меню должна быть доступна также другими способами: на панели инструментов, строке меню или в любом другом месте на экране. Помните, что большая часть пользователей скорее всего ни разу не откроет контекстного меню в вашем приложении. А это означает, что они не увидят команду, которая присутствует только там.
Обычно я помещаю «команду по умолчанию» первой в контекстном меню. Это та команда, которая совершится при двойном клике на объекте (например, команда Open в контекстном меню файла). Если у объекта нет команды по умолчанию, концентрируйтесь на самых используемых командах.
Вы можете использовать название объекта в контекстном меню для того, чтобы сделать команды понятнее. Например, вместо названия команды «Открыть» вы можете использовать словосочетание «Открыть Скриншот.png». При использовании этого приема бывает сложно найти золотую середину — нужно сделать меню достаточно самоочевидным, но не слишком многословным. Меню в Mac OS содержит название объекта в одних командах, и не содержит в других.
В своих контекстных меню я не использую иконки. Честно говоря, я вообще не использую их в своих приложениях — по моему мнению они засоряют интерфейс и не несут особой пользы (примечание переводчиков — о_О). Однако это только мое мнение, а вы решайте сами.
В контекстных меню многих приложений нет указания горячих клавиш возле команд. Думаю, что это сделано затем, чтобы меню казалось легче. Здесь так же решать вам.
Что насчет нескольких выделенных объектов?
Обычно контекстное меню вызывается для одного выделенного объекта, но что делать, если пользователь выбрал несколько объектов, и потом открывает контекстное меню? Давайте рассмотрим несколько примеров.
Представим что у нас есть шесть объектов: четыре папки (А, В, С, D) и два графических файла (Е и F).
Папки и файлы в Windows
Пример 1
Пользователь выбирает папки A, B, C, а затем вызывает контекстное меню, находясь мышкой на папке D (важно: папка D изначально не была выбрана). В таком случае для объектов А, В, и С необходимо отменить выделение и открыть контекстное меню только на выделенном D.
Пример 2
Если пользователь выделяет А, В и С, а затем вызывает контекстное меню, находясь мышкой на С, то сначала мы должны определить, являются ли А, В и С объектами одного типа. Говоря иначе, у всех этих объектов одинаковое меню? Если да, то все просто: сделайте, чтобы все команды в этом меню применялись ко всем выделенным объектам.
Если, к примеру, это будет команда «Открыть», то она должна открыть все три объекта. Если есть команда, которую нельзя применить больше чем к одному объекту, то нужно сделать команду неактивной, не убирая ее из меню.
Ранее я говорил о том, что мы можем написать «Открыть Скриншот.png» вместо «Открыть» для того, чтобы помочь пользователю понять, к чему команда применяется. Точно так же в нашем случае мы можем написать «Открыть 3 объекта» — это поможет понять, что действие применяется ко всем выделенным объектов. В нашем случае контекстное меню может выглядеть следующим образом:
- Открыть 3 объекта
- Удалить 3 объекта
- Копировать 3 объекта
Пример 3
А теперь давайте рассмотрим случай, когда пользователь выбирает несколько разнородных объектов, например папки А, B и графический файл Е. Как вы понимаете, контекстные меню для папок и графических файлов совершенно разные.
Это так называемое смешанное выделение. В примере ниже вы можете увидеть контекстное меню для папки (слева) и для изображения (справа) — они сильно различаются.
Контекстное меню Windows для папок (слева) и графических файлов (справа)
Что же нам делать в случае смешанного выделения, какое контекстное меню использовать? Самый распространенный ответ — показывать контекстное меню для того объекта, на который пользователь навел курсор мыши.
Используйте контекстное меню объекта, на который наведен курсор мыши
Например, пользователь выбирает А, В и E смешанным выделением и вызывает контекстное меню на Е. Контекстное меню, которое вы видите это контекстное меню для Е (вы всегда будете видеть контекстное меню для объекта, на котором расположен курсор мыши).
Слева: Выделена папка А, показывается контекстное меню для папки.
В центре: Выделено изображение Е, показывается контекстное меню для графического файла Е.
Справа: Выделаны две папки (А и В) и графический файл Е, показывается контекстное меню для файла Е.
Контекстное меню в случае смешанного выделения
Однако если пользователь выберет из контекстного меню для файлов разного типа команду, которая может примениться ко всем выделенным объектам, следует сделать, чтобы это происходило. Так, если выбрана команда «Удалить», должны быть удалены все выделенные объекты, даже если это объекты разного типа.
С другой стороны, если пользователь вызовет меню для E и выберет команду, которая не может примениться к A и B, она применится только к E. Если пользователь выберет команду «Экспорт», и она может примениться только к E, только E будет экспортировано.
На двух рисунках ниже показано одно и то же выделение: A, B и E. На рисунке слева открыто контекстное меню на B, и мы видим меню для папок. На рисунке справа у нас выделены те же объекты, но меню открыто на E, и поэтому мы видим меню для файла изображения.
Вы будете удивлены — такой подход используется в подавляющем большинстве приложений, которыми вы регулярно пользуетесь. Задумайтесь об этом: если вы выберете команду «Удалить», то ожидаете, что удалятся все три объекта.
Это одна из тех вещей, которые звучат сложно, но работают для пользователей.
Проблема с таким подходом состоит в том, что он не всегда предсказуем. Выбирая «Экспорт» вы не знаете точно, какие из объектов будут экспортированы. Вы можете быть уверены в принципах работы такого подхода только в тех приложениях, которые уже хорошо знаете.
Для того, чтобы избавиться от такого несоответствия, я еще раз могу предложить использовать понятное название команд, например:
- Удалить 3 файла
- Экспортировать Скриншот.png
Этот подход имеет одну сложность в реализации — вам нужно пройтись по всем командам во всех контекстных меню и подумать, какие команды можно применить в смешанных выделениях, а какие нельзя. Чем более похожи контекстные меню для разных объектов, тем проще будет эта задача для вас. В Mac OS X контекстные меню для папок и файлов почти одинаковые, что сильно упростило жизнь Apple.
Смешанное выделение и контекстные меню в OS X
Этот пример показывает, что лучший способ решить проблему это просто избежать ее появления. Другими словами, если вы постараетесь не использовать разные контекстные меню для разных объектов, то проблема, связанная со смешанным выделением не будет грозить вам.
Поэтому одним из решений было бы делать контекстные меню одинаковыми для всех типов объектов.
А что если сбрасывать выделение?
Если пользователь выделяет несколько объектов (например, А, В и Е), а затем вызывает контекстное меню на любом из объектов, выделение сбрасывается. Выделяется объект, на котором пользователь вызвал меню, и меню применяется только для этого объекта.
Лично мне не нравится такой подход, так как иногда бывают случаи, когда пользователь потратил много времени на то, чтобы сделать определенное выделение. Неожиданный сброс выделения в таком случае будет неприятностью. Думаю, этого подхода стоит избегать.
А что насчет построения нового меню?
Другим решением проблемы может стать создание нового контекстного меню, содержащего только команды, подходящие одновременно для всех выделенных объектов.
Я могу сказать так — не стоит. Это плохо по целому ряду причин. Это смесь проблем в области дизайна и программирования — каждый раз, когда вы добавляете новую команду в любое меню, вам придется перерабатывать все возможные комбинации меню. Это не весело, поверьте мне.
И что хуже всего — такой подход плох для самих пользователей. Это нестандартное решение и оно отторгается людьми. Пользователь в меню опирается на позиционную память (определенные паттерны, которые наш мозг формирует для облегчения сканирования интерфейса), то есть он помнит ГДЕ в меню находятся команды.
Когда вы показываете ему непривычные меню, изменяющиеся в зависимости от текущего выделения, вы вносите беспорядок в его позиционную память, из-за чего пользователь тратит больше времени на работу с меню.
То есть, из-за такого подхода пользователь может сделать больше ошибок и потратит больше времени — полная противоположность того, зачем мы вообще используем контекстные меню.
Выводы
А теперь давайте подведем итоги:
Контекстные меню подходят не для всех приложений. Прежде чем создавать их, убедитесь что пользователи будут их применять, и что они им нужны.
Если вы не уверены — проведите несколько юзабилити-тестов и убедитесь, что пользователи хотя бы пытаются их открыть. Если тестеры выполняют повторяющиеся рутинные задачи и ни один из них ни разу не открыл контекстного меню, оно не нужно.
Цель создания контекстного меню — экономия времени. Создавайте их такими, чтобы они действительно экономили время. Делайте их короткими и хорошо организованными.
Подумайте над путями совершенствования дизайна контекстного меню.
Я упоминала несколько идей: добавление контрола меню, который появляется при наведении мыши на объект; указание в меню, какие объекты затронет та или иная команда. Я уверена, возможностей для развития очень много. Не стесняйтесь брать за основу эту «стандартную» формулу и усовершенствовать ее.
PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите мне в личку, пожалуйста :)
