Разработка информационной панели – лучшие практики
Визуализация данных – это область, которая постоянно развивается. Но некоторые концепции снова и снова доказывали свою ценность на протяжении многих лет и стали тем, что мы сейчас называем «лучшими практиками». Эти вещи не следует рассматривать как строгие правила, которые необходимо применять как есть, без изменений, но как серию советов, которые помогут вам создавать лучшие приложения.
Если вы новичок, постарайтесь придерживаться этих советов как можно чаще. Эти эффективные методики избавят вас от множества проблем и значительно улучшат ваши первые наработки. С другой стороны, если вы – опытный разработчик, объедините их со своим личным опытом, чтобы создать идеальную информационную панель.
Некоторыми рекомендациями из этой статьи в свое время поделились широко известные специалисты в области визуализации данных, такие как Стивен Фью, Эдвард Тафте, Джон Тьюки, Альберто Каиро и Натан Яу. Итак, если какая-то концепция привлечет ваше внимание, настоятельно рекомендуем вам прочитать о ней побольше.
В этой статье мы рассмотрим некоторые полезные рекомендации, которые помогут вам создавать не только привлекательные, но и эффективные и удобные информационные панели. Помните, что они могут применяться по-разному в зависимости от отображаемой информации и аудитории, с которой вы работаете. Тем не менее, это – отличное руководство в области визуализации данных, поэтому вы можете смело использовать их во всех своих разработках.
Гештальт-принципы
В начале 1900-х годов школа гештальт-психологии провела серию исследований человеческого восприятия, чтобы понять, как наш мозг интерпретирует формы и распознает закономерности. Понимание этих принципов может помочь вам в создании лучшей структуры информационной панели и упростить интерпретацию диаграмм:
- Близость: когда мы видим несколько элементов, расположенных рядом друг с другом, мы склонны рассматривать их как группу. Например, мы можем визуально различать кластеры на диаграмме рассеяния, группируя точки в соответствии с их положением.
- Сходство: наш мозг связывает элементы, похожие друг на друга (с точки зрения формы, размера, цвета или ориентации). Например, на гистограммах с цветовой кодировкой мы можем связать столбцы одного цвета, даже если они не сгруппированы.
- Вложение: если ряд объектов окружает граница, мы воспринимаем их как часть группы. Например, если на точечной диаграмме есть контрольные линии, охватывающие элементы между 20 и 30 процентами, мы автоматически считаем их кластером.
- Замкнутость: когда мы обнаруживаем фигуру, которая выглядит неполной, мы склонны воспринимать ее как замкнутую структуру. Например, даже если мы отбросим границы гистограммы, оси сформируют область, которую наш мозг будет изолировать без дополнительных линий.
- Непрерывность: если несколько объектов выровнены, мы будем воспринимать их как непрерывное тело. Например, различные блоки кода, когда вы делаете отступ в скрипте QlikView, воспринимаются как один непрерывный код.
- Соединение: если объекты соединены линией, мы будем видеть их как группу. Например, мы склонны связывать точки, соединенные линиями на диаграмме рассеяния, с линиями и символами.
Предоставление контекста данных
Когда дело доходит до анализа данных, контекст решает все. Если вы представите отдельные цифры, пользователям будет сложно увидеть скрытую за ними историю. Например, если бы я сказал вам, что валовая прибыль нашей компании составила 16,5% в первом квартале 2015 года, вы бы оценили это как хорошо или плохо? Довольно сложно сказать, правда?
Но, что если мы добавим дополнительную информацию к этому КПЭ? Добавление контекста к данным может сильно изменить общую картину. Теперь легко заметить, что, несмотря на то, что валовая прибыль существенно улучшилась за последний год, нашей компании есть над чем поработать, чтобы быть конкурентоспособной и превзойти отраслевые стандарты.
Соответствующие ссылки могут меняться в зависимости от ключевых показателей эффективности, с которыми вы имеете дело, и целей организации, вот некоторые общие примеры:
- Результаты прошлого года;
- Квота, бюджет или цель;
- Сравнение с ближайшим конкурентом, продуктом или сотрудником;
- Доля рынка;
- Отраслевые стандарты.
Еще один хороший совет в этом отношении – предвидеть сравнения. Если вы показываете цифры, касающиеся ежемесячной квоты и фактических продаж, вы можете сэкономить пользователям мысленные вычисления, включив дополнительные показатели, такие как разрыв между ними и процент выполнения.
Соотношение информационных пикселей
Одним из самых интересных принципов в области визуализации данных является соотношение информационных пикселов, введенное Эдвардом Р. Тафте в его книге Визуальное отображение количественной информации, которую должен прочитать каждый дизайнер. В этой работе он утверждает, что на любой диаграмме используются два разных типа графики (или в нашем случае пикселей), а именно:
- Информационные пикселы: сюда входят все нестираемые части графики, которые используются для представления фактических данных. Эти пиксели составляют основу визуализации и их нельзя удалить без потери части информации.
- Неинформационные пикселы: сюда входят любые элементы, которые не имеют прямого отношения к данным или не передают ничего значимого для читателя.
Основываясь на этих концепциях, он определил «Соотношение информационных пикселов» как долю информационных пикселов, которая предназначена для безизбыточного отображения информации данных:
Data Ink Ratio = Data Ink / Total Ink Copy
Наша цель – максимизировать это значение за счет уменьшения количества пикселов, не связанных с данными в наших информационных панелях. Например, диаграмма слева имеет низкое соотношение информационных пикселов из-за использования 3D-эффектов, теней, фона и нескольких линий сетки. А вот диаграмма справа представляет более высокое соотношение, поскольку большинство пикселей связаны с данными.
Избегайте «графического мусора»
«Графический мусор на диаграмме» - это еще один термин, введенный Тафте для обозначения всех элементов, которые отвлекают зрителя от фактической информации на графике. Очевидно, что мусор на диаграмме не относится к информационным пикселам и сюда входят, например, толстые линии сетки, рамки, избыточные надписи, декоративные оси, фон, слишком сложные шрифты, тени, изображения или другие эффекты, введение только для декора. Удаление всех ненужных элементов в диаграмме упрощает интерпретацию, и она выглядит намного элегантнее.
Баланс
Цвета, значки, опорные линии и другие визуальные подсказки могут быть очень полезными, они помогают пользователям сосредоточиться на самых важных элементах информационной панели. Однако неправильное или чрезмерное использование этих элементов может представлять реальную угрозу, поэтому постарайтесь найти адекватный баланс для каждого из них.
Чрезмерная точность
Приложения QlikView должны использовать соответствующий язык для определенной аудитории. При разработке подумайте, будут ли вам полезны точные цифры или они будут отвлекать внимание. В большинстве случаев на информационных панелях отображаются КПЭ высокого уровня, поэтому некоторым пользователям может быть удобнее видеть округленные числа.
3D графики
Вот одна из крупнейших ошибок Microsoft Excel: они заставили всех поверить в то, что трехмерные диаграммы хороши для анализа данных. Почему-то считается, что люди их любят; но, поверьте, они представляют реальную угрозу для бизнес-аналитиков. Несмотря на их визуальное очарование, они легко могут скрыть часть информации и передать неправильное восприятие в зависимости от использования цветов, теней и наклона оси.
Сортировка
Независимо от того, работаете ли вы со списком, гистограммой или таблицей, всегда рекомендуется сортировать объекты, поскольку это добавляет данным контекста. Это может помочь вам найти самые популярные элементы в списке, определить, какой фрагмент больше на круговой диаграмме, если размеры аналогичны, или легко определить контуры в других графических представлениях.
Выравнивание и распределение
Если вы позаботитесь о квадратуре всех диаграмм и фильтров, ваш интерфейс будет иметь чистый и профессиональный вид, который оценит любой пользователь.
Анимации
Несмотря на то, что это может казаться наглядным, анимация диаграмм в конечном итоге отвлекает, это не тот инструмент, который помогает нам визуализировать данные большую часть времени, поэтому будьте осторожны в использовании этого инструмента.
Избегайте полос прокрутки
Полосы прокрутки снижают удобство использования. Если пользователю нужно постоянно прокручивать вправо и влево, чтобы прочитать все цифры на странице, или если ему нужно подниматься и опускаться, чтобы увидеть панель фильтров, он в конечном итоге устанет и откажется от вашей панели.
Согласованность
Если вы хотите создать простой способ навигации по информационной панели, вы не можете забыть о согласованности. Размещение стандартных объектов (таких как поле текущего выбора, объект поиска и панели фильтров) в одной и той же области на каждой вкладке поможет пользователям легко найти все необходимые элементы. Кроме того, применение одного и того же стиля, шрифтов и цветовых палитр во всех ваших диаграммах сделает вашу информационную панель более элегантной и профессиональной.
Пустое пространство
Пространство между диаграммами, таблицами и фильтрами часто называют пустым, или белым пространством, и даже если вы можете его не замечать, это – важная часть любой информационной панели. Отображение десятков объектов в сплошной куче сделает ваш интерфейс загроможденным и, следовательно, трудным для интерпретации. Вот некоторые из преимуществ правильного использования белого пространства:
- Улучшение читабельности;
- Фокусирует и подчеркивает важные объекты;
- Направляет взгляд пользователей, создавая ощущение иерархии на информационной панели;
- Обеспечивает сбалансированный макет, делая интерфейс понятным.
Делаем «мейкап»
Время от времени вы сталкиваетесь с деликатными ситуациями, когда некоторые из пользователей изо всех сил стараются скрыть определенные части данных. Например, низкие продажи или большое количество брака, они могут попросить вас удалить несколько диаграмм или избегать визуальных подсказок, чтобы эти цифры остались незамеченными. Излишне говорить, что информационные панели – это инструменты, предназначенные для информирования, они помогают принимать правильные взвешенные решения, поэтому следует избегать представления вводящих в заблуждение визуализаций.
Бессмысленное разнообразие
Проектируя информационную панель, часто вы не решаетесь использовать один и тот же тип диаграммы несколько раз, опасаясь, что он надоест пользователям. Иногда это может казаться навязчивым, но, если вы собираетесь представить ценные данные в адекватном формате, нет необходимости добавлять новые типы диаграмм только ради разнообразия. Мы хотим, чтобы пользователи получили хороший материал для анализа, а не только красивую графику.