чмв

♦Помните: величина заметного изменения оттенка варьируется в диапазоне спектра.

♦Старайтесь выделять края не только цветом.

♦Избегайте красного и зеленого цветов на периферии.

♦Сочетайте противоположные цвета (красный-зеленый или синий-желтый).

♦Для пользователей с дефектами зрения в различении цветов не применяйте близких цветов.

Рекомендации с точки зрения восприятия цветов

♦Не все цвета одинаково хорошо различаемы.

♦Освещенность не равна яркости.

♦Различные оттенки, по существу, имеют различные уровни насыщенности.

♦Освещенность и яркость различимы на отпечатанном документе, но не на цветном дисплее.

♦Не все цвета одинаково разборчивы и читаемы.

♦Оттенки изменяются при перемене интенсивности и цвета фона.

♦На малых поверхностях цветовые различия плохо заметны.

Рекомендации с точки зрения познавательности

♦Не злоупотребляйте цветом.

♦Учитывайте, что цвета на экране и печатных копиях различаются.

♦Группируйте взаимосвязанные элементы с помощью общего фона.

♦Помните: аналогичным значениям соответствуют аналогичные цвета.

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

♦Свяжите степень изменения цвета с важностью события.

♦Размещайте цвета в соответствии с их спектральным расположением.

♦Теплые и холодные цвета должны указывать на уровень действия. Существуют дополнительные рекомендации по использованию цвета.

♦Используйте от трех до семи цветов.

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

♦При модификации размеров и изобразительного ряда выбирайте цвета, которые изменяются минимально от кадра к кадру.

♦Не используйте одновременно цвета высокой интенсивности и спектрально-экстремальные.

♦Применяйте соответствующее кодирование для стандартных элементов.

♦Для элементов, принадлежащих к одной группе, назначайте один и тот же цвет.

♦Выбирайте один и тот же цветовой код для тренинга, тестирования, приложений и публикаций.

♦Для привлечения внимания пользуйтесь интенсивными и насыщенными цветами.

♦По возможности обращайтесь к избыточному кодированию форм с помощью цвета.

♦За счет добавления цвета улучшайте восприятие информации.

Тестирование показывает, что цвет является эффективным средством повышения качества выполнения задач.

Цвет в интерфейсе необходимо применять осторожно и экономно, чтобы каждое дополнение было оправдано с точки зрения затрат. Дисплей может показывать от 256 цветов до 1024 или более, однако не увлекайтесь. Основной принцип: разработайте пользовательский интерфейс сначала в черно-белом варианте и позже, при необходимости, добавьте цвет.

Использование звука в анимации

Использование звука в пользовательском интерфейсе

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

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

51

PDF created with FinePrint pdfFactory trial version www.pdffactory.com

которые будут мешать работе.

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

представления информации приведены в табл. 6.1. Таблица 6.1

Рекомендации по использованию звуковой и визуальной форм представления информации

Использование анимации в пользовательском интерфейсе

Анимации, как и звуку, одинаковое внимание уделяют и разработчики, и пользователи. Сегодня вы можете встретить сотни и даже тысячи иконок на CD ROM или в Internet. При

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

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

Анимация может использоваться для совершенствования визуальной связи между компьютерами и пользователями.

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

интерфейсов применяет по крайней мере минимальный набор методов анимации для отображения действий, выполнения и состояния процесса, запущенного пользователем или системой. Анимация, используемая в распространенном интерфейсе операционной системы, включает в себя изменяющие масштаб и уменьшающиеся при открывании и закрывании окна, иконки песочных или обычных часов для отображения выполнения кратких процессов, а также индикаторы выполнения для более длительных процессов. На рис. 6.2 показан фрагмент анимации, используемой в Windows 95 для индикации процесса выполнения. По мере того как элементы перемещаются или копируются, в диалоговом окне появляется лист бумаги, перелетающий из одной папки в другую. Под анимацией также расположена полоска, отображающая процесс выполнения. Отметим текстовую обратную связь, в динамике отображающую действие (Move в данном примере), имя файла (LIBCAP.Z), исходное положение (SOFTWARE) и конечное положение (SOFTWARE). Пользователи чувствуют себя уверенно в

52

