Визуальный шум

Итак, человек должен получить от списка информацию. Давайте задумаемся, в чем она там содержится. Представьте себе чистый белый лист бумаги. Какое количество информации он содержит? Правильно, 0 (ноль) . Теперь представьте полностью черный лист. Сколько информации в нем? Тоже 0. Однако мы знаем, что если на белом листе написать черным карандашем какой-нибудь текст, информации получится гораздо больше.

Отсюда можно сделать простой вывод:
«Любая граница цветов является источником информации».

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

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

Вернемся к примерам. Google в этом отношении фактически безупречен – он дает только релевантную информацию. А вот о Copernic ’е этого сказать нельзя. Следующие элементы создают визуальный шум:

• Линии-разделители строчек
• Выделение ключевых слов цветом фона. Тем самым получается дополнительная граница цветов между фоном выделения и фоном страницы, а также граница между символами текста и фоном выделения. Сравните этот вариант с выделением ключевых слов «жирностью» шрифта в Google, которое дает полезную информацию, не создавая дополнительного визуального шума.

  Цветовая фильтрация

Маркировка разной по своей сути информации разным цветом позволяет человеку как бы фильтровать взглядом весь список, обращая на внимание только на текст одного цвета, одновременно временно «не видя» все остальное. Это дает возможность сканировать взглядом список не только по началам, или основным информативным элементам строчек, а также по вспомогательным атрибутам.

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

Цвет внутри строчки может также служить ориентиром, по которому взгляд может быстро перейти к нужной информации. Как, например,в случае с Google - сама ссылка на ресурс ссылка приведена зеленым цветом, потому что она тоже часто дает дополнительную информацию для того пользуется поисковой системой.

Нельзя не сказать и о самих цветах в приведенных примерах. Недостатком в Copernic является отображение ссылок черным цветом, а текста – наоборот синим. К комбинации «синий цвет – это ссылка» пользователи уже давно привыкли, тем более что это и сейчас используется повсеместно. Поэтому в Copernic вы будете все время удерживать себя чтобы не кликнуть по синему цвету описания вместо ссылки. Одновременно с этим, так как изначально ссылка не выделена (она становится похожей на нормальную ссылку только при наведении на нее курсора), доступ к ней замедляется.

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

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

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

Заключение

Теперь, уважаемый читатель, Вы знаете кое-что о том, как представить результаты работы своей программы в более эффективной форме. Вот вкратце основные методы:

• Старайтесь делать высоту строчек одинаковой
• Избавляйтесь от всех графических элементов, не несущих полезной информации  
• Разумно используйте цветовое кодирование  
• Используйте серый цвет для «отодвигания» вспомогательной информации на второй план  

Осталось только применить эти знания на практике!