Учебное пособие - Проектирование и дизайн пользовательского интерфейса

Подождите немного. Документ загружается.

Описание клавиш-акселераторов в пунктах меню

Если для выполнения команд выпадающего меню используются клавиши-

акселераторы, отобразите на панели меню их сокращенное обозначение.

Обозначение каждой клавиши выводится в соответствующей строке меню, но

при этом все они выравниваются относительно некоторой общей позиции.

Обычно такой позицией является первая свободная после самого длинного

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

для выравнивания обозначений клавиш, поскольку для некоторых шрифтов они

могут отображаться непропорционально.

Для описания в меню клавиш-акселераторов лучше всего использовать те же

стандартные имена, которые указаны на клавиатуре. Для описания сочетаний

клавиш Ctrl и Shift с другими клавишами используются обозначения в виде

Сtгl+<клавиша> (а не Соntгоl+<клавиша> или CONTROL+<клавиша> или

^+<клавиша>) и Shift+<клавиша>. Если для быстрого доступа к пункту меню

используется функциональная клавиша, отобразите ее имя как Fn, где n — номер

функциональной клавиши (например, F3).

Старайтесь не использовать клавиши-акселераторы для работы с

всплывающими меню. Такие меню уже сами по себе являются формой

ускоренного взаимодействия пользователя с программой и работа с ними

изначально ориентирована на использование мыши.

5.2. КНОПКИ

Кнопки - это элементы интерфейса, которые служат для инициирования

каких-либо действий или для изменения свойств объектов. Существует три

основных типа кнопок: кнопки управления (Command Buttons), кнопки

установки параметров (Option Buttons, Radio buttons), или переключатели, и

кнопки независимого выбора, или флажки (Check boxes).

5.2.1. КНОПКИ УПРАВЛЕНИЯ

Кнопка управления, обычно именуемая в русскоязычных изданиях просто

кнопкой, предназначена для запуска связанной с ней команды или операции;

такая кнопка имеет, как правило, прямоугольную форму и снабжается

поясняющей меткой, в качестве которой может использоваться текст,

графический символ, либо то и другое, как показано на рис. 5.10.

Рис. 5.10. Примеры реализации кнопок

Когда пользователь выбирает кнопку с помощью мыши (щелкает на ней

ЛКМ), выполняется команда, связанная с кнопкой. Если пользователь нажимает

кнопку мыши (не отпуская ее), фокус ввода переходит на кнопку; при этом

изменяется состояние кнопки (она отображается как «нажатая»). При

перемещении указателя за пределы кнопки она возвращается в свое исходное

состояние. Перемещение указателя обратно на кнопку вновь переводит ее в

«нажатое» состояние.

121

Если пользователь отпускает кнопку мыши, когда указатель находится над

кнопкой, выполняется связанная с ней команда; если же указатель расположен за

пределами кнопки, фокус ввода «снимается» с кнопки без выполнения команды.

Вы можете определить для кнопок клавиши доступа и клавиши-акселераторы.

Кроме того, целесообразно обеспечить пользователю возможность навигации

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

клавишу <Таb> в сочетании с клавишами управления курсором. Клавиша

<Spacebar> по умолчанию используется для активизации кнопки при установке

на нее фокуса ввода.

Результат команды, выполняемой при «нажатии» кнопки, проявляется

немедленно и непосредственно влияет на текущую ситуацию. Например, при

«нажатии» кнопки, расположенной на панели инструментов приложения, тут же

выполняется связанное с ней действие; «нажатие» кнопки, отображенной во

вторичном окне, обеспечивает прием вводимых данных и, возможно, закрытие

окна.

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

обозначающей связанное с ней действие. Если в качестве метки используется

текст, то он должен отвечать тем же требованиям, которые были рассмотрены

ранее применительно к пунктам меню. Если в какой-либо ситуации связанная с

кнопкой команда является недоступной, то это должно быть отображено

визуально (как правило, и этом случае обесцвечивается метка кнопки).

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

информации, в качестве соответствующего визуального признака используется

эллипсис (...). Для некоторых кнопок при их «нажатии» может выводиться окно

сообщения, но это не означает, что метка такой кнопки должна содержать

эллипсис.

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

