Как сделать диаграммы, с которыми данные станут понятными: опыт команды дизайнеров T1 CRM

В CRM собирают много разных данных — графики помогают представить их в максимально удобном виде. Чтобы в CRM от T1 Консалтинг визуализации были понятными и приятными, перед разработкой нового дашборда с диаграммами внутренняя команда дизайнеров проанализировала 20 реальных систем, собрала полезную информацию из Nielsen Norman Group, гайдлайнов и других источников.

В этом материале дизайнеры интерфейсов T1 Консалтинг Олег Бурцев, Елизавета Горлова и Арина Шулева рассказывают и показывают:

— Как правильно использовать разные типы диаграмм.

— Как собрать цветовую палитру.

— Как сделать собственную универсальную сетку.

— Как еще улучшить взаимодействие пользователя с продуктом.

— Как в результате выглядит дашборд с графиками и диаграммами в T1 CRM.

Круговые диаграммы используют, пожалуй, чаще всего. С помощью них можно показать части целого в процентах, где сумма сегментов равна 100%.

Рекомендации:

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

Как сделать диаграммы, с которыми данные станут понятными: опыт команды дизайнеров T1 CRM

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

Тонкие кольцевые диаграммы считываются хуже.

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

Используйте контрастные цвета вместо тонов одного цвета.

Линейные графики используют, чтобы показать динамику изменений за определенный период времени.

Рекомендации:

Не используйте больше 5—7 линий.

Выбирайте разные стили линий для выделения, сравнения и подчеркивания иерархии.

Существует три типа диаграмм с областями: с одной областью (single area charts), наложением (overlapping area charts) и накоплением (stacked area charts).

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

Рекомендации:

Не используйте диаграммы с областями, если хотите показать больше 3—4 категорий. Лучше вместо них выбирать линейные графики.

Столбчатые диаграммы (bar and column charts) используют для сравнения значений или отображения разницы в течение периода времени.

Отличие column chart от bar chart: в первом вертикальные столбцы, во втором — горизонтальные.

Столбчатые диаграммы делятся на три типа: одинарные (single bar charts), с группировкой (clustered bar charts) и с накоплением (stacked bar charts)

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

Рекомендации:

Всегда начинайте ось Y с 0, чтобы правильно отображать значения на графике.

Если есть длинные подписи, располагайте графики горизонтально.

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

Располагайте по порядку ряды данных (только не делайте так, если ваш график включает в себя даты).

Оставляйте между столбцами одной группы небольшое расстояние: это облегчит восприятие диаграммы.

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

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

Рекомендации:

Используйте такой тип диаграммы, если у вас есть не менее четырех этапов.

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

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

Каскадная диаграмма показывает влияние положительных и отрицательных величин на начальное значение. Начальное и конечное значения отображаются в виде целого столбца, промежуточные значения представляют собой “плавающие” столбцы.

Рекомендации:

Обозначайте цветом положительную и отрицательную динамику.

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

Рекомендации:

Используйте тултип, чтобы показать, как разные размеры пузырьков соответствуют значениям переменной.

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

Диаграмму Ганта используют для планирования и управления проектами. Это горизонтальная столбчатая диаграмма, где одна ось отображает временную шкалу, а другая — список задач. Сами задачи представлены столбцами, их расположение на графике и длина показывают начало, продолжительность и окончание задачи.

Рекомендации:

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

Используйте проходящую через диаграмму вертикальную линию для выделения текущей даты.

Цвет — хороший инструмент для усиления смысла и ясности отображения данных, но только если понимаем, как он работает и как избежать проблем из-за неправильного использования.

При проработке цветовой палитры мы выделили следующие моменты:

Чтобы объекты в таблице или на графике были хорошо видны, используйте цвет фона, который контрастирует с объектом.
Используйте мягкие естественные цвета для большей части информации.
Убедитесь, что палитры доступны для людей с ограниченными возможностями зрения, и следите, чтобы яркость цветов значительно различалась. Можно использовать другие методы акцентирования данных, например, высококонтрастное затенение, форму или текстуру.
Не забывайте сравнивать цвета друг с другом, они должны выглядеть гармонично.
Палитры-градиенты подходят не для всех типов графиков. Пользователь должен без затруднений различать цвета и сопоставлять с легендой.

В нашей дизайн-системе семь базовых цветов — Blue, Cyan, Green, Yellow, Orange, Red, Purple, а также два варианта серого (Grey), каждый из которых имеет 20 градаций. Исходя из рекомендаций и существующей палитры, мы подобрали наиболее подходящие цвета для графиков:

