Читать: 10 мин

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

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

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

Что такое визуализация данных

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

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

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

1.jpg

Принципы визуализации

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

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

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

Типы визуализации

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

2.jpg

Графики изменений 1

3.jpg

Графики изменений 2

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

4.jpg

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

5.jpg

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

6.jpg

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

7.jpg

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

8.jpg

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

9.jpg

Как выбрать тип визуализации

  1. Поставьте цель. Что вы хотите донести до аудитории? Показать тренд во времени, сравнить категори, разобрать структуру объекта или продемонстрировать корреляции?

  2. Определите тип данных. Они могут быть числовыми, категориальными, географическими или другими.

  3. Изучите аудиторию. Уровень знаний аудитории, контекст и другие факторы влияют на выбор способа визуализации.

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

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

Популярные виды диаграмм

Чаще всего дизайнеры используют:

  • линейные графики;

  • гистограммы;

  • диаграммы с областями или диаграммы площадей;

  • столбчатые диаграммы;

  • круговые диаграммы.

10.jpg

Линейные диаграммы выражают незначительные различия в данных.

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

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

Существуют два типа диаграмм площадей: с областями и с перекрывающимися областями.

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

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

12.jpg

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

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

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

Круговые диаграммы выражают части целого при помощи дуг или углов внутри круга.

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

Например, на столбчатой диаграмме хорошо видно, как отличаются показатели продаж в этом и прошлом квартале в компаниях Alpha, Beta, Gamma и Delta.

12.jpg

Столбчатые диаграммы

12.jpg

Круговые диаграммы

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

15.jpg

В следующей статье мы расскажем, как можно стилизовать диаграммы.

Читайте наши другие статьи о дизайне: как управлять вниманием пользователей, как дизайнеру работать с Midrourney.

Поделиться:

Logo

Читайте также

01  
 
panda
Есть идея? Напишите нам! Заполнить бриф