Interfaces that look cohesive feel easier to use.
That’s because our brains are wired to trust symmetry. When an environment feels harmonious, we’re more likely to relax and deeply engage with what we’re doing.
What makes a UI cohesive? It’s about composition: How each element relates to the others, and how they come together to form a larger whole.
Even if individual UI elements look and feel outdated, the larger UI can still be made to feel cohesive.
Align Elements
If the UI reads left to right, then align the left edges of elements. This way the user’s eye can follow a straight line down the left edge of page instead of zig-zagging.
One way to do this is to set up a grid or keylines against which to align things.
Use Consistent Spacing
Space elements in consistent increments rather than haphazardly. The smallest increment of spacing is called the baseline. Every other spacing value should be a multiple of the baseline.
A baseline establishes vertical rhythm, meaning you could draw evenly spaced horizontal lines all the way down the UI, and every element would sit on a line.
This lining up of things sends a signal to our brains that’s interpreted as familiarity and trust.
Add Whitespace
Spacing also make it clear if elements are related or distinct. Closely spaced elements are seen as related, while those spaced far apart are seen as distinct.
If elements are too close together, they can all blend into one block of content, which can make the UI feel overwhelming and hard to scan.
Put enough space between each area of content so that they are perceived as distinct from one another.
Consolidate Styles and Apply Them Consistently
Don’t use three styles when one style will do.
Styles should support levels of hierarchy in the UI (e.g. headings and paragraphs, primary and secondary actions). Remove styles that aren’t serving this purpose. Add styles only to fill gaps in hierarchy. Then apply them consistently across the UI.
This goes for text and interactive elements.
This is post is part of a series on the fundamentals of interface design.
The series summarizes technical knowledge and best practices that make it easier for humans to interact with software on screens.