Человеко-машинное взаимодействие. Учебное пособие

5.Элементы управления

5.1.Ìåíþ

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

Главное меню окна.

Выпадающие меню.

Контекстные (всплывающие) меню.

Каскадные меню.

5.1.1. Главное меню и выпадающие меню

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

Âглавном меню трудно перечислить все доступные команды. Поэтому

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

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

Для создания главного меню используется компонент MainMenu. Для его заполнения используется дизайнер меню. В нем имеется полоса главного меню, в котором выделен первый пункт. После набора текста первого пункта и нажатия клавиши Enter первый пункт заносится в меню и создаются поля для связанных с ним пунктов: справа следующий пункт главного меню, снизу первый подпункт первого пункта (последний выделен для заполнения). Затем заполняются подпункты первого пункта главного меню, каждый раз при завершении ввода очередного пункта формируются поля для новых подпунктов. Остальные пункты главного меню создаются аналогично. При желании можно в любой пункт меню поместить пиктограмму, которая должна храниться под задаваемым номером в спис-

31

5. Элементы управления

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

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

Внимание! Имя пункта и его текстовая надпись — разные вещи.

5.1.2. Контекстные (всплывающие) меню

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

Внешне контекстное меню похоже на выпадающее, но отличается от него тем, что включает только операции для конкретного объекта и для данной ситуации (в контекстном меню операции, которые в данный мо-

32

5.1. Ìåíþ

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

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

Первыми должны располагаться основные команды (например, Открыть, исполнить).

Во вторую группы должны быть включены команды, реализуемые через буфер обмена (например, Вырезать, Копировать, Вставить).

Последними должны идти команды редактирования дополнительных атрибутов (если они имеются).

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

Контекстные меню могут применяться к любым объектам: окно, пиктограмма и др.

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

33

5. Элементы управления

После создания контекстного меню нужно связать его с элементом управления. Для этого в свойстве PopupMenu нужного компонента делается ссылка на имя контекстного меню. Например, если в приложении имеется кнопка Button1, для которой создано контекстное меню с именем PopupMenu1, и выбрано Button1.PopupMenu:=PopupMenu1, то при щелч- ке правой кнопкой мыши по кнопке появится контекстное меню этого элемента.

5.1.3. Каскадные меню

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

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

34

5.1. Ìåíþ

а справа от него поле для заголовка подменю. Далее действия выполняются аналогично созданию любого выпадающего меню.

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

Минимизируйте число уровней иерархии.

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

В качестве альтернативного решения применяйте вторичные окна и панели инструментов.

5.1.4. Заголовок меню

Каждое выпадающее и каскадное меню имеют собственные имя и текстовую надпись. Текстовая надпись информирует пользователя о назначе- нии пункта. Имя связывает компоненты меню друг с другом и обработчи- ками событий. Имя для выпадающего меню — это имя пункта главного меню. Для каскадного меню — это имя подпункта родительского меню, с которым связано каскадное меню. Заголовок должен обозначать предназначение меню. Старайтесь для него использовать одно слово, избегая сложных слов (например, Шрифторазмер).

Внимание! Имя пункта и его текстовая надпись — разные вещи.

5.1.5. Пункты меню

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

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

35

5. Элементы управления

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

Справа от пункта может быть сокращенное обозначение клавиши быстрого доступа (иначе горячая клавиша, или клавиша-акселератор), при нажатии которой на клавиатуре обеспечивается быстрое исполнение команды. Например, Ctrl + C для копирования в буфер выделенного объекта. Использование таких клавиш избавляет пользователя от поиска нужной команды в меню. Горячие клавиши стоит применять только для часто выполняемых операций. При этом для стандартных действий нужно использовать общепринятые горячие клавиши. Например, во всех приложениях клавиша F1 применяется для вызова контекстной справки.

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

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

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

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

Название пункта должно состоять из одного слова (глагол для действий, существительное для объектов).

Определяйте уникальные имена клавиш быстрого доступа (горячие клавиши) для часто исполняемых действий.

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

5.2. Кнопки

Кнопки — это элементы ПИ, которые служат для инициирования ка- кого-либо действия или изменения свойств объектов. Существует три основных типа кнопок

Кнопки управления, или Командные кнопки (Command Buttons).

Зависимые переключатели, или Радиокнопки (Radio Buttons).

36

5.2. Кнопки

Независимые переключатели, или Флажки (Check Boxes — Чекбоксы).

Взаимодействие пользователя с кнопкой ограничивается одним действием — нажатием.

5.2.1. Кнопки управления

Нажатие на такую кнопку запускает какое-либо явное действие, поэтому правильнее называть такие кнопки «кнопками прямого действия». С другой стороны, из-за тяжеловесности этого словосочетания им всегда пренебрегают. В Интернете кнопка должна быть оформлена как текстовая ссылка, если она перемещает пользователя на другой фрагмент контента, и как кнопка — если она запускает действие. Ниже показаны командные кнопки, включая гипертекстовую ссылку справа.

Ситуации при работе с кнопкой:

Кнопка мыши нажата, курсор на кнопке. Кнопка получает фокус ввода и выделяется, команда не выполняется.

Кнопка мыши нажата, курсор не на кнопке. Кнопка теряет фокус ввода и выделение пропадает, команда не выполняется.

Кнопка мыши нажата, курсор на кнопке, кнопка отпускается. Команда выполняется, кнопка теряет фокус ввода

Проблемы при работе с кнопками:

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

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

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

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

37

5. Элементы управления

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

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

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

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

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

Использовать кнопку для инициирования показа меню можно, но не эффективно.

5.2.2. Зависимые переключатели

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

38

5.3. Списки

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

5.2.3. Независимые переключатели

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

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

5.3. Списки

Список — средство выбора требуемых объектов или их свойств. Элементы списков могут представлены в текстовой или графической формах. Список должен обеспечивать:

Визуализацию сделанного выбора.

39

5. Элементы управления

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

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

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

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

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

Используйте эллипсис (...) в середине или конце длинных названий, но сохранив при этом символы, позволяющие понять пункт. Например, \Образец\...\Пример.

Включите в панель списка полосу горизонтальной прокрутки.

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

5.3.1. Список единичного выбора

Список единичного выбора (Single Selection ListBox) используется для выбора только одного пункта в списке. Если содержимое списка не умещается в поле списка, то отображается линейка прокрутки, позволяющая просмотреть весь список.

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

40