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
1
.
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.³
2
.
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¹⁴
3
.
High Density
Use high density for information-heavy tasks and expert users.¹²³
Do
Use high density UI for data heavy views
Don't
Use low density for complex data views
4
.
Low Density
Employing lower density for onboarding new users or complex tasks that require focus. ²⁴
Do
Use low density to allow user to focus on each input
Don't
Use low desity to compress a view with important inputs
5
.
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
For complex Data Table content, enable density contrl to allow user to adjust to their preference
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/