Designing visual hierarchies for the communication of health data

Abstract

Objectives

Visual hierarchy underlies all visual design decisions related to information presentation. This manuscript describes the experience of a multidisciplinary health data visualization and software design team in using visual hierarchy to redesign a hereditary colorectal cancer lab report.

Materials and Methods

A series of interviews with representative users were conducted to identify target user groups and determine information hierarchy for each user type. Visual elements (eg, size, color, contrast, etc.) were then assigned to mirror the information hierarchy and workflow for each user type.

Results

User research identified 2 distinct user groups as consumers of the redesigned lab report. An interactive design employing a 2-level page hierarchy was developed, which stratified the content to support the needs of each user type.

Conclusions

The challenges related to displaying the complex nature of digital and personal health data can be addressed by applying foundational design methods such as visual hierarchy.

Discussion

Visual hierarchy, a foundational design principle, can be used by visualization teams to clearly and efficiently present complex datasets associated with healthcare.

Introduction

With the advances in personal health data and artificial intelligence, healthcare providers need support in making complex data and new methods meaningful and useful. The rapidly changing landscape of health data represents a tremendous opportunity to reduce the cognitive burden of interacting with data visualizations and health information technology (HIT) applications by bringing multidisciplinary perspectives from the design domain. Examples of successful visualizations utilize techniques from human-centered, user-centered, and participatory design.^1–4 Some visualization teams integrate visual designers, including graphic design, illustration, user interface (UI), and user experience (UX) design,^5–8 whose training in foundational principles from art and design enable them to effectively use visual techniques to communicate information.⁸

Visual hierarchy is a foundational design principle that underlies all visual design decisions related to information presentation. This well-established and validated practice drives the communication of information. It is used in information design and graphic design practice as well as in other design disciplines with interactive components, such as user interface (UI) and user experience (UX) design. While attention to effective visual hierarchies has been demonstrated in some healthcare contexts,^9–12 successful usage in HIT applications is still not widespread.^11,13–16 Comprehensive reviews on usability assessments of web-based health information determined that fewer than 50% of health-related websites presented clear visual hierarchy.^14,15 Electronic health records (EHRs) demonstrate usability issues related to poor information display, cognitive overload, navigation issues, and poor support for user workflows.¹⁷ These problems are symptomatic of a systemic issue—a lack of design thinking or participatory design in the creation of these applications. It is only through these methods that effective information and visual hierarchies can be established for any application. This manuscript aims to bring awareness to this foundational method by describing the visual hierarchy methodology and presenting a use case illustrating how visual hierarchy can be applied to a healthcare setting (redesign of a colorectal cancer genomic screening report).

Background

Visual hierarchy is the principle of using visual techniques to show elements in their order of importance.¹⁸ Based on Gestalt theory, where the human brain naturally groups information as a whole in order to process information, it leverages the Von Restorff effect (items that stand out visually are isolated from the whole and therefore demand attention).¹⁹ Visual hierarchy is used to guide user actions and focus attention.²⁰ A lack of visual hierarchy (flat hierarchy) results in difficulty in distinguishing the relative importance of one piece of information for another (Figure 2). This well-established process, validated through a variety of metrics including task completion rate and eye tracking,^21,22 is applied in fields that rely on clear visual communication, such as advertising²³ and graphic design.²⁴

Figure 2.

Original lab report requiring redesign. Though this report shows only a test on 1 gene, the brief for the redesign was to use information similar to what is shown here to design the report of a panel of genes for a specific disorder.

The methodology can be divided into 2 phases. In the first phase, a hierarchy of information is established, where data types to be visualized are identified and then assigned to levels of importance (eg, primary, secondary, and tertiary). The visualization team must understand not only the data itself but also its associated meaning, implications, and qualities (eg, Who uses it? What do they do with it? How large is the dataset? Does its size vary? Is it dependent on other data?). They must understand the data in the greater context of the users and the problem, and designers play a key role in illuminating this type of information.⁵ It is therefore vital that designers are brought in during this first phase, since the second phase is entirely dependent on the results of the first. Designers do not enter at late stages to make visual displays aesthetically pleasing.

In the second phase, the designer creates a visual hierarchy that supports the information hierarchy and workflow of the user established during the first phase. This is accomplished through the strategic application of design elements (eg, size, color, contrast, alignment, repetition, proximity, white space, style, etc.; Table 1). For example, the principles of repetition and proximity are used extensively in our redesign to organize similar content together so that it is easily discoverable and comparable (Figure 1). This produces an interface that signifies well its logic, purpose, structure, and interaction model.

Table 1.

Visual elements that communicate information hierarchy.²⁵

