Избегайте визуального «шума» и беспорядка

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

Беспорядочные интерфейсы пытаются втиснуть лишние функции в ог' раниченное пространство, в результате чего элементы управления на' чинают мешать друг другу. Причудливые, запутанные или перегру' женные интерфейсы повышают информационную нагрузку на пользо' вателя и уменьшают скорость и точность его попыток разобраться в со' держимом экрана. Ричард Сол Верман (Richard Saul Wurman) назвал такую реакцию пользователей «информационной тревогой».

Не усложняйте

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

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

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

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

Удаляйте элементы, пока продукт не сломается, а затем верните последний удаленный элемент на место.

Есть известное изречение пилота и поэта Антуана де Сент'Экзюпери:

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

Еще одно понятие, связанное с обсуждаемой темой, – это усиление, то есть использование элемента интерфейса для нескольких родственных целей. Так, в Microsoft Windows XP рядом с заголовком окна присут' ствует пиктограмма (рис. 14.8). Эта пиктограмма визуально передает

информацию о содержании окна (то есть мы можем отличить окно Проводника от окна документа Word) и предоставляет доступ к коман' дам управления окном: Свернуть, Развернуть, Закрыть.

Рис. 14.8. Пиктограмма в заголовке окна в Windows XP – хороший пример усиления. Она сообщает о содержимом окна и предоставляет доступ

к командам управления окном

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