Material Design на русском. Часть 40 — Коммуникация: Визуализация данных

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.

На момент перевода эта часть гайда находилась в Beta версии.

Принципы

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

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

Точность

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

Полезность

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

Масштабируемость

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

Типы графиков

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

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

Графики времени

Такие графики показывают данные за определенный период времени. Например графики трендов или графики для сравнения по категориям.

Юзкейсы могут быть следующими:

• Динамика цен на акции
• Статистика по здоровью
• Хронология

1. Линейный график
2. Барчарт (столбчатый)
3. Барчарт с накоплением
4. График «японские свечи»
5. График области (как линейный, только заполнение идет еще по области точек)
6. График временной шкалы (таймлайн)
7. Горизонтальный график
8. График водопад

Графики для сравнения

Такие графики сравнивают данные между различными категориями.

Юзкейсы могут быть следующими:

• Доход в разных странах
• Распределение команд

1. Барчарт
2. Сгруппированный барчарт
3. Пузырьковая диаграмма
4. Многострочный график
5. График параллельных координат
6. График-шкала или пулевой график

Графики для классификации

Графики классификации (или ранжирования) показывают положение элемента в упорядоченном списке.

Юзкейсы могут быть следующими:

• Результаты выборов
• Статистика производительности

1. Горизонтальный барчарт
2. Вертикальный барчарт
3. График параллельных координат

Графики, которые показывают части от целого

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

Юзкейсы могут быть следующими:

• Сводка выручки по категориям товаров
• Учет бюджета

1. Барчарт с накоплением
2. Пайчарт (круговая диаграмма)
3. Донут (пончиковая диаграмма / пончик)
4. График области с накоплением
5. График «плоское дерево» (Treemap)
6. График «солнечные лучи»

Графики корреляции (взаимосвязанное изменение показателей)

Корреляционные графики показывают как связаны данные между двумя или более переменными.

Юзкейсы могут быть следующими:

• Доход и ожидаемая продолжительность жизни

1. График рассеивания
2. Пузырьковый график
3. Комбинированный график (барчарт и линейный)
4. График «тепловая карта»

Графики распределения

Графики распределения показывают, как часто каждое значение встречается в наборе данных.

Юзкейсы могут быть следующими:

• Распределение населения
• Распределение доходов

1. Гистограмма
2. График «ящик с усами» или график размаха
3. График скрипки или скрипичный график
4. График плотности

Графики потоков

Графики потоков показывают как идут данные между состояниями.

Юзкейсы могут быть следующими:

• Денежные переводы
• Подсчет голосов и результаты выборов

1. График Санкея
2. График Ганта
3. Хордовый график
4. Сетевая диаграмма

Графики взаимосвязей

Графики взаимосвязей показывают то, как несколько элементов связаны друг с другом.

Юзкейсы могут быть следующими:

• Социальные сети
• Словесные диаграммы

1. Сетевая диаграмма
2. Диграмма Венна
3. Хордовый график
4. График «солнечные лучи»

Как подобрать графики

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

Графики времени

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

* Базовое значение — это начало по оси Y.

Барчарты и круговые графики

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

• Барчарты показывают значения через длину полосы, используя общую базовую линию
• Круговые графики показывают часть от целого, используя дуги или углы внутри круга

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

Правильно: Барчарты лучше подходят для сравнения во временнном периоде между категориями. На графике четко видны различия между данными за текущий квартал и прошлый.

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

Графики области

Графики областей бывают нескольких разновидностей: с наполнением областей и пересекающимися областями:

• График области с накоплением показывает несколько временных рядов (за один и тот же период времени), сложенных друг на друга
• График с пересекающимися областями показывает несколько временных рядов (за один и тот же период времени), перекрывающих друг друга

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

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

Неправильно: не используй графики с пересекающимися областями так как они делают данные малопонятными и снижают уровень читабельности.

Стиль

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

Графики могут стать полезнее после кастомизации следующих параметров:

• Графические элементы
• Типография
• Иконки
• Оси и надписи
• Легенды и аннотации

Стилизация разных типов данных

Визуальное кодирование — это процесс перевода данных в визуальную форму. Уникальные графические свойства могут быть использованы как к количественным данным (таким как температура, цена или скорость), так и к качественным (таким как категории и т.д).

Список свойст:

• Форма
• Цвет
• Размер
• Область
• Объем
• Длина
• Угол
• Позиция
• Направление
• Плотность

Про отображение множества данных

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

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

Форма

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

Уровень детализации формы

От тебя (дизайнера) зависит то, как ты будешь показывать данные. Данные, предназначенные для точного исследования и сравнения, должны быть представлены формами, подходящими для взаимодействия (имеется ввиду минимальная область срабатывания — 48dp). В то время как данные, предназначенные для выражения общей идеи или тренда, могут использовать формы с меньшей детализацией.

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

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

Цвет

Цвет может использоваться для дифференциации данных графика четырьмя основными способами:

• Отличие категорий друг от друга
• Отображения количества
• Выделение конкретных данных от общего
• Передачи смысла

Распознавание категорий по цвету

Цвет используется, чтобы отличать категории в пайчарте.

Цвет как показатель количества

Цвет используется, чтобы отразить значения данных на карте.

Цвет для акцентирования на каких-то данных

Цвет используется, чтобы выделить определенные данные на графике рассеяния.

Цвет как инструмент для фокусирования внимания

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

Правильно: используй акцентный цвет с нейтральными серыми оттенками, чтобы придать данным акцент и контраст.

Осторожно: большое количество цветов на графике может мешать и запутать пользователя

Цвет для передачи смысла графика

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

Неправильно: не используй цвет без визуального индикатора по смыслу

Доступность

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

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

Линия

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

