Our dependence on reliable information has been deeply exposed since the COVID-19 pandemic. The lack of dependable data in the face of this global event has left many of us feeling more out of control and unsafe than we might have otherwise. Several organizations recognized this gap and rose to the occasion to provide the public with access to the available information. However, it hasn’t always been presented in an effective or consumable way. Below I provide a few recommendations to improve the usability and effectiveness of some of the most used COVID-19 data visualizations.
Johns Hopkins Coronavirus Resource Center
The Johns Hopkins Coronavirus Resource Center dashboard quickly became one of the most referenced data visualizations with some of the most up-to-date information. However, the usability of this dashboard leaves much to be desired.
The red text on the Johns Hopkins dashboard fails the Web Content Accessibility Guidelines (WCAG) AA standard for contrast and readability. The WCAG AA contrast ratio is “a measure of the difference in perceived ‘luminance’ or brightness between two colors”, and ranges from 1:1 (white text on a white background) to 21:1 (black text on a white background). The minimum WCAG AA standard requires the ratio to be 4.5:1 on normal website text. In the example below, the contrast ratio is 3.3:1, which doesn’t meet the standard. Fixing this by using white text, as they did on the “Top 20 Counties by Number of Deaths” section of the dashboard, would bring it up to par with the WCAG standard, making this area of the dashboard more accessible for all users, including those with vision impairment, and keep design patterns more consistent on this dashboard.
The regional filters at the top right hand corner of the dashboard have several interaction issues, as shown in the video below. When a user first filters to a region they would like to examine more closely, the user zooms into the state and county they selected on the map, and the trend line in the bottom right changes to reflect the numbers for the selected region. However, as the user continues their exploration of the dashboard, they may forget there are filters applied at the top of the dashboard. Since there are no visual indicators that the region filter is still applied, as they zoom out to see the full country, the user may not realize that the trend line stays filtered for the selected region. Rather than representing the geographic region they are viewing in the map window, the trend line remains associated with the filters. This could lead to confusion around the numbers and thus drawing incorrect conclusions.
There are a number of options that would improve this interaction, such as:
Bringing the region filters, map, and trend line closer together on the dashboard to better indicate what areas of the dashboard are affected by the filters.
Swapping the dropdown region controls for controls that are more recognizable to users as filters, and clearly display when the filters are applied. A number of industry standard filter patterns would accomplish this goal, including recognizable filter icons and using color to indicate when filters are applied.
Removing the filter selection altogether and having the trend line calculate the confirmed cases and deaths for the specific region the user is viewing in the map.
It is not clear what date range the data represents. The chart includes the date the data was last updated, but not the start date, so it leaves the data open to interpretation, including the opportunity for misuse by individuals spreading misinformation about the pandemic. This could be improved by including a date range at the top of the dashboard, possibly as another filterable element.
CDC COVID Data Tracker
Given that the CDC is a well-known source of health information, pandemic or not, it makes sense that the CDC COVID Data Tracker would become a popular reference. It will be interesting to see how this dashboard changes as data is redirected to the Department of Health and Human Services. So far, this tracker has shown some big advantages over the Johns Hopkins dashboard. Not only does it show trends around coronavirus cases and deaths, but also, it includes forecasts, tests, emergency department visits, and societal impacts. Even so, there are still improvements that could make it more user-friendly.
The icon buttons on this dashboard are far too small to be readable, not to mention clickable. This makes it difficult for the user to understand what the icons mean and predict what will happen when they click them. According to WCAG AA, the clickable area of an icon button should be 44 x 44 pixels, while the icon itself should be at least 24 x 24 pixels. The icon itself is the only clickable area in the CDC Dashboard, and that is only about 10 x 10 pixels.
The placement and style of the colored squares representing US territories suggest they are either a legend or clickable filter buttons that would allow the user to filter the map above. However, when you examine or interact with them, they simply provide COVID-19 cases and deaths for that territory. This could be improved by showing maps of all the territories, even those that are unattached to the contiguous 48, similar to how Alaska, Hawai’i, and Washington D.C display.
COVID Risk Levels Dashboard from Harvard Global Health Institute
The HGHI COVID Risk Levels Dashboard does not give users as many ways to slice and dice COVID-19 statistics as other dashboards. However, the simplicity of the design allows it to communicate a basic and clear message to users: What level of risk is my community at for the spread of COVID-19? Despite its simplicity, there are still things that could be improved about this visualization.
In user interface design, buttons are often referred to as primary or secondary, as well as being in an active or inactive state. If a button is primary, it often has visual styling to make it stand out and grab attention so that the user looks to it as a primary action to take. Further, primary buttons can be clickable (active) or not clickable (inactive), usually dependent on the user completing everything required on the page. Secondary buttons are often styled similarly to primary buttons, but don’t grab as much attention. They are often used for functions that might not be as important as the action on the primary button.
Primary/secondary buttons and active/inactive states are used poorly on this dashboard. Three interactions use buttons as a way of toggling between different views of the dashboard, but in each instance, the button to see the view you aren’t currently seeing looks inactive. However, when a user hovers over the “inactive” button, they get a hover that indicates they’ll be opening a new link, which is not what appears to happen, and would be unnecessary information if the button was styled appropriately.
This could be improved by either appropriately styling the primary and secondary buttons, or better yet, by creating a toggle button that indicates that you are viewing one of a set number of views, such as the example mocked up below.
There are color and contrast accessibility issues with the default version of this dashboard. While it does offer an accessible option that changes the color palette and contrast of the map, unfortunately, that doesn’t resolve the accessibility issues around some of the text shown. As previously stated, the WCAG AA standard requires a 4.5:1 contrast ratio on text to ensure readability, and the text area to the left of the map in this dashboard only has a contrast ratio of 2.83:1. This could be improved by making the background color of this area white and using a darker gray for the text and checkbox to ensure readability. Increasing the text size here would also help.
All in all, some information is better than none, and these visualizations meet that need. However, if interactions were made more intuitive , data was clearly and explicitly defined, and accessibility guidelines were prioritized and met, these data visualizations would be even more powerful and more useful to the wide range of individuals looking to them for answers in the midst of pandemic chaos.