 |
Избегайте визуального «шума» и беспорядка
|
|
|
|
Визуальный шум в интерфейсе возникает из-за излишних графических элементов, отвлекающих внимание от элементов, непосредственно связанных с функциональностью и поведением программы. Представьте себе, что вы пытаетесь вести разговор в переполненном и шумном ресторане. Беседовать в такой обстановке бывает просто невозможно. То же самое справедливо в отношении пользовательских интерфейсов. Визуальный шум возникает благодаря необязательным декоративным и излишне «объемным» элементам, злоупотреблению линиями и иными разделителями между элементами управления, неуместному или излишне интенсивному использованием цвета, текстур и контраста.
Беспорядочные интерфейсы пытаются втиснуть лишние функции в ограниченное пространство, в результате чего элементы управления начинают мешать друг другу. Причудливые, запутанные или перегруженные интерфейсы повышают информационную нагрузку на пользователя и уменьшают скорость и точность его попыток разобраться в содержимом экрана. Ричард Сол Верман (Richard Saul Wurman) назвал такую реакцию пользователей «информационной тревогой».
356 Глава 14. Визуальный дизайн интерфейсов
Не усложняйте
Вообще говоря, в интерфейсах следует применять простые геометрические формы, минималистичные контуры и ограниченные наборы не очень ярких или нейтральных цветов, уравновешенные небольшим числом высококонтрастных и ярких цветов, позволяющих подчеркивать важную информацию.
Типографика не должна быть слишком разнообразной: одного или двух шрифтов в нескольких размерах вполне достаточно. Когда несколько элементов дизайна (элементы управления, панели, окна) служат родственным или взаимосвязанным логическим целям, эти элементы должны визуально оформляться таким образом, чтобы работал принцип наследования. Наследование дает возможность переносить понимание одного элемента на другие сходные элементы. Если элемент требуется выделить, создайте контраст с прочими элементами через настройку одного или нескольких визуальных свойств, таких как размер, цвет и положение.
|
|
|
Бессмысленные вариации визуальных свойств мешают создавать целостные и удобные интерфейсы. Если расстояние между элементами почти одинаковое, сделайте его идентичным. Если два шрифта имеют примерно равные размеры, сделайте размер одинаковым. За любым визуальным элементом, любым отличием цвета, размера или другого визуального свойства должны стоять определенные причины. Если вы не можете сформулировать причину для отличий, избавьтесь от них.
Хороший графический интерфейс, как любой хороший дизайн, визуально эффективен. Он максимально полно использует минимальный набор визуальных и функциональных элементов. Распространенный прием, который практикуют как графические дизайнеры, так и пром-дизайнеры, - эксперимент с удалением отдельных элементов с целью проверки их вклада в ясность задуманного послания пользователю.
ПРИНЦИП проектирования
Удаляйте элементы, пока продукт не сломается, а затем верните последний удаленный элемент на место.
Есть известное изречение пилота и поэта Антуана де Сент-Экзюпери: «Совершенство достигается не тогда, когда уже нечего прибавить, но когда уже ничего нельзя отнять». Создавая интерфейсы, постоянно стремитесь к визуальной простоте. Чем больше полезной работы способен выполнить элемент интерфейса (без потери ясности), тем лучше. Как сказал Альберт Эйнштейн, вещи должны быть настолько просты, насколько это возможно, но не проще.
Еще одно понятие, связанное с обсуждаемой темой, - это усиление, то есть использование элемента интерфейса для нескольких родственных целей. Так, в Microsoft Windows XP рядом с заголовком окна присутствует пиктограмма (рис. 14.8). Эта пиктограмма визуально передает
|
|
|
Принципы визуального дизайна интерфейса
информацию о содержании окна (то есть мы можем отличить окно Проводника от окна документа Word) и предоставляет доступ к командам управления окном: Свернуть, Развернуть, Закрыть.
Рис. 14.8. Пиктограмма в заголовке окна в Windows XP - хороший пример усиления. Она сообщает о содержимом окна и предоставляет доступ к командам управления окном
Вообще говоря, проектировщики взаимодействия лучше дизайнеров справляются с задачей назначения нескольких функций одному визуальному элементу. Такое сопоставление элементов и функций требует ясного представления о поведении пользователя в конкретном контексте, понимания поведения программы и владения вопросами, связанными с программированием. Но не перестарайтесь: многие дизайнеры интерфейсов слишком увлекаются идеей усиления и в конечном итоге только запутывают пользователей.
Текст в графических интерфейсах
Текст - неотъемлемая составляющая практических всех пользовательских интерфейсов. Письменность позволяет сжато передавать богатую нюансами информацию, однако следует крайне внимательно относиться к применению текста, поскольку он обладает способностью запутывать и усложнять простые вещи.
Человек распознает буквы исходя из их форм. Чем более узнаваема форма, тем проще распознать букву, поэтому СЛОВА, СОСТОЯЩИЕ СПЛОШЬ ИЗ ЗАГЛАВНЫХ БУКВ, ЧИТАТЬ ТРУДНЕЕ, чем написанные обычным образом: в заглавных буквах отсутствуют привычные глазу начертания, и поэтому чтение требует большего внимания. Избегайте в своих интерфейсах слов, состоящих из заглавных букв. Распознавание отдельных слов - не то же самое, что чтение, при котором мы осознанно сканируем отдельные слова и интерпретируем их
358 Глава 14. Визуальный дизайн интерфейсов
значения в контексте. Следует стараться минимизировать объем текста, который пользователю необходимо прочитать, чтобы сориентироваться в интерфейсе. Вот когда пользователь найдет то, что его интересует, у него должна быть возможность прочитать об этом подробнее. Применение коротких простых слов облегчает навигацию при минимальной необходимости в чтении.
|
|
|
Наш мозг способен быстро различать объекты в интерфейсе, если визуальные символы и идиомы указывают на тип объекта. После визуальной идентификации типа мы можем прочитать текст, чтобы понять, какой конкретно объект мы видим. При такой схеме нам не приходится ничего читать о типах объектов, которые нас не интересуют, и это ускоряет навигацию и избавляет от интерфейсных налогов. Сопроводительный текст выходит на сцену только тогда, когда он важен.
Графически представляйте тип объекта; текстом описывай-
принцип те сам объект.
Проектирования
Что касается читаемого текста в интерфейсе, рекомендуется придерживаться некоторых принципов:
• Используйте контрастный текст. Убедитесь, что текст хорошо кон
трастирует с фоном и что не используются дополнительные цвета,
способные повлиять на удобочитаемость текста. В общем случае мы
стремимся к 80% контраста.
• Используйте подходящий шрифт и кегль (размер). Как правило,
шрифт без засечек и с резкими контурами, такой как Verdana или
Tahoma, читается лучше всего. Шрифты с засечками, вроде Times
и Georgia, на экране могут выглядеть несколько «неопрятно», но
с этим часто можно справиться путем увеличения размера шрифта
и сглаживания контуров. Текст мельче 10 пикселов в большинстве
ситуаций трудно читать, так что если требуется мелкий текст,
обычно лучший выбор - это шрифт без засечек и без сглаживания.
• Четко формулируйте мысли. Пользуйтесь минимальным количест
вом слов, необходимым для ясной передачи смысла. Избегайте со
кращений. Если они все-таки необходимы, используйте общепри
нятые.
Цвет в графических интерфейсах
Цвет - важный аспект практически любого графического интерфейса. Сегодня, в эпоху вездесущих цветных ЖК-дисплеев, люди ожидают увидеть цветной интерфейс даже в портативных компьютерах и телефонах. Но цвет - это нечто большее, чем просто маркетинговый ход; это мощное выразительное средство визуального представления данных и дизайна графического пользовательского интерфейса. Его можно применять с большим эффектом, но им легко и злоупотребить.
|
|
|
Принципы визуального дизайна интерфейса 359
Цвет является составной частью визуального языка интерфейса, и пользователи будут пытаться усмотреть смысл в том, как он применяется. В большинстве приложений цвет должен использоваться сдержанно и хорошо сочетаться с прочими элементами визуального языка - символами, пиктограммами, текстом - и пространственными отношениями между ними. Как уже говорилось выше, цвет, используемый надлежащим образом, позволяет привлекать внимание к важным элементам, обозначать связи, а также передавать информацию о состоянии и прочие сведения.
Если не проявлять осторожность, цвет очень легко применить неправильно. Вот самые распространенные ошибки:
• Слишком много цветов. Добавление одного цвета, выделяющего
важные элементы в наборе, значительно сокращает время поиска.
Добавление новых цветов приводит к дополнительному ускорению
работы пользователя, но при семи и более цветах скорость поиска
значительно падает. Разумно предположить, что сходные результа
ты будут получены при любом типе навигации по интерфейсу, по
скольку число семь отражает количество элементов информации,
единовременно сохраняемой в кратковременной памяти человека.
Если цветов слишком много, мы тратим время на то, чтобы вспом
нить, что означает каждый цвет в отдельности, и потому работа за
медляется.
• Использование насыщенных дополнительных цветов. Дополни
тельными являются цвета, противоположные друг другу в число
вом представлении. Если такие цвета обладают достаточно высокой
насыщенностью и расположены рядом, то порождают зрительные
эффекты, препятствующие легкому восприятию и мешающие со
средоточить внимание. Аналогичная ситуация возникает при хро-
мостереопсисе, когда цвета с противоположных концов спектра
«вибрируют», будучи расположенными по соседству. Попробуйте
поразглядывать насыщенный красный текст на насыщенном синем
фоне и отметьте, как быстро начинает болеть голова!
• Чрезмерная насыщенность. Сильно насыщенные цвета выглядят
кричаще и привлекают слишком много внимания. Умеренное на
сыщение цвета допустимо для небольших областей, привлекающих
внимание пользователей, но такие области всегда следует создавать
с осторожностью. Когда несколько насыщенных цветов использу
ются вместе, может возникнуть хромостереопсис, а также иные ар
тефакты восприятия.
• Недостаточный контраст. Когда цвет объекта отличается от цветов
фона лишь оттенком, но не насыщенностью или яркостью, объект
становится трудно воспринимать. Фигура и фон должны разли
чаться по яркости и насыщенности, а не только по оттенку. Кроме
того, необходимо избегать использования цветного текста на цвет
ном фоне везде, где только возможно.
|
|
|
