Data Display
Number alignment, text overflow, data density, and empty states in tables and data views. You'll hit this when users struggle to compare values, cannot see truncated content, or stare at a blank table with no guidance.
Plan Revenue
| Plan | Users | Revenue |
|---|---|---|
| Pro plan | 1,204 | $48,160 |
| Team plan | 387 | $11,610 |
| Enterprise | 42 | $25,200 |
| Free tier | 8,931 | $0 |
Plan Revenue
| Plan | Users | Revenue |
|---|---|---|
| Pro plan | 1,204 | $48,160 |
| Team plan | 387 | $11,610 |
| Enterprise | 42 | $25,200 |
| Free tier | 8,931 | $0 |
Left-aligned numbers scatter the digits unevenly, making it hard to compare magnitudes at a glance. The dollar signs and commas do not line up, so users must mentally parse each number individually. Without row striping, it is also easy to accidentally read values from the wrong row.
Right-aligning numbers lets users compare values by scanning the decimal and digit positions vertically. Combined with tabular number spacing and subtle row striping, this creates a clear visual rhythm that makes it easy to spot the largest or smallest values at a glance.
Projects
Annual infrastructure scaling review and cost optimization
Active
Q3 marketing campaign performance analysis report
Draft
Customer onboarding flow redesign project
Active
Projects
Annual infrastructure scaling review and cost optimization
Active
Q3 marketing campaign performance analysis report
Draft
Customer onboarding flow redesign project
Active
Abruptly clipping text with no indicator leaves users unsure if they are seeing the full content or just the beginning. The uneven clipping also breaks the visual grid of the table, making rows feel misaligned and harder to scan.
An ellipsis signals that text was truncated, and a tooltip on hover reveals the full content. Users can still scan the table efficiently because row heights stay consistent, and they can always access the complete text when needed without navigating away.
Orders
| ID | Customer | Product | Qty | Price | Status | Date | |
|---|---|---|---|---|---|---|---|
| #401 | Alex | alex@co | Widget | 3 | $45 | Shipped | Apr 1 |
| #402 | Sam | sam@co | Gadget | 1 | $89 | Pending | Apr 2 |
Orders
| Customer | Product | Total | Status |
|---|---|---|---|
| Alex | Widget x3 | $45 | Shipped |
| Sam | Gadget x1 | $89 | Pending |
View full details →
Cramming every available field into a single table row creates a wall of tiny text that requires horizontal scrolling to read. Users cannot see all columns at once, which defeats the purpose of a table. Important information like status or total gets buried among less critical fields.
Showing fewer columns with the most important information first keeps the table scannable without horizontal scrolling. Status badges add visual weight to key data, and a link to full details lets users drill deeper when needed. Less is more when data density competes with readability.
Invoices
| Invoice | Date | Amount | Status |
|---|---|---|---|
| No data | |||
Invoices
✉
No invoices yet
Invoices will appear here once you have completed your first billing cycle.
View plans
A bare 'No data' message provides no context and no path forward. Users do not know if they need to take action, wait for data, or if something is broken. Empty table headers above a blank row make the emptiness feel like an error rather than a normal state.
A helpful empty state explains why there is no data, sets expectations for when data will appear, and provides a relevant action. This turns a dead end into a guided next step, keeping users engaged instead of confused.