UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Как создать руководство по стилю для визуализации данных
Редакція
Редакція

Опубліковано

Как создать руководство по стилю для визуализации данных

#ui
  • Примеры из руководств по стилю Google

  • London City Intelligence

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

Примеры из руководств по стилю данных Sunlight Foundation и Consumer Financial Protection Bureau.

В 2014 году я создала одно из первых в мире руководств по стилю визуализации данных для Sunlight Foundation, а затем еще одно - для Consumer Financial Protection Bureau (CFPB) в 2017 году. Я рада, что все больше организаций выделяют ресурсы на стандартизацию своей работы по визуализации данных.

В первую очередь нужно определить, что именно представляет собой руководство по стилю визуализации данных. В рамках Data Visualization Society я начала собирать примеры руководств для различных типов организаций. Я буду подробно изучать все, что связано с обычной практикой данного процесса, как она различается в разных типах организаций, и определять инновационные расширения, которые другие смогут рассмотреть в своих собственных руководствах. Чем больше примеров этого процесса у меня будет, тем лучше, поэтому, пожалуйста, отправьте руководства и добавьте в электронную таблицу!

Электронная таблица с примерами руководств по стилю визуализации данных

Руководства по стилю визуализации данных

Руководства по стилю визуализации данных являются стандартами для форматирования и проектирования представлений информации, таких как диаграммы, графики, таблицы. Шаблоны для различных инструментов (например, Excel, R, D3.js или Tableau) часто сопровождают руководство, чтобы показать, как легко применять стандарты из руководства.

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

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

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


Примеры руководств по стилю визуализации данных

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

Non-profit

Sunlight Foundation

Эти руководящие принципы определяют, какие цвета следует использовать, и определяют конкретные вкусы и общие значения, которые, как правило, повторяются в работе Sunlight (например, при использовании диаграмм "за/против" для политических партий). Существует также подробная спецификация для базовой структуры диаграмм и того, как включить брендинг, чтобы обеспечить согласованность всех диаграмм Sunlight.

Примеры страниц из руководства по стилю визуализации данных Sunlight Foundation, показывающих, для каких цветов используются цвета и базовая структура диаграмм

Институт Катона

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

Примеры страниц из руководств по визуализации данных Института Катона, в которых подробно описано, как следует и не следует использовать viz:

Управление

Consumer Financial Protection Bureau (CFPB)

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

Примеры из руководства по разработке CFPB, которые показывают, как следует визуализировать значения проекта и как писать альтернативные теги для графиков:

London City Intelligence

Это руководство углубляется в выбор цвета и объясняет почему некоторые цвета круто сочетаются и выполняют свои функции вместе, а некоторые нет. Руководство отлично демонстрирует примеры различных типов данных для светлых и темных фонов.

Образцы страниц из Руководства по проектированию данных City Intelligence, которые показывают различные цветовые схемы:

Журналистика/Новости

Dallas Morning News

Руководство The Dallas Morning News содержит подробные сведения о выборе цвета и стиля для карт. Оно также предоставляет карту работы графического процесса в организации, как он влияет и на что. Руководство по стилю бесполезно, если люди в компании не знают, как правильно его использовать и работать с системой.

Примеры страниц из Dallas Morning News Stylebook с подробным описанием цветов и стилей для карт и процесса создания графики

BBC Global Experience Language

У системы дизайна BBC есть раздел «Как проектировать инфографику». Примечательные моменты включают множество примеров меток и раздел о том, как разработать адаптивную графику, которая работает на разных устройствах.

Примеры от BBC GEL для ярлыков и как создавать подходящий дизайн для различных устройств:

For Profit

Google Material Design

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

Примеры из Google Material Design, как лучше использовать или не использовать визуализацию данных и как форматировать информационные панели:

IBM

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

Образцы из V1 IBM Design Language, демонстрирующие намерение визуализации данных и различные типы диаграмм:

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


Другие виды руководств по стилю

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

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

Проектирование систем - это полный набор стандартов и документации. Все остальные примеры, приведенные ниже, могут работать вместе в целостной системе проектирования. Они также могут содержать библиотеки кода и пакеты для разработчиков, а также компоненты дизайна. Правительство США имеет полную систему проектирования со многими из этих систем, а у UX Pin есть удивительная таблица систем проектирования, которая классифицирует их компоненты.

Домашняя страница и различные разделы системы веб-дизайна США

Руководства по брендам или руководствам по стилю - это документы, традиционно создаваемые дизайнерами для документирования того, как сохранить целостность бренда компании в различных реализациях. Они определяют фирменные цвета с помощью цветовых значений, стиля оформления и использования, а также того, как использовать логотип. Они важны для того, чтобы бренд был согласованным с материалами, созданными разными людьми, и помогал понять основную систему. Блог о дизайне Brand New часто использует примеры из руководств по стилю при просмотре новых логотипов. Руководства по брендам будут влиять на цвета и типографику, которые используются для визуализации данных, а также на то, как логотип используется в диаграммах.

Пример от Linkedin о том, как правильно использовать логотип.

Редакционные правила или руководства по стилю контента определяют тон бренда, а также конкретное использование языка, например, как и когда сокращать или использовать заглавные буквы. Mailchimp - отличный пример бренда с неповторимым уникальным тоном и подробным руководством по его сопровождению. Редакционные указания обычно пишутся авторами контента и полезны всем сотрудникам организации или сторонним подрядчикам и консультантам, которые пишут что-либо о компании. Лорен Жирардин написала «Как создать руководство по стилю редакции для вашего агентства» специально для руководств, но его содержание применимо за пределами руководящего сектора. Руководства по стилю визуализации данных извлекают контент из руководства по стилю редактирования для использования заголовков и надписей.

Пример из руководства MailChimp по правильному использованию сокращений

Библиотеки шаблонов документируют, как элементы дизайна используются вместе на веб-сайте, например, на определенных типах страниц или при навигации. У GEL BBC есть прекрасный пример в рекомендациях. Пол Боаг (Paul Boag) написал статью «Как создать библиотеку шаблонов и зачем это необходимо», в которой дается хороший обзор библиотек шаблонов и почему они полезны для UX. Визуализация данных сама по себе является шаблоном, который имеет свой собственный набор компонентов, таких как заголовки, субтитры, диаграммы, данные, источники и т. д. Все они работают вместе, сообща, чтобы создать шаблон визуализации.

Шаблоны от BBC GEL, которые показывают, как взаимодействуют все компоненты

«Диаграммы диаграмм» (так я их называю из-за отсутствия лучшего названия) показывают различные типы визуализации для определенных типов данных. Они могут быть частью более обширного руководства по стилю, но сами по себе не содержат достаточно информации, чтобы показать особенности стиля и почему были приняты решения, которые следует отнести к категории руководства по стилю. Примерами могут служить Visual Vocabulary, Chart Chooser cards, Graphic Continuum poster, и веб-сайт Data to Viz.

Пример из FT Visual Vocabulary для разных типов диаграмм


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


Перевод статьи Amy Cesal

Топ коментарі (0)