отображения в нем дополнительных параметров; такие кнопки называются

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

кнопок для выполнения специфической функции. Если кнопка используется с

указанной целью, ее метка должна содержать пару символов >> (рис. 5.11).

Рис. 5.11. Пример использования кнопки развертывания

В некоторых случаях кнопка может представлять объект и связанное с ним по

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

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

пользователь щелкает на такой кнопке ЛКМ, для выбранного объекта

выполняется указанная команда; щелчок на кнопке Входа ПКM приводит к

появлению всплывающего меню для соответствующего объекта.

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

или значения некоторой величины; в этом случае их применение аналогично

применению кнопок двух других типов — переключателей и флажков. Если

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

состояния выбранной кнопки применяется изображение, несколько

отличающееся от стандартного изображения «нажатой» кнопки. Изображения

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

состоянии, приведены в табл. 5.5.

Таблица 5.5.

Рекомендуемые изображения кнопок

122

Изображени

Состояние кнопки

Нормальное состояние (кнопка не выбрана)

Кнопка “нажата”

Кнопка используется как переключатель находится в

состоянии "выбрана"

Кнопка недоступна

Кнопка используется как переключатель, но в данный

момент не доступна

Кнопка находится в состоянии "не определено"

Кнопка находится в фокусе ввода

В некоторых случаях кнопка управления может быть использована для откры-

тия выпадающего меню; такую кнопку называют кнопкой меню. Хотя это

достаточно специфическое использование кнопок, не предусмотренное

системой, вы можете реализовать такой элемент интерфейса, используя

стандартные компоненты.

Кнопка меню выглядит как стандартная кнопка управления, за исключением

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

каскадных меню (рис. 5.12.)

Кнопка меню поддерживает тот же тип взаимодействия, что и выпадающее

меню: меню отображается при нажатии кнопки; выбор пункта меню

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

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

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

Рис 5.12. Кнопка меню

Щелчок ЛКМ за пределами меню или повторное нажатие кнопки приводит к

закрытию панели меню.

5.2.2. ПЕРЕКЛЮЧАТЕЛИ

Переключатели, иногда называемы также радио-кнопками (что, на наш

взгляд, не очень корректно по отношению к А.С. Попову), предоставляют

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

множества взаимоисключающих альтернатив. Другими словами, в любой группе

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

окно содержит переключатели, относящиеся к разным объектам или к

различным свойствам одного объекта, они обязательно должны быть явным

образом разделены на соответствующие группы (рис. 5.13).

Рис. 5.13. Группа переключателей

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

выбрана, в середине кружка появляется точка (маркер). Не рекомендуется

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

123

управления). Единственным исключением является случай, когда двойной

щелчок ЛКМ на переключателе используется как средство быстрого выбора

значения некоторой величины и выполнения встроенной команды окна, которая

является основным (или единственно возможным) действием пользователя для

данного окна.

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

значений некоторого свойства объекта. При этом желательно ограничить число

различных вариантов (обычно используют не более семи), но вместе с тем их

должно быть не менее двух. Если необходимо предложить пользователю

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

например меню. На рис. 5.14 приведен пример не вполне корректного

использования переключателя (если маркер установлен, то убрать его

невозможно, не закрывая диалоговой панели).

Каждый переключатель снабжается текстовой меткой. Если же для пояснения

назначения кнопок в группе более удобны графические символы, лучше

использовать кнопки управления. Стандартные переключатели позволяют

создавать метки, состоящие из нескольких строк. В таких случаях целесообразно

использовать верхнее выравнивание (если ситуация не требует какой-либо

другой ориентации текста).

Рис. 5.14. Пример некорректного использования переключателя

Как и для кнопок управления, для выбора переключателя используется

щелчок ЛКМ — или в кружке, или на метке кнопки. Фокус ввода перемещается

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

пользователь нажимает кнопку мыши. Если пользователь перемещает указатель

за пределы переключателя, не отпуская кнопку мыши, он возвращается в

исходное состояние. Выбор не будет зафиксирован до тех пор, пока

пользователь не отпустит кнопку мыши (при этом указатель должен находится

над переключателем). Повторный щелчок ЛКМ на том же переключателе не

изменяет его состояние; пользователю нужно явно выбрать альтернативный

