Дизайн диаграмм — принципы, которые должен знать каждый дизайнер
Перевод статьи Designing Charts — Principles Every Designer Should Know by Ryan Bales.
Давайте поговорим о диаграммах. Любой дизайнер, который работал над проектом, требующим визуализации данных знает, что это может обернуться чрезвычайно сложным (и полезным) дизайнерским испытанием.
Последние 15 лет я проектирую сложные мобильные и веб-приложения, работающие с большими объемами данных, поэтому мне приходится ежедневно сталкиваться с диаграммами (гляньте, что я имею в виду на dribbble). Итак, я хочу поделиться некоторыми дизайн-принципами, которые использую для создания эстетически приятных и функциональных диаграмм, столь любимых пользователями.
Используйте привычный тип диаграмм
Для дизайнера может быть веселым занятием экспериментировать с оригинальными и странными типами диаграмм (такими как Streamgraph), но пользователи не должны учиться читать выдуманную вами диаграмму. В большинстве случаев необходимо использовать более распространенные: диаграммы-области, столбчатые, линейные или круговые.
Не более 5 секторов в круговой диаграмме
Общее правило состоит в том, чтобы обходиться пятью секторами и меньше, при использовании круговой диаграммы. Чем больше секторов на круговой диаграмме, тем сложнее показать пользователю информативный контент. В конце концов, вам придётся придумывать дурацкие решения, с показом лейблов при наведении курсора. Честно говоря, проще полностью избежать этого, используя другой тип диаграммы.
Организуйте последовательности данных
Если вы не работаете с датами, то можете значительно улучшить читабельность, сортируя последовательности данных по возрастанию или убыванию. В основном, это относится к столбчатым диаграммам.
Избегайте 3D-диаграмм
3D-диаграммы не представляют абсолютно никакой практической ценности (разве что для VR) — они даже выглядят плохо.
Не используйте случайные цвета
Некоторые фреймворки для построения диаграмм генерируют цвета последовательностей данных случайным образом. Эти алгоритмы редко назначают цвета, соответствующие общей цветовой схеме и, одновременно, обеспечивающие достаточное визуальное отличие между последовательностями данных. Лучше придумать свою собственную цветовую схему. Убедитесь, что у вас достаточно цветов для всех потенциально возможных последовательностей данных.
Линии тренда обычно отвлекают
Линии тренда всегда кажутся отличным дополнением к диаграмме, но на самом деле они редко показывают что-либо новое, чего пользователь не увидел в существующих данных. Если вы всё-таки решили добавить линию тренда, по крайней мере разрешите пользователю отключить ее.
Не зависьте от всплывающих подсказок
Думайте о подсказках, как о предоставлении дополнительной или расширенной информации. Иными словами, подсказка не должна быть единственным способом для пользователя увидеть нанесенные значение.
Не включайте легенду без крайней необходимости
Когда у вас есть только одна последовательность данных, то, вместо добавления объёмной легенды, используйте для её обозначения заголовок диаграммы.
Используйте линии сетки, только если это действительно полезно
Линии сетки полезны, в качестве направляющих от метки до связанных с ней данных. На несложных диаграммах линии сетки обычно не нужны. Если вы используете сетку, то важно решить, нужна ли она на обоих X- и Y-осях. Чаще всего, сетка нужна только на одной из них.
Используйте реальные данные в ваших макетах
Дизайнеры склонны создавать прекраснейшие из возможных диаграмм, без привязки к реальным данным, которые будут отображаться после реализации.
Это может привести к нескончаемой головной боли разработчиков, пытающихся внедрить ваш дизайн, и, что еще важнее, вы не проверите, будет ли дизайн диаграммы удобным в реальной жизни.
Лучшее решение — это создавать два варианта дизайна. Первый, будет показывать диаграмму в идеальных условиях (т. е. оптимизирован чисто для эстетических целей). Этот дизайн можно использовать в своём портфолио и показывать потенциальным клиентам. Второй вариант с реальными данные, которые будут отображаться после имплементации. Этот дизайн вы можете передать разработчикам.
И напоследок: всегда есть исключения
Будучи дизайнером, вы обязаны использовать здравый смысл и креативность при визуализации данных. Однако, данные могут быть запутанными и выразительно подать их — нетривиальная задача.
Вы можете обнаружить, что данные, с которыми вы работаете, плохо вяжутся с некоторыми принципами, изложенными выше — без проблем, это нормально нарушать правила. Главное, что бы вы тестировали свои дизайны в реальных условиях.
