Today’s websites and applications have become much more streamlined compared to the 2000s. As UI density decreases, user experience improves. But what exactly is UI density? And how can it be applied to design? This article explores the concept of UI density and how to implement it in design.
1. What is UI Density?
UI density relates not to the appearance of the interface at any one moment but to the amount of information it provides over time. It’s about how software connects the value it offers. UI density can be divided into visual density and information density.
2. Visual Density
What is Visual Density?
Visual density refers to how much can be seen in a given space. For example, the Bloomberg Terminal displays various elements like sparklines for key market indices and detailed volume distributions, making its visual density high. In contrast, interfaces with low visual density show fewer elements on the screen.
Intuitive Judgment of Density
People subconsciously judge visual density. For instance, comparing an image with many randomly arranged dots to one with neatly arranged rows and columns, the latter will be perceived as denser.
3. Information Density
What is Information Density?
Edward Tufte addresses information density in his book “The Visual Display of Quantitative Information.” Every bit of ink on a graphic should serve a purpose, providing new information. Data ink refers to the parts of a chart that represent actual data.
How to Calculate Information Density
Information density can be calculated by dividing the amount of data ink by the total ink needed to print the chart. It’s crucial to make this ratio as close to 1 as possible.
4. Design Density
What is Design Density?
Design density refers to the proportion of design decisions made to convey information in UI, UX, and product design. Various principles like Gestalt principles, proximity, similarity, and closure are used to determine density.
Applying Gestalt Principles
The similarity principle means that text of the same size, font, and color represents the same purpose. The proximity principle indicates that when a chart is close to a headline, the headline explains the chart.
5. Temporal Density
What is Temporal Density?
Temporal density is determined by how many tasks a user can perform within a given time. Loading time is one of the most significant factors in temporal density. For example, the Bloomberg Terminal has high temporal density because it loads data almost instantly.
Increasing Temporal Density
You can increase temporal density by reducing loading times. If two actions occur within 100 milliseconds, they feel simultaneous. Between 1 and 10 seconds, animations or transition effects are necessary.
6. Value Density
What is Value Density?
Value density relates to the value of the results users obtain. An example is breaking a long form into smaller pieces and using a wizard-style interface. If sacrificing visual and temporal density makes the result more valuable, the overall value density increases.
7. Conclusion
UI density aims to optimize the value users gain from an interface while balancing the time and space the interface occupies. Design should consider various factors such as speed, usability, consistency, predictability, richness of information, and functionality.
Designing with UI density in mind helps users derive more value from software.
Reference: Matthew Ström, “UI Density”