Library

Browse and search developer information

Clinical Dashboard User Interface Design Guide

By Connecting for Health | 2009

Introduction

This is a guide to the user interface options available and recommended for use on Clinical Dashboards.

The over-riding principle of the dashboard design is to produce a consistent and concise set of suitable displays, gauges and graphs that promote efficient and effective communication of performance against an agreed set of metrics and measures that allow the user to see this performance in context to understand and act on any issues that are influencing the achievement of these goals. A Dashboard should be a single screen of metrics.

Screen Layout

Ideally the layout and placement of the dashboard screen should allow the user to read the dashboard from left to right and then top to bottom, with the relative importance of the displays or gauges (generally referred to as ‘metrics’) reflecting this ordering.

Where possible the metrics should sit in clearly defined columns and rows, to aid the user in finding and identifying items of interest and to promote a clean and uncluttered appearance.

If there is a single dominant metric that reflects overall performance within the dashboard this should be sized appropriately and placed centrally at the top of the dashboard, with related gauges to the left and right, so the eye is immediately taken to this item.

Metrics should be logically grouped, so that related metrics are in proximity and have a border that allows the user to identify these related measures. Heading and Label options can be seen in the Library of Example Gauges and Graphs at the end of this article.

It is important to consider how many metrics should be displayed on the dashboard.  The standard screen resolution available within an organisation needs to be identified and considered. Standard Dashboards are developed to 1280×1024; if the resolution is not available the Dashboards gain scroll bars which reduces usability. The use of vertical and horizontal scrollbars should be avoided.  There is no suggested maximum number of metrics to place on a single dashboard but, where possible, the design should reflect the hierarchy of importance of gauges and, where all overview information should be designed to fit clearly onto one front screen.  Additional drill-down views could be available for more detailed information behind the front metrics.

Dashboard ‘hot-spots’, which trigger additional actions, such as drilling down to secondary, more detailed information, graphical analysis or tabular reports should be defined consistently within the dashboard (where permitted by the tools being used).

Sample layouts are shown in figures 1 and 2.

Figure1

Figure 1 – Sample Layout 1.

Figure2

Figure 2 – Sample Layout 2.

Pilot layouts examples can be see in Pilot Dashboard Examples at the end of this article.

Gauges and other Indicators

Gauges in general include styles that range from the traditional rotary dials that are most commonly used, through linear ‘progress bars’ and LED-style numerics that may be coloured according to thresholds that are determined as part of the design process.  All of these gauges act as indicators of numeric or proportional values that form the purpose of the metric that they represent.

Gauges should have a clean and simple design that focuses on communicating anticipated performance and the current level of achievement. Inconsistent gauge design within a dashboard will result in users apportioning differing levels of significance to metrics, possibly resulting in confusion and failure to communicate performance accurately.

The design and style of metrics within a dashboard should include the following considerations:

Size

The size of gauges should be consistent within a dashboard and reflect the significance of a given metric. The template gauges available in the metrics library reflect the recommended sizes for a standard gauge and when apportioning higher significance to a gauge, the horizontal or vertical size should be multiples of the standard gauge size, e.g. twice the height or width.

The size of gauges should also take into account the screen size and resolution to be used, for example, will the dashbaord be used for display on PC’s or on large screens within the clinical environment.

Labels

Each logical grouping of gauges should be clearly defined. This ensures that the style, font and size of these titles is consistent within the dashboard. Individual gauges should be clearly labelled with a consistent style, font and size, with the text centred beneath the gauges. The template gauges available in the metrics and measures library reflect the recommended style, font and size, although these can be locally tailored to reflect any corporate style if required.

Colour Schemes

The colour schemes used for gauges should be consistent within a dashboard and the use of a white and pastel shades for the background with black text is recommended, as the use of bright colours may result in the dashboard appearing garish, cluttered or confusing.

The template gauges available in the metrics and measures library reflect the recommended colour schemes, although these can be locally tailored to reflect any corporate style if required.

Orientation and Direction of Gauges

The orientation and direction of gauges should be consistent within a dashboard. The suggestion is that all gauges should be vertically aligned, but where a single prominent gauge is presented, this may be horizontally aligned.

An anti-clockwise or upwards direction of movement should reflect poor performance and a clockwise or downwards direction of movement should reflect good performance. Where a simple numerical value is presented then an anti-clockwise or upwards direction of movement should reflect a high number.

The gauge scales can be reversed to ensure that the direction of movement is consistent.

