[Перевод] Шесть принципов проектирования диаграмм

Программа перевода самородков дизайн визуализация данных

Шесть принципов построения диаграмм

Введение в новое руководство Google по визуализации данных

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

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

будь честным

Точность и полнота данных имеют первостепенное значение. Не искажайте и не запутывайте информацию для маскировки или фаворитизма. Цените ясность и прозрачность данных.

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

Протянуть руку

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

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

Пожалуйста, пользователю

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

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

четкий фокус

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

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

принять расширение

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

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

обеспечить структуру

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

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

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

Спасибо

Эта работа была бы невозможна без таланта и самоотверженности бесчисленного количества людей в Google. Благодарности: Шуо Янг, Кент Эйзенхут, Шарона Ошана, Кэтрин Мейзнер, Хаэл Фишер, Росс Попофф-Уокер, Ян Джонсон, Джо Нэгл, Райан Вернон, Ник Бирман, Лука Паулина, Джерард Роча, Джей Ти ДиМартайл, Лорена Заллес, Том Гебауэр, Хилал Коюнку, Бетани Фонг, Энн Чоу, Барбара Элдридж и Аня Лаубшер.

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории