UXPUB

UXPUB - сообщество из 3,050 дизайнеров и творческих людей

Место, где дизайнеры делятся опытом

Создать аккаунт Войти
Редакция
Редакция

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

Шесть дизайн принципов построения любой диаграммы и графика от Google

Введение в новые правила Google Material Design по визуализации данных

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

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


Будьте честны

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

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


Восхищайте пользователей

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

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


Придайте ясности фокусу

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

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


Масштабность

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

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


Обеспечьте структуру

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

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

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


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


Перевод статьи Manuel Lima

Обсуждение (0)