UXPUB 🇺🇦 Дизайн-спільнота

Cover image for 20 правил для улучшения визуализации данных
Редакція
Редакція

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

20 правил для улучшения визуализации данных

#ux

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

1. Выберите правильный тип диаграммы

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

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

2. Используйте правильные направления построения графика на основе положительных и отрицательных значений

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

3. Всегда начинайте гистограмму с нулевого базового уровня

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

4. Используйте для линейных диаграмм адаптивную шкалу оси Y

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

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

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

Пример:

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

6. Не используйте «сглаженные» линейные диаграммы

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

7. Избегайте путаницы с двумя осями

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

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

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

  • Не добавляйте более 5–7 фрагментов, стремитесь к простоте
  • Вы можете сгруппировать самые маленькие сегменты в сегмент «Другое».

9. Нанесите метку прямо на диаграмму

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

10. Не наносите метки на сегменты

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

11. Упорядочите сегменты для более быстрого сканирования

Есть несколько общепринятых способов упорядочить сегменты:

  • Разместите самый большой сегмент в положение «12 часов» и расположите следующие в порядке убывания по часовой стрелке.
  • Разместите самый большой сегмент на 12 часов, второй по величине после него по часовой стрелке, третий на 11 часов, а все оставшиеся в порядке убывания по часовой стрелке.

12. Избегайте рандомности

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

13. Тонкие кольцевые диаграммы невозможно читать

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

14. Пусть данные говорят сами за себя

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

  • 3D элементов, штриховки
  • Теней, градиентов и других искажений цвета
  • Паттернов в виде зебры, чрезмерных линий сетки
  • Декоративных, курсивных, полужирных шрифтов или шрифтов с засечками.

15. Выберите цветовую палитру, соответствующую характеру ваших данных

Цвет является неотъемлемой частью эффективной визуализации данных, при проектировании учитывайте эти 3 типа цветовой палитры:

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

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

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

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

16. Проектируйте для доступности

По данным National Eye Institute, примерно 1 из 12 человек страдает дальтонизмом. Ваши диаграммы будут успешными только в том случае, если они доступны широкой аудитории.

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

17. Сосредоточьтесь на удобочитаемости

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

  • Выбирайте разборчивые шрифты, избегайте шрифтов с засечками и декоративных шрифтов.
  • Не используйте курсив, жирный шрифт и ТОЛЬКО ЗАГЛАВНЫЕ буквы.
  • Обеспечьте высокий контраст с фоном
  • Не поворачивайте текст.

18. Используйте горизонтальную гистограмму вместо повернутых меток

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

19. Выберите библиотеку диаграмм

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

20. Не ограничивайтесь статическими отчетами

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

Рекомендованная литература

Всем, кто хочет больше узнать по этой теме, я настоятельно рекомендую прочитать «Руководство по информационной графике от Wall Street Journal: правила и запреты представления данных, фактов и цифр» от Доны М. Вонг. Многие идеи в этой статье вдохновлены этой книгой.


Перевод статьи uxdesign.cc

Топ коментарі (0)