Alignment
Alignment gives the eye a track to follow
- Aligned edges make content easier to scan.
- Consistent columns make comparisons easier.
- Random alignment makes the user work harder.
Weak versus strong
Left edge
Weak
Each line starts in a different place.
Strong
Headings, labels, and body text share a clear starting point.
Columns
Weak
Prices, labels, and actions float unpredictably.
Strong
Similar data points line up for quick comparison.
Actions
Weak
Buttons move around without a clear reason.
Strong
Primary actions sit consistently near the decision content.