Основы дизайна дашборда

2704.2022

 

Мы рекомендуем придерживаться основным принципам дизайна при создании дашборда вне зависимости от решения для бизнес-аналитики, которое вы используете для создания дашбордов. Итак, основные принципы дизайна дашборда:

1. Контраст

2. Повторение

3. Выравнивание

4. Близость

 

Контраст

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

 

1. Контраст цвета

Посмотрите на скриншот ниже. На что вы обращаете внимание в первую очередь?

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

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

 

2. Контраст размера 

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

Если ваш ответ «ни на что» — мы согласимся с вами, потому что ничего не отличает точки друг от друга. Теперь давайте применим наш первый принцип контраста и посмотрим, как выглядит эта диаграмма, окрашенная в зависимости от того, сколько побед команда одерживает в год в среднем на уровне рейтинга новобранцев (рекруты ранжированы 1-5).

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

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

 

3. Контраст форм 

Теперь, давайте посмотрим, как можно использовать контраст формы в дашбордах.

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

 

Повторение

Использование концепции повторения позволяет разработчикам дашбордов отображать последовательные и устойчивые темы, что позволяет пользователям более внимательно следить за историей, которую вы пытаетесь рассказать. Два основных способа использования повторения это местоположение и цвета.

 

1. Повторение местоположения

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

Вот некоторые повторяющиеся элементы, которые мы замечаем:

• Тип диаграммы. Использование согласованных типов диаграмм избавит пользователей от необходимости интерпретировать и изучать новые типы диаграмм несколько раз на дашборде.
• Информация об игроке — на этой диаграмме информация об игроке и общее количество хоум-ранов расположены в одном месте, одним шрифтом и в одном порядке.
• Ось — каждая диаграмма имеет одну и ту же ось Х. Примечание: Убедитесь, что ваши оси совпадают, если у вас есть несколько временных шкал на одном дашборде.
• Полосы строк — хотя это и более тонкая функция, постоянные полосы строк помогают различать строки, позволяя пользователям лучше отделять диаграммы друг от друга.
• Метки данных — на каждой гистограмме показан год, когда игрок совершил наибольшее количество хоум-ранов. Примечание: Следите за тем, чтобы метки данных были одинаковыми как по внешнему виду, так и по назначению.

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

 

2. Повторение цвета

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

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

Примечание: если вы используете определенный цвет для представления чего-либо — используйте его на всем дашборде.

 

Выравнивание

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

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

Кроме этого, ваш текст должен быть правильно выровнен. Выравнивание всего текста и диаграмм действительно поможет объединить дашборд визуально. Давайте рассмотрим пример, который свяжет все эти концепции выравнивания вместе.

Этот дашборд выровнен несколькими способами, которые обсуждались ранее:

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

 

Близость

Принцип близости означает, что размещение объектов на дашборде имеет большое значение. Объекты, расположенные вверху, будут интерпретироваться как более важные. Объекты, расположенные близко друг к другу, будут интерпретироваться как связанные в некотором роде. Обязательно помните об этой идее при определении окончательного размещения объектов на вашем дашборде.

Ниже скриншот дашборда, который показывает данные НФЛ с 1987 года.

Вот некоторые способы отображения близости на этом дашборде:

• Большая сводная метрика (выделена красным) расположена в левом верхнем углу каждого раздела.
• Линия тренда и сводная метрика расположены рядом друг с другом, указывая, для какой метрики предназначена линия тренда.
• Между каждым разделом есть пространство, позволяющее пользователям разделять каждую из своих метрик в уме.
• В каждой подгруппе элементы диаграммы расположены не очень близко друг к другу, что позволяет правильно просматривать каждый объект дашборда.

Примечание: При обсуждении принципа близости важно говорить о концепции белого пространства. Пустое пространство присутствует между различными объектами дашборда. Это позволяет пользователям разделять группы информации, чтобы они могли осмысленно их переваривать. Обязательно оставляйте достаточно пустого пространства между группами и даже внутри связанных групп, чтобы отдельные элементы можно было правильно интерпретировать.