For enterprise applications, interacting with data is central to a user’s workflow.

Yet, when designing a UI with high data density, figuring out how to display complex data sets that make sense to your users can be a real challenge.

The overarching goal is enabling users to understand & comprehend data. This allows them to make decisions central to their workflow. The process often starts by looking at high-level snapshot data (summaries, often visualized as dashboard graphs) and then drilling into low-level data (which dives deeper into detailed, use-case-specific data points). By doing so, users can substantiate their insights before taking action.

In the process, we want to provide users with clear, usable data and avoid analysis paralysis. Part that comes from balancing data density with data absorption. The more data on the screen, the less likely it is that users will absorb it. It’s not about allowing users to see data – it’s about breaking it down so that it’s understandable and digestible.

How do you balance data density with absorption?

We recommend starting with high-level data to establish the framework, then diving into denser low-level detail to fill in the blanks. Here’s how.

Approaches to Designing Different Data Structures

The two approaches we recommend are:

1) vertical data density, which starts with high level data and moves to lower level data as you vertically go down the page

2) Layered data density, which starts with high level data and moves to lower level data in additional layers, via mouse-overs, modals, clicks, or pages.

Just as white space helps the brain breathe, 1) vertical and 2) layered data density help users absorb information better.  These methods are not mutually exclusive and often pair together well, but they aid in planning your approach to design.  Moreover, how to best lay out data depends on the nature of the application and your specific use case.

The following 2 examples will dive into both approaches deeper…

1) Vertical Data Density: Providing Data in Levels with CBRE Market Builder

Fresh recently partnered with CBRE, one of the world’s largest vendors of commercial real estate services. CBRE’s goal was to create an application that draws on data from dozens of sources to rebuild, expand, and polish their internal market activity and insights tool.

Together, we created MarketBuilder. MarketBuilder simplifies workflow processes with a dashboard that simply and cleanly breaks down high-level data.

The key verticals capture interest before drilling down into detailed client or deal data.

For users who only need the highest level information, such as executives or investors, capturing this snapshot up front is important. Dashboards can provide insights into trouble spots or areas of opportunity where more attention is needed. Additional detail is available to the user as needed.

It’s important to note that dashboard UI isn’t limited to clicking to dive into experiences. The more routine behavior of scrolling also applies. Providing data in levels, using both horizontal and vertical real estate, allows different users to drill down in a variety of ways.

2) Layered Data Density: Drilling Into Data with HubSpot

Data is often heavily layered to begin with. Consider different parts of HubSpot’s Dashboard.

The principle of Progressive Disclosure, providing information and functionality as needed for tasks, is useful when designing dashboards with heavily layered data.

HubSpot is a portal for capturing and reporting inbound marketing and sales data. There isn’t necessarily a hierarchy to this kind of information. Some users need quick access to lead information, while others need access to marketing and landing page performance.

HubSpot accomplishes progressive disclosure through chunking. The Nielsen-Norman group defines chunking as “[a way] UX professionals can break their text and multimedia content into smaller chunks to help users process, understand, and remember it better.”

HubSpot’s data is inherently layered, and their value proposition is that they offer different users easy access to those layers. For HubSpot’s product, vertical data density wouldn’t make as much sense. This is a prime example of structuring your data to put general usability first.

The Best Approach

So what’s the best approach to displaying data on your UI?

The answer: it depends primarily on what your users need, along with relevant workflows and  user stories.  In any case, we recommend starting with high-level data that hits on your highest level user stories.

Consider whether a singular or combination approach of vertical or layered data density is best for your users.  The approach and the data density may easily change for your various users as well. Non-power users might only need a snapshot of data and limited functionality. Power users may want more rich data and more functionality. Executives might want high-level data, with the capacity to drill down into lower-level details. Analysts might want to see more data all at once.

No matter the user type, everyone appreciates good UX. Having a UI that caters to various users helps in designing a great dashboard experience. Designing for data density will make sure your interface is easy to navigate and manipulate, allowing users across the spectrum to be more productive.