Командные элементы управления

Имеется язык взаимодействия человека и компьютера, который состо' ит из существительных (иногда называемых объектами), прилагатель' ных, глаголов и наречий. Отдавая команду, мы определяем глагол – действие, которое содержится в предложении. Описывая предмет, на который влияет действие, мы определяем имя существительное. Ино' гда мы выбираем имя существительное из имеющегося списка, а ино' гда вводим новое. Мы можем уточнять существительное и глагол при' лагательными и наречиями соответственно.

Элемент управления, соответствующий глаголу, называется команд- ным, поскольку связан с немедленным действием. Командные элемен' ты управления выполняют действия, причем делают это немедленно. Элементы меню (которые мы обсудим в главе 22) также являются ко' мандными идиомами. В мире элементов управления квинтэссенцией командной идиомы является кнопка. Она же, по сути дела, – единст' венная идиома, хотя и обладает множеством вариантов отображения. Щелкните по кнопке – и связанное с ней действие'глагол будет немед' ленно выполнено.

Кнопки

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

Рис. 21.1. Стандартные кнопки в Microsoft Windows (слева) и Mac OS X (справа). Применение теней и подсветки позволяет создать эффект объема, который наделяет кнопки свойством «нажимаемости»

Кнопка – вероятно, самый привлекательный с визуальной точки зре' ния элемент управления в арсенале проектировщика. Неудивительно, что в пользовательском интерфейсе встречается такое разнообразие кнопок. Именно ожидаемое назначение современных псевдотрехмер' ных кнопок сделало их столь популярными. Это же здорово – так по' чему бы не использовать их повсеместно?

Облик кнопки и ее отзывчивость подсказывают, что на нее можно на' жать, и тем самым характеризуют ее ожидаемое назначение. Когда пользователь наводит курсор на кнопку и нажимает клавишу мыши, кнопка на экране изменяет свой внешний вид, превращаясь из выпук' лой в утопленную и демонстрируя тем самым, что она активизирована. Это пример динамической визуальной подсказки, о которой мы гово' рили в главе 19. Плохо спроектированные программы и большинство веб'сайтов предоставляют пользователю кнопки, которые изображены на экране как кнопки, но при щелчке не меняются. Это облегчает жизнь разработчикам (особенно в среде Всемирной паутины), но силь' но дезориентирует пользователя, который мысленно задается вопро' сом: «А было ли действие выполнено фактически?» Пользователь ожидает увидеть реакцию кнопки – та должна стать утопленной, и ва' ша задача – удовлетворить его ожидания.

Кнопки−значки (butcons)

С выходом Windows 3.0 была представлена идиома панели инструмен- тов(о которой мы подробно поговорим в главе 23), ставшая стандар' том де'факто, столь же хорошо знакомым, как и строка меню. Кноп' ки, традиционно расположенные в диалоговых окнах, были адаптиро' ваны для размещения на панели инструментов. В процессе развития

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

В диалоговых окнах кнопка имеет прямоугольную форму (на компью' терах Mac – со скругленными углами) и повсеместно сопровождается текстовой надписью. При переселении на панель инструментов кноп' ка стала квадратной, потеряла текстовую надпись и обзавелась пиктограммой – пояснением в виде графического значка. Таким обра' зом родилась кнопка-значок, то есть кнопка и значок одновременно (рис. 21.2). В Windows 98 кнопки'значки (они же – кнопки панели ин' струментов) продолжили развиваться и утратили рельефность (она ста' ла возникать лишь тогда, когда пользователь взаимодействует с кноп' кой) в целях уменьшения визуального шума, создаваемого загромож' денными инструментальными панелями. К сожалению, это осложнило восприятие идиомы для новичков. Начиная с Windows 2000 кнопка' значок демонстрирует ожидаемое назначение кнопки, только когда указатель мыши находится над ней.

Рис. 21.2. Кнопки-значки в Microsoft Office 2003. Слева – примеры из системы Windows, справа – те же примеры из пакета Office для системы OS X. Обратите внимание, что ни один элемент не отображается в виде кнопки, пока курсор мыши не окажется над ним

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

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

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

умеется, всплывающие подсказки придут им на помощь, однако чрез' вычайно неудобно останавливать курсор над каждой пиктограммой и ждать, когда появится всплывающая подсказка для кнопки'значка. В подобных случаях четкие названия пунктов меню предлагают гораз' до более удобный командный вектор. Более подробно о меню мы погово' рим в главе 22. Дополнительные материалы по кнопкам'значкам, пане' лям инструментов и всплывающим подсказкам содержатся в главе 23.

Гиперссылки

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

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

Используйте ссылки для навигации, а кнопки и кнопки- значки – для выполнения действий.

Элементы управления выбором

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

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

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

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

Флажки

Флажок– одна из самых первых визуальных идиом управления, по сей день остающаяся наиболее популярным элементом представления выбора из двух взаимоисключающих вариантов (рис. 21.3). Флажок имеет ярко выраженное ожидаемое назначение, побуждающее щел' кать по нему. Флажок побуждает к выполнению щелчка благодаря подсветке при наведении указателя мыши и трехмерному визуально' му «углублению». Щелкнув по флажку, пользователь видит, что по' явилась галочка: можно считать, что он узнал все, что должен знать для того, чтобы работать с этим элементом: «Щелкните, чтобы поста' вить галочку, щелкните еще раз, чтобы убрать галочку». Флажок прост, нагляден и изящен.

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

Рис. 21.3. Вот стандартные флажки из Microsoft Windows (слева)

и Mac OS X (справа). И снова применение теней и подсветки создает эффект объема и наделяет флажок отличительным свойством, побуждаю- щим к нажатию. Обратите внимание, что флажки Windows имеют более типичный вогнутый вид, тогда как флажки OS X, наоборот, выпуклые

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

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

Существует, однако, возможность сделать функцию флажка более на' глядной, применив в качестве основы кнопки'значки. Кнопка превра' тилась в кнопку'значок путем замены текста пиктограммой и разме' щения ее на панели инструментов. На этом метаморфозы кнопки не закончились – и ее функциональность была расширена возможностью фиксироваться в нажатом состоянии после щелчка по ней и возвра' щаться в исходное состояние после повторного нажатия. Так появи' лась бинарная кнопка-значок, или выключатель(рис. 21.4). Состоя' ние выключателя меняется не на мгновение, а фиксируется до следую' щего щелчка. Характер элемента управления изменился настолько, что он перешел в другую категорию – превратился из командного в эле' мент управления выбором.

Рис. 21.4. Перед вами бинарные кнопки-значки в различных состояниях: состояние по умолчанию, состояние при наведении курсора, фиксированное состояние (Microsoft Office 2003)

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

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