Design elements		Usage
Line		Line is one of the most basic elements of design and is the distance between 2 points. Lines can divide or join content. They can be visible or invisible. They can be used to guide the eye to a specific place.
Shape		An enclosed 2D area that can be geometric or organic in nature. Multiple elements in a design can be grouped to form a perceived shape in a design.
Color26		What our eye perceives when light is reflect from an object. Color can be applied to any element and can be used to emphasize, create mood, relate to subject matter, and convey importance or priority among other things.
Space		Distance between and room around elements in a design. Space is both positive (design elements) and negative (the ground on which the elements exist). Designers use space to activate design elements in certain ways, and it is a key tool in creating the visual hierarchy of a composition.
Typography		The arrangement of text on ground. It is not really an element or a principle but, rather, fundamental subject matter for user interface and other forms of design. Many of the other design elements can be applied to create a typographic style or system. Type can also be used to create elements such as Line and Shape.

Design principles		Usage
Scale		How large or small things are in proportion with one another. Scale can be used to create emphasis and hierarchy among different pieces of information.
Value		The degree of lightness or darkness of an element. This can be applied in grayscale as well as color and can be used to emphasize or de-emphasize an element.
Alignment		When elements are arranged on the same axis. Alignment works with other principles such as repetition and proximity to create relationships among objects.
Repetition		Reusing the same element, motif, style, or component throughout a design. This can unify a design, help create visual consistency, and aid in the creation of design systems that establish expected patterns of use across multiple interfaces.
Proximity		How close or far away one thing is from another thing. Proximity can be used to emphasize similarity or difference and create groupings of information.
White space		Also referred to as negative space, white space does not always have to be white. It is space in a design that is left free of text or content, and which allows the user or viewer to see the design elements, structure, and organization more clearly.
Elevation		The surface on which content and components live. It is a visual motif used to create hierarchy and focus through depth.
Interaction		The interplay between static interface designs and fluid workflow designs in software development. It can be used to stratify information, support and embody information hierarchies, and provide feedback.
Hierarchy		Hierarchy shows which elements by order of importance. It is a goal of design and many of the other elements and principles of design are used to create visual hierarchies that support the information hierarchy of the design problem.

Figure 1.

Example of how visual hierarchy can transform the experience of reading and comprehension. The original report (left) given to the designer included almost no visual hierarchy. The same information is presented again (right), but in this example, the image is designed to establish a visual hierarchy of information. Elements and principles of design used included adjusting the scale and weight of typography to emphasize important information (ie, results) and de-emphasize others (ie, labels). Color was also used judiciously to indicate severity of results. White space is used to separate discrete units of information from one another and make each more findable. Related information is grouped together (proximity, repetition) and displayed in a similar manner to guide the user through these different types of content.

Designers also consider the number of visual styles introduced into a design solution. A common mistake is to make everything stand out. However, “when everything is emphasized, nothing is emphasized.”²⁷ Especially in the context of technology and data, designers strive for “the smallest effective difference” toward communicating the information hierarchy visually.²⁷ By striving for simplicity and consistency, designers reinforce to the user each visual element’s purpose and place in the hierarchy.^28,29

Methods

An existing hereditary colorectal cancer laboratory report was provided by Mayo Clinic Laboratories. Participatory design sessions were conducted over the course of several months to identify target user groups and determine appropriate content and hierarchy of information to be communicated. The 2-phase methodology described above was then applied to develop multiple iterations of an interactive report design. Throughout all stages of the process, representative users provided feedback that was integrated into subsequent design iterations (participatory design). Representative content and data was used to ensure scalability of the design for different result scenarios.

Results

Design critique of the existing report (Figure 2) demonstrated that it contained very little visual hierarchy. A header area demarcated with a horizontal rule contained all of the patient’s clinical and demographic information as well as metadata about the ordered test (received, ordered, requested by, etc.). Headings styled in all caps indicated general categories of content, but few other methods were used to further group or stratify the information. The most important information, variant classification, was buried in a paragraph midway through the document.

Heuristic analysis of the report identified several general usability problems: (1) Most of the information was at the same hierarchical level. For example, variant classification and test methodology were at the same level. At initial review, the visualization team suspected that access to the latter was necessary in only some cases. (2) Density and granularity of information was not appropriately tailored for different user types. (3) Related information (eg, mutation, next steps) were spread throughout the document, reducing findability of specific information.

Defining the problem: Who are the users? What do they need? When do they need it?

User research and design meetings resulted in the identification of 2 groups of users as consumers of the report (General Practice Clinicians, GPs; Genetic Counselors, GCs), each with unique requirements. Requirements were framed as “user stories” for each identified user type and prioritized by importance to the user (primary, secondary, and tertiary; Table 2).

Table 2.

Assignment of hierarchy for each identified user.

As a User I Need to:	Importance/location in info hierarchy
	GP	GC
See patient clinic and demographic information and metadata about the ordered test	Primary	Primary
Immediately see any pathogenic or VUS result	Primary	Primary
View higher level related disorders and recommended actions or next steps with the context of the result	Secondary	Tertiary
Have access to information about the test methodology and cautions	Tertiary	Secondary
View information about the results such as location, DNA change, amino acid change, and detailed interpretation	Tertiary	Primary
Access additional information about genes, related disorders, clinical trials, referrals, color code system and classification definitions	Secondary	Tertiary

