Designing patterns that scale with progressive disclosure
by Mícheál Douglas (IBM), Enzo Colasante (IBM, IE), and Lynn Harding (IBM, IE)
During the design process, we create pathways for understanding and exploring by asking:
- What are the desired outcomes for our users?
- What information will help them get there?
As designers, it’s important for us to map out ways to address these questions and guide users to specific answers that don’t compete with other essential information. This is where designing at scale — creating something small that can be adapted and reused — and progressive disclosure become valuable. They help us meet our users’ needs and ensure a seamless user experience by presenting information clearly and concisely.
Designing at scale is critical within enterprise software. It requires a lot of forward thinking to create cohesive design patterns that can support an array of use cases and contexts. A component built for scale should be flexible enough to adapt when and where needed.
In the following case study, we’ll explore a particular design pattern, tailored to help security analysts prioritize and understand cybersecurity incidents. This pattern is only one part of a broader solution for these needs, and should work in tandem with other elements to help analysts prioritize and understand the nature, impact and scope of an incident.
How to design with scale in mind
- Organize and structure data through content modelling. Determine what your user needs, and where and when they need it.
- Consider your users’ needs on a larger scale by ensuring the component or pattern is intuitive, accessible, and of value. How does it fit into the overall solution?
- Don’t let information compete. Draft a user-centric narrative that establishes a clear hierarchy, for a more consumable and meaningful outcome.
- Reduce cognitive load by providing information in layers through progressive disclosure, so that information is digestible, making it easier for users to understand and navigate through the UI.
- Consider the feasibility of introducing the pattern or component. Ensure it can evolve with the system, and can be flexible enough to adapt to multiple touchpoints, ensuring a seamless UX.
The problem
Last July, our team was tasked with designing a new experience as part of a cybersecurity tool. The aim was to create a capability to correlate and enrich suspected threat alerts from linked sources, generating leads for security analysts to investigate. These leads would then be enriched with further data, and prioritized for escalation as security incidents.
A crucial part in realising this experience was working from job steps associated with the jobs-to-be-done framework. By leveraging correlation and enrichment data and acknowledging the requirements tied to these jobs, we began to ideate on how we could help analysts better prioritize and understand security incidents.
While considering how to best answer these needs, we first identified ways in which our “as-is” tool was already performing well — such as our automated severity score, which supported analysts in prioritizing incidents. However, we also discovered areas for improvement. For example, though we had employed the MITRE ATT&CK® framework of known adversary tactics to support the creation of our new capability, there were discrepancies in our implementation that resulted in inconsistent content and made its use counterproductive.
Furthermore, the application of the framework in our “as-is” state didn’t align with IBM’s Carbon design language. It lacked cohesion and flow, making it challenging for analysts to navigate. This fragmented state, along with a lack of function and a focus on the wrong areas, posed an issue that stakeholders were keen to address. The challenge for us was determining when and where users could derive the most value.
The solution
Knowing that cohesion would remain integral while implementing change, we followed the MITRE ATT&CK® framework and designed a scalable pattern.
As part of this pattern, we created a flexible component (derived from our tagging system) that enables analysts to map attacks, identify vulnerabilities, and prioritize security investments. Using progressive disclosure, the pattern tailors its level of detail based on touchpoints.
In the list shown above, analysts can quickly see the tactics used in each lead, allowing them to quickly prioritize based on the adversary’s actions.
Clicking into a lead, the summary gives further detail, providing a condensed summary of the attack with its stages in sequence, along with tasks, top affected assets and users, and more details below. This complete UI adopts a narrative style, progressively revealing details in digestible content sections that can be expanded at the user’s pace. This allows analysts to more easily grasp the nature, impact, and scope of the attack.
Finally, the side panel enhances the information further, delivering an extensive summary of techniques and sub-techniques, offering a more detailed description of the behaviours employed to achieve a goal. By clicking on the IDs, analysts can even navigate to the MITRE ATT&CK® website to obtain descriptions of the tactics identified.
What we delivered was a pattern that ultimately allows analysts to discern the “why” with tactics, and the “how” with techniques and sub-techniques, from any point in the UI — all at their preferred pace.
Remember, in any domain, it can be a challenge to balance the density of information. Taking a layered approach can be helpful in overcoming this. When each layer has its own purpose in the broader UI context, while still feeling connected to the others, the information shared is ultimately more consumable.
Scalable patterns, such as progressive disclosure, ensure that information is accessible when needed, particularly when there is a significant amount to digest. And, overall, this improves usability, and helps users to efficiently and effectively complete their jobs.
This article was co-authored by Mícheál Douglas, Enzo Colasante, and Lynn Harding. Mícheál Douglas is a Senior Design Lead for IBM. Enzo Colasante is an Advisory UX Designer for IBM in Dublin, IE. They are both part of the Security AI design team. Lynn Harding is a Content Design Lead for the Security design team at IBM. The above article is personal and does not necessarily represent IBM’s positions, strategies, or opinions.
