Триггеры: опасная идиома выбора

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

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

 

 

ВКЛЮЧЕНО

ВЫКЛЮЧЕНО

щелчок

Элемент управления находится в состоянии ВЫКЛЮЧЕНО

Элемент управления находится в состоянии ВКЛЮЧЕНО

Рис. 21.5. Кнопки-триггеры очень эффективны. Они занимают мало места, объединяя два взаимоисключающих состояния. Проблема триггерных эле- ментов управления в том, что они не в состоянии выполнять вторую обязан- ность любого элемента управления, а именно – информировать пользовате- ля о своем текущем состоянии. Если кнопка говорит «Включено», когда находится в состоянии «выключено», то непонятно, в каком же состоянии находится кнопка. Если кнопка говорит «Выключено», когда находится

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

«Включить»? Не используйте эти элементы управления

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

 

Радиокнопки

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

 

Рис. 21.6. Слева изображены радиокнопки из Microsoft Windows XP. Справа – радиокнопки из Mac OS X

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

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

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

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

 

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

Они действуют аналогично радиокнопкам: одна кнопка всегда нажата, и всякий раз, когда нажимается другая кнопка, первая возвращается в ненажатое состояние. Элементы управления выравниванием текста в Word – прекрасный пример радиокнопок со значками (рис. 21.7).

 

Рис. 21.7. Элементы управления выравниванием текста в Word представля- ют собой группу радиокнопок со значками и действуют на манер обычных радиокнопок. Одна из кнопок всегда находится в нажатом состоянии,

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

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

Комбо−кнопки

Разновидность радиокнопки со значком – комбо-кнопка, названная так из'за сходства с элементом управления типа «комбо'список» (com' bo box) (рис. 21.8). Обычно она выглядит как кнопка'значок с неболь' шой стрелкой справа, направленной вниз (в Windows), но если нажать

 

Рис. 21.8. Эта комбо-кнопка из Microsoft Office 2003 представляет группу кнопок-значков с фиксируемым состоянием, которая ведет себя как поле с раскрывающимся списком

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

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

Еще одну вариацию можно обнаружить в Microsoft Word, где кнопки' значки для выбора цвета фона и текста больше напоминают неболь'

Рис. 21.9. Эти комбо-кнопки из Adobe Photoshop (слева) и Mozilla Firefox (справа) демонстрируют разнообразные варианты применения идиомы.

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

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

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

Списки

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

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

 

 

Рис. 21.10. Слева – стандартный список из Windows. Изображения справа показывают различные состояния раскрывающегося списка

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

Ранние списки могли отображать только текст – и это до сих пор ска' зывается на характере их поведения. Список, состоящий лишь из строк в чистом виде, без поддержки графических символов, – все равно что безводная пустыня перед путником. Однако с выходом Windows 95 появилась возможность сопровождать каждую строку текста пикто' граммой – и для этого даже не нужно писать дополнительный код. Этой цели послужил элемент управления представление в виде списка (listview). Такая возможность весьма полезна – существует множество ситуаций, когда можно облегчить пользователю жизнь, располагая графические идентификаторы рядом со строками важных вариантов выбора (рис. 21.11). В соответствии с новыми веяниями элементы спи' ска все чаще используются в качестве средства предварительного про' смотра. Этот подход обычно применяется в тех случаях, когда элемент управления отвечает одновременно за выбор и выполнение команды – как, к примеру, элемент выбора стиля в Microsoft Word (рис. 21.11).

Рис. 21.11. Слева – элемент управления типа «список» с пиктограммами в Windows XP, позволяющий пользователям визуально находить нужное приложение. Справа – раскрывающийся список стилей из Office 2007.

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

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

 

 

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

Отметки

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

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

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

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

 

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

Если объект может быть прокручен за пределы окна, множественный выбор требует более качественной, более выраженной идиомы. Пра' вильное решение состоит в использовании идиомы, отличной от идио' мы простого выбора, то есть идиомы, которая имеет визуальные отли' чия. Но что это за идиома?

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

 

 

Рис. 21.12. Выбор обычно является действием в рамках правил взаимного исключения. Когда возникает необходимость избавиться от этих правил

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

Флажки – идиома, не связанная правилами взаимного исключения и очень хорошо знакомая пользователям. Они моментально схватывают ее смысл