Layout

UI/UX Principles

UI/UX Principle #52: Manage Data Density, High-Level to Low-Level

June 29, 2017

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.”

In the video example below, HubSpot uses the layered approach to provide users with information about the performance of a newsletter. It starts with a high-level performance overview. By clicking into each layer, users reveal a more detailed breakdown of relevant data.

 

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 a 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.

Founder and CEO of Fresh Consulting, student of all things creative, innovative, and fresh, professional snowboard instructor trainer, father.

You might also like...

23

Aug.

UI/UX Principle #53: More Flexibility Can Lead to More Complexity

Imagine a computer science class – the teacher starts by introducing you to five complex subjects ALL at once! The first day of class? Data structures. Algorithms. Cyber security. Server optimization. Database management.  There’s a reason computer science courses aren’t designed that way. Knowledge, skills, and familiarity with a subject should be layered. The key lies in … Continued

24

May.

UI/UX Principle #51: Use Progressive Disclosure to Simplify Complexity

Da Vinci said “Simplicity is the ultimate sophistication,” and today, successful digital applications are no exception. In digital UX design, presenting features, navigation, and information in layers progressively allows designers to keep it simple.   Great user experiences encourage discovery while hiding the complexity that can otherwise overwhelm a user. After all, not every use case requires offering users … Continued

28

Dec.

UI/UX Principle #50: Animate for Usability, Not Just Flair

“Flair” (stylishness and originality) is exciting. But it doesn’t always make for good usability. As Steve Jobs put it, “It’s not just about what [a design] looks and feels like. Design is how it works.” If you’re looking to add both usability and flair, animate your experience with motion to make a seamless experience for … Continued