События «кнопка отпущена» и «кнопка нажата»

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

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

Если курсор находится над объектом или данными, собы- тие «кнопка нажата» должно приводить к выделению это- го объекта или данных.

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

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

Рис. 19.2. Эти изображения демонстрируют обратную связь и изменение состояния флажка в операционной системе Windows XP. На первом изобра- жении показан невыделенный флажок; на втором флажок реагирует на кур- сор мыши, расположенный над ним; на третьем показана реакция на щелчок (кнопка нажата); на четвертом видно, что происходит, когда кнопку отпускают, но не уводят курсор с флажка (кнопка отпущена); на послед- нем изображении показан флажок, с которого увели курсор. Обратите вни- мание: здесь присутствует визуальная обратная связь по щелчку,

но состояние флажка не меняется, пока кнопка не будет отпущена

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

Указание и курсор

Курсор – это видимое представление положения мыши на экране. По об' щепринятому соглашению он имеет вид маленькой стрелки, указываю' щей влево и вверх, однако программа может как угодно изменять его вид при условии, что он остается ограниченным по размеру (32´32 пик' села в Windows XP). Поскольку курсор часто используется для указа' ния на небольшие объекты, требуется точность указания в один пик' сел и способ определить, на какой именно пиксел наведена мышь. По' этому курсор любой формы имеет так называемую горячую точку(hotspot) – пиксел, определяющий активную точку указателя. Естест' венно, что у стандартной стрелки горячей точкой является ее острие. Независимо от формы курсора он всегда имеет горячую точку разме' ром в один пиксел.

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

Отзывчивость и подсказки

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

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

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

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

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

Объектные подсказки

Статическая объектная подсказка– это передача отзывчивости объек' та через его собственные статические визуальные свойства. Например, псевдотрехмерный вид экранной кнопки является статической объ' ектной подсказкой, поскольку демонстрирует физическое ожидаемое назначение – возможность нажатия (рис. 19.3).

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

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

Рис. 19.3. Кнопки слева – пример статических визуальных подсказок.

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

это называется «перекатыванием» (rollover). Хороший пример такого поведения дают кнопки-значки(butcon) на панелях инструментов: они не имеют постоянного визуального отражения ожидаемого назна' чения, указывающего на возможность нажатия, но при наведении курсора на любую кнопку'значок ожидаемое назначение визуализи' руется. В результате пользователь получает убедительную подсказку о том, что элемент управления ведет себя как кнопка, а отсутствие по' стоянного визуального отражения ожидаемого назначения резко сни' жает визуальную нагруженность панели инструментов.

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

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

Курсорные подсказки

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

Применяйте курсорные подсказки для передачи отзывчи- вости элементов интерфейса.

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

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

Рис. 19.4. Курсорные подсказки используются в Excel для обозначения элементов управления, которые сами не сообщают пользователю о своей отзывчивости. Ширину отдельных колонок и высоту строк можно устанав- ливать, перетаскивая короткие вертикальные линии между парами коло- нок и строк – курсор при этом превращается в двунаправленную горизон- тальную стрелку, сообщая об отзывчивости и указывая допустимые направ- ления перетаскивания. То же верно и для разделителей экрана. Когда курсор оказывается над невыделенной редактируемой ячейкой таблицы, он превра- щается в курсор-плюс, а когда он расположен над выделенной ячейкой, то указывает на возможность перетаскивания