Abbreviations: GP, General Practice Clinician; GC, Genetic Counselor; VUS, variant of unknown significance.

Stakeholders and representative users indicated that the 2 user groups consumed the report in different ways. GPs, for example, needed to quickly and efficiently scan the results to determine if pathogenic mutations were present and understand next steps in management. In most cases, GPs did not need to see detail related to mechanisms or testing methodology. Both GPs and GCs needed to see the classification of results, but GCs required much more detailed information (eg, interpretations, testing methodology, etc.).

Creating a visual hierarchy

After the priority of the information was determined, ideation on a visual design hierarchy that met the needs of both user types began. The primary solution relied on interaction. Instead of presenting all information at once, access to information was controlled through the usage of interactive components (Table 2).

The interactive solution employed a 2-level page hierarchy that separated content primarily targeted to the GP user (Figure 3A) from that targeted to the GC user (Figure 3B). The first hierarchical layer targeted the GP user, who required less detailed information. This first/default layer provided a summary of the results and interpretations and therefore greatly reduced the amount of content on the screen. Explanatory content (eg, expanded information about genes, disorders, clinical trials, color coding, and classification systems), which were determined to be at the middle or tertiary level of the hierarchy, were presented in the form of popups, tooltips, etc. upon interaction.

Figure 3.

Redesigned lab report. Annotations on design decisions (right) are provided by the designer on the visualization team, who worked closely with domain experts to determine relative importance of each piece of information displayed. (A) “Report Summary” page targeted to General Practitioner user type. (B) “Drillin” page targeted primarily to Genetic Counselor user type.

Based on our finding that the most important information for both user types was whether patient’s lab results indicated a clinically significant problem, the designer on the visualization team used color to strategically emphasize the classification results. A color-coding system was employed to indicate mutation severity (pathogenic to benign). To reinforce the impact of this, use of color was minimized at all other places. The designer also used the principles of proximity and similarity by grouping genes, variants/classifications, and interpretation/disorder/action information in a table-like display that allowed users to scan down columns of content and quickly assess variants of concern and related information (Figure 3). In the existing report (Figure 2), this information was buried in separate paragraphs, making it difficult to make comparisons. Gathering the content in this way allowed the designer to create white space in the page that activated groupings of information. As a result, users would be able to easily comprehend the mapping of information. As mentioned above, secondary and tertiary level content was available on demand via temporary display modes that required interaction with the user.

For the GC user, in-depth interpretation information was a requirement. However, the first-level summary view was still useful for gaining a quick understanding of the number and type of deleterious variants. Since it was unlikely that a patient would have significant numbers of mutations per panel, the designer determined that “clicking in” to a second page that provided expanded information about each variant was not overly burdensome for the user. This second-level page (Figure 3B) was then available to both user types, while prioritizing the needs of the GC user.

Discussion

The results of this project produced a well-considered design product, which was not implemented due to the predetermined scope of the project collaboration. Instead, the project served as preliminary research for a larger, institution-wide project related to designing, developing, and implementing an EHR interface for the display and usage of genetic data. The final design served as inspiration for the EHR interface project, and ideas and concepts for information organization and display were expanded upon for this later project. In other settings where the product would progress to implementation phases, the visualization team would conduct expanded testing to a broader group of users followed by further design iterations. A comparison of usability between the original and redesigned lab report would also assist in measuring outcomes related to successful usability, understandability, and communication.

The value of user feedback outside of the final design stage is not to be dismissed. This project employed participatory design methods, where users/stakeholders were presented mockups (Supplementary Materials S1) not only for eliciting user feedback but also for helping stakeholders envision what was possible. From the mockup shown in Supplementary Materials S1, the visualization team and users jointly identified information that was deemed less important for the target user and was therefore removed.

Conclusion

This case study presents the process and resulting product of implementing visual hierarchy methods for designing meaningful interactive visualizations and interfaces for health applications. The design principles described here aim to aid visualization teams in clearly and efficiently presenting complex and large datasets to users. Experiences from this case study indicate that this process is best done through the embrace of a multidisciplinary team of professionals, which includes domain experts, representative users, software developers, research scientists and, in the case of software and mobile app development, UI and UX designers. We hope this provides inspiration for continued inclusion of design in healthcare visualizations.

Author contributions

The use case cited in this manuscript was completed by Lisa P. Gatzke. All authors contributed to the conception of this manuscript, draft manuscript preparation, critical review, and approval of the final version of the manuscript.

Supplementary material

Supplementary material is available at Journal of American Medical Informatics Association online.

Funding

This work was supported by the Healthcare Innovation Program Office at the National Center for Supercomputing Applications, University of Illinois Urbana-Champaign.

Conflicts of interest

None declared.

Data availability

The data underlying this article are available on reasonable request to the corresponding author.