The world of user experience design has long focused on making screens simpler, sparser, and more direct. And with good reason—putting too much information on a screen at once can easily become overwhelming and cause information to get missed as users have to separate out the signal from the noise.

However, some tasks and some kinds of users require user interfaces with highly dense data in order to perform tasks efficiently and effectively.

Use Cases for Data-Dense Screens

Think about a traveler comparing several different flights based on cost, departure and arrival time, layover length, and airline. Or an air traffic controller having to monitor the status of dozens of aircraft in and around their airport at once. A simple UI where only one chunk of data is shown at a time is not a usable approach for these kinds of tasks.

When that’s the case, effective layout, prioritization of information, and basing choices on strong understanding of human perception and cognition is key. Follow these six rules to make your designs as effective as they are attractive.

1. Know your user’s goals and prioritize accordingly.

Dense and confusing screens often emerge when designers aren’t sure what exactly a user needs to know, so they just throw everything but the kitchen sink onto them in one jumbled mess. The number one key to designing effectively is understanding what a user is trying to do, what they need to know in order to do that thing, and what’s not critical to know. For example, in order to choose a flight, I care whether it’s nonstop or has a layover. What airport I’m spending the layover in is less important to my decision-making process.

Those less important or secondary pieces of data can often be visually diminished or removed entirely一tucked into expansions, hover states, or secondary screens for users who might want to dig deeper.

2. Use visual styling to identify, prioritize, and distinguish.

Once the most important elements have been established, each item needs a unique identifier so it can be found again. That identifier might be a flight number to an air traffic controller, or simply the flight’s departure time to a traveler browsing options. The identifier should be typographically distinct from other data on the screen so that it can be found quickly. When distinguishing between more important and less important data, consider varying:

  • Font size
  • Font weight (light vs. regular vs. bold)
  • Font face (Don’t use more than two per screen, if you can avoid it)
  • Text color (Again, don’t go crazy)
  • Character styles (e.g. mixed case vs. all caps)

3. But don’t overdo it.

Just because there are a lot of different ways to distinguish different content doesn’t mean all of them should be used all the time. Too many different fonts, colors, or styles will make the screen chaotic and difficult to comprehend. Remember, if everything stands out, then nothing does. Establish what “normal” content looks like and only diverge from that in limited and deliberate ways.

4. Use Gestalt principles to visually group related information.

Data-dense screens most often consist of lists of items. For example, a traveler planning a trip will see a list of available routes between them and their destination. An ATC will see lists of nearby aircraft. Each of these items has a set of attributes and behaviors (Wanna learn more about this? Check out our Object-Oriented UX workshop.) Gestalt principles of visual design are the way in which designers can make it clear which attributes belong to which items.

Gestalt is the German word for “the shape,” and these visual design principles reflect how humans’ perceptual systems make sense of the things we see. They’re what allows us to see bundles of related meaning rather than just a screen full of disconnected, floating text. Mastering the usage of Gestalt principles in UI design is an entire discipline by itself, but you can learn more about it here.

Untitled-1

5. Reserve bright, bold color for the most salient thing on the screen.

Data-dense screens can easily become chaotic if too much color or imagery is used for decoration alone. In high-stakes power user situations, especially, it’s important that errors, warnings, or indications of danger can be located and identified at a glance. In order to make that possible, bright or saturated colors like red or yellow should be reserved for those cases. In a lower-stakes consumer UI, the boldest color should be reserved for the primary call to action一the thing a user must be able to locate in order to proceed through the workflow.

6. Use the briefest terminology that the user understands, and allot space accordingly.

Depending on the nature of your users, the way information is presented can vary drastically. An infrequent flyer likely won’t have common three-letter airport codes memorized and will need a place where they can see the name of the city or airport spelled out explicitly. Whereas an air traffic controller will be intimately familiar with a number of abbreviations and acronyms that even the savviest traveler may not be familiar with. In both cases, the wording used in the user interface will likely be different from the wording a designer, developer, or stakeholder is familiar with. We are not our users!

So, for infrequent users, be sure to make room to spell out unfamiliar terminology, and for power users, liberally use the abbreviations they understand in order to fit more necessary data on the display at once. Power users often would rather have more data on the screen at once than have a screen that’s modern, sparse, and airy.

—

Our number one takeaway? Designing for data-dense screens requires thought and discipline, and we’re here to guide you.