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

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

 

Используйте знакомый тип графиков

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

1-fNU9WfamnwRNvjAq82U7yQ

Не делите круговую диаграмму более, чем на 5 областей

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

1-zskKvdQ8VMbwwyvF_UvnlQ

Упорядочьте серию данных

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

1-Q0DjchGpjljdivgAqipUzg

Избегайте трехмерных графиков

3D графики абсолютно бесполезны — они даже некрасиво выглядят.

1-yDwYPo-1bsJ6XFT021FSww

Не используйте случайно сгенерированные цвета

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

1-pA5Q4x-EVlIBp0kM_K2c3w

Трендовые линии, обычно, только мешают

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

1-NxSA-G6FCg5PjswWb_HrLQ

Постарайтесь не зависеть от всплывающих подсказок

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

1-8WGlbDJqoRwdfTn9CQBT8A

Не используйте расшифровку цветов без необходимости

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

1-VOdAUnuMiRJSEvJTFzpIgw

Используйте линии сетки только тогда, когда они полезны

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

1-XB15ukcgvapOR0tafsAZQQ

В набросках графиков используйте реальные данные

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

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

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

1-iZ8VSDOER1-s8GFrPcfseA

И наконец, всегда есть исключения

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

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

Перевод статьи Раяна Бэйлса