вариант в группе, чтобы изменить или восстановить прежний выбор.

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

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

может также выполняться клавишей <Таb> и клавишами перемещения курсора.

5.2.3. ФЛАЖКИ

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

состояний: "включено" или "выключено"; применительно к флажкам эти

состояния обычно именуются "флажок установлен" или "флажок снят".

Основное отличие флажков от переключателей заключается в том, что они

используются для отображения независимых вариантов выбора. Другими

словами, пользователь может одновременно выбрать (установить) несколько

флажков, входящих в одну группу.

Флажок изображается в виде небольшого квадратного окошечка с

сопутствующей меткой. Когда флажок установлен, в окошечке появляется

маркер (рис.5.15).

124

Рис. 5.15. Группы флажков

Стандартный флажок имеет текстовую метку. Если же для пояснения

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

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

все тем же золотым правилом: чем короче и содержательнее надпись, тем лучше;

если текст не удалось уместить в одну строку, используйте верхнее

выравнивание строк (если по контексту не требуется какой-то другой вариант).

Рис.5.16. Применение флажка для управления элементами интерфейса:

а) состояние диалоговой панели, когда флажок «В виде значка» снят;

б) состояние диалоговой панели, когда флажок установлен

В некоторых случаях флажок может использоваться для управления другими

элементами интерфейса. В частности, от состояния флажка может зависеть

доступность элементов более низкого уровня иерархии (рис. 5.16).

Если список установок содержит большое число пунктов, или если их

количество изменяется, вместо флажков удобнее использовать список

множественного выбора.

Когда пользователь щелкает ЛКМ в окошечке флажка или на его метке,

состояние флажка переключается на противоположное. При нажатии кнопки

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

элементами управления, если пользователь, удерживая кнопку мыши,

перемещает указатель за пределы флажка, элемент возвращается в исходное

состояние. Состояние флажка не изменится, пока кнопка мыши не будет

отпущена. Для изменения состояния указатель должен находиться в этот момент

над флажком или его меткой.

Чтобы предоставить пользователю клавиатурный интерфейс для управления

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

125

навигации между кнопками могут поддерживаться клавиша <Таb> и клавиши

управления курсором. Если фокус ввода находится на одном из флажков,

отображаемых на диалоговой панели, то для его перемещения между флажками

может использоваться клавиша <Spacebar>.

В некоторых случаях оказывается весьма полезным использование допол-

нительного, третьего состояния флажка, которое мы в дальнейшем будем назы-

вать промежуточным. На рис. 5.17 показано визуальное изображение этого

состояния.

Рис. 5.17. Изображение флажка в промежуточном состоянии (увеличенный масштаб)

Примером такой ситуации, в которой целесообразно использовать

промежуточное состояние флажка, может служить работа с фрагментом текста,

содержащего несколько различных типов шрифта. Если для установки каждого

типа шрифта используется отдельная кнопка-флажок, то при выборе

«разнородного» фрагмента текста все они должны быть установлены в

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

(установит) один из флажков, то для всего фрагмента текста будет применен тип

шрифта, соответствующий данному флажку. Повторный выбор флажка

приводит к изменению его состояния на противоположное (флажок будет снят).

Если же флажок будет выбран в третий раз, то он вновь вернется в исходное

(промежуточное) состояние; то же самое произойдет и с редактируемым

фрагментом текста.

5.3. СПИСКИ

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

требуемых объектов или их свойств. Элементы списков могут быть

представлены как в текстовой, так и в графической форме. Любой список как

элемент интерфейса должен обеспечивать не только визуальное отображение

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

пунктами (или пунктом) действий.

Использование списка является наиболее целесообразным в тех случаях,

когда число возможных вариантов выбора велико, либо когда их перечень может

изменяться. Если какой-либо элемент списка не может быть выбран в данной

ситуации, следует удалить его из списка. Например, если определенный размер

не доступен для установленного шрифта, не отображайте этот размер в списке.

Порядок расположения элементов в списке определяется, как правило, его

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

если список содержит имена, то их целесообразно расположить по алфавиту;

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

Стандартный список не снабжается текстовой меткой. Тем не менее, вы

можете создать для списка метку в виде статической текстовой области, которая

будет использоваться в качестве ссылки для клавиатурного доступа к списку.