Чтобы можно было использовать сетку в дизайне разных графиков, она должна быть универсальной:

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

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

Инструкция для сбора адаптивной сетки

Основные составляющие сетки — линии по оси X и Y. Для них сделаем отдельные компоненты, чтобы через Variants была возможность выбора их количества (и количества координат по осям) и стиля (прямые или пунктирные), а с помощью Auto Layout зададим автоматические отступы, чтобы сетка могла подстраиваться под любой размер родительского блока.

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

Кажется, что почти готово, но не хватает важных деталей. Во-первых, отобразим координаты по осям X и Y. Здесь мы должны учесть все возможные расположения осей (их четыре: слева, снизу, справа и сверху) и количество линий, которые нужно обозначить.

Во-вторых, нужно добавить возможность отображения подписи каждой шкалы. Этот шаг мы делаем совместно с финальным сбором всех компонентов в единое целое. Используем горизонтальный Auto Layout, чтобы задать все возможные варианты отображения сетки, сохраняя при этом размер (их получилось целых 64!).

Теперь мы можем использовать компонент на макетах под любой график и любые размеры, указывая в нём нужные оси и значения, а во-внутренних компонентах — регулировать количество линий и их стиль.

Здесь мы собрали рекомендации, которые можно применить к нескольким типам диаграмм.

Взаимодействие с диаграммой

Сделайте легенды такими, чтобы их можно было “выключать” по необходимости. Легенды с чек-боксами – отличный вариант. Пользователю понятно, что на них можно нажимать, в отличие от обычных круглых маркеров. Когда категория одна, легенду с чек-боксом можно не делать (так как нет смысла “выключать” одну категорию) — заменяйте её на обычный маркер.
Добавляйте состояние при наведении, чтобы пользователю было легче фокусировать своё внимание и получать необходимую информацию.
Показывайте детальную информацию с помощью тултипа. Мы не всегда можем отображать все значения на графиках, поэтому убирайте их в тултипы.

Подписи

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

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

Если вам нельзя уменьшать количество значений по оси Х (иногда такое бывает), подумайте о том, чтобы расположить график на всю ширину экрана. В крайнем случае можно сделать горизонтальный скролл. Это не самая удобная вещь, но иногда – единственный выход.
Располагайте подписи горизонтально, а не вертикально, и не наклоняйте их.
Значения на осях должны быть понятны — рекомендуем к числовым данным добавлять уточняющие подписи: они могут быть как в самих значениях, так и стоять сверху или сбоку оси.

Еще несколько полезных советов:

Уменьшайте количество линий сетки или вообще убирайте их — большое количество ухудшает восприятие.

Избегайте стиль графиков в перспективе (3D). Такие графики тяжелее считывать.
Подумайте о следующих шагах (актуально для графиков на дашборде):

— Переход в полноэкранную версию, где пользователь сможет посмотреть детальные данные графика (например, можно сделать кнопку или ссылку);

— Дополнительные функции (например, поделиться графиком или экспортировать его).

Теперь мы можем применять получившиеся графики и их сочетания в организации дашбордов для разных ролей пользователей (как правильно скомпоновать диаграммы — тема отдельной статьи). А пока вот один из вариантов, как выглядит интерфейс CRM от T1 с графиками, созданными с учетом представленных в статье советов.

7 комментариев

Aleksei Skorik

06.10.2022

Сохранил, спасибо

Ответить

СлавалС

в части наверное не согласен.
Даже когда часть кольца нарезана мелкими ломтикаминичего страшного, важно чтобы было понятно, что например такие-то конторы занимают совсем немного, но например разница между мелкими в 1-2% может быть существенна.
Так же не очень согласен про сглаживание графиков, где-то и ломаную линию с пиками надо будет оставить.
Но в целом должно быть понятно что за инфа представлена на диаграмме и уметь смотреть ее незамыленным взглядом.
В целом картинки приятные

Егор Плагин

Понравилась статья, сохраню себе, как шпаргалку.

Анни М.

Тоже хотела написать про то, что рекомендация не использовать больше пяти сегментов на круговой диаграмме сомнительна.
А если у заказчика не пять вещей, на которые надо разбить 100%, а больше? Нужно, например, с первого взгляда увидеть, какой сегмент крупнее, а легче всего это сделать на круговой диаграмме. Не вижу абсолютно ничего в ней страшного, особенно если рядом интерактивная легенда, где можно отщелкнуть крупные сегменты и посмотреть внимательней, что из себя представляют мелкие.
+ не раскрыта тема каких-нибудь highcharts, у которых есть свои ограничения в дизайне графиков и которые зачастую используют для построения визуализации данных.