ПДД: Паттерны Дизайна Дашбордов
Подробный обзор паттернов проектирования для создания дашбордов. Перевод статьи Dashboard Design Patterns https://dashboarddesignpatterns.github.io/patterns.html
В этой статье перечислены паттерны проектирования дашбордов, собранные для помощи в проектировании и исследовании дизайна дашбордов.
Что такое дашборд?
Дашборд — это инструмент, с помощью которого люди могут с первого взгляда увидеть большие и сложные массивы данных. Они сочетают в себе визуальные представления и другие графические элементы для упрощения многочисленных связанных данных, так что пользователи дашбордов получают обзор наиболее важной или актуальной информации с минимальными затратами времени. Способность легко предоставлять важную информацию привела к тому, что дашборды широко используются во многих областях, таких как бизнес, здравоохранение, городская аналитика, персональная аналитика, энергетика и многое другое.
Зачем нужны паттерны дизайна?
Существует множество высокоуровневых рекомендаций по дизайну дашбордов, включая советы по визуальному восприятию, снижению информационной нагрузки, использованию интерактивного взаимодействия и грамотной визуализации. Несмотря на это, мы мало знаем об эффективном и применимом дизайне дашбордов, а также о том, как поддерживать быстрое проектирования дашбордов.
Дизайн дашбордов, безусловно, не прост: дизайнеры имеют доступ к многочисленным потокам данных, которые они могут обрабатывать, абстрагировать или упрощать по своему усмотрению; в их распоряжении широкий спектр визуальных представлений; они могут структурировать и представлять эти визуализации различными способами, чтобы использовать преимущества больших экранов, на которых они просматриваются (в отличие от отдельных графиков, которые более экономично используют пространство).
Такое количество вариантов может оказаться непосильным, поэтому существует реальная потребность в руководстве по эффективному дизайну дашбордов — тем более, что дашборды все чаще разрабатываются для широкой неспециализированной аудитории дизайнерами, которые могут не иметь опыта в визуализации данных или дизайне интерфейсов.
Авторы
- Benjamin Bach, University of Edinburgh
- Euan Freeman, University of Glasgow
- Alfie Abdul-Rahman, King’s College London
- Cagatay Turkay, University of Warwick
- Saiful Khan, University of Oxford
- Phong H. Nguyen, Redsift Ltd.
- Yulei Fan, University of Oxford
- Min Chen, University of Oxford
Перейти к...
1. Паттерны дизайна компонентов
Компоненты дашборда — это важнейшие визуальные элементы, относящиеся к данным и их представлению. Мы выделили четыре группы паттернов дизайна: информация о данных, метаданные, визуальное представление данных и интерактивные взаимодействия, поддерживаемые дашбордом. Мы не учитываем любые визуальные компоненты, которые служат только для украшения или декорирования, например, иллюстрации, разделители, границы и т.д.
Информация о данных
Эта группа определяет тип информации, отображаемой на дашборде. Мы обнаружили, что информация в дашбордах варьируется от представления необработанных данных до нескольких уровней абстракций, которые упрощают и сокращают объем отображаемой информации. Другими словами, учитывая набор данных с несколькими элементами данных (например, строки в таблице данных) и атрибутами (столбцы), дашборды могут предоставлять множество различных абстракций этого набора данных.
- Индивидуальные значения (Individual Values) — это конкретные точки данных в наборе данных, например, самое последнее значение во временном ряду. Показ отдельного значения (по сравнению со всем или отфильтрованным набором данных) подразумевает важность отдельного, например, самого последнего или самого высокого значения в данном контексте.
- Производные значения (Derived Data) включают информацию, полученную из наборов данных или других значений (например, тенденции). Они обеспечивают определенную степень абстракции над набором данных, поскольку подразумевают конкретный интерес к этим производным значениям, а не к исходным данным. Например, производные значения могут быть ключевыми показателями эффективности в определенном контексте. Во многих случаях производные значения рассчитываются независимо от дашборда (например, показатель заболеваемости на фиксированное число населения).
- Отфильтрованные значения (Filters) показывают подмножество исходных (подробных) данных, например, за последние 14 дней или любое другое простое правило для показа подмножества доступных данных.
- Пороговые значения (Thresholds) представляют собой явное суждение о точке данных, например, указывая, является ли ситуацияхорошей, плохой или нейтральной, в соответствии с объективными пороговыми значениями для субъективных меток. Пороги — это один из самых высоких уровней абстракции, встречающихся в дашбордах, поскольку пороги могут иметь конкретное семантическое значение и последствия.
- Агрегированные данные (Aggregated Data) — это результат объединения многочисленных точек данных в новую и более сжатую точку данных. Например, значения данных по отдельным регионам страны могут быть объединены в сумму или среднее значение по стране в целом. Агрегирование часто подразумевает наличие нескольких связанных значений данных, которые могут представлять особый интерес для пользователя дашборда.
- Подробные наборы данных (Detailed Datasets) предлагают более полное представление данных. Они могут включать множество элементов и атрибутов данных, временные ряды и подробную географическую информацию, которые все показывают необработанные данные. В случае временных рядов набор данных часто фильтруется по временному диапазону, например, за последние 14 дней. Показ необработанных данных подразумевает множество деталей, но мало суждений о том, какие характеристики этого набора данных важны. Наборы данных показываются для обеспечения общего представления, поддержки сравнения нескольких наборов данных, а также для поощрения индивидуального исследования и анализа.
Метаданные
Эта группа фиксирует дополнительную информацию для обеспечения контекста и объяснения данных. Иногда эта информация подразумевается в контексте, в котором используется дашборд, например, текущая дата может означать, когда данные были обновлены в последний раз, или данные, выпущенные определенной организацией, могут указывать на источник исходных данных.
- Источник данных (Data source): указывает, откуда взяты данные, потенциально включая ссылки и пояснения о том, как собирались и анализировались данные и какие инструменты использовались. Может также предоставлять прямой доступ к данным (например, во встроенных таблицах).
- Отказ от ответственности (Disclaimer): указывает на конкретные предположения и решения при обработке и визуализации данных или дает контекст данных и способа их представления. Например, дашборд мониторинга COVID-19 в ЕС описывает ограничения в данных и объясняет, почему данные могут отсутствовать/вводить в заблуждение, а прогноз COVID-19 Google для Японии объясняет, откуда взяты его прогнозы и что включено/не включено в статистику.
- Описание данных (Data description): дает высокоуровневое описание данных, чтобы объяснить, что показывает дашборд.
- Информация об обновлении (Update information): указывает, когда данные были обновлены в последний раз, обычно указывая дату и/или время.
- Аннотации (Annotations): дополнительные графические элементы, добавляемые автором дашборда для выделения определенных точек, изменений или событий в данных.
Визуальные представления
Эта группа описывает общие решения для визуального представления данных в дашбордах.
- Числа (Numbers): отдельные числа, размещенные на видном месте на дашборде, в основном используются для обозначения отдельных ключевых значений. Числа могут представлять абсолютные значения, пропорции (например, процент или нормализованный показатель на миллион) и иметь определенные единицы измерения. Числа обычно имеют большой кегль по сравнению, например, с заголовками и описаниями, чтобы привлечь внимание к их значению. Иногда их также выделяют цветом, чтобы привлечь внимание.
- Трендовые стрелки (Trend-arrows): небольшие стрелки, направленные вверх или вниз, используемые для указания направления изменения значения данных. Некоторые трендовые стрелки являются бинарными (вверх/вниз/нейтральными), в то время как другие включают более тонкие наклоны. Стрелки часто бывают красными или зелеными, в зависимости от семантики (положительные/отрицательные). Они часто показываются рядом с числами или включаются в таблицы.
- Пиктограммы (Pictograms): абстрактные представления или символы, иллюстрирующие суть данных. Могут использоваться для представления данных (т.е. передают конкретную информацию о данных) или для обозначения типа значения данных, найденного рядом с пиктограммой (но не передают конкретную информацию о данных).
- Измерители и прогресс-бары (Gauges and progress bar): любой вид визуализации, используемый для представления шкалы или диапазона значений. Конкретные решения включают полукруглые датчики, линейные прогресс-бары, термометры и т.д. Значения, представленные с помощью диапазонов-представлений, могут относиться как к величинам, которые только растут (например, вакцинация населения), так и к колеблющимся значениям (например, кол-во заболеваний на 1000 человек). Некоторые измерители показываются с указанием “критических” диапазонов, т.е. порога, указывающего, являются ли значения положительными/отрицательными.
- Фигурные графики (Signature Charts): небольшие и лаконичные графики без описания осей, меток или цифр. Идея заключается в том, чтобы дать быстрое представление о тренде, подобно спарклайнам, а не позволять считывать точные значения.
- Подробные графики (Detailed Charts): подробные визуализации с достаточным количеством деталей для чтения и понимания точных значений (например, оси, тики, значения и т.д.).
- Таблицы (Tables): в них необработанные значения данных представлены в табличном формате. Наиболее простой формой таблицы является список ключевых значений, но таблицы могут содержать несколько столбцов и могут включать фигурные графики и/или трендовые стрелки. Таблицы не обязательно должны содержать числовые значения, но также могут включать информацию посредством цвета/оттенков (например, тепловые карты).
- Текстовые списки (Text Lists): списки текстовой информации, например, как бегущие строки, которые показывают неколичественную информацию.
Взаимодействия
Эта группа описывает общие подходы к взаимодействию с дашбордом. Взаимодействие может осуществляться через интерактивные данные, элементы пользовательского интерфейса и взаимодействие на уровне окна (например, скролл). Модели, которые мы выделяем в этой группе, относятся к общим ролям, которые взаимодействия могут играть в использовании дашборда, выражаясь через конкретные компоненты пользовательского интерфейса. Они определены в широком смысле, чтобы определить общие модели использования и то, как они могут быть реализованы в дизайне дашбордов.
- Исследовательское взаимодействие (Exploration) позволяет пользователям изучать элементы данных и связи между ними. Исследовательское взаимодействие может принимать различные формы, включая взаимодействия, которые связывают разные данные в различных форматах, и взаимодействие с детализацией по требованию, которое предоставляет дополнительную информацию через всплывающие окна или всплывающие подсказки.
- Навигационное взаимодействие (Navigation) позволяет дизайнерам направлять пользователей по частям информации в определенном порядке. Элементы взаимодействия могут использоваться для навигации между различными компонентами дашборда и структурами макета (например, страницами, вкладками). Методы и элементы взаимодействия, такие как скролл, кнопки навигации или ссылки на вкладки, могут быть использованы для создания пути пользователя, в ходе которого они изучают информацию. Навигация может быть ограничена и следовать определенной последовательности, а может быть неограниченной и позволять свободное перемещение. Примеры навигационных взаимодействий включают:
— Вкладки, которые информируют пользователя о доступном контенте и обеспечивают навигацию между представлениями данных.
— Ссылки, поддерживающие навигацию с помощью кликабельных визуальных элементов (например, графиков, заголовков, кликабельного текста).
— Навигационные кнопки, позволяющие пользователям перемещаться вперед или назад по страницам дашборда в последовательности (или вне последовательности).
— Анимированные переходы, которые используются для автоматического продвижения по страницам дашборда, подобно слайд-шоу. - Персонализация (Personalization) позволяет пользователям переопределять и изменять конфигурацию информации, отображаемой на дашборде. Например, пользователи могут добавлять новые визуальные представления информации, изменять размер элементов дашборда или изменять порядок существующих элементов дашборда. Такое взаимодействие может привести к более специализированным и индивидуальным конфигурациям дашборда, где пользователи более активно взаимодействуют с информационным контентом.
- Фильтр и Фокус (Filter and Focus) позволяют пользователям найти или сосредоточиться на конкретных данных, например, путем поиска определенных значений данных или применения критериев фильтрации, чтобы оставалась только релевантная информация. Эти взаимодействия обычно осуществляются с помощью таких элементов пользовательского интерфейса, как текстовые поля, чекбоксы, радиокнопки, слайдеры и т. д.
2. Паттерны дизайна композиции
Композиция дашборда определяет, как отдельные ее компоненты сочетаются на экране. Дашборды отображают множество информационных элементов, и их структура и расположение на странице являются значимыми решениями, принимаемыми дизайнером. Мы выделили несколько групп паттернов композиции: использование доступного экранного пространства для представления информации (включая стратегии уменьшения количества информации, показываемой одновременно), структура нескольких страниц дашборда и связи между ними, верстка компонентов на одной странице дашборда, а также использование цвета и цветовых схем в дашборде.
Экранное пространство
Дашборды могут отображать только определенное количество информации на экране за один раз: доступное экранное пространство потребляется количеством данных, которые должны быть показаны, и размерами их визуального представления. В то время как некоторые дашборды могут полностью поместиться на экране, в других может возникнуть необходимость уменьшить количество информации, показываемой на экране в определенный момент времени. Мы определили ряд стратегий использования доступного экранного пространства, начиная от сжатых полноэкранных дашбордов, которые полностью помещаются на экране, до менее сжатых дашбордов с многостраничностью. Эти стратегии не являются взаимоисключающими и могут комбинироваться, например, использование детализации по требованию для более экономного использования экранного пространства в полноэкранных дашбордах.
- Полноэкранные (Screenfit) дашборды полностью отображаются на экране, и вся информация видна в любое время. Для просмотра содержимого дашборда не требуется никаких действий, так как вся информация помещается на экране и доступна с первого взгляда.
- Overflow позволяет дашборду выйти за границы доступного экрана, так что дополнительное содержимое отображается вне экрана и раскрывается при скролле. Такой подход позволяет сделать все представления дашборда доступными на одной странице, даже если не все они видны на экране сразу.
- Детализация по требованию (Detail-on-demand) позволяет дашбордам уменьшить количество информации, отображаемой на экране одновременно, раскрывая больше деталей только по запросу пользователя (например, с помощью всплывающих подсказок или всплывающих окон).
- Параметризированные (Parameterized) дашборды позволяют пользователям контролировать, какое содержимое в данный момент отображается на экране. Мы обнаружили несколько подходов к предоставлению параметров дашборда, включая чекбоксы, выпадающие меню, списки и поля поиска для фильтрации данных, слайдеры и пикеры для выбора диапазона дат, радиокнопки и переключатели для изменения данных. Как правило, они позволяют пользователям выбирать, какие данные будут отображаться с помощью виджетов дашборда.
- Многостраничные (Multiple page) дашборды состоят из элементов, распределенных по нескольким страницам, при этом на экране одновременно отображается одна страница; здесь “страница” относится к одному составному представлению в дашборде и не обязательно означает отдельную веб-страницу. Существует множество стратегий для представления обзора доступных страниц дашборда и предоставления пользователям возможности перемещаться между ними, включая вкладки, навигационные кнопки и ссылки.
Структура
Эти паттерны структуры страниц описывают, как дашборд организует информацию на нескольких страницах, и подразумеваемые связи между этими страницами. Эти паттерны могут влиять на то, как пользователь перемещается по различным страницам дашборда, а также могут зависеть от предполагаемого использования дашборда (например, обеспечение иерархической структуры страниц, чтобы пользователи могли “спускаться” на все более подробные уровни, или использование параллельной структуры страниц, когда пользователям нужен только высокоуровневый обзор небольшого количества представлений).
- Одностраничная (Single Page): дашборд представляет всю информацию на одной странице, например, с помощью screenfit или overflow для использования доступного пространства экрана.
- Параллельная (Parallel): дашборд содержит информацию, распределенную по нескольким страницам, все они рассматриваются как находящиеся на одном “уровне” без иерархических отношений между ними. Например, каждая страница может представлять отдельные аспекты набора данных. Навигация между страницами обычно ограничивается навигационными виджетами верхнего уровня, такими как вкладки или ссылки.
- Иерархическая (Hierarchical): дашборд имеет несколько страниц, организованных в иерархию, которая подразумевает структурированные связи между страницами и информацией, которую они передают. Страницы дашборда на соседних уровнях иерархии могут, например, отличаться по количеству отображаемых деталей и поддерживать пользователей при переходе к более детальным уровням (например, абстрактные представления на странице верхнего уровня против детальных представлений на странице нижнего уровня). Страницы дашборда одного уровня иерархии обычно каким-то образом связаны между собой (например, страница верхнего уровня, показывающая данные по всей стране, с несколькими страницами нижнего уровня, показывающими данные по отдельным регионам этой страны).
- Открытая (Open): дашборд имеет несколько страниц, но с менее жесткими взаимосвязями между ними. В отличие от иерархической или параллельной структуры дашборда, где существуют более четко определенные связи между страницами и информацией о данных, которую они отображают.
- Семантическая (Semantic): дашборд с несколькими страницами, взаимосвязь которых определяется семантикой отображаемой информации. Например, дашборд для организации может иметь страницы, относящиеся к различным подразделениям компании, со страницами, соответствующими операционной структуре этих подразделений.
Верстка
Паттерны верстки описывают, как виджеты располагаются и иногда неявно группируются вместе на экране дашборда, т.е. используются для группировки потенциально большого набора визуальных компонентов. Мы подчеркиваем, что ни один из этих паттернов верстки не является исключительным, и можно использовать их комбинации. Примечание: при описании верстки мы определяем виджет как наименьшую единицу на экране.
- Открытая верстка (Open Layout): виджеты различных размеров и соотношений сторон размещаются открытым способом без очевидных специфических правил. Часто эти виджеты выравниваются по сетке в соответствии с классическими рекомендациями по дизайну. Нет сильной семантики, связанной с расположением и соседством виджетов, и каждый виджет кажется одинаково важным. Виджеты могут быть расположены близко, если они связаны (например, первая и вторая доза вакцины COVID-19) или имеют схожие визуальные типы по эстетическим соображениям (например, верхние ряды — все датчики, а нижние — все линейные графики). Плиточные макеты позволяют пользователю изменять порядок и настраивать виджеты.
- Табличная верстка (Table Layouts): она выстраивает виджеты (или группы виджетов) в столбцы и строки, каждая из которых имеет определенную семантику и вызывает повторение информации и визуального представления. Строки и столбцы могут представлять такие аспекты набора данных, как время, элементы данных или любые другие группировки. Компоновка таблиц облегчает получение и соотнесение конкретной информации в многомерном наборе данных. Обычно визуальный контент вдоль столбца использует одно и то же визуальное представление. Табличная верстка предполагает прямое сравнение и сопоставление информации между виджетами.
- Стратифицированная верстка (Stratified Layouts): она подчеркивает упорядоченность виджетов и информации о них сверху вниз. Например, дашборды могут показывать общую высокоуровневую информацию в верхней части, а более подробную — в нижней. Стратифицированную верстку можно использовать для того, чтобы подчеркнуть одну информацию (например, расположенную выше) над другой информацией (например, расположенной ниже).
- Групповая верстка (Grouped Layouts): она заметно группируют два или более виджетов с определенными зависимостями. Например, с использованием линий, границ с пробелами, или затемнением фона, чтобы подчеркнуть группировку связанных виджетов. Дашборд с четкой явной группировкой может помочь пользователям легче наблюдать за данными, особенно предназначенных для публичной аудитории.
- Схематическая верстка (Schematic Layout): в ней виджеты размещаются в дашборде на основе некоторых внешних свойств, таких как физическая схема или другие виды схематических связей (например, виджеты, размещенные на карте для представления географического расположения точек данных). Такие дашборды могут использовать пространственные, географические и другие знания пользователя для поддержки визуального анализа.
Цвет
Цвет является важной визуальной переменной в визуализации и может быть использован для различных целей в дизайне дашбордов.
- Различные (Distinct) цветовые схемы используют уникальные цвета (или цветовые палитры) для различных виджетов или типов данных.
- Общие (Shared) цветовые схемы используют общую цветовую палитру для всех компонентов дашборда (например, повторное использование цветов для соответствия брендингу).
- Цветовые схемы кодирования данных (Data Encoding) используют цвет для кодирования категорий или шкал в данных.
- Семантические (Semantic) цветовые схемы используют цвет для обозначения специфической семантики данных. Это требует сопоставления между показателями данных и реальным результатом с семантическим подтекстом, например, схемы светофора, зеленый/красный для позитивных/негативных настроений и т.д.
- Эмотивные (Emotive) цветовые схемы могут быть мощным средством придания эстетической силы и развития эмоционального отклика у пользователей.
Спасибо за чтение! Если вы нашли ошибку в переводе или вас бесит, как я перевел отдельное слово или предложение, смело пишите мне на почту mikhail.murzak@gmail.com