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

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

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

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

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

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

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

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

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

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

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

Графики изменения отражают данные за определенный период.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. гистограммы; 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

как дизайнеру работать с Midrourney (статья-победитель конкурса Технотекст).