В CRM собирают много разных данных — графики помогают представить их в максимально удобном виде. Чтобы в CRM от T1 Консалтинг визуализации были понятными и приятными, перед разработкой нового дашборда с диаграммами внутренняя команда дизайнеров проанализировала 20 реальных систем, собрала полезную информацию из Nielsen Norman Group, гайдлайнов и других источников.
6955 просмотров
В этом материале дизайнеры интерфейсов T1 Консалтинг Олег Бурцев, Елизавета Горлова и Арина Шулева рассказывают и показывают:
— Как правильно использовать разные типы диаграмм.
— Как собрать цветовую палитру.
— Как сделать собственную универсальную сетку.
— Как еще улучшить взаимодействие пользователя с продуктом.
— Как в результате выглядит дашборд с графиками и диаграммами в T1 CRM.
Руководство по использованию диаграмм
1. Круговая диаграмма (Pie chart)
Круговые диаграммы используют, пожалуй, чаще всего. С помощью них можно показать части целого в процентах, где сумма сегментов равна 100%.
Как выбрать лучший тип диаграмм для ваших целей
Рекомендации:
- Не используйте больше пяти сегментов, иначе они будут слишком тонкими, чтобы их можно было сравнить.
- Делайте сноски у каждого сегмента, чтобы пользователь мог быстро получать информацию.
- Тонкие кольцевые диаграммы считываются хуже.
- Расположите сегменты по убыванию их размера для удобного сравнения, чтобы подчеркнуть иерархию.
- Используйте контрастные цвета вместо тонов одного цвета.
2. Линейная диаграмма (Line chart)
Линейные графики используют, чтобы показать динамику изменений за определенный период времени.
Рекомендации:
- Не используйте больше 5—7 линий.
- Выбирайте разные стили линий для выделения, сравнения и подчеркивания иерархии.
3. Диаграмма с областями (Area chart)
Существует три типа диаграмм с областями: с одной областью (single area charts), наложением (overlapping area charts) и накоплением (stacked area charts).
- Диаграммы с наложением используют для сравнения значения между группами.
- Диаграммы с накоплением подойдут, когда нужно увидеть суммарную величину и понять, как она распределяется по группам. Сравнение высоты сегментов позволит увидеть, как соотносятся подгруппы по вкладу в общий результат.
Рекомендации:
- Не используйте диаграммы с областями, если хотите показать больше 3—4 категорий. Лучше вместо них выбирать линейные графики.
4. Столбчатая диаграмма (Bar and column charts)
Столбчатые диаграммы (bar and column charts) используют для сравнения значений или отображения разницы в течение периода времени.
Отличие column chart от bar chart: в первом вертикальные столбцы, во втором — горизонтальные.
Столбчатые диаграммы делятся на три типа: одинарные (single bar charts), с группировкой (clustered bar charts) и с накоплением (stacked bar charts)
Типология дашбордов и выбор диаграмм
- Столбчатые одинарные диаграммы используют для отображения величины и соотношения данных.
- Диаграммы с группировкой подойдут для сравнения значения между группами.
- Диаграммы с накоплением покажут отношение части каждой категории к целому.
Рекомендации:
- Всегда начинайте ось Y с 0, чтобы правильно отображать значения на графике.
- Если есть длинные подписи, располагайте графики горизонтально.
- Используйте контрастные цвета для столбчатых диаграмм с накоплением.
- Располагайте по порядку ряды данных (только не делайте так, если ваш график включает в себя даты).
- Оставляйте между столбцами одной группы небольшое расстояние: это облегчит восприятие диаграммы.
- Добавляйте значения над столбцами, когда это возможно. Если подписи не могут уместиться на графике с большим количеством столбцов, скрывайте значения в тултип. Тогда данные будут появляться при наведении на график.
5. Воронкообразная диаграмма (Funnel chart)
Воронкообразная диаграмма — тип диаграммы, который полезен, чтобы показать последовательный отсев пользователей на каждом новом этапе бизнес-процесса. Например, при прохождении по воронке продаж.
Рекомендации:
- Используйте такой тип диаграммы, если у вас есть не менее четырех этапов.
- Чтобы лучше визуализировать данные в воронкообразной диаграмме, используйте столбчатую диаграмму с выравниванием по левой стороне. Ведь человеку проще сравнивать этапы, если они начинаются в одной точке. Тем не менее, эту воронку иногда трудно «продать», поскольку она может показаться «менее привлекательной».
- Если хотите придерживаться формы «воронки», сделайте высоту каждого этапа пропорциональной значению, избегая эффекта равного треугольника.
6. Каскадная диаграмма (Waterfall chart)
Каскадная диаграмма показывает влияние положительных и отрицательных величин на начальное значение. Начальное и конечное значения отображаются в виде целого столбца, промежуточные значения представляют собой “плавающие” столбцы.
Рекомендации:
- Обозначайте цветом положительную и отрицательную динамику.
7. Пузырьковая диаграмма (Bubble chart)
Пузырьковую диаграмму в основном используют для отображения и демонстрации взаимосвязей между числовыми переменными.
Рекомендации:
- Используйте тултип, чтобы показать, как разные размеры пузырьков соответствуют значениям переменной.
- Ограничивайте возможное количество пузырьков для построения.
8. Диаграмма Ганта (Gantt chart)
Диаграмму Ганта используют для планирования и управления проектами. Это горизонтальная столбчатая диаграмма, где одна ось отображает временную шкалу, а другая — список задач. Сами задачи представлены столбцами, их расположение на графике и длина показывают начало, продолжительность и окончание задачи.
Рекомендации:
- Цвета можно использовать для разделения задач на группы.
- Чтобы показать степень завершенности задачи, столбец можно частично заполнить, заштриховать или использовать другой цвет.
- Показать, какие задачи зависят друг от друга, помогут соединительные стрелки.
- Используйте проходящую через диаграмму вертикальную линию для выделения текущей даты.
Выбор цветовой палитры
Цвет — хороший инструмент для усиления смысла и ясности отображения данных, но только если понимаем, как он работает и как избежать проблем из-за неправильного использования.
При проработке цветовой палитры мы выделили следующие моменты:
- Чтобы объекты в таблице или на графике были хорошо видны, используйте цвет фона, который контрастирует с объектом.
- Используйте мягкие естественные цвета для большей части информации.
- Убедитесь, что палитры доступны для людей с ограниченными возможностями зрения, и следите, чтобы яркость цветов значительно различалась. Можно использовать другие методы акцентирования данных, например, высококонтрастное затенение, форму или текстуру.
- Не забывайте сравнивать цвета друг с другом, они должны выглядеть гармонично.
- Палитры-градиенты подходят не для всех типов графиков. Пользователь должен без затруднений различать цвета и сопоставлять с легендой.
В нашей дизайн-системе семь базовых цветов — Blue, Cyan, Green, Yellow, Orange, Red, Purple, а также два варианта серого (Grey), каждый из которых имеет 20 градаций. Исходя из рекомендаций и существующей палитры, мы подобрали наиболее подходящие цвета для графиков:
Создание сетки
Чтобы можно было использовать сетку в дизайне разных графиков, она должна быть универсальной:
- Масштабироваться по высоте и ширине, так как нужна реализация под блоки разных размеров.
- Подстраиваться под выбранное количество значений по осям, не сбивая размер самой сетки.
- Быть максимально кастомизируемой, иметь возможность добавления и удаления осей, а также изменения стиля линий сетки с пунктирного на сплошной.
Анализ данных и виды диаграмм: как выбрать визуализацию
Видов диаграмм очень много, но в управленческой отчетности чаще используется всего 5. И даже в них начинающие аналитики совершают одни и те же ошибки. А в результате получают от руководителей «по шапке»: потратил время, а отчет в итоге все равно непонятный.
Диаграммы нужны не для того, чтобы отчет стал красивым (хотя и это важно). Главная задача визуализации — четко отображать смысл данных.
Вот вам шпаргалка, которая поможет правильно использовать стандартные диаграммы в визуализации данных.
Вид анализа данных — основа для выбора диаграммы
Первое, что нужно сделать перед выбором визуализации — понять, что именно мы хотим показать. И какой вид анализа данных будем использовать.
Существует 4 базовых вида анализа. Для визуализации каждого из них можно использовать только определенные виды диаграмм: остальные исказят восприятие данных и просто не помогут увидеть нужное.
Базовые виды анализа данных
Рейтинг — этот вид анализа мы используем, когда нужно сравнить между собой несколько показателей. Например, понять, какой магазин приносит больше прибыли, кто из менеджеров заключил больше сделок, по какой статье у компании самые большие расходы (ну или самые маленькие). То есть это любое количественное сравнение по шкале, градация от большего к меньшему.
Динамика — такой вид анализа мы выбираем, когда нужно проследить изменение одного показателя. Например, определить сезонность для нашего товара, увидеть, как меняется объем продаж: когда есть пики, а когда — падения.
Структура — используется в случаях, когда нам важно разделить нечто целое на доли и показать объем каждой. Например, если нужно сегментировать клиентскую базу, группы товаров или оценить структуру клиентского портфеля. Абсолютные значения здесь отходят на второй план, на первом — именно доли.
Взаимосвязи — этот вид анализа редко используется в управленческой отчетности, но иногда случается, если нужно установить отношение между несколькими переменными. Например, сопоставить темпы продаж с курсом доллара или определить характер взаимосвязи между выручкой и количеством товара.
Базовые виды диаграмм
Для каждого вида анализа данных можно использовать только определенные визуализации. Есть 5 базовых и самых популярных видов диаграмм.
1. Линейчатая диаграмма. Это диаграмма с горизонтальными столбцами.
2. Гистограмма. Это диаграмма с вертикальными столбцами.
В английском языке обе диаграммы со столбцами называются барчартом, который может быть или горизонтальным, или вертикальным. Мы же привыкли к разным названиям, к тому же они используются и в продуктах MS Office.
3. График. Выглядит как линия с промежуточными точками данных на ней.
4. Круговая диаграмма. Сплошной круг, разделенный на сектора. Еще ее называют «пирогом» или пай чартом. Частный случай такой визуализации — кольцевая диаграмма, напоминающая по форме бублик.
5. Пузырьковая диаграмма. Английское название — Bubble Chart: размер пузырьков здесь служит дополнительным измерением данных. Это разновидность точечной диаграммы, которую также называют диаграммой рассеяния или scatter plot.
Источник: alexkolokolov.com
Топ-9 диаграмм для визуализации данных
Рассказываем о визуализации данных. Познакомим вас с подборкой аналитических отчетов из наших решений, в которых используются разные инструменты для визуализации данных: от базовых до продвинутых.
Зачем нужна визуализация данных?
Люди лучше воспринимают и запоминают данные в визуальном формате. Информация становится привычнее и понятнее, если подать ее в виде красивых схем, графиков и диаграмм.
Данные визуализируют, чтобы в моменте получить представление о явлении или состоянии процесса, который мы анализируем. Визуализация данных позволяет нам сделать фотографию ситуации «здесь и сейчас», не погружаясь в цифры и таблицы.
Преобразование необработанной информации в графический формат помогает доступно объяснять сложные вещи для решения таких бизнес-задач, как анализ эффективности направлений деятельности, анализ динамики выполнения задач, анализ достижения целей. Успех визуализации напрямую зависит от правильности ее применения, а именно от выбора и грамотного использования типов графиков и диаграмм.
Осталось выяснить, какие методы интерпретаций данных подойдут вам. Для этого сначала перечислим традиционные способы визуализации данных на примере решения UN ESCWA Data Portal, а затем перейдем к более продвинутым, на примере решения 3M™ Benchmark Portal.
Рис. 1. Круговая Диаграмма
Рис. 2. Столбиковая Диаграмма
Рис. 3. Линейный график
Самые популярные типы визуализации данных
Выше мы привели несколько примеров традиционных способов визуализации данных, взятых с Портала открытых данных, разработанного Smart Analytics для ЭСКЗА ООН. Пользователи данного портала – любые посетители, заинтересованные в изучении социальных и экономических статистических данных 18-ти Арабских государств.
Рис. 1. Круговая Диаграмма
Круговая диаграмма – это один из наиболее распространенных и простых способов графического представления количественных данных. Такие диаграммы легко считывать и воспринимать, потому что отношения частей от целого показаны на ней простым и наглядным образом. Круговые диаграммы идеально подходят для того, чтобы быстро сформировать представление о пропорциональном распределении данных. На нашем примере – распределение объемов выбросов CO2 в разрезе секторов экономики.
Рис. 2. Столбиковая Диаграмма
Столбиковая диаграмма или гистограмма – еще один популярный способ визуализации данных для быстрого восприятия информации. Гистограммы преобразовывают набор данных в прямоугольные столбцы, высоты или длины которых пропорциональны величинам, которые они отображают. Такие диаграммы значительно упрощают сравнение сопоставимых данных одной категории в рамках ограниченного периода времени. Пример — изменение численности населения страны за конкретный период или на нашем скриншоте – динамика изменения структуры ВВП стран Юго-Западной Азии за последние 18 лет.
Рис. 3. Линейный график
Как и столбиковые диаграммы, линейные графики помогают визуализировать данные в компактном и точном формате, что позволяет легко воспринимать информацию, отмечать тренды или соотношения показателей (при использовании нескольких линий). Линейные графики используются для отображения результирующих данных относительно непрерывной переменной – чаще всего времени. В этом типе визуализации необходимо правильное использование разных цветов, чтобы сделать анализ информации еще проще для пользователей. На нашем примере – линейный график, показывающий число прибывших и покинувших Арабские страны пассажиров с 2005 по 2018 гг.
Наш Портал открытых данных позволяет визуализировать информацию в виде таблиц, диаграмм, графиков и текстов. В ЭСКЗА ООН еще никогда не было настолько удобного и интуитивно-понятного инструмента для распространения данных.
Statistics Division
UN ESCWA
Типы визуализации данных для более глубокого анализа
Бывает, что при простой визуализации данных не хватает нужной детализации, и поэтому её недостаточно. Чтобы уточнить информацию, вынести на графики и диаграммы существенные детали, применяются продвинутые способы визуализации данных.
В качестве примера мы продемонстрировали решение, разработанное для отраслевого подразделения корпорации 3М (Health Information Systems). Это Бенчмаркинг-портал, предоставляющий пользователям эффективные и наглядные инструменты для анализа эффективности работы бельгийских госпиталей, их сравнительного анализа и принятия решений по управлению затратами. Решение также может применяться в разных индустриях.
Рис. 4. Диаграмма Санкей
Рис. 5. Лепестковая или Радиальная Диаграмма
Рис. 6. Лепестковая Диаграмма
Рис. 7. Диаграмма Рассеяния
Рис. 8. Тепловая Карта
Рис. 9. Скрипичная Диаграмма
Рис. 4. Диаграмма Санкей
Диаграмма Санкей – это специфический тип визуализации, используемый для отображения потока от одного набора значений к другому. Такой тип диаграмм часто используют для иллюстрации бизнес-процессов или движения потоков. Диаграмма Санкей показывает нагрузку, пропускную способность, эффективность, взаимосвязи, их силы и конкретный вклад в общий поток.
Линии диаграммы могут соединяться или разветвляться. Ширина линий напрямую связана с долей потока: чем больше параметр, тем толще линия. Диаграмму часто используют для иллюстрации распределения бюджетных доходов и расходов. На нашем примере диаграмма отображает 2 модели финансирования госпиталей: слева – старый вариант, справа – новый вариант. Она позволяет анализировать изменение структуры финансирования из-за перехода к новому набору правил модели.
Рис. 5. Лепестковая или Радиальная Диаграмма
Радиальная диаграмма, которая также известна как паукообразная или лепестковая диаграмма, полезна для проведения сравнения между количественными переменными. Такие диаграммы позволяют легко сравнивать сразу несколько показателей и видеть, есть ли в них существенные отклонения, которые могут потребовать дальнейшего изучения. В нашем примере радиальная диаграмма сравнивает между собой профили ухода в госпитале. Она демонстрирует частоту оказания различных процедур в однотипных отделениях, например, в реанимации. Чем выше частота оказания процедур ухода, тем больше расходов требуется на ту или иную группу эпизодов ухода.
Pис. 6. Лепестковая Диаграмма
В следующем примере еще один аналитический отчет с использованием лепестковой диаграммы. Этот пример отображает обобщённую ситуацию в госпитале по ключевым характеристикам качества лечения: уровню повторных обращений пациентов, больничных осложнений, смертности и относительной продолжительности пребывания в госпитале. Красная линия соответствует усреднённым значениям, темно-синяя – текущему состоянию в госпитале, пунктир – ситуации в предыдущем квартале.
Рис. 7. Диаграмма Рассеяния
Диаграмма рассеяния или точечная диаграмма является одним из семи основных графических методов, которые наиболее полезны при устранении проблем с качеством. Она представляет собой график, на котором по горизонтальной и вертикальной оси откладываются значения, и каждая пара значений может быть представлена в виде точки. По разбросу точек на данном графике можно оценить точность модели. Если большая часть точек сосредоточена вдоль линии, а значительные отклонения редки или совсем отсутствуют, то модель работает хорошо. Если разброс точек велик, то точность модели низкая.
На скриншоте каждая линия представляет собой отдельную диаграмму рассеяния. Данный аналитический отчёт показывает распространённость ошибок кодирования по определённым категориям ухода в госпитале, где каждая категория ухода предполагает уход по соответствующей группе патологий, а также показывает качество кодирования в госпиталях. Красные окружности – это усредненные значения, а синие показывают состояние в текущем госпитале.
Рис. 8. Тепловая Карта
Тепловая карта служит для отображения больших объемов сравнительных данных с представлением значений в виде маркированных цветовых плиток. Тепловые карты удобны для демонстрации вариативности множества переменных, выявления паттернов, отображения сходств переменных друг с другом и определения наличия взаимосвязей между ними.
Тепловую карту удобно использовать для сравнения эффективности подразделений компании или для определения приоритетных направлений инвестирования и выявления проблемных областей. На примере карта показывает распространённость диагнозов пациентов по группам патологий.
Рис. 9. Скрипичная Диаграмма
И последний тип – скрипичная диаграмма. Эта статистическая диаграмма используется для визуализации распределения данных и их плотности вероятности. Каждая «скрипка» представляет группу или переменную. Форма представляет оценку плотности вероятности переменной: чем больше точек данных в определенном диапазоне, тем больше скрипка для этого диапазона. Несмотря на то, что график кажется необычным, он часто бывает достаточно полезен, особенно, когда нам важно показать форму распределения.
Скрипичная диаграмма используется для отображения сравнения переменного распределения по разным «категориям». Она помогает пользователю определить, возможна ли замена вероятностной оценки каким-либо средним значением.
В нашем примере каждая скрипка симметрична слева направо. Однако, в идеальной классификации – скрипки должны быть компактными с очень короткими “хвостами”. В нашем же случае, мы видим, что скрипки вытянутые, медианное значение сильно растянуто. Это значит, что категории были подобраны не самым лучшим образом.
Мы слышали только хорошие отзывы о нашем Портале.
Пользователи Портала
3M Health Information Systems
Визуализация данных для решения задач любой сложности
Визуализация данных – мощный инструмент демонстрации результатов бизнес-анализа, помогающего наглядно представлять данные и давать рекомендации пользователям.
Возможность визуализировать информацию разными способами: от круговых диаграмм, гистограмм до радиальных и скрипичных диаграмм, делает данные интерпретируемыми и наглядными для пользователей. А правильно подобранный тип аналитического отчета поможет сделать верные выводы и принять обоснованные решения. При этом важно, чтобы данные были понятны всем категориям пользователей: и аналитикам, и руководителям, и любым заинтересованным внешним пользователям.
Решения в области визуализации и распространения данных, разрабатываемые Smart Analytics, позволяют работать с широким набором источников данных и дают возможность пользователям любого уровня – от новичков до продвинутых дата-аналитиков самостоятельно анализировать данные, конструировать интерактивные отчеты любой сложности и делиться информацией с заинтересованными пользователями по всему миру.
Теги
- Визуализация данных
- Дашборды
- Анализ данных
- Бизнес-аналитика
Источник: www.sm-analytics.com.ru