Dense Digital Product Design

Let’s pretend that you are a product owner of a complex, data-driven application that will be used daily by expert users. They demand a metric ton of data be crammed on the screens. They tell you that seeing as much data as possible all at once makes them more efficient with their time and decision-making. So, naturally, you oblige.

However, when testing the application with users, they tell you it’s cluttered and confusing. It’s difficult to find anything, and it takes too long to get tasks done. What do you do—just willy-nilly move things around? Uh, no. That’s a bad idea.

Whitespace: Your Secret Product Productivity Superpower

In UI terms, “space” refers simply to the areas between all interface elements. Designer’s call this “white space.” Of course, the space doesn’t need to be white. It is also often called “negative space,” but really, it’s any intentionally added space. Depending on the product, white space can be substantial or subtle and targeted.

If you learn how to deploy white space to your advantage, you’ll make your product easier to use. Intentional use of white space can turn your product from zero to hero. It helps you:

Clarify Dense Information

Whitespace helps separate interface elements from each other so users can better distinguish them and see how they are related. This allows similar interactions and information to be grouped effectively. When users can quickly see what’s important, they get work done faster.

Guide the User

Giving interface elements breathing room gives those elements emphasis. A well-spaced interface helps users see what’s most important. This helps you direct them through the flow of interactions in your product.

Enable Focus

White space guides the users’ eye and prevents time-wasting distractions. This focus boosts engagement and productivity.

Empower Content

All applications rely on words. Proper spacing with microcopy boosts legibility, helping users understand interactions at a glance and process copious data.

Establish Authority

When white space is effectively used, a sense of visual authority is established. Your product becomes more credibile. This produces trust and confidence before a single action is taken.

Consequences of Complex Systems

Without intentional spacing, all digital products suffer. But this is especially true of complex applications. When the complexity of sites, apps, or software increases, the abundance of white space in them decreases. It’s a cardinal rule of product spacing.

Endless Interface Elements

Data-dense systems convey a lot of information. Not only do they feature data grids with abundant rows and columns, they also throw in complex components like tabstrips, modal windows, accordions, maps, calendars, forms, and all the little controls and elements that come with those features. Offering acres and acres of white space just isn’t an option. 

But white space isn’t always about the amount of space. It’s the proper use of space that matters. If the product team isn’t thinking carefully about spacing in their complex application, boom, they get that complex, cluttered, chaotic spreadsheet effect.

First, Identify What’s Truly Important

This article is not about sound product strategy, specific features, or technical requirements. We’ll assume you’ve gone through the trouble of having a great idea and planning the appropriate interactions to bring it to life. You must know  why you are making what you are making. Okay, now we’re ready to talk space strategy. 

Using Your White Space Superpower

Let’s look at some techniques and rules around managing white space to empower your digital product’s design.

Step 1: Eliminate Useless Macro White Space

Macro white space refers to the larger expanses of emptiness in a layout that separate major sections, interactions, or content. It’s the space that exists around the grouped elements of your interface. This can almost always be safely reduced without impacting interactions, information hierarchy, or readability.

In data-dense applications, you’ll need as much horizontal space as you can get for important elements. Your users will demand it. The first place to start is to remove any macro white space to the left and right sides of the screen. Push the boundaries of your product to the edges of the screen, and don’t add large areas of empty space between sections. This will free up valuable pixels for important data display.

Step 2: Add Useful Macro White Space

You’ll often hear stakeholders or clients (not necessarily users) decry the presence of any white space in complex apps. Empty areas must be filled.

However, macro white space can perform a vital task, drawing the user’s attention to key interactions or content. The very absence of “stuff” emphasizes material near the added space, making it easy to see and giving it added importance. The trick is to have a clear reason for any space of this sort.

Let users guide the placement of white space.

If user testing reveals that macro white space isn’t helpful, get rid of it. If stakeholders, the CEO, or anyone but your users want to get rid of useful macro white space, treat the request with skepticism.

Step 3: Optimize Micro White Space

Micro white space refers to the space between individual elements in your interface. This is the space between specific content and small interactions. Micro white space maintains essential separation between these elements, making sure interactions don’t appear cluttered or jumbled.

Micro white space guides users to important interactions or data. Space draws our attention to elements. Vital links, words, buttons, directions, etc. all need sufficient micro white space to stand out from the crowd. Paired with solid visual decisions (e.g., readable font, singular distinct link color, clear icons) this space can help make your application something people can use without much thought.

Step 4: Separate Elements with Active White Space

Active white space is the space you purposefully create around key content or interaction groupings in your visual layout. Active white space adds structure and emphasis to maintain these groupings’ relationships to each other. It allows users to focus better on blocks of actions.

Even grouped elements (attached to each other by their close proximity) must be clearly separated from one another with active white space. If small elements need spatial boundaries, so do large collections of elements. Even a bit of buffer space dramatically increases at-a-glance visibility and recognition.

The good news is data-dense elements, such as grids, tables, graphs, and charts, tend to have strong horizontal or vertical boundaries, so it’s easy to establish clear separation of groupings with this type of space. Use active white space to clearly direct users to important actions or clickable elements by setting them apart and allowing them to stand out.

Step 5: Finetune Passive White Space

Passive white space is the space inherent to all common elements of your application, right down to the space between letters, lines of text, and around images or charts. This kind of space is created by the coded styling of your app’s content and data components (usually via CSS).

You need an effective design system.

Your product is (or should be) built on a design system, a standardized way of showing all common elements or interactions. All design systems include passive white space. This spacing is the same all over your product. This creates predictability and sets user expectations (even at the subconscious level).

Improving passive whitespace, even in relatively small amounts, will make a difference for your users. Adjusting these spaces can easily compress or expand the amount of data that displays on the screen. Even switching to a condensed font (designed exclusively for the screen of course) is a way of affecting passive white space. You have optimized the use of space at a granular level. And you can make these changes easily and globally (if you’ve built your product correctly).

Experiment with adjusting letterspacing, line height, font, padding, and margins. Just don’t sacrifice clarity and legibility. We’re looking for at-a-glance recognition and understanding. We’ve not looking to merely jam more items onto the screen.

Using Your Powers for Good

Macro, micro, active and passive—you now possess the power and knowledge to wield space to create a more digestible, highly productive, efficient interface.

As you explore these strange, new (no, not really) design concepts, remember that adjusting space can’t save a product that lacks strong strategy or a user-centered foundation. But proper use of space can breathe new life and a better user experience into an already viable product. With that in mind, use your new powers wisely to increase your users’ productivity like never before.