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.³

1 .

Balance

1 .

Balance

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¹⁴

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¹⁴

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.¹²³

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. ²⁴

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.¹³

For complex Data Table content, enable density contrl to allow user to adjust to their preference

Ready

Data Table

Data tables display information in a grid-like format of rows and columns and function similarly to other spreadsheet applications. Data tables are useful for comparison and analysis of large amounts of data and as an alternative or complementary view to data visualizations.

Ready

Data Table

Ready

Data Table

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/

Dark Theme

Icons

Dark Theme

Icons

Dark Theme

Icons

Overview

Best Practices

Overview

Best Practices

Overview

Best Practices

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.

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.

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

Best Practices

Best Practices

1

.

Balance

1

.

Balance

1

.

Balance

2

.

Context

2

.

Context

2

.

Context

3

.

High Density

4

.

Low Density

5

.

User control

More

More

More

Related Pages

Data Table

Data Table

Data Table

Additional Reading