Выбор визуальных атрибутов
5.7. ВЫБОР ВИЗУАЛЬНЫХ АТРИБУТОВ ОТОБРАЖАЕМОЙ ИНФОРМАЦИИ
Удачный (в смысле продуманный) выбор визуальных атрибутов отображаемой на экране информации—это значительно больше, чем просто красивое внешнее оформление приложения. Качество визуального проектирования в значительной степени влияет и на психофизиологическое состояние пользователя, и на эффективность его работы в целом. Вследствие этого даже достаточно мощный по своим возможностям программный продукт может оказаться недостаточно функциональным, если визуальное представление его интерфейса не удовлетворяет соответствующим требованиям. Именно поэтому при реализации больших и ответственных проектов программисты в последнее время все чаще прибегают к услугам профессиональных дизайнеров. В частности, уже получил практически официальный статус такой термин, как Web-дизайн.
Разумеется, качество визуального проектирования в наибольшей степени проявляется при использовании графического пользовательского интерфейса. И хотя общая концепция внешнего облика приложения во многом определяется его предназначением, для всех GUI-приложений справедливы следующие положения.
• Все графические элементы приложения создают единую визуальную среду; поэтому обязательным этапом визуального проектирования является выбор упомянутой выше общей концепции внешнего облика приложения;
• При использовании графического интерфейса каждый графический элемент и реализуемая им функция тесно взаимосвязаны и эта связь должна быть интуитивно понятна пользователю.
• Исходя из этого, в рамках визуального проектирования (дизайна) интерфейса приложения должны быть решены такие проблемы, как эффективное использование пространства экрана, выбор адекватной формы представления объектов, цветовая палитра и композиция графических элементов, а также выбор средств привлечения внимания пользователя к тем или иным элементам информации, отображаемой на экране.
5.7.1. КОМПОЗИЦИЯ И ОРГАНИЗАЦИЯ
Исследования в данной области (как, впрочем, и практический опыт) свидетельствуют о том, что человек значительно лучше воспринимает визуальную информацию, если она соответствующим образом организована в пространственном отношении. Мы просматриваем информацию на экране так же, как и любые другие формы информации. Взгляд всегда привлекают в первую очередь цветные элементы, а не черно-белые, изолированные (отдельно стоящие), а не сгруппированные, и, наконец, графические, а не текстовые.
Исходя из этого, при проектировании визуальных элементов интерфейса приложения целесообразно опираться на определенные принципы, основными из которых являются следующие:
Рекомендуемые материалы
• иерархическая организация отображаемой информации;
• визуальное выделение наиболее важных элементов;
• сбалансированность структуры экрана;
• визуальное объединение логически взаимосвязанных элементов;
• обеспечение удобочитаемости и логической согласованности отображаемой
информации;
• использование единых подходов к визуализации отображаемой информации не только в рамках приложения, но и рабочей среды в целом (принцип интеграции).
Иерархическая организация информации
Принцип иерархической организации информации означает размещение информации с учетом ее значения относительно других визуальных элементов приложения. Результат этого упорядочения влияет на реализацию всех других принципов визуального представления информации. С точки зрения работы пользователя иерархическая организация информации определяет доступность тех или иных данных и последовательность выполнения решаемой задачи. Для успешной реализации этого принципа необходимо получить ответы на следующие вопросы:
1. Какая информация наиболее важна для пользователя?
Другими словами, что является наиболее важным с точки зрения пользователя при работе с вашим приложением. Например, наиболее важными аспектами для него могут быть создание или поиск документа.
2. Что пользователь хочет или должен делать в первую, во вторую, в третью очередь?
3. Что пользователь должен видеть на экране в первую, во вторую, в третью очередь?
Визуальное выделение наиболее важных элементов
При реализации принципа привлечения внимания пользователя должны решаться две задачи: во-первых, выбор на каждом шаге работы некоторой основной идеи, наиболее важной для выполнения этого шага; во-вторых, соответствующее представление и размещение реализующих эту идею элементов.
В силу указанных выше психофизиологических особенностей люди обращают взгляд в первую очередь на верхний левый угол просматриваемой области или на ту ее часть, которая визуально отличается от других. Исходя из этого, имеет смысл размещать наиболее важную информацию (или узловой элемент) либо в верхнем левом углу экрана, либо в окне, снабженном специальными атрибутами.
Сбалансированность структуры экрана
Принцип сбалансированности структуры экрана — один из наиболее важных принципов визуального проектирования. Он предполагает, с одной стороны, рациональное использование пространства экрана, а с другой — такое размещение информации, при котором на экране в каждый момент времени представлена только та ее часть, которая действительно необходима для выполнения очередного шага задания пользователя.
Визуальное объединение логически взаимосвязанных элементов
Данный принцип можно рассматривать как развитие предыдущего. Визуальное объединение логически взаимосвязанных элементов способствует уяснению пользователем того, как именно представленная па экране информация и элементы управления связаны с выполняемым шагом задания и друг с другом. Например, если в диалоговой панели имеется кнопка, которая влияет на содержимое списка, целесообразно поместить их рядом.
Удобочитаемость и логическая согласованность отображаемой информации
Имеется в виду, что любая информация (не только текстовая) должна быть выражена в компактной и вместе с тем в доступной форме; кроме того, пользователь должен быть способен уяснить, как она связана с предыдущими и последующими
шагами задания.
При реализации данного принципа полезно получить ответы на следующие вопросы:
• Можно ли представленную на экране идею или понятие выразить более просто?
• Насколько легко сможет пользователь выполнить данный шаг?
• Действительно ли все отображаемые элементы необходимы для выполнения этого шага?
Интеграция
Если интерфейс приложения визуально согласуется с интерфейсом системы и интерфейсом других приложений, значительно легче обеспечить пользователю последовательную и предсказуемую рабочую среду. Для того, чтобы осуществить этот принцип, продумайте следующие вопросы:
• Насколько оказывается согласованным экранное представление различных компонентов приложения в процессе работы пользователя?
• Как соотносятся визуальные параметры приложения с системным интерфейсом и интерфейсом других приложений?
5.7.2. ЦВЕТ
Цвет является одним из важнейших визуальных атрибутов интерфейса. Поскольку цвет имеет способность привлекать взгляд, используйте его для идентификации тех элементов интерфейса, на которые вы хотите обратить внимание пользователя (например, для выделения текущего выбора). Цвет также имеет ассоциативный аспект; во многих случаях объекты одного цвета воспринимаются людьми как взаимосвязанные. Цветовая гамма может также оказывать определенное эмоциональное или психологическое воздействие; не зря, например, разделяют цвета на «холодные» и «теплые».
Области, фон которых представлен более теплыми оттенками красной части спектра, кажутся крупнее, чем области, цвет фона которых смещен к голубой части. Объекты экрана на белом фоне или на фоне цвета из средней части спектра кажутся ярче и легче воспринимаются при разном внешнем освещении. Наибольший контраст между двумя областями экрана достигается в том случае, если цвет фона одной из них — черный или близок к любой из границ спектра, а цвет фона другой — белый или взят из средней части спектра. Данные рекомендации справедливы и для соотношения между цветами символов и фона. Следует учитывать, что некоторые комбинации цвета, например голубой цвет символов на красном фоне, неприятны для глаз. Различные психологические состояния человека характеризуются различными предпочитаемыми (наиболее приятными) цветами. Помимо этого отмечена и обратная зависимость — влияние цвета на настроение и работоспособность. В работах, посвященных исследованию психологического воздействия различных цветов, приводятся такие данные:
голубой — успокаивает;
красный — волнует и утомляет;
зеленый — настраивает на добродушный и безынициативный лад;
желтый — веселый, оптимистичный, вызывает легкомысленный настрой;
оранжевый — раскрепощает фантазию;
фиолетовый — гибелен для глаз, цвет зависти, тревоги, неудовлетворенности;
коричневый — угнетает умственную активность;
черный — мрачный, способствует возникновению головных болей, но снижает число ошибок.
Таким образом, непродуманное использование цвета может вызвать у пользователя негативное эмоциональное состояние или даже отвлекать его от работы, мешая сосредоточиться на выполняемом задании.
Кроме того, при выборе цветовой палитры следует учитывать целый ряд дополнительных факторов:
• Хотя вы можете использовать цвет, чтобы отразить связь между теми или иными объектами, ассоциация между выбранным вами цветом и конкретным значением не всегда будет очевидна или легко узнаваема для пользователя.
• Цвет является очень субъективной характеристикой (помните народную мудрость: «На вкус и на цвет товарищей нет»?); поэтому то, что нравится вам, совсем не обязательно будет приятно пользователям.
• Некоторые пользователи могут иметь проблемы с цветовосприятием (около 9 процентов взрослого мужского населения имеют то или иное отклонение в восприятии цвета).
В силу приведенных выше обстоятельств цвет должен использоваться только как дополнительная форма передачи информации.
Еще один вывод состоит в том, что целесообразно в рамках одного приложения использовать ограниченное множество цветов, причем предпочтение следует отдавать приглушенным, пастельным тонам.
Поскольку цвет является субъективным фактором, разрешите пользователю самому настраивать цветовую гамму, где это возможно. Для стандартных элементов интерфейса система обеспечивает стандартные цветовые схемы. Если при создании приложения вы будете их использовать в качестве основы, то это позволит избежать включения в интерфейс дополнительных элементов управления; кроме того, указанный подход гарантирует, что ваши собственные визуальные элементы не будут «выпадать» из общего ряда, когда пользователь изменяет системные цвета. Создавая ваш собственный интерфейс для изменения цветов, учитывайте сложность выполняемого задания и уровень подготовленности пользователя.
5.7.3. ШРИФТ
Подобно другим визуальным элементам, шрифты способствуют организации информации и созданию определенного настроения. Изменяя размер и плотность шрифта, вы можете указать пользователю на степень важности той или иной информации и порядок, в котором она должна быть прочитана.
На экранах стандартных мониторов шрифты обычно менее разборчивы, чем на отпечатанной странице. Старайтесь не использовать курсив (Italic) и рубленый шрифт (Serif), поскольку они трудны для чтения, особенно при низком разрешении монитора.
Ограничьте количество применяемых шрифтов и стилей. По возможности, используйте стандартный системный шрифт для общих элементов интерфейса. Это обеспечивает визуальную согласованность между интерфейсом вашего приложения и интерфейсом рабочей среды и, кроме того, делает ваш интерфейс легче масштабируемым. Поскольку многие элементы интерфейса могут модифицироваться пользователем, проверьте системные параметры для встроенного системного шрифта и установите аналогичные значения для вашего приложения.
5.7.4. «МНОГОМЕРНОСТЬ» ЭКРАНА
При изображении многих элементов интерфейса полезно использовать перспективу, подсветку и затенения с целью обеспечения эффекта трехмерного образа. Это способствует повышению функциональности интерфейса и наглядности обратной связи при работе пользователя с компьютерными аналогами реального мира. Например, кнопки изображаются таким образом, чтобы при их выборе у пользователя появлялась иллюзия, что кнопка действительно нажата.
При создании эффектов освещенности/затенения по умолчанию принимается, что гипотетический источник света находится в верхнем левом углу экрана.
Разрабатывая ваши собственные визуальные элементы, будьте осторожны: не переусердствуйте в использовании «объемных» образов, поскольку изображение каждого «трехмерного» объекта занимает на экране значительно больше места, чем его «плоский» аналог. Учитывая это обстоятельство, и следуя все тому же принципу согласованности интерфейса, используйте трехмерные эффекты только для изображения интерактивных элементов. При этом вводите лишь те детали, которые действительно необходимы для идентификации образа пользователем.
5.7.5. ПРОСТРАНСТВЕННОЕ РАЗМЕЩЕНИЕ ВИЗУАЛЬНЫХ ЭЛЕМЕНТОВ
Размер и взаимное расположение визуальных элементов очень важны для создания визуально последовательной и предсказуемой среды. Визуальная структура важна также с точки зрения передачи назначения элементов, отображенных в окне. В общем случае при выборе варианта размещения элементов следует придерживаться тех же правил, которые используются при компоновке печатной страницы.
Группирование
Группирование предполагает компактное размещение взаимосвязанных элементов. Для реализации группирования может использоваться либо специальный элемент — группирующий блок, либо просто размещение элементов на соответствующем расстоянии друг от друга.
С целью обеспечения единого подхода к пространственному размещению графических элементов введена специальная единица измерения — dialog base unit (единица площади диалоговой панели), которую мы в дальнейшем для краткости будем называть «дискретой окна».
Дискрета окна — это аппаратно-независимая величина; в горизонтальном направлении она равна одной четверти средней ширины символов текущего системного шрифта; по вертикали—одной восьмой средней высоты символов текущего системного шрифта.
Рекомендуется оставлять между элементами в группе промежуток, равный по крайней мере четырем дискретам, а расстояние до края окна и между группами должно быть не менее семи дискрет (рис. 5.47). Хотя вы можете использовать цвет, чтобы визуально сгруппировать объекты, такой подход нельзя признать удачным, поскольку он может привести к нежелательным эффектам, когда пользователь изменит цветовую схему.
Элементы управления в панели инструментов старайтесь располагать так, чтобы от края панели до края окна оставался промежуток, равный по меньшей мере ширине рамки окна. В свою очередь, между элементами самой панели должно быть не менее четырех дискретвысоты (если вы не хотите сгруппировать набор связанных кнопок). В некоторых случаях, например, когда кнопки панели инструментов используются подобно набору переключателей, они могут располагаться слитно (без промежутка).
Основные кнопки управления вторичного окна целесообразно сгруппировать в верхнем правом углу окна или расположить в виде линейки вдоль нижнего края окна, как показано на рис. 5.48. Если в окне имеется предопределенная кнопка, то она, как правило должна стоять первой. Кнопки ОК и Отменить должны располагаться рядом. «Замыкать» группу должна кнопка Справка (если она поддерживается приложением). Если кнопка ОК не используется в данном окне, но имеются другие кнопки управления, то лучше всего установить кнопку Отменить в конце набора кнопок управления, но перед кнопкой Справка. Если же какая-либо кнопка применяется только для конкретной области окна, включите ее в эту область.
Рис. 5.47. Рекомендуемый формат размещения элементов управления во вторичном окне
Рис. 5.48. Пример размещения кнопок
Если кнопки (или другие элементы управления) вынесены на вкладку, предполагается, что их область действия распространяется только на эту вкладку; соответственно, кнопки, не входящие в состав ни одной из вкладок окна, относятся к окну в целом.
Выравнивание
Выравнивание представляет собой еще один дополнительный способ визуального отображения взаимосвязанной информации (или элементов управления). Как правило, различают три способа выравнивания информации:
• вертикальное (по левому или правому краю выравниваемых элементов);
• горизонтальное (по верхней строке или по верхнему краю элемента);
• смежное выравнивание (когда элементы смыкаются краями, рис. 5.49).
Рис. 5.49. Смежное выравнивание в группах
Если информация расположена вертикально, целесообразно выровнять ее элементы по левому краю соответствующей области. Это обычно облегчает пользователю быстрый просмотр информации. Вместе с тем, если в виде столбца выводятся числовые данные, значения которых могут изменяться, их лучше выровнять по правому краю (рис. 5.50).
Рис. 5.50. Вертикальное выравнивание
5.7.6. ВИЗУАЛИЗАЦИЯ ВЫПОЛНЯЕМЫХ ОПЕРАЦИЙ
Визуализация выполняемых операций является одним из способов предоставления пользователю обратной связи с приложением. Продуманный способ визуализации не только способствует лучшему уяснению пользователем сущности выполняемой операции, но и обеспечивает своевременную и корректную реакцию пользователя в случае ошибочных или неудачных действий. Это особенно важно для приложений, используемых в системах управления, принятия решений и других, работающих в режиме реального времени.
Визуализация операций выбора
Визуальная обратная связь при выполнении операций выбора должна позволить пользователю однозначно идентифицировать выбранный объект на фоне остальных. Способ отображения выбора обычно зависит от сущности объекта и текущей ситуации.
Изображение выбираемого объекта должно изменяться непосредственно в процессе выполнения операции выбора. То же самое относится и к выбираемой области. При этом состояние выбора должно отображаться только для активной области или уровня иерархии (например, для активного окна или подокна). Это поможет пользователю определить, к какому из имеющихся выборов относится выполняемое действие.
Тем не менее, в некоторых ситуациях может оказаться полезным одновременное визуальное выделение нескольких объектов, относящихся к разным компонентам приложения. Например, когда пользователь выбирает объект в первичном окне и затем выбирает пункт меню, относящегося к этому объекту, выбор должен отображаться как для объекта, так и для пункта меню. В некоторых случаях требуется указать, что один из существующих выборов является «первичным», а другой (или другие) — «вторичным». В таких ситуациях целесообразно использовать цвет: область вокруг «вторичного» выбора может быть окрашена цветом, отличающимся от цвета выделения активного выбора.
Для многих типов объектов для указания состояния выбора может применяться системный цвет выделения.
Во вторичных окнах выделение текущего выбора цветом применяется, как правило, только для текстовых полей (в том числе входящих в состав комбинированных списков) и элементов списков. Для указания выбора других элементов управления целесообразно использовать визуальное отображение фокуса ввода.
В качестве средства выделения выбранного графического объекта могут использоваться зоны управления, рассмотренные в разделе «Взаимодействие пользователя с приложением». В этом случае для их изображения должен использоваться системный цвет выделения.
Визуализация операций пересылки
При выполнении операций пересылки средством визуализации является перемещение образа пересылаемого объекта одновременные) с перемещением указателя. При этом перемещаемое изображение объекта должно визуально отличаться от его изображения в исходной позиции: в качестве него используется либо полупрозрачное, либо контурное изображение объекта (рис. 5.51). Для создания полупрозрачного изображения рекомендуется использовать пикселы с коэффициентом прозрачности, равным 0.5.
Рис. 5.51. Изображение пересылаемого объекта при выполнении операций пересылки
Представление пересылаемого объекта всегда определяется свойствами объекта- (позиции- ) приемника. Другими словами, когда перемещаемое изображение оказывается над объектом-приемником, оно должно отражать результат пересылки. Например, если пересылаемый объект будет вставлен в объект-приемник в качестве пиктограммы, то изображение должно принять соответствующий вид.
Обратите внимание на лекцию "Оборудование для проведения ДМ".
Анимация
Анимация во многих случаях может оказаться весьма эффективным средством передачи визуальной информации (например, в качестве иллюстрации функционирования какого-либо устройства или выполнения операции, рис. 5.52). Иногда ее применение может просто оживить интерфейс приложения и сделать общение пользователя с ним более приятным.
Рис. 5.52. Пример использования анимации
Эффективное использование анимации предполагает учет многих факторов из тех, что были рассмотрены выше применительно к разработке других графических элементов интерфейса.
Одно из важнейших требований к использованию анимации заключается в том, что она не должна влиять на интерактивность интерфейса. Не заставляйте пользователя ожидать завершения «мультика». Если анимация не является частью выполняемого процесса, разрешите пользователю либо прервать ее, либо параллельно продолжать работу.
Избегайте необоснованного использования анимации. Если анимация используется только для создания декоративного эффекта, она может отвлекать или даже раздражать пользователя (вспомните, например, телевизионные заставки перед рекламными блоками).
