СсылкиКолонка автораСтатьиОбзоры программ и сайтовПримеры удачных решенийПримеры неудачных решенийЦентр Практичных Программ

Эффективное представление результатов

Седельников Андрей

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

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

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

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

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

Сканирование

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

Следовательно, можно сделать такое утверждение:
«При просмотре списка взгляд человека перескакивает со строчки на строчку, ориентируясь по ее началу».

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

Из этого утверждения можно сделать вывод «Если список предоставляет глазу визуальные ориентиры начала строк, взгляд находит строчки быстрее», что конечно же положительно влияет на эффективнось результатов.

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

Перейдем к примерам. Google старается сделать одинаковыми «строчки» списка, если это возможно. Однако помимо этого вспомогательными для глаза ориентирами являются также «пустое место» между «строчками» в качестве разделителя [2], а так же выделение цветом, толщиной и подчеркиванием первой строчки с основным информационным элементом - ссылкой. В программе Copernic строчки тоже имеют одинаковую высоту, однако разделены линиями, но об этом чуть позже.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

23.01.2001  

1. Edward R.Tufte „The Visual Display of Quantitative Information“ (Amazon.com)
2. Finding Information on the Web: Does the Amount of Whitespace Really Matter?

Вернуться в Колонку Автора