There is considerable flexibility in defining the minimum and maximum values of a gauge and these should be consistent with the expected spread of data values. Interval markers should be defined so that each gauge is sub-divided with a consistent number of interval markers, where possible and the suggested minimum and maximum values for this should be 5 and 7, although local circumstances may dictate differing values in exceptional circumstances.

Performance Ranges

What is considered an acceptable or unacceptable level of performance is dependent upon the type of data and local expectations. However, the style and format of these ranges should be consistent and the template gauges available in the metrics and measures library reflect the recommended colours, size and placement of these performance ranges on a gauge. Local variation is possible, but this should be deployed consistently across all gauges within a dashboard and is not encouraged.

Pointers

The style and colour of gauge pointers should be consistent within a dashboard and the template gauges available in the metrics and measures library reflect the recommended style, size and colour.

Where a gauge contains performance over two time periods, the large red pointer should reflect the current performance and the thin grey pointer should reflect the historical performance. The time periods used for historical performance must be consistent within a logical grouping of gauges and should be consistent within a dashboard, to reduce the potential for confusion.

Graphs

It is recommended that graphs are sized consistently across the dashboard, and that these graphs are confined to two basic styles.

Where only one measure is displayed in the graph, the recommendation is that a simple line graph is used, as it allows the user to quickly ascertain the current state of performance and whether this level of performance is getting better, worse or is maintaining a steady state.

Where two or more directly-related outcomes within one measure are being compared within the graph, the recommendation is that a stacked bar graph is used to convey the percentage of each outcome.

When two or more non-related measures are being compared within the graph, the recommendation is that a line chart is used.

All graphs should use the horizontal axis for time and the vertical axis for the value of the measure.

When multiple directly-related measures used collectively, use stacked bar graphs (e.g. non-elective admissions from more than one provider).

Reports

There are many occasions where, for example, tabular patient-level reports may be required for further analysis of poor or unexpected performance.

These should not be placed directly on the main page of a dashboard, but be available by drilling down from a gauge or graph to a secondary page.  It is not recommended that these secondary pages be directly accessible through site navigation, as this may lead to an unnecessarily cluttered navigation bar; remember these reports exist to support the further analysis and understanding of exceptions identified within Dashboard metrics.

Library of Example Gauges and Graphs

Rotary Gauges/Dials

Figure 3 - Single Gauge.

Figure 3 – Single Gauge.

Figure 4 - A standard group of gauges showing current and historical performance.

Figure 4 – A standard group of gauges showing current and historical performance.

Figure 5 –  Unlabelled set of gauges with one pointer and range.

Figure 5 – Unlabelled set of gauges with one pointer and range.

Figure 6 - Gauges with divider.

Figure 6 – Gauges with divider.

Figure 7 - Twelve Small Gauges.

Figure 7 – Twelve Small Gauges.

Figure 8 - Standard Circular Gauge with two pointers.

Figure 8 – Standard Circular Gauge with two pointers.

Numerical Gauges

Figure 9 - Numerical Indicator Gauge.

Figure 9 – Numerical Indicator Gauge.

Line Graphs

Figure 10 - Line Graph showing different measures against one scale.

Figure 10 – Line Graph showing different measures against one scale.

Figure 11 - Another Line Graph.

Figure 11 – Another Line Graph.

Figure 12 - Line Graph with Dots.

Figure 12 – Line Graph with Dots.

Bar Graphs

Figure 13 - Stacked Bar Graph.

Figure 13 – Stacked Bar Graph.

Figure 14 - Stacked Bar Graph II.

Figure 14 – Stacked Bar Graph II.

Figure 15 - A bar graph, showing different measures on a single scale.

Figure 15 – A bar graph, showing different measures on a single scale.

Figure 16 - A combined Bar Graph and Pie Chart.

Figure 16 – A combined Bar Graph and Pie Chart.

Reports

Figure 17 - Sample Report.

Figure 17 – Sample Report.

Figure 18 - Sample Report Style within Web Page.

Figure 18 – Sample Report Style within Web Page.

Indicators

Figure 19 - RAG Status Indicator.

Figure 19 – RAG Status Indicator.

Figure 20 - Bed Occupancy Indicator.

Figure 20 – Bed Occupancy Indicator.

Pilot Dashboard Examples

Accident & Emergency Example

Accident & Emergency example

Primary Care Example

Primary Care Example

Primary Care Example

Primary Care example

Elective Care Example

Elective care example

 

Elective care example

Medical Assessment Example

Medical assessment example

Orthopaedics Example

Orthopedics example

Orthopaedics example