Description
The dashboard design should have continuity and consistency with the other offerings of the renal registry. This requires a set of standards that cover the aesthetics, types of visualization, and controls used to display different UKRDC information.
Aesthetics
The dashboard should conform to the UKKA brand guide. The visualizations should use the colors, fonts, and iconography produced by the communications team.
Types of visualisation
The UKKA has produced several dashboards. These include:
UKKA data portal: https://ukkidney.org/audit-research/data-portals
RSTP dashboard: https://ncdr.england.nhs.uk/report/view/247
In addition to this, the annual report contains figures in an established style. The main UKRDC stats offerings should be consistent with this, with possible additional tabs, such as an experimental/new stats tab, with a looser set of standards that can deviate from the standard or require additional interpretation. A user who is familiar with these other offerings should be able to interpret our visualizations without extra explanation. For this reason, the following standards should be adhered to:
Visualisation Type | Usage |
|---|---|
(Stacked) bar chart | Bar charts or stacked bar charts should be used to display categorised data. They allow for better estimation of total magnitude compared other alternatives such as pie charts. |
Scatter plot | These should be used with larger datasets to display trends in data. They are useful for identifying relationships between variables and spotting outliers. This format can be used to display more complex types of data processing such as run charts. |
Line graph | These should be used to make trends more obvious in less scattered data with 1-1 relationship between x and y. They are useful for displaying comparing changes in different cohorts/groups. |
Funnel plot | Should be used to compare data to expected distribution of data. They allow the variability in different groups to be accounted for when comparing groups. |
Error bars | Should be used to indicate the variability of data points and the precision of calculated measures where appropriate. |
UI Control
In order to provide a simple and uncluttered user experience, the controls in the dashboard should be simple and uncluttered. Each plot should have no more than one additional control, and each tab should aim for no more than two generic controls in addition to the individual plots and those provided by Plotly. The parameters for each control should be quantized, to limit the size of the calculation parameter space. For example, longitudinal plots should have one control available for selecting time frames of limited to one month, three months, or one year. In the future we may consider employing AB testing to better establish which controls work best for users.
Control | Usage |
|---|---|
slider | A slider is a user interface control that enables users to select a value by sliding a knob or thumb along a track. Within the UKRDC dashboard stats library, sliders can be utilized to adjust values in real time, such as modifying the range of biomarkers data for visualization or refining the age range of patients to identify erroneous data. It is worth noting that sliders are particularly effective when working with quantized parameters, where values are limited to specific intervals. Sliders offer an intuitive means for users to interact with the data and customize visualizations to suit their needs. |
picklist/combo box | A picklist or combo refers to a user interface control that presents users with a predefined list of options, allowing them to select a specific value. In the context of the dashboard stats library, picklists or combos prove useful for selecting particular units, time ranges, or other relevant categories for visualization. These controls aid users in filtering and focusing on specific subsets of the data, facilitating the identification of trends or outliers. For example, in the dashboard stats library, picklists or combos can be employed to choose peer comparison groups to display the visualizations for. |
plotly defaults | Plotly is a robust data visualization library that incorporates default controls for interactive plots. These controls empower users to zoom in and out, pan, and hover over data points to access detailed information. Within the dashboard stats interface, Plotly controls play a vital role in providing interactive visualizations, allowing users to explore the data in real time. By utilizing these controls, users can enhance their overall experience and gain insights from the data more easily, thus facilitating data analysis and interpretation. |
User Experience
Where information such as loading bars should be displayed when there is a delay in displaying information. For example if calculations being run by the API require time to complete.
Target User(s)
All users
Components/Dependencies
Libraries
ukrdc UI - primarily
dashboard-stats - these standards will be needed to indirectly inform design of library driving visualisations
UKRDC stats dependencies
Steps
- modify existing UI and library (as of 15/05/23) to integrate these standards
- apply standards to future development