{"id":13516,"url":"\/distributions\/13516\/click?bit=1&hash=37bd7b4748a2966bbc26730b25e2618c42f364e4b1fef4e1064b7cb954a0c2b0","title":"\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u043d\u0432\u0435\u0441\u0442\u0438\u0446\u0438\u0438 \u043e\u0442 \u00ab\u0413\u0430\u0437\u043f\u0440\u043e\u043c \u043d\u0435\u0444\u0442\u0438\u00bb","buttonText":"\u0417\u0430 \u0447\u0442\u043e?","imageUuid":"9ff0d7f7-ef07-5cab-961b-7241d5749f52","isPaidAndBannersEnabled":false}
Дизайн
Yandex Cloud

5 способов сделать график или диаграмму понятными и клиентам, и коллегам, и себе

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

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

Фото: Люси Тодд

Гистограммы

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

Фото: Люси Тодд

Что поможет сделать вашу гистограмму понятной:

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

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

Фото: Люси Тодд

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

Линейные графики

Фото: Люси Тодд

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

Красивая диаграмма, которую никто не может прочитать — это просто абстрактное искусство.

Однако и с линейными графиками нужно быть осторожным. У вас должен быть полный набор данных, чтобы избежать искажения картины. Иначе, промежутки с падением или ростом вы не заметите и соедините точки в графике прямыми линиями. Аллен Дауни к своей статье предлагает отличный пример линейной диаграммы, иллюстрирующей вероятность рождения первого ребенка позже срока, в течение девяти недель:

Фото: Люси Тодд

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

Круговые и кольцевые диаграммы

Фото: Люси Тодд

Круговые диаграммы довольно часто используют для визуализации данных. Есть, так называемые круглые (заполненные) диаграммы и кольцевые (похожие на пончики). Однако их использование не всегда оправдано.

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

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

В период с 2016 по 2017 год количество просмотров видеоконтента брендов на YouTube увеличилось на 99%. Круговая диаграмма, показывающая 99%, будет неправильной. Создается впечатление, в 99% случаев люди смотрели ролики от брендов, а это не соответствует действительности. Лучше выбрать гистограмму с двумя столбцами, один из которых представляет количество просмотров в 2016 году, а другой представляет увеличение на 99% по сравнению с прошлым годом:

Фото: Люси Тодд

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

Квантограммы

Фото: Люси Тодд

Квантограмма — это повторяющиеся пиктограммы, используемые для отображения количества. Типичный пример — отображение количества людей. Эта визуализация отлично подходит для изображения небольших чисел (например, «12 новых ресторанов открыли на нашей улице») или процентов/пропорций (например, «на нашей улице три из четырех ресторанов [75%] подают пиццу»).

Для визуализации больших чисел их лучше не применять. Представьте, вам нужно отобразить такую статистику «11 214 единиц, проданных в 2018 году». Однако такое количество иконок почти невозможно изобразить, так что можно пояснить «1 корзина = 1000 товаров» и изобразить 11 корзин.

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

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

Типографика

Фото: Люси Тодд

При правильном использовании типографика — отличный способ визуализировать информацию. Не следует использовать этот тип визуализации данных только для эффектной картинки. Когда подойдет этот тип визуализации:

  • число больше 100;
  • не нужно изображать процент от целого или процентное увеличение / уменьшение;
  • не нужно сравнивать с другим числом.

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

Фото: Люси Тодд

В этом примере имеет смысл визуализировать число 16 с помощью квантограммы — это небольшое число. Но изобразить 1,8 млн было бы невозможно, поэтому дизайнер и воспользовался типографикой.

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

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

Конец.

В Облаке работает сервис по анализу и визуализации бизнес-данных DataLens. Узнать о сервисе и повизуализировать бесплатно можно здесь.

Подписывайтесь на блог Яндекс.Облака, чтобы узнавать еще больше новостей и историй об IT и бизнесе.

Что сейчас активно читают наши подписчики:

0
12 комментариев
Написать комментарий...
Захар Лобанов
примере из годового отчета по динамике поставок Bluetooth-устройств ниже

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

Ответить
Развернуть ветку
Пудж Дотович

Еще и глаза бегают туда сюда постоянно, можно не так прочитать год. Бездарная инфографика. В статье банальщина

Ответить
Развернуть ветку
Руслан Абрамов

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

Ответить
Развернуть ветку
Захар Лобанов

Считаю это неудачной попыткой выделиться.
Конкретно в этом примере визуал победил информативность.
График привлекает внимание, но задачу по быстрой подаче информации не решает.

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

Ответить
Развернуть ветку
Максим Сергеевич

Делай красиво и понятно. Спасибо за полезную статью

Ответить
Развернуть ветку
Serega Sheypak

Эдварда Тафти автор не читал.

Ответить
Развернуть ветку
Кирилл Алексушин

Говорить на языке диаграмм. Книга, которую написали ведущие консультанты Макинзи - советую прочесть и все будет понятно!

Ответить
Развернуть ветку
Serge Tikhonenko

Тот случай, когда incorrect нравится больше, чем correct 

Ответить
Развернуть ветку
Василий Быков

вот уж действительно, делать красивые графики - это настоящее искусство! 

Ответить
Развернуть ветку
Виктория Михалева

Спасибо за статью) полезно

Ответить
Развернуть ветку
Evil Pechenka
Согласно федеральному закону 97-ФЗ «Организатор распространения информации обязан собирать, хранить и предоставлять информацию о действиях пользователей на своем ресурсе уполномоченным госорганам». Все контакты пользовательской адресной книги, электронной почты, данные о количестве и объёме сообщений, обо всех авторизациях через сторонние сервисы, о ведении личной переписки внутри интернет-ресурса, точное время посещений и другие метаданные организатор распространения информации также обязан предоставлять компетентным органам. А с вступлением в силу «пакета Яровой» в июле 2018 года — всё содержимое переписок, звонков и всех любых других действий и взаимодействий пользователей.

Вчера удалил последние данные с Диска, историю действий удалить не могу, Яндекс хочет хранить её вечно. Поэтому спасибо, но нет. 🤷‍♀️

Ответить
Развернуть ветку
Руслан Абрамов

бот, вы заблудились, другая статья 

Ответить
Развернуть ветку
Читать все 12 комментариев
null