Двумерные графики, цвет, форма: приёмы для увеличения эффективности дэшбордов
UX-дизайнер Nielsen Norman Group Пейдж Лаубхаймер о том, как способ представления визуальной информации влияет на скорость её восприятия.
Дэшборд — это отдельная страница, содержащая визуальное отображение актуальной информации, согласно которой действует пользователь. Этот инструмент используется в веб-приложениях, внутренних корпоративных сетях и других контекстах бизнес-аналитики.
Взглянув на дэшборд, пользователь может понять, превышает ли он скорость, хватает ли топлива (в случае приборной панели автомобиля) или растут ли продажи, привлекла ли рассылка столько же трафика, сколько раньше (в случае панели маркетинговых данных).
В отличие от сервисов, которые аккумулируют ресурсы, данные и инструменты, выступая чем-то вроде единого шлюза для множества задач, дэшборды фокусируются на обеспечении оперативного взаимодействия пользователя с важной и срочной информацией.
Оперативные и аналитические дэшборды
Существуют два основных типа дэшбордов:
- Оперативные дэшборды нацелены на то, чтобы быстро передавать важную информацию, и используются в задачах, чувствительных ко времени.
- Аналитические дэшборды предоставляют пользователю информацию, необходимую для принятия важных стратегических решений. При этом они не так чувствительны ко времени, как оперативные дэшборды.
Оперативный дэшборд в системе ArcGIS показывает доступные аварийные службы в городской среде, позволяя отслеживать статус происшествий и местонахождение дежурных бригад и патрулей. Гистограмма помогает диспетчеру быстро выявлять потребность в тех или иных экстренных службах (полиция, пожарные, скорая помощь).
Оперативные дэшборды существуют для решения таких срочных задач, как мониторинг доступности сервера, отслеживание жизненно важных показателей при хирургических операциях, коммуникация с клиентами или контроль полётов. Они используются в максимально динамичной среде: в больницах, при управлении чрезвычайными ситуациями — везде, где требуется быстро отслеживать недопустимые отклонения параметров или визуализировать доступные ресурсы.
Аналитические дэшборды помогают пользователям выбирать направление для дальнейших размышлений, исследований, изучения и анализа. Самый распространённый пример аналитического дэшборда — инструментальная панель продаж, которая обновляется всего один раз в сутки. Она не показывает информацию, на которую нужно реагировать немедленно, но держит менеджеров по продажам в курсе тех изменений данных, которые требуют неспешного и вдумчивого анализа.
Как оперативные, так и аналитические дэшборды отображают на одном экране все необходимые данные и должны обеспечивать быстрое и точное их восприятие.
Предварительная обработка визуальных данных
Для того, чтобы пользователь мог легко и быстро интерпретировать данные, необходимо учитывать некоторые свойства человеческого зрения. Существуют определённые визуальные атрибуты, которые люди могут воспринимать без полного вовлечения, но в процессе так называемой «предварительной» обработки. Например, одну длинную линию среди множества коротких пользователь заметит ещё до того, как начнёт сосредоточенно вглядываться в монитор. Другие неосознанно воспринимаемые параметры — площадь, угол, расположение на плоскости и цвет.
Хотя предварительные параметры легко определяются, не все они одинаково хороши. Некоторые из них (длина) воспринимаются проще других, особенно если не нужно точно определять размер расхождения. С другими (площадь) могут возникать трудности. Например, нам легко выделить большой прямоугольник из множества маленьких, но трудно точно определить разницу в размерах.
Быстрее всего мы можем сравнивать длину и расположение объектов на плоскости (по данным исследования 1985 года). Именно поэтому два этих предварительных параметра идеально подходят для представления количественных данных: схемы и графики, использующие длину и местоположение на плоскости, воспринимаются гораздо легче.
Дэшборд от TheDesignWork демонстрирует линейный график (слева) и гистограмму (справа). На линейном графике очень легко отследить заметный спад данных в среду. Гистограмма справа позволяет моментально заметить резкое количественное изменение, а также соотношение между данными: вы с ходу можете определить, что жёлтая линия почти в два раза длиннее, чем красная.
Ещё один предварительно воспринимаемый параметр — это цвет: красную точку легко выделить из скопления голубых точек. Однако в отличие от длины, люди не воспринимают разные цвета в определённом порядке, поэтому цвет не может использоваться для представления количественных данных.
Кроме того, около 4,5% всего населения страдают какой-либо формой дальтонизма. Большинство из них — мужчины (8% против 0,5% женщин), точные цифры варьируются в зависимости от этнической принадлежности.
Линейные графики и двумерные схемы
Как мы уже говорили, длина и позиция объекта на плоскости — самые подходящие атрибутами для неосознанного предварительного восприятия. Это значит, что, наложив их на количественные данные, мы получим более эффективные и простые для понимания визуализации. Одним из самых удобных и надёжных способов представления количественных данных считаются гистограммы: человек способен предварительно обрабатывать длину каждого столбика, легко сравнивая их значения (особенно если они расположены по возрастанию или по убыванию). Способность человека предварительно оценивать местоположение на плоскости используется в точечных диаграммах и линейных графиках.
Точечные диаграммы выступают эффективной визуализацией для демонстрации взаимозависимости между двумя переменными, расположенными по осям X и Y. Даже беглого взгляда на график достаточно, чтобы заметить, какие точки находятся на самых верхних позициях по обеим осям, а также увидеть потенциальные корреляции или другие отношения между данными.
Круговые диаграммы и диаграммы с областями
Круговые, секторные, кольцевые и лепестковые диаграммы недостаточно хорошо отображают количественные отношения между данными, поскольку при передаче информации опираются на разницу в площади и величине угла. Хотя площадь и угол —предварительно воспринимаемые параметры, людям обычно трудно оценить, насколько одна закрашенная область больше другой.
Дэшборд Microsoft Power BI использует для отображения данных круговые диаграммы и древовидные карты. Круговые диаграммы построены по секторному принципу — то есть количественная информация кодируется с помощью площадей и углов. Пустое пространство посередине делает каждую закрашенную область ещё меньше, тем самым усложняя и без того непростую задачу определения количественных значений.
Древовидная карта также использует площадь для представления относительного количества продаж в разных городах, но, к сожалению, людям трудно быстро и точно сравнивать площади объектов, поэтому древовидная карта — не самый эффективный способ представления количественных данных.
Поскольку диаграммы, основанные на площади, не особенно эффективны в плане сравнения величин, они, как правило, не рекомендуются для быстрого отображения количественных отношений между элементами в наборе данных. Исключениями становятся задачи, связанные с представлением процентных долей (например, распределение прибыли, полученной из одного источника).
Древовидные карты обычно демонстрируют иерархические наборы данных в формате вложенных прямоугольников разного размера (размеры прямоугольников соответствуют количественным значениям данных). Они полезны при составлении компактных обзоров сложных данных, поскольку дают пользователю возможность увидеть не только всю картину в целом, но и её детали. Но они категорически не подходят для дэшбордов, направленных на решение срочных практических задач.
Угол также плохо отображает количественную информацию: кольцевые диаграммы, имитирующие автомобильную панель расхода топлива, занимают слишком много места. К тому же их гораздо труднее интерпретировать, чем линейные графики.
Дэшборд Klifolio использует радиальную диаграмму, чтобы показать значение конкретной метрики в определённом диапазоне. Такие круговые визуализации требуют неоправданно много пространства для отображения относительно небольшой порции информации.
Кроме того, визуализации, использующие угол, плохо поддаются предварительному восприятию. Видно, что этот дэшборд использует также гораздо более понятную линейную диаграмму для передачи похожей информации (количественные данные в определённом диапазоне, с целевым значением). Плохо то, что эти графики не могут отобразить всю шкалу полностью.
3D-графики
Вычерчивание двумерного графика в трёхмерном пространстве часто делается из эстетических соображений, но это лишь усложняет интерпретацию данных, так как добавление объёма искажает их визуальную форму. Наиболее восприимчивыми к искажающим эффектам 3D-визуализации становятся диаграммы, основанные на площади (например, секторные диаграммы и древовидные карты). Трёхмерные столбиковые диаграммы (гистограммы) также интерпретируются труднее, чем их плоские аналоги, поскольку на них не так легко разглядеть, какой столбик самый высокий и как он соотносится с линиями сетки.
В 3D-визуализации сложнее определить, какой столбик короче других, даже несмотря на то, что длина — очень эффективный параметр предварительного восприятия.
Чтобы создать 3D-перспективу, дно диаграммы наклоняется ближе к зрителю (и поэтому становится больше по сравнению с плоской версией), а верх диаграммы отдаляется от зрителя (наоборот, уменьшается). Из-за этого каждый квадратный сантиметр, который находится дальше от зрителя, в процентном соотношении занимает больше места, чем такой же квадратный сантиметр, расположенный в ближнем 3D-пространстве. Это не только представляет данные в неверном свете, но и значительно усложняет работу пользователя.
Цвет, форма и группы для категоризации
Цвет и форма также входят в ряд предварительно воспринимаемых параметров. Но поскольку они не слишком хорошо передают количественные отношения, лучше их использовать для категоризации информации, чтобы объединять между собой элементы визуализаций.
В соответствии с принципом подобия гештальтпсихологии, элементы, имеющие одинаковый цвет или форму, обычно воспринимаются как связанные между собой. Ещё одним признаком семантической группировки может служить пространственная близость.
Из-за большого количества людей с нарушениями цветового восприятия такие свойства цвета, как оттенок или насыщенность, могут служить лишь вторичными признаками принадлежности к группе.
Что касается главного признака выделения групп или категорий, тут пригодятся более надёжные сигналы для обозначения родства — форма или близкое расположение. Цвет можно использовать, чтобы подтвердить информацию, которая уже представлена другим образом. Например, комбинация цвета и формы подаёт более заметный сигнал, чем использование каждого из них по отдельности.
Один из дэшбордов колл-центра Dundas использует форму и границы для того, чтобы обозначить разные категории данных (форма отличает звонки через веб-чат, а границы разделяют разных агентов колл-центра). Насыщенность цвета используется для обозначения длительности взаимодействия, отображая перекрывающиеся события, этот атрибут передаёт информацию второстепенной важности.
Источники:
© vc.ru
