Accessible Data Visualizations to Break Usability Barriers

A data-driven environment relies heavily on well-designed, powerful solutions to analyze, store, and safely manage data. The overwhelming quantum of data requires adept management solutions, allowing users to make the right analysis and interpretations and detect anomalies in record time with a minimal rate of errors.

Our client, a US-based company providing clinical molecular diagnostic solutions, is a leader in infectious disease diagnostics, empowering healthcare professionals to make better diagnostic decisions and lower healthcare costs.

A reactive approach in such an environment can cause irreversible damage; they have to be proactive in eliminating problems before they appear.

Color differences are vital in data visualization i.e., graphs and pie charts, however, the human ability to discern colors isn’t uniform. From a design standpoint, relying on color alone for readability and affordance (possible actions that the user can take) was making it difficult for users who were color blind.

To design an efficient, accessible, and user-friendly analytics product that interfaces with diagnostics instruments minimizes the risk of human errors, and improves data circulation.

This would aid in

• Helping Lab Managers maintain a birds-eye view of lab operations and clearly recognize and address red flags or items that require their attention.
• Allow them to easily derive trends and forecasts to optimize processes and utilization of resources within a lab.

The design process began with a thorough UX audit, which revealed usability issues and challenges such as complex data visualization patterns and a lack of accessibility – a few users had trouble discerning the color blocks in the bar graphs.

Users with vision-related disabilities such as color blindness experience difficulties that can affect them in the workplace. Many have problems in fully accessing information from all kinds of everyday workplace sources including the internet, documents, presentations, photographs, maps, charts, and diagrams.

With this into consideration, we explored UI options to present the data and see how it could be made flexible enough to accommodate users with varying levels of capabilities.

We built a few options along with some variations and tested them with users to learn how the new solution faired. The new solution complied with WCAG standards and conformed to WCAG 2.0 level AA. This ensured that the system was Perceivable, Operable, Understandable, and Robust as mandated.

These iterations were tested with users to study if the new analytics were processable and were actually helping the users make decisions on the go.

We iterated and finalized a direction after UT sessions with users and reviews with Subject-Matter Experts and Internal Stakeholders.

Based on the learnings, we recommended creating an ‘Accessibility mode’ for color-blind users using the following design alternatives

• Patterns and textures make it easy to differentiate different segments.
• Adding text labels to segments wherever required to make them even easier to understand.
• Simplified visualization to reduce the cognitive load and improve decision-making.
• Alternative visualization for each metric, to help interpret the same data in different ways (e.g. line chart, stack chart, and pareto).

Key Highlights

• Adequate contrast between text and background colors with a contrast ratio of 4.5:1 for small text and 3:1 for large text as per WCAG 2.1.
• Use of sans-serif font with a size of 16px for body text and adequate line spacing that is 1.5 times the font size for readability.
• Use of color palettes that are colorblind-friendly and adding visual encoding beyond color, such as patterns, textures, and shapes to differentiate data points.
• All chart elements, including axes, data points, and legends are clearly labeled
• Labels are large enough to read easily and positioned for clarity, using descriptive language to avoid ambiguity.