Designing Medical Data Dashboards: UX patterns & Benchmarking
Discover the best Medical Data Dashboards UX design practices from our in-depth benchmarking
Introduction
It’s becoming easier to generate large amounts of data, on part of the substantial advancement of technology. This, in turn, makes these operations more accessible to organisations & individuals alike.
The challenge lies not in gathering the actual data, but in deriving meaningful insight from it, in order to make appropriate, evidence-based, decisions.
When it comes to the medical field, ensuring the anonymity & security of patient data is just as important as analysing datasets & deriving insight. Unfortunately, with all of the attention drawn towards security & privacy, parts such as interface design & customisation are sacrificed due to time & budget constraints.
As a design agency, we’ve often worked with organisations in the medical field to create appropriate user experiences within specialised tools & dashboards. Throughout our work, we’ve spotted numerous opportunities to apply design best practices to medical interfaces. This can greatly reduce medical professionals’ learning time & cognitive load when starting to use a new tool for work.
In this research, we’ve benchmarked a selection of mostly public medical data dashboards that provide medical data & toolkits, in an effort to pinpoint some of the more challenging aspects & ultimately showing the best design practices.
Medical Data Dashboards Benchmarking
Want your Medical Data Dashboard solution benchmarked? Contact us.
OpenEMR
OpenEMR is an open-source medical practice management platform that fully integrates electronic medical records, practice management, scheduling and electronic billing features.
Pros
The platform provides demo accounts for both clinician & patient user experience, without requesting any personal data in exchange. In addition to this, the user can choose the UI language before logging in. The selection is quite vast, containing most of the official languages. Despite this, when using automatic translation, some of the text is not perfect.
The export options are quite versatile & flexible. Users have a choice between downloading data as PDF files or generating reports in new tabs directly in their browser. On the flip side, the interface is not highly refined and this is clearly visible when choosing between a regular report and a “new report”. These options are not explained and in addition to it, primary buttons are employed for these actions, which creates unnecessary clutter.
The clinician dashboard offers the interesting option of creating a signature (on the spot), to apply it to any documents on the platform. Users are able to draw signatures with a mouse or trackpad. Thankfully, a subtle smoothing effect is applied to the drawn line, to make the signature tidier. There are many separate apps that allow the user to create a signature but having this functionality already integrated into the dashboard solution can greatly reduce the time needed to sign clinical documents.
In terms of customisation, this medical data dashboard does not lack in terms of options. The users can choose from over 20 UI themes and can decide which 2 tabs they would like to see open by default. Switching to a more compact layout is also possible.
OpenEMR has a support forum where users can ask for help, browse previous threads and even suggest new features to be implemented.
Cons
Despite the large amount of useful features for clinicians and patients in the OpenEMR data dashboard solution, the actual user experience lacks in quality. There are a couple of problems that “drag” this medical dashboard down.
The navigation is confusing.
Top menu items open as new tabs. Users can open pages in any order and there is still no way to rearrange the tabs. With each visit, the order of the open tabs might be different, so arranging them should be possible.
When navigating within a tab, the name of the respective tab is updated to the subpage name without any obvious way to return to the main page. Take this situation for example, navigating from the Portal Dashboard to Templates provide a green “Dashboard” button at the top right of the subpage. This button serves as the way back, but the return flow is different on each single subpage. This is clearly a factor that increases cognitive load.
Some top navigation items open multi-level drop-down menus. Despite this, no visual indicator shows which of them contain drop-downs. Users might find themselves looking through all navigation items at random in search of the desired page.
The navigation is even worse on the patient portal. A top-left menu and an entire row of buttons run into each other at the top of the page. More than this, three distinct UI styles are applied to these buttons, but the criteria for applying a style is not obvious. The menu button acts as a toggle that hides or reveals the top-left menu.
Using platforms that follow common UX patterns will always be easier, this is why standard navigation patterns should have been used instead. A partly-familiar experience will always be better than something like this, especially when it comes to such important platforms.
There seems to be a great number of different page layouts, as if each page had been designed by a different individual without any guidelines beside primary colour.
There seems to be no trace of actual spacing & padding guidelines for this platform. On the medical record dashboard, the page title almost runs into the new tab divider above, while card content is misaligned and very cluttered. The sub-tabs below the title are centre-aligned to the cards below, which creates a sense of overall misalignment due to the content above and below them being aligned to the left.
The patient search strangely provides 6 input fields: a general search field and 5 others that narrow down by a specific criterion. A single search field (with a relevant text hint) would have sufficed, while the extra space could have been dedicated to filters.
Creating a new patient profile is a straightfoward process. Nonetheless, the form layout does not seem to have been looked at by a UX designer at all. Input fields change size when they are clicked, they have too many different sizes and are seemingly placed randomly within the container. The shape of the primary button might be creative, but not in a good way. The button components should have a standard size across the whole platform instead of adapting to the height of the nearest input field.
On some table layouts, grey rectangles are used as visual row divider. This is fine as a UX choice, but the right edge of the table ends up looking misaligned. This could be avoided by a grey stroke could have been applied around the table.
Blue is obviously a primary colour in the OpenEMR palette, with green being the secondary one. Despite this, on a few pages inside the patient medical records, teal is used. Perhaps this used to be the secondary colour in the past, or it could otherwise be an oversight. Additionally, the button is incorrectly aligned to the page heading and much too close to it for a balanced look.
There are many things wrong with this drop-down menu found on the patient platform.
- The switch from a transparent button background and green font to a green button background and grey font, on hover and click.
- The transparent outer stroke applied to the button when the drop-down is open.
- The interspersed red and green fonts used for drop-down list items.
- The uneven top and bottom padding of the list.
In modal windows, the primary button has a tertiary button style. The strange alignment makes knowing where to click difficult. Five different font styles are used in a small form for no good reason, the paddings aren’t consistent either. At a closer look, spacing is missing between one of the checkboxes and its text label.
HealthData.gov
HealthData.gov is an official website of the US government. As such, it provides free and public acccess to multiple health datasets and visualisation tools.
Pros
Datasets are readily available to all and any visitors of the website. No personal data is required before accessing the data.
In terms of layout, all data dashboards are clean and consistent, with a set of actions available at the top right. Users can view and export raw data, access APIs, share data with others or even create their own graphs based on the raw data via the “Visualise” button.
When the user finds a dataset of interest, they can start creating graphs on the spot. The visualisation tool available in this platform is relatively complex, allowing multiple types of graphs, data filtering and sorting. Customising the look and feel is also possible, even creating presentations that can be shared with others.
The visualisation tool suggests types of visuals applicable to the current dataset by displaying a green dot at the top right of the graph type. Configuration options vary between types of visuals and can get quite complex, allowing a lot of flexibility.
In addition to a set of predefined palettes, people can select a custom colour for every type of value represented in their graphs. This is an unexpected feature for a public platform and adds an element of delight to the user experience.
The platform offers the choice to use external tools for creating visualisations, beside its own dedicated tool.
When opening the visualisation tool, people are prompted to sign in if they want to save their work and return to it later. The fact that creating an account and signing in is optional is a very big plus, for both speed and privacy reasons.
Multiple types of filters can be applied to datasets. Advanced filters, including logical operators and multiple conditions, can be created if needed. The filtered data can then be exported in a variety of formats.
Data can be grouped and aggregated and calculations such as the median value, regressions and standard deviations can be made on the spot. The UX design is clean and makes it very easy to interact with the data. It seems obvious that usability testing has been performed before launching the current experience.
Cons
Spacing is not optimised consistently across all datasets. In some cases, there isn’t enough spacing between buttons and search fields above data tables. Moreover, share buttons are placed awkwardly at some distance from the table view options; the light grey applied to them makes them look disabled. Touch target sizes are too small for these sets of buttons placed so close to each other.
COVID-19 Dashboard
This medical data dashboard has been developed for the COVID-19 international crisis, by the Center for Systems Science and Engineering (CSSE) at Johns Hopkins University (JHU).
Pros
While it’s obviously experimental and not about to win any design contests, the Covid-19 Dashboard provides a decent user experience and valuable content.
There’s a wealth of data on Covid-19 cases to explore via the tabs at the bottom of the screen. Each view can be expanded to full-screen mode. Zooming in on maps reveals local data. We like the fact that maps are interactive: clicking any dot opens a tooltip with specific Covid-19 data for that location.
Alternatively, people can click elements found on the side panel to have the map automatically zoom in on that specific location. By providing two distinct user paths, this data dashboard creates a great balance between discoverability & UX efficiency.
The responsive optimisation of the dashboard is very beneficial for users that might want to utilise this solution on mobile screens of different sizes.
Despite this, in order to use the mobile version, users need to expand the hamburger menu at the top and manually select "Mobile Version" from the drop-down menu. This is not intuitive due to people expecting interfaces to automatically adapt to their devices without their manual selection.
Cons
The choice of colours seems to not have been backed by a contrast checker. Using a dark grey background requires checking every font colour to meet the mid-range WCAG Level AA standard.
The white and green are within accessibility standards, but the red is not suitable. Using deep red font on a dark background is hardly legible. Due to this choice, the number of total cases attracts less attention than the other statistics and, thus, seems to be assigned less importance.
There is also no apparent padding between text layers in side panels. When choosing between squeezing more information together (to the point where it's hardly legible) and making users scroll more, the latter option is always better.
There are no customisation options available. The user experience would have been greatly improved by enabling visitors to customise interface colours or by simply adding a light theme. This would empower the users to address accessibility issues on their end.
OpenMRS
OpenMRS is an open source medical record platform that aims to create a global community of contributors.
Pros
OpenMRS provides a demo environment that allows users to fully test the experience before committing to use this platform. More than this, this medical data dashboard solution also offers an extensive list of types of clinical experiences available for testing (e.g. inpatient, outpatient, mobile clinic interfaces).
The dashboards have a clean, basic & intuitive layout that helps users focus on the available data.
This basic style does not set the platform apart as a beacon of interface design, but it doesn't try to do that and it does not have to. The neutral colours and card-based layout are optimal for focusing on what matters to the users, that being the actual data.
The navigation sidebar is useful in any type of data dashboard, but the items that are contained within it don't seem optimised. Despite this, it could be adapted to more specific use cases by each organisation.
Including the "View" button on every card serves as an affordance that proves useful for the users that might not guess that the cards are clickable.
The dashboard provides intuitive access to patient profile pages, which maintain the consistent layout and enable users to view and add medical documents depending on need. UI is consistent throughout all types of pages — This is a big plus.
More than this, the breadcrumb trail found at the top left of the screen is a useful navigation pattern that gives users the ability to see where they currently are in the hierarchy, and go back if needed.
The actions found on the patient profile are included in a single "Actions" button on the top right. This comes as a good solution for situations where action importance is not known well or identical for all types of users.
The layout can adapt responsively to various screen resolutions and to display forms in a right-hand panel. The right-hand form has an "Expand" button that allows users to choose if they want to have a parallel view with the patient profile or on its own. This correctly anticipates varying user needs.
The platform also incorporates a wiki space which provides excellent support from the community. Users can create accounts and ask any questions on this platform. The already-available documentation is extensive and well-structured. A global search field enables its users to easily find the relevant articles.
Cons
Users can customise the modules and forms they encounter, depending on their needs. Despite this, the options for doing so seem to open in a bottom-aligned panel which does not appear to be expandable. The bottom half of the screen is not large enough to accommodate the explore configuration options. More than this, some UI elements are visibly misaligned in this configuration panel.
The mentioned misalignment issues are obvious all throughout this config. area. Electric blue strokes seem to have been used excessively for some unknown reason.
Text labels are aligned at the top left of the buttons. This could be a style choice, but it undoubtedly creates large empty spaces on buttons. The font weight is also on the light side, making labels even harder to spot.
No spacing is applied around buttons in modal windows. This means that people might have a harder time realising that these are buttons, rather than read-only sections.
The patient search experience includes some odd improvisations. We can only guess that the gender selection initially included a maximum of 3 options, which would have made the segmented control a good UX pattern. However, displaying a segmented control on two rows makes it unclear that this represents a single-choice selection; a drop-down list would have been a better pattern.
Calling this set of input fields and single-select component “filters”, as the primary button does, is a stretch. Secondly, the “Reset fields” button style is too strong for the importance of the action; a tertiary button style could be used instead.
Discover professional UX design.
DHIS2
DHIS2 is an open-source health information management web platform aiming for global adoption, developed by the HISP Centre at the University of Oslo.
Pros
The platform provides access to several dashboards tailored for certain professional purposes: information campaigns, antenatal care, childcare, inpatient morbidity etc. The default dashboard layout might be basic, but nonetheless it's easy to follow, with a main area on the left and a side panel containing multiple sections.
Content is displayed inside floating modules, that adapt in size to fill the available screen area.
Users can customise their dashboards to fit their specific needs. For example, they can add a map module and configure map content, look and feel via a collapsible side panel.
When it comes to the filtering experience, this one is quite good. Main filters are displayed on a single row above the results table and a "More filters" button grouping further filter types is also available for more precise drilling down of the results. The filter drop-downs are complex. For example, the "Birth date" filter includes an extensive list of relative ranges to speed up the user flow.
The interface generally follows older Material Design guidelines. This is the right choice for teams working on a small design budget. Following established guidelines and using an external component library is preferable to making things up as you go along (which usually leads to inconsistencies and confusing user interfaces).
A right-hand side panel that provides additional information and functionality can be found on certain dashboards. This includes charts and adding comments. Content seems well-grouped within the side panel.
Cons
The lack of structure is a general issue of the platform. This is especially applicable in the case of buttons: most of them look secondary, with no obvious call to action.
Another issue is unoptimised use of space: for example, in forms, where all options along with the "Cancel" button are left-aligned, with a large amount of empty white space on their right. The "Cancel" button does not belong there and initially looks like just another option on the list. A fitting solution would be to move it somewhere on the right.
Containers and fields are not generally optimised for the expected type of content. For example, though input fields provide useful hints on expected formats, most of them are too wide and some inconsistent. In the "Report" form found below, the date input fields have two completely different widths.
The secondary button is stylised to be shorter than input fields. It creates visual imbalance in certain contexts. More than this, searching is mistakenly called "filtering". This is quite a mistake seeing as there are also multiple types of filtering available, overall this is just a direct route towards confusion.
Grafana
Grafana might not be specifically focused on medical dashboards but, nonetheless, the platform is excellent for tech-savvy users willing to create them.
Pros
Grafana dashboards are highly customisable. In the example shown below, the evolution of Covid-19 cases is tracked on a dashboard containing multiple types of charts on a modular layout. People can duplicate and edit dashboards to apply them to their own particular use case.
There is a virtually endless list of graph types to select from, which gives people the freedom to also express their creativity while customising their medical dashboard. In the following example, Covid-19 infections in Italy can be viewed by region on multiple types of charts.
Cons
Grafana widgets lack the much-needed optimisation for mobile resolutions out of the box. Some of the bugs & issues we've found make the dashboards unusable on small screens. The problems range from overlapping font layers to cut-off components which indicate that the smallest breakpoint is likely aimed at very large phones or tablets.
Global Health Observatory by the World Health Organization (WHO)
The Global Health Observatory created by WHO provides a free collection of dashboards and health resources.
Pros
All data can be accessed publicly, by anyone, without creating an account or providing any personal information.
There is a wealth of health data grouped by topic on multiple dashboards.
The dashboards are grouped by theme. Other available themes are displayed as small cards, in alphabetical order. Users are also able to search themes by kewords. The design might be basic, but it's clean and effective which is more valuable than visual artifices.
Users are able to manipulate any graph via options in a side panel, choose the type of graph they want to see, or view table data. The graph of the table is also downloadable on their device.
All of the datasets are downloadable locally in Excel of PDF formats.
In terms of mobile device UX, it is optimised well. Some of the charts do not adapt perfectly to small resolutions, but no horizontal scrolling is required to view all data.
Cons
On most graphs, a “Filters” button at the top right opens available filters as embedded containers with vertical lists of filter options. This is an outdated pattern that most visitors are likely to find confusing.
The UI style could be refined further. For example, the small illustrations included above tab names look clunky and take up space without bringing any benefits.
Coronavirus (COVID-19) Data Hub
The Tableau Covid-19 Data Hub contains a small collection of public data dashboards.
Pros
Each dashboard contains several interactive graph widgets. Hovering over any spot on a graph opens a tooltip with relevant information.
People can log in with their Tableau account if they want to save a dashboard to their favourites. Copying and modifying dashboards is also possible in just a few clicks. By copying a dashboard, people are then able to customise its look and feel and play around with the data.
Sharing options include the option to embed any graph on one’s own website, as well as decide between sharing the default view or the user’s current (manipulated) view.
Cons
The experience is not implemented responsively for mobile devices. Charts do not adapt on small resolutions and the filters at the top of a chart become almost unusable.
While Tableau is a popular choice for relatively quick, drag-and-drop implementations, the interface is unpolished. There’s an obvious lack of paddings inside components and misalignments become obvious when looking at drop-down menus.
HealthMap
Pros
First-time visitors are greeted with a short walkthrough video, that provides a good overview of main functionalities. People with a Vimeo account can save it to their “watch later” list.
HealthMap gives people access to a very interesting map view of disease outbreaks in any region on the globe. The top-left filters enable visitors to quickly search for outbreaks in their current location, or anywhere they plan to travel, as well as select a date range they’re interested in.
Detailed information is provided contextually, when clicking dots on the map. Tooltips include links to articles hosted externally.
Visitors are encouraged to contribute to the data by submitting new alerts; they can choose between linking to news stories or entering information manually. More traditional submission methods such as calling or texting a hotline are also available to encourage community contributions.
If they provide access to their current location, users can click a button at the top of the map to automatically have the system identify disease outbreaks in their region.
The Settings window enables people to customise the map style and interface language, as well as set up a default location to see outbreaks for.
Cons
On mobile devices, navigation is rather awkward and it’s a bit difficult to figure out how to access the toolkit available on larger resolutions. This is obviously not a mobile-first experience.
Filtering is hidden inside the top search icon. There is no way to search the long list of diseases for particular keywords.
Common UX Challenges
These challenges are not unique for medical data dashboards, but they can affect user experience on dashboards in specific ways.
Learnability — Getting people up to speed with operating the dashboard efficiently as soon as possible.
- Learnability is an issue that comes with any tool that provides high levels of complexity.
Usability — If a new system requires or seems to require a large time investment, it's less likely to be used.
- On dashboards, this can become an issue if the initial setup is not straightforward and intuitive.
Memorability — the ease of remembering how to operate a certain system together with its functionalities.
- If the actions required to customise the dashboard or a widget are difficult to memorise, people are less likely to never edit their initial setup, even if they're not happy with it.
Efficiency — The effort and time required to actually learn the tool must appear reasonable to new users.
- The onboarding process is key: dashboard platforms that provide a guided setup attract more users in the long run.
Desirability — People must want to learn how to use the new tool in their daily activities.
- This is where the UI design comes into play. Style can make or break a platform.
Essential features
Choice of chart type
An obvious feature that most dashboard users will look for is the ability to choose chart types for each dataset visualised. The available dataset impacts the range of options to some extent; great platforms will also provide guidance on applicable chart types.
Filters
People should be able to filter data according to their needs to find the most relevant information for their current activities. There are endless approaches to filter UX — what’s essential is to provide at least a basic way of filtering data on a dashboard.
Most often, to discover trends and changes in data over time, people need a time period filter. This filter could be a basic set of predefined values or a more advanced flavour that allows selecting start dates and times as needed.
Real-time data
For many organisations, accessing real-time data multiple times per day is essential, as it allows people to make timely and informed decisions. Many dashboard tools allow users to choose the rate of refresh for data.
Collaboration features
The ability to share a dashboard view with colleagues or collaborators is a must. In addition, users should be able to set up permission levels for each person they invite for collaboration (view only, edit, copy, share with others etc.). Related features include commenting and attaching files to a dashboard — nonetheless, these are non-essential for many organisations.
Clean layout
When working with large amounts of data, people need close guidance and minimal distractions to be able to process information efficiently. The default layout provided by a data visualisation platform needs to be clean and minimal, to help people focus on charts and insights. Too many buttons and extra options can hinder understanding and ultimately drive people away.
Free trial
Access to a free trial is very likely to attract people who are on the fence about which tool to go for. Free trials reduce friction and give people a clear idea of how easy the dashboard is to use and how many relevant features it provides out-of-the-box.
By contrast, platforms that only provide the option to sign up for a live demo add a lot of friction to the user experience. Scheduling a demo means blocking a specific time slot, connecting to a specific meeting platform on time and often answering a lot of questions on one’s use case from the person or team providing the demo.
Documentation
Help content can come in many shapes and sizes, from dedicated documentation portals to “how to” tooltips provided in context, walkthrough pop-ups, basic text paragraphs next to interactive components on the interface, videos or even PDFs and PowerPoint slides. Really great platforms provide unobtrusive, just-in-time guidance (quality over quantity).
Nice-to-have features
Responsive design
A must for any up-to-date platform, responsive design can prove rather tricky for complex data dashboards, where people need to drill into highly detailed metrics. We’ve listed this in the “nice to have” category, as many web dashboard tools nudge people towards a dedicated mobile app instead of optimising their mobile browser experience.
Custom layout
Most dashboard platforms allow customising the layout of the main dashboard screen to some extent. Customisation features include:
- displaying or hiding widgets from a predefined set;
- rearranging widgets via drag-and-drop gestures or by clicking dedicated arrow buttons;
- selecting a UI theme from a set;
- customising colours and fonts;
- changing widget sizes and proportions.
Export options
Allowing users to export content from dashboards is strongly dependent on an organisation’s security guidelines. However, when allowed, it’s a good idea to provide at least two export formats: a read-only option such as PDF or a popular image format, and a “raw data” option.
Duplication
More complex platforms enable users to create dashboard duplicates; this is useful for organisations that need to create a separate dashboard for each project or collaboration, and want to start from a core template. Additionally, some platforms allow duplicating a widget on the current dashboard.
Medical Data Dashboards are essential for hospitals and medical professionals. Of course, there are numerous use cases for these data dashboards and all of them ought to be on point.
When it comes to data dashboards in general, we've comprised a thorough benchmarking of the most popular options in a separate article.