PDF created with FinePrint pdfFactory trial version www.pdffactory.com

присутствии столь хорошо разработанного диалогового окна.

Рис. 6.2. Индикатор процесса выполнения в Windows95

Ключевые вопросы разработка

Какие управляющие элементы использовать

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

На рис. 6.3 приведены несколько вариантов представления обычного поля ввода, которое присутствует в любой программе. В этом поле задается вопрос о возрасте пользователя: «Вам больше или меньше 21 года?» Можно было придумать и другие варианты представления данного поля, но были выбраны элементы наиболее популярные. В левой колонке первое поле — простое текстовое окно, где пользователя просят ввести «Да» или «Нет». В следующем варианте используются две кнопки с метками «Да» и «Нет». Третьим идет окно списка с одним вариантом вы бора. В следующей колонке показаны флажок, окно с выпадающим списком, управляющий элемент типа «колодец» (термин Microsoft) или перечень величин (термин IBM), поле с набором кнопками (SpinEdit) и, наконец, линейка с ползунком.

***************************

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

53

PDF created with FinePrint pdfFactory trial version www.pdffactory.com

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

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

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

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

Метод Drag and Drop

Интерфейсы становятся все более объектно-ориентированными, более графическими и визуальными, поэтому предпочтение все чаще отдается прямому манипулированию. Однако проблема метода Drag and Drop («перетащил и бросил») заключается в том, что отсутствует визуальное указание на то, что объекты могут или должны быть перемещены и сброшены на другие объекты. Если пользователи не выучат, как и когда использовать данный метод, то потенциальные преимущества не будут реализованы. Разработчики должны построить метафоры интерфейса и предложить интуитивно понятные схемы, призывающие и приглашающие пользователей к прямому манипулированию объектами в интерфейсе! Иначе как пользователи догадаются, какими объектами можно манипулировать? Существует четырехступенчатую подсказку, которая поможет эффективно пользоваться методом «перетащил и бросил»:

vКакие объекты я могу перетаскивать?

vКуда я могу их сбрасывать?

vЧто произойдет, если я это сделаю?

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

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

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

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

Должны ли они перетаскивать и сбрасывать сотни объектов или существуют более оптимальные способы сделать это? Не заставляйте пользователей действовать прямым Манипулированием, когда другие методы более эффективны.

Строка меню и панель инструментов

Строки меню, панели инструментов и кнопки — все они могут использоваться для представления аналогичных действий. Обычно пользователи удивляются, не увидев привычную строку меню в окне. Действительно ли им нужны строки меню во всех окнах или панели инструментов могут послужить адекватной заменой (или дополнением)? Могут ли кнопки управления заменить или дополнить строки меню и панели инструментов?

Когда компания IBM спроектировала пользовательский интерфейс OS/2, папки на Рабочем столе не имели строк меню в открытых окнах. Мы проверяли, создаст ли это проблемы для

54

PDF created with FinePrint pdfFactory trial version www.pdffactory.com

пользователей. Был разработан прототип, в котором все окна имели строки меню, а все объекты

— всплывающие меню. Фоновая область открытых окон и Рабочего стола также имели всплывающие меню. Опросили 21 пользователя по поводу их выбора. 13 из них сказали, что предпочли бы всплывающее меню, 7 — строку меню.

Один из опрошенных отказался от обоих вариантов. Однако пользователи не хотят ограничиваться только всплывающим меню — 18 из 21 заявили, что полное удаление строки меню нежелательно. Результат данного опроса показал, что, несмотря на отдаваемое предпочтение, пользователи тем не менее выступают за существование альтернативы. Было рекомендовано обеспечить пользователей опциями, позволяющими использовать строку меню пожеланию.

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

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

♦во всех приложениях использовать согласующиеся по представлению иконки;

♦обеспечивать согласованное взаимодействие кнопок;

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

♦расставлять кнопки в логичном порядке;

♦размещать кнопки для обеспечения быстрой работы;

♦обеспечить работу при помощи клавиатуры;

♦разрешить пользователям самим заниматься конфигурированием;

♦не допускать загромождения дисплея:

♦иконки должны быть визуально различимы;

♦использовать цвет, но с осторожностью;

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

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

Компоновка и разработка окна

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