Если в текущей ситуации список недоступен, отобразите на экране его метку

в соответствующем виде.

Ширина поля списка должна быть достаточной, чтобы разместить в списке

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

используйте один из следующих подходов:

126

• сделайте поле списка достаточно широким, чтобы разместить в нем

наиболее «длинный» элемент;

• используйте эллипсис (...) в середине или в конце длинных названий, чтобы

сократить их, сохранив при этом те символы, по которым их следует различать.

Например, при указании маршрутов доступа наиболее важными являются

обычно начало и конец маршрута, поэтому промежуточные каталоги могут быть

заменены эллипсисом: \0бразец \... \Пример;

• включите в панель списка горизонтальную полосу прокрутки; правда, этот

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

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

пользователь может просмотреть одновременно.

Если количество пунктов в списке превышает видимую область, то в поле

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

соблюдаться те же правила использования полосы прокрутки, которые были

рассмотрены ранее.

Для выбора и прокрутки списка могут быть также использованы клавиши

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

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

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

пункта, при этом список перемещается таким образом, чтобы выбор был виден

пользователю. Последующие нажатия текстовых клавиш обеспечивают

продолжение процесса сопоставления слова, набираемого на клавиатуре, с

названиями пунктов списка. При этом каждое последующее нажатие клавиши

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

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

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

использования при работе со списком команд редактирования (Вырезать,

Копировать, Вставить) и операций прямого манипулирования. Если список

содержит пиктограммы или величины, которые пользователь может переместить

или скопировать в другие позиции окна (например, в другой список),

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

текущего (просматриваемого) списка эти операции поддерживаются

автоматически; тем не менее, система обеспечивает возможность реализации

указанных операции и для других (не активных) списков.

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

выбора, который они поддерживают.

Ниже рассмотрены особенности использования различных видов списков.

5.3.1. СПИСОК ЕДИНИЧНОГО ВЫБОРА

Список единичного выбора (Single Selection List Box) используется для

выбора только одного пункта в списке. Следовательно, такой элемент

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

переключателей, за исключением того, что список позволяет более эффективно

оперировать большим количеством пунктов.

Размер (высота) панели списка единичного выбора обычно выбирается таким

