Как визуализировать сложные данные дизайнеру

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

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

Для начала давайте определимся, зачем вообще ux/ui-дизайнеру учиться работать с визуализацией.

1. Облегчение понимания

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

2. Улучшение восприятия информации

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

3. Повышение интерактивности

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

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

Линейные графики

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

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

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

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

Гистограммы

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

1. Гистограммы с несколькими осями

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

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

2. Вертикальные гистограммы

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

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

3. Линейчатые гистограммы

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

1. Очень длинные названия показателей.
2. Много элементов.
3. Лучше подходит для перегруженных информацией интерфейсов и мобильных приложений.

4. Гистограммы с группировкой

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

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

5. Гистограммы с накоплением

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

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

Диаграммы

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

1. Кольцевые диаграммы

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

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

2. Пузырьковые диаграммы

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

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

3. Географические диаграммы (картодиаграмма)

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

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

4. Лучевая диаграмма

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

Вспомните цветовой круг Иттена, тот, который реальный. Он тоже — лучевая диаграмма.

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

5. Радарная диаграмма

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

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

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

1. Простые таблицы

Содержат основные данные без дополнительных расчетов или агрегаций.

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

2. Сортированные таблицы

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

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

3. Сводные таблицы

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

Например, отчет о продажах, анализ статистики посещений сайта.

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

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

Заливка строк. Чередование цветов фонов строк поможет лучше различать строки и улучшит читаемость. Используйте этот прием только в объемных таблицах.

Сортировка и фильтрация. Предоставьте пользователям возможность сортировать и фильтровать данные в таблице для удобства анализа.

Подробнее разобрали вопрос проектирования таблиц в лонгриде — «Как работать с таблицами в вебе».

Перегруженность лишними элементами

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

Неиспользование цвета или нарушение значений общепринятых цветов

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

Излишние украшения

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

Несоответствие контексту и аудитории

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

Слишком много информации в графике, он становится сложным и непонятным.

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

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

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

Использование неправильного вида визуализации

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

Шпаргалка для ваших будущих проектов:

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

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

Databox — онлайн-инструмент, который  предлагает широкий спектр интерактивных диаграмм, а также виджетов для легкой визуализации.

Infogram — платформа позволяет собирать данные, чтобы превращать их в инфографику. Также имеется приложение, чтобы вы могли визуализировать со своего смартфона (Android или Apple).

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

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