Найти в Дзене
why_effect

Пироги vs павуки

Или как не убить зрителя бессмысленной визуализацией Смело читайте, если вы делаете презентации и вам важно понятно визуализировать данные — чтобы смысл рассказа не терялся, а информация правильно доходила до слушателя. Часто, когда нам нужно показать что-то в процентном соотношении, первое, что мы выбираем — круговая диаграмма. Или «пироговая», как мы зовём её внутри компании. Такой вид визуализации данных настолько въелся в сознание, что его можно приравнять к белым человечкам — победителям в области метафор первого порядка (читайте наш материал об этом на Лайфхакере). Вместо того, чтобы привлечь внимание, круговая диаграмма гипнотизирует и высасывает жизненные силы — как паук заматывает нас в тугую паутину бессмыслия. Опытом делится Ира Астафьева — арт-директор WHY_EFFECT. Мы сделали 1100+ проектов, над многими из которых работала сама Ира — она знает, как сделать диаграмму понятной и осмысленной. С пироговой диаграммой есть
несколько неочевидных проблем Рассказываем по порядку 1.
Оглавление

Или как не убить зрителя бессмысленной визуализацией

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

Часто, когда нам нужно показать что-то в процентном соотношении, первое, что мы выбираем — круговая диаграмма. Или «пироговая», как мы зовём её внутри компании. Такой вид визуализации данных настолько въелся в сознание, что его можно приравнять к белым человечкам — победителям в области метафор первого порядка (читайте наш материал об этом на Лайфхакере). Вместо того, чтобы привлечь внимание, круговая диаграмма гипнотизирует и высасывает жизненные силы — как паук заматывает нас в тугую паутину бессмыслия.

Опытом делится Ира Астафьева — арт-директор WHY_EFFECT. Мы сделали 1100+ проектов, над многими из которых работала сама Ира — она знает, как сделать диаграмму понятной и осмысленной.

С пироговой диаграммой есть
несколько неочевидных проблем

Рассказываем по порядку

1. Люди не умеют ставить акценты на круге

Пироговая диаграмма нужна для того, чтобы акцентировать внимание, выделить что-то на фоне остального.

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

Но чаще всего теряем суть — запихиваем в «пирог» начинку из всевозможных видов промышленности и красим их в цвета радуги. Мы думаем, что так нагляднее (или вкуснее =)).

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

И мы уже не можем сказать, какая из жертв была самой большой, а какая — самой маленькой. Просто думаем о том, что это место опасно и сами мы точно туда не сунемся. Однако спрятаться не получится.

2. Аудитория ничего не понимает

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

Легенда — обозначение наименований в столбик рядом с диаграммой — тоже не всегда удобна.
Легенда — обозначение наименований в столбик рядом с диаграммой — тоже не всегда удобна.

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

3. Дизайнер тратит больше времени

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

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

4. А 3D-эффект делает ситуацию только хуже

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

Но на деле из-за 3D-эффекта паук и его паутина получаются объёмными — ещё страшнее, потому что реалистичнее.

Что делать с паучьими ловушками

Если не хочется влипнуть — съешьте паука сами. Вот рецепты приготовления пирогов из паука разной формы.

Замените круговую диаграмму
на столбчатую или прямоугольник

Круг не даёт нам точного обозначения долей — кто-то видит в куске 30%, а кто-то все 45%.

Прямоугольники – это хорошо.
Прямоугольники – это хорошо.

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

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

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

Прямоугольники с заголовком, описанием и иллюстрациями – ещё лучше.
Прямоугольники с заголовком, описанием и иллюстрациями – ещё лучше.

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

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

Эта круговая диаграмма – совершенство.
Эта круговая диаграмма – совершенство.
  • Давайте диаграмме правильный — смысловой — заголовок (о заголовках мы рассказали в материале о блинах и колобках).
  • Используйте не более пяти значений. Если получается больше — меняйте круговую диаграмму на столбчатую.
  • Вписывайте доли по убыванию. Все маленькие кусочки объединяйте в один блок под названием «прочее».
  • Цвета кусочков должны быть одного, спокойного, оттенка. Самое важное можно выделить акцентным.
  • Мы считываем значения диаграммы как циферблат, поэтому их нужно вписывать от большого к малому по часовой стрелке, начиная с 12 часов.
  • Если наименования получаются длинными и не вмещаются внутрь таблицы, лучше создать легенду, а не стрелки-паучьи лапки. С малым количеством значений и по цветам в порядке осветления легенду будет несложно считать.
  • Наименования в сумме должны образовывать 100%, чтобы было удобно сравнивать значения между собой.
  • Не используйте пироговую диаграмму несколько раз подряд — ТОГДА ПАУК ВЕРНЁТСЯ И ТОЧНО УТАЩИТ И СЪЕСТ — человек лучше воспринимает информацию, когда она разбавлена разными визуальными решениями.

Коротко о главном

  • Предназначение пироговой диаграммы — акцентировать внимание на чём-то одном. Мы часто об этом не думаем и выделяем все значения — красим их в цвета радуги, располагаем в хаотичном порядке, приписываем к каждому наименование. Диаграмма становится похожа на большого страшного паука.
  • Круговую диаграмму всегда можно заменить на столбчатую или прямоугольник — так данные считываются легче, а формат выглядит понятнее.
  • При необходимости пирог использовать можно, но стоит помнить о главных принципах:
    - придумывайте смысловой заголовок
    - используйте не более пяти значений и вписывайте их по убыванию
    - в общей сумме должно получится 100%
    - акцентируйте внимание только на одной доле
    - располагайте наименования по часовой стрелке
    - при необходимости создавайте легенду
    - не используйте пироговую диаграмму больше одного раза подряд.

Войну паукам объявила и одержала победу
Полина Вегера, редактор WHY_EFFECT