Линии могут быть применены к определенным элементам, в том числе:

• Аннотации
• Элементы прогнозирования
• Инструменты для сравнения
• Доверительные интервалы
• Аномалии

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

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

Типографика

Текст можно использовать для обозначения различных элементов графика, в том числе:

• Заголовки
• Надписи на данных
• Надписи осей
• Легенда

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

Примеры значений типографики для создания иерархии

Начертание

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

Правильно: Жирное начертание используется только для пары ключевых элементов, что создает сбалансированый макет.

Неправильно: Жирное начертание используется много раз, что затрудняет понимание того, что важно и что неважно на графике.

Иконки

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

Иконка может быть использована для:

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

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

Правильно: Используй иконки со значками, чтобы была понятна ключевая информация.

Неправильно: Избегай использования исключительно иконок для показа важной информации.

Иконки наполняют цвет смыслом. Тут явно иконки показывают восходящий и нисходящий тренды.

Обозначение осей

Надписи на осях объясняют размер и объем отображаемых данных. Например, линейные графики отображают диапазон значений как по горизонтали, так и по вертикали.

Барчарты всегда должны начинаться с базовой линии по оси Х

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

Базовая линия барчарта

Барчарты должны начинаться с базовой линии (начального значения по оси Y), которая равна нулю. Если начинать рисовать график с базовой линии, отсчет которой не равен нулю, может привести к неправильному восприятию данных.

Правильно: Начало графика с базовой линии

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

Обозначение осей

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

Правильно: Подписи к осям должны быть сбалансированы по их количеству.

Неправильно: Не перегружай график большим количеством подписей.

Ориентация текста

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

Текстовые надписи не должны:

• Быть под углом
• Сложенны вертикально

Правильно: Позиционируй текст по горизонтали в барчартах.

Осторожно: Не поворачивай надписи так как это затрудняет их чтение.

Легенда и пояснения

Легенды и аннотации поясняют информацию на графике. Аннотации должны пояснять определенные точки данных и любой другой контент.

1 — Аннотация. 2 — Легенда.

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

Надписи и легенда

Надписи могут быть напрямую расположены на простых графиках. Однако плотные по данным графики (или часть данных на больших графиках) должны отображать надписи в легенде.

Линейный график с надписями прямо на графике.

Линейный график с легендой.

Маленькие экраны

Графики, отображаемые на носимых устройствах (или на других маленьких экранах), должны быть упрощенной версией мобильных или настольных графиков.

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

Осторожно: Не размещай ключевые точки данных за пределами экрана, так как для чтения пользователю понадобиться использовать скрол.

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

Поведение

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

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

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

Поэтапное раскрытие

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

Раскрытие на десктопе: с помощью наведения курсора мыши показывай более подробные данные на графике.

Раскрытие на мобилке: тап и удержание пальцем отобразит всплывающую подсказу над графиком.

Приближение и панорамирование

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

Приближение

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

• На настольном устройстве масштабирование происходит с помощью клика с выделением области для приближения или с помощью прокрутки колеса мыши
• На мобильных устройствах масштабирование происходит с помощью жеста сжатия и растягивания пальцами в определенном месте

Когда масштабирование не является основным действием, оно может быть реализовано с помощью клика с выделением области (на десктопе) или двойного нажатия (на мобильном устройстве).

Панорамирование

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

Процесс панорамирования часто сочетается с масштабированием.

На мобильных устройствах панорамирование осуществляется с помощью жестов, таких как смахивание (свайп) одним пальцем.

Зум на десктопе.

Перемещение по графику на десктопе.

Пагинация

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

Пример перемещения по графику с помощью свайпа.

Управление данными

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

Эти элементы управления также могут отображать метрики, в то время как пользователи настраивают их.

Пример фильтрации данных.

Анимация

Анимация может улучшить и усилить связь между данными и тем, как пользователи взаимодействуют с ними. Анимация должна использоваться целенаправленно (а не декоративно), выражая связь между различными состояниями.

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

На этом примере данные анимируются между фильтрами дат (день, неделя, месяц). Данные за пределами этих фильтров не отображаются ради простоты интерпретации информации.

Анимация показывает то, как связаны два разных графика.

Пустые состояния

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

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

Дашборды

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

Проектирование дашборда

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

Дашборд должен:

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

Информация должа быт раставлена в соответствии с приоритетами, а также упорядочена на основе вопросов, на которые отвечают данные. В примере дашборда выше рассматриваются следующие вопросы:

1. Проблемы, которые требуют первоначального внимания
2. Время возникновения проблемы
3. Место, где возникли проблемы
4. Другие данные, которые влияют на проблемы

Аналитические дашборды

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

Юзкейсы:

• Выделение и обнаружение трендов с течением времени
• Ответы на вопросы “почему” и “что, если”
• Прогнозирование
• Создание подробных отчетов

Примеры аналитического дашборда:

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

Аналитический дашборд, который отображает климатические данные

Дашборды для мониторинга

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

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

Юзкейсы:

• Отслеживание текущего прогресса в достижении цели
• Производительность системы в режиме реального времени

Примеры дашбордов для мониторинга:

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

Пример дашборда для мониторинга

Дашборды для показа сводки данных

Подобного рода дашборды дают сводку по данным в интересующей теме.

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

Юзкейсы:

• Обзор на ключевые показатели эффективности
• Создание сводки по данным на высоком уровне

Примеры подобного рода дашбордов:

• Предоставление сводки по эффективности инвестиционного счета
• Предоставление сводной информации о продажах продукции и доле рынка

Пример дашборда, на котором показана сводка по метрикам продукта.

Как следить за обновлениями гайдлайна и переводом?

• Структуированный документ в Notion
• Официальные обновления Google на странице what’s new