Ready
Density
UI density is the amount of information or content shown within an area of a user interface. It affects how users perceive and interact with the interface, effecting readability and usability.
Best Practices
Balance
Find the right balance between information density and white space.¹²³⁴ Too sparse interfaces waste screen real estate and require excessive scrolling/clicking, while overly dense interfaces can overwhelm users.³
Context
Rather than viewing density as "good" or "bad," density should be carefully optimized for specific contexts and user needs.¹²³⁴ The appropriate density level depends heavily on:
User expertise (experts typically prefer higher density)¹²
Task complexity (complex tasks may benefit from focused, lower-density views)⁴
User goals and frequency of use¹⁴
High Density
Use high density for information-heavy tasks and expert users.¹²³
Do
Don't
Low Density
Employing lower density for onboarding new users or complex tasks that require focus. ²⁴
Do
Don't
User control
When possible, allow users to adjust the UI density based on their own preference. The Data Table component has this feature built in and can be enabled individually by development teams.¹³
Do
More
Related Pages
Additional Reading
Strom, Matthew. "UI Density." https://matthewstrom.com/writing/ui-density/
Envy Labs. "Interface Information Density Best Practices." https://envylabs.com/insights/interface-information-density-best-practices
UX Design. "How white space killed an enterprise app (and why data density matters)." https://uxdesign.cc/how-white-space-killed-an-enterprise-app-and-why-data-density-matters-b3afad6a5f2a
Fresh Consulting. "UI/UX Principle #52: Manage Data Density: High-Level to Low-Level." https://www.freshconsulting.com/insights/blog/ui-ux-principle-52-manage-data-density-high-level-to-low-level/