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

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

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

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

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

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

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

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

Руководство по использованию диаграмм

1. Круговая диаграмма (Pie chart)

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

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

  • Не используйте больше пяти сегментов, иначе они будут слишком тонкими, чтобы их можно было сравнить.
Как сделать диаграммы, с которыми данные станут понятными: опыт команды дизайнеров T1 CRM
  • Делайте сноски у каждого сегмента, чтобы пользователь мог быстро получать информацию.
Как сделать диаграммы, с которыми данные станут понятными: опыт команды дизайнеров T1 CRM
  • Тонкие кольцевые диаграммы считываются хуже.
Как сделать диаграммы, с которыми данные станут понятными: опыт команды дизайнеров T1 CRM
  • Расположите сегменты по убыванию их размера для удобного сравнения, чтобы подчеркнуть иерархию.
Как сделать диаграммы, с которыми данные станут понятными: опыт команды дизайнеров T1 CRM
  • Используйте контрастные цвета вместо тонов одного цвета.
Как сделать диаграммы, с которыми данные станут понятными: опыт команды дизайнеров T1 CRM

2. Линейная диаграмма (Line chart)

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

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

  • Не используйте больше 5—7 линий.
Как сделать диаграммы, с которыми данные станут понятными: опыт команды дизайнеров T1 CRM
  • Выбирайте разные стили линий для выделения, сравнения и подчеркивания иерархии.
Как сделать диаграммы, с которыми данные станут понятными: опыт команды дизайнеров T1 CRM

3. Диаграмма с областями (Area chart)

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

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

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

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

4. Столбчатая диаграмма (Bar and column charts)

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

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

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

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

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

  • Всегда начинайте ось Y с 0, чтобы правильно отображать значения на графике.
Как сделать диаграммы, с которыми данные станут понятными: опыт команды дизайнеров T1 CRM
  • Если есть длинные подписи, располагайте графики горизонтально.
Как сделать диаграммы, с которыми данные станут понятными: опыт команды дизайнеров T1 CRM
  • Используйте контрастные цвета для столбчатых диаграмм с накоплением.
Как сделать диаграммы, с которыми данные станут понятными: опыт команды дизайнеров T1 CRM
  • Располагайте по порядку ряды данных (только не делайте так, если ваш график включает в себя даты).
Как сделать диаграммы, с которыми данные станут понятными: опыт команды дизайнеров T1 CRM
  • Оставляйте между столбцами одной группы небольшое расстояние: это облегчит восприятие диаграммы.
Как сделать диаграммы, с которыми данные станут понятными: опыт команды дизайнеров T1 CRM
  • Добавляйте значения над столбцами, когда это возможно. Если подписи не могут уместиться на графике с большим количеством столбцов, скрывайте значения в тултип. Тогда данные будут появляться при наведении на график.
Как сделать диаграммы, с которыми данные станут понятными: опыт команды дизайнеров T1 CRM

5. Воронкообразная диаграмма (Funnel chart)

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

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

  • Используйте такой тип диаграммы, если у вас есть не менее четырех этапов.
Как сделать диаграммы, с которыми данные станут понятными: опыт команды дизайнеров T1 CRM
  • Чтобы лучше визуализировать данные в воронкообразной диаграмме, используйте столбчатую диаграмму с выравниванием по левой стороне. Ведь человеку проще сравнивать этапы, если они начинаются в одной точке. Тем не менее, эту воронку иногда трудно «продать», поскольку она может показаться «менее привлекательной».
Как сделать диаграммы, с которыми данные станут понятными: опыт команды дизайнеров T1 CRM
  • Если хотите придерживаться формы «воронки», сделайте высоту каждого этапа пропорциональной значению, избегая эффекта равного треугольника.
Как сделать диаграммы, с которыми данные станут понятными: опыт команды дизайнеров T1 CRM

6. Каскадная диаграмма (Waterfall chart)

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

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

  • Обозначайте цветом положительную и отрицательную динамику.
Как сделать диаграммы, с которыми данные станут понятными: опыт команды дизайнеров T1 CRM

7. Пузырьковая диаграмма (Bubble chart)

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

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

  • Используйте тултип, чтобы показать, как разные размеры пузырьков соответствуют значениям переменной.
Как сделать диаграммы, с которыми данные станут понятными: опыт команды дизайнеров T1 CRM
  • Ограничивайте возможное количество пузырьков для построения.
Как сделать диаграммы, с которыми данные станут понятными: опыт команды дизайнеров T1 CRM

8. Диаграмма Ганта (Gantt chart)

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

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

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

Выбор цветовой палитры

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

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

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

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

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

Создание сетки

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

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

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

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

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

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

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

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

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

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

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

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

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

Улучшение взаимодействия

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

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

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

Подписи

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

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

  • Располагайте подписи горизонтально, а не вертикально, и не наклоняйте их.

  • Значения на осях должны быть понятны — рекомендуем к числовым данным добавлять уточняющие подписи: они могут быть как в самих значениях, так и стоять сверху или сбоку оси.
Как сделать диаграммы, с которыми данные станут понятными: опыт команды дизайнеров T1 CRM

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

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

  • Подумайте о следующих шагах (актуально для графиков на дашборде):

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

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

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

Вот что у нас получилось

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

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

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

Ответить

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

Ответить

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

Ответить

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

Ответить

Хорошо, доходчиво)
Со временем понял, что диаграмки это вишенка каждого продукта, без них бизнесу просто не заходит!

Ответить

Очень понятные советы, даже не для дизайнера. Спасибо!

Ответить

Спасибо за статью, тоже сохраню на всякий)

Ответить