К основным операциям с окнами относятся: изменение состояния, открытие и закрытие, перемещение, изменение размера, прокрутка, разбиение.

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

55

PDF created with FinePrint pdfFactory trial version www.pdffactory.com

быть активным только одно окно. Хотя другие окна могут относиться к активным (выполняющимся) процессам, но только одно — активное — окно способно воспринимать информацию (команды или данные), вводимую пользователем. Заголовок неактивного окна отображается системным «неактивным» цветом (при необходимости приложение может запросить установленные системные цвета заголовка для активного и неактивного окон).

При работе с клавиатурой для переключения между первичными окнами используется комбинация клавиш Alt+Tab. Комбинация клавиш Shift+Alt+Tab также обеспечивает переключение между окнами, но в обратном порядке (для переключения между окнами система также поддерживает комбинацию Alt+Esc). Повторная активизация окна не должна влиять на любой предшествующий выбор в пределах этого окна; другими словами, при активизации окна область выбора и фокус ввода восстанавливаются в том же виде, какой они имели в предыдущем активном состоянии. Кроме того, при повторной активизации первичного окна само окно и все связанные с ним вторичные окна становятся окнами верхнего уровня, причем восстанавливается их взаимное расположение.

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

Таблица 6.3 Действия при повторном выполнении операции Открыть

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

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

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

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

56

PDF created with FinePrint pdfFactory trial version www.pdffactory.com

сокращенно MDI (Multiple Document Interface),

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

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

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

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

Техника MDI заключается в использовании одного первичного окна, называемого родительским окном, которое может содержать набор связанных с ним дочерних окон. Каждое дочернее окно — это, по существу, также первичное окно, единственным ограничением для которого является то, что оно может появиться только в пределах родительского окна. Родительское окно обеспечивает как визуальное, так и «операционное» пространство для своих дочерних окон. Например, на дочернее окно обычно распространяется область действия меню родительского окна и, возможно, других элементов его интерфейса (панели инструментов, строки состояния и т.д.). Их вид может изменяться, если необходимо отразить команды и атрибуты активного дочернего окна.

Вторичные окна, такие как диалоговые панели, окна сообщений или панели свойств,

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

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

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

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

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

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

Рекомендуемая форма отображения минимизированного дочернего окна в MS Windows

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

Хотя свернутое родительское окно представляется кнопкой входа в окно на «Панели задач», свернутое дочернее окно располагается в пределах своего родительского окна, как показано на рис. 6.4.

57

PDF created with FinePrint pdfFactory trial version www.pdffactory.com

Десять основных проблем, связанных с удобством применения ГПИ и ОПИ

На основе проведенных исследований и накопленного практического опыта специалисты компании IBM в области удобства применения разработали перечень десяти наиболее общих проблем графических и объектно-ориентированных интерфейсов:

♦двусмысленные меню и иконки;

♦ориентация на один язык;

♦Ограничения по вводу и прямому манипулированию;

♦ограничения по выделению и выбору;

♦неясный порядок шагов;

♦управление интерфейсом требует больше шагов, чем собственно решение задач;

♦сложные связи между и внутри приложений;

♦неадекватная обратная связь и подтверждение;

♦недостаточно рациональная и предупредительная система помощи;

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

документация.

И как программному пользователю, и/или как разработчику, вам знакомы многие из этих проблем по собственному опыту. Рассмотренные принципы и концепции интерфейса

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

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

Вот несколько основных рекомендаций по разработке интерфейса и компоновке окна:

♦асимметрия— активное состояние, симметрия — состояние покоя;

♦никогда не гоняйтесь за умеренностью;

♦тщательно следите за последовательностью и согласованностью;

♦помните, что согласованные интерфейсы означают лучшую внедряемость

системы;

♦четко выравнивайте управляющие элементы;

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

♦создавайте экранные объекты по образу и подобию объектов из реального физического мира;

♦не забывайте: абсолютная симметричность затрудняет чтение информации с

экрана;

♦элементы, не соответствующие шаблону, выделяются из общей массы;

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

Таблица 6.4

PDF created with FinePrint pdfFactory trial version www.pdffactory.com

60

PDF created with FinePrint pdfFactory trial version www.pdffactory.com