Лучшие примеры визуализации данных и дизайны информационных панелей

Опубликовано: 2022-03-11

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

Три пути: лучшее понимание принципов UX, лежащих в основе хорошего дизайна панели инструментов, применение графического совершенства и практика.

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

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

Графическое совершенство определяется как:

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

Отличным ресурсом для лучшего понимания графического совершенства является работа Эдварда Тафте. Он считается «Леонардо да Винчи данных» и имеет большое количество опубликованных работ, книг и лекций. Еще одним отличным ресурсом является Дэвид МакКэндлесс, который основал информационный сайт, который представляет собой лучшее в визуализации данных и графическом совершенстве.

Принципы образцового UX-дизайна и графического совершенства применимы как к дизайну информационных панелей, так и к визуализации данных. Вот некоторые из лучших примеров визуализации данных и дизайна информационных панелей.

Лучшие визуализации данных

Марш Наполеона 1812 г.

Визуализация марша Наполеона 1812 года, выполненная Минаром, считается одним из «лучших когда-либо созданных статистических рисунков»: создание визуализации с таким количеством информации, как сделал Минар, было бы невозможно, если бы не применение графического совершенства.

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

Пример лучших практик визуализации данных
«Марш Наполеона 1812 года» — одна из лучших визуализаций Чарльза Минара 1861 года, показывающая тысячи точек данных с использованием превосходной графики.

Карта холеры Джона Сноу

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

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

История рок-музыки

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

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

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

Где население Европы растет и сокращается

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

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

Распорядок дня знаковых известных людей

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

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

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

Графика языков мира

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

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

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

Лучшие дизайны приборных панелей

Чтобы информационная панель считалась превосходной, она должна удовлетворять ряду определенных критериев UX:

  • Четкие и последовательные соглашения об именах
  • Поток и расположение данных с приоритетом
  • Поля подходят для удобочитаемости
  • Данные не скрыты и не перегружены
  • Понятно и легко читается

Требуются штатные UX-дизайнеры-фрилансеры из США

Маркетинговая панель KPI

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

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

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

Полосатая приборная панель

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

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

Панель управления телемедициной

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

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

Панель управления акциями

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

Пример дизайна верхней панели, просто показывающий сложную информацию
Стандартная панель инструментов, которая показывает множество точек данных и сложную информацию в упрощенной, но информативной форме. (УайтонУайт Цифровой)

Панель веб-аудитории

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

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

Панель управления документацией

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

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

Отличный пример дизайна дашборда для системы управления документами
Пример отличного дизайна дашборда с минималистичным подходом к сложной системе документов. (Ян Лосерт)

Погодное приложение для посева растений – мобильная панель управления

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

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

Панель управления кредитной картой – мобильная панель управления

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

Рекомендации по проектированию мобильных информационных панелей
Кредитные карты и банковские информационные панели сложны, если принципы UX не применяются вместе с передовыми методами визуализации данных. (Радж Лал)

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

• • •

Дальнейшее чтение в блоге Toptal Design:

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