образом, чтобы в нем можно было показать от трех до восьми пунктов (рис.

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

все пункты в списке видимы, то стрелки полосы прокрутки следует

127

заблокировать; в остальном правила использования полосы прокрутки остаются

прежними.

Рис. 5.18. Пример использования списка единичного выбора

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

щелкнув на нем ЛКМ. Фокус ввода также устанавливается на этом пункте.

Поскольку список рассматриваемого типа поддерживает выбор только

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

становится невыбранным.

Для реализации клавиатурного интерфейса при работе со списком

используются клавиши навигации (клавиши управления курсором, <Home>,

<End>, <PgUp> и <PgDn>). Могут также использоваться текстовые клавиши,

обеспечивающие синхронное сопоставление вводимых символов с символами

пунктов списка. Эти клавиши не только управляют прокруткой списка, но также

выполняют выбор соответствующего пункта. Если в результате поиска ни один

пункт в списке оказался не выбран, то выбранным считается пункт в списке,

определяемый действием текущей клавиши навигации. Например, если

пользователь нажимает клавишу <Ноmе>, то выбранным становится первый

элемент в списке.

Если пункты списка представляют собой значения некоторого свойства

объекта, то в списке выделяется текущее значение этой характеристики для

выбранного объекта. Если же выбрана группа объектов, имеющих различные

значения этой характеристики, то ни один пункт в списке не должен быть

выделен.

5.3.2. ВЫПАДАЮЩИЙ СПИСОК

Подобно списку единичного выбора, выпадающий список (Drop-down List

Box) предусматривает возможность выбора единственного пункта; различие

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

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

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

необходимо открыть список. Рис. 5.19 показывает выпадающий список в

закрытом и открытом состоянии.

Хотя выпадающий список представляет собой эффективный способ

экономного использования пространства окна, он вместе с тем требует от

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

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

128

Рис. 5.19. Выпадающий список в свернутом и в открытом состоянии

Ширина окна свернутого выпадающего списка должна быть на несколько

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

окно списка должно быть достаточно высоким для того, чтобы показать три -

восемь пунктов. Вместе с тем, свободное пространство в окне должно позволять

не только отобразить выбор в списке, по также выполнять пользователю

операции прямого манипулирования.

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

выпадающим меню. Например, чтобы отобразить список, пользователь может

щелкнуть ЛКМ на кнопке меню, а выбор пункта приводит к автоматическому

закрытию списка; выбор пункта, как и в меню, выполняется щелчком ЛКМ в

соответствующей строке.

Пользователь может также работать с выпадающим списком, используя

клавишу доступа и клавиши управления курсором. При нажатии клавиши

доступа, клавиши <Таb> или клавиш <Вверх>,<Вниз>, а также двух последних

клавиш в сочетании с клавишей <Alt>, выпадающий список открывается.

Клавиши управления курсором и текстовые клавиши обеспечивают

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

клавиши <Вверх>+<Аlt>, <Вниз>+<Аlt>, клавишу <Таb>, или клавишу доступа,

чтобы перейти на другой элемент интерфейса, список автоматически

закрывается. Клавиша <Esc> также закрывает список. При закрытии списка

сделанный в нём выбор должен сохраняться.

Если пункты списка представляют собой значения некоторой характеристики

объекта, то в списке выделяется текущее значение этой характеристики для выб-

ранного объекта. Если же выбрана группа объектов, имеющих различные

значения этой характеристики, то ни один пункт в списке не должен быть

выделен.

5.3.3. РАСШИРЕННЫЙ СПИСОК И МНОЖЕСТВЕННОГО ВЫБОРА

Хотя большинство списков обеспечивают единичный выбор, в некоторых

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

список (Extendet List Box) и список множественного выбора (Multiple Selection

List Box) позволяют реализовать такую операцию.

Для названных списков остаются справедливыми те же соглашения

относительно высоты и ширины окна, как и для рассмотренных ранее.

Расширенный поддерживает стандартную навигацию, а также технику

непрерывного и непересекающегося выбора (рис. 5.20). Это означает, что список

расширенного выбора может быть использован для выбора единственного

пункта или единственной области, хотя по умолчанию предназначен для

выполнения непересекающегося выбора.

Если вы хотите обеспечить пользователю возможность выбора из списка

различных непересекающихся данных, но список расширенного выбора кажется

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

Тогда как список расширенного выбора ориентирован на выбор отдельного

пункта или области, список множественного выбора предназначен в первую

129

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

менее, визуально различить два эти вида списков достаточно сложно. Поэтому

старайтесь оформлять список множественного выбора таким образом, чтобы

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

5.21.

Рис. 5.20. Пример использования расширенных списков

Правда, это требует создания вашей собственной графики для представления

пунктов в списке. Такой подход поможет пользователю увидеть отличие

интерфейса списка множественного выбора от списков других типов. Он также

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

Рис. 5.21. Список множественного выбора

5.3.4. МОДИФИЦИРУЕМЫЙ СПИСОК

Модифицируемый список (List View Control) представляет собой особую фор-

му расширенного списка, который отображает набор пунктов, каждый из

которых содержит пиктограмму и текстовую метку. Содержимое

модифицируемого списка может быть представлено в одном из четырех видов

(табл. 5.6).

Таблица 5.6.

Форматы модифицируемого списка

Формат Описание

Пиктограмм

Каждый пункт отображается как полноразмерная пиктограмма с

расположенной под ней меткой. Пользователь может перемещать

(перетаскивать мышью) пиктограммы в любую позицию в пределах

видимой области списка

Маленькая

пиктограмма

Каждый пункт отображается как пиктограмма маленького формата

со своей меткой, расположенной справа. Пользователь может

перемещать (перетаскивать мышью) пиктограммы в любую позицию

в пределах видимой области списка

Список

Каждый пункт отображается как пиктограмма маленького формата

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

в виде столбца заданного формата

Отчет

Каждый пункт отображается в виде строки, содержащей несколько

столбцов; самый левый столбец содержит иконку и метку.

Последующие столбцы содержат информацию, поставляемую

приложением, формирующим данный модифицируемый список

Примеры использования различных форматов модифицируемого списка

приведены на рис. 5.22.

130