Applying Visual Design Principles to Improve Signal to Noise in Security UI

Last updated at Thu, 31 Aug 2017 14:18:40 GMT

As we design the product experience at Rapid7, a key challenge for our team is the presentation of critical security information in clear, immediate ways despite the sheer amount of network and user data displayed in the user interface. We refer to this as a signal-to-noise challenge: important data can be easily lost against the background of unimportant information.

Since invisibility is a valuable part of a hacker's toolkit, we can use the power of visual design to improve security simply by reducing the amount of noise and increasing the signal. In other words, by making important information easier to find, view, and understand.

Some ways that key security information can be obscured:

1. Information Density: the amount of displayed items exceeds a user's working memory so they are unable to effectively distinguish important data from unimportant data.
2. Lack of Visual Priority: critical information is visually identical to less valuable info, so a user must work harder to locate the info they need.
3. Hard to Quantify Values: the displayed information does not map to a tangible equivalent in the real world, or is mismatched in scale:
   1. Risk score of 20 vs. 20 million
   2. CVSS Score
   3. Attacker behaviors as numerical quantities

When crafting the product interfaces, we apply visual design principles throughout to establish information priority, reduce data density, and define a consistent and beautiful visual language to make security values quantifiable and more easily understood.

Boosting the Signal

Establishing Information Priority

When a user creates a site in Nexpose, they are given the ability to define dozens of individual settings. However, only two types of settings are required for a user to complete the task. Without appropriate visual design, a user might spend unnecessary time navigating extensively through numerous additional choices.

In this example, we designed the selection UI to differentiate between required settings and optional settings, using the following visual principles:

1. Hierarchy: The required settings are located first in visual order (when read from left to right) by placing those choices in the upper left of the UI. This area is commonly viewed first, so a user is able to see the required choices up front, and consider them before moving on to other elements on the page.
2. Contrast: Notice that optional settings are designated with a blue color that is monochromatic in relation to the surrounding elements. This reduced contrast suggests to the user that these items are lower in priority, because they do not call attention as strongly as other dominant elements on the page. In comparison, required settings are colored orange, increasing contrast and visibility. Once a required setting has been satisfied, its contrast and disruptive visibility is reduced by re-coloring the setting label with the lower contrast blue.

Quantifying Abstract Information

Security information is often numerical, so a user must work cognitively to discern tangible relationships between abstract quantities. Our goal is to use these numbers to derive additional visual cues that help the user understand the underlying context and how the values might be understood relationally.

In this example, we are experimenting with ways to visualize successful vs. unsuccessful user authentications. Displayed as plain-text numbers, multiple values would be hard to compare to one another, especially when matched to a third value: location. We applied the following visual principles as we explored various solutions:

1. Scale/Proportion: The size of the circles varies in relation to the number of authentications represented, enabling the user to immediately know where the most logins are taking place. In addition, circles can be nested within one another; the difference in nested sizes allows a user to compare the proportion of successful (dark) to unsuccessful (blue) attempts: if the blue circle is larger than the dark circle, the number of unsuccessful attempts exceeds the number of successful authentications, which would indicate suspicious behavior.
2. Balance: Placement of the authentication circles on specific map locations unbalances the layout and draws attention to those points. In addition, the circles create radial balance around each important location, ensuring information correspondence between locations and their authentication values.

Reducing Data Density

Tabular data is a common design pattern in security UI. Information in table form often consists of multiple numerical quantities or text content that is visually indistinguishable from adjacent values.

In the above example, a printed report showing a summary of vulnerabilities was originally displayed in a table format with minimal visual styling via color changes. A redesign of the report table provides the user with additional visual elements to help interpret the vulnerability information, using the following visual principles:

1. Harmony/Rhythm: Vulnerability values are matched to levels of color intensity, and these colors are carried throughout the redesigned table to provide visual harmony and connect objects that share equivalent levels of importance.
2. Emphasis: A background box has been added to the single, largest number within each column, so a user can see at a glance what the upper limits are for each type of vulnerability. This single number helps users quickly see whether the entire column is within an acceptable range, no matter how many individual values the column contains.

Meaningful Data

We believe visual principles have the power to improve speed and precision when presenting security data. Our goal on the UX Team is not to simply give you all the available information, but to organize and deliver it in ways that elevate the important relationships and underlying value of that data to a meaningful level where you can act to secure your environment more completely.

Leave us a note in the comments and let us know how you think visual design can improve your security workflow.

Thanks,

Neil Estacio

Sr. UX Designer / Visual Lead