Not every design project is going to be a big bet. Sometimes the most impactful work is improving an existing UI, quickly, with minimal resources.
When the functionally is right, but there are issues with usability or efficiency — say it’s cumbersome, confusing, and looks and feels janky — the UI might need what I’ll call quicks wins and cleanups.
A quick win or cleanup can happen when, no matter how narrow the scope, tight the timeline, or inadequate a legacy UI might be, certain fundamentals of good design are applied to improve a UI.
In this post I’ll describe six of these fundamentals and explain how they can be applied to fix common design issues.
01. Understand the Job
Before improving a UI, take time to learn what function it’s meant to perform, the outcome it’s supposed to support, and in what context it’s intended to be used.
This way the design can be evaluated against a shared understanding of underlying needs, rather than making guesses and assumptions about a solution.
When there’s clarity on the job to be done, it also makes it possible to provide clarity for the people who’ll be interacting with the interface.
02. Provide Clarity
The opposite of clarity is confusion.
A confusing UI can make even simple tasks difficult because a user has to make sense of what they’re looking at before they can make a decision and take action.
A clear UI is self-evident, meaning it’s immediately obvious what to do, how to do it, and why. It delivers on the UX design maxim, don’t make me think.
Eliminate or Deemphasize
Ask, does this piece of the UI support the job to be done? If not, then remove it or deemphasize it.
For example, get rid of optional fields in a form, or move rarely-changed settings to a secondary view.
Use Labels, Titles, and Headings
Too often I encounter UIs without proper labeling. This includes labels on form elements, headings for different areas of content, and page titles.
A label is one of the easiest ways to remove ambiguity. These bits of text allow a user quickly understand what things do and identify what they need.
Make Controls Visible
Controls (buttons, toggles, dropdowns) enable action, navigation, and input. But they also inform and instruct.
Don’t hide or obfuscate important actions behind overflow menus or collapsed sections, and don’t place them far away from the content they’re related to.
If the UI has a primary action, then try to show it in the main view, and make it more visually prominent than secondary actions.
Use signifiers (e.g. underlined text and a hover state) to distinguish interactive elements from other content.
Finally, don’t make a user guess what a control will do by using vague language or, worse, by not using a label at all.
Group Related Things
Divide the interface logically by grouping content into sections based on category of information, function, or sequence within a workflow.
Organizing the UI in this way is like creating a map for the user. They’ll get an overview and quickly find what’s relevant to them.
Shorten Copy
People don’t read UIs, they scan. Replace blocks of text with a pithy sentence. Even better, use a label.
Check Contrast
Make sure the contrast ratios of text on backgrounds are meeting accessibility standards. Contrast ratios should be at least 3:1 for large text and 4.5:1 for small text.
I use a Figma plugin called Contrast to quickly check contrast ratios in my designs.
Use Established Patterns
People use and are familiar with many UIs. Piggyback on their prior knowledge to make your UI easier to understand and use. Don’t ask users to learn novel layouts and interactions if it’s not necessary.
Examples of established patterns include:
- Placing a submit button at the bottom of a form.
- Using a stepper to indicate progress in a flow.
- Using a page layout that follows the F-shaped pattern of how people naturally scan a page.
Use Metaphor
Familiar concepts can instantly convey the functionality of a feature, or even the mental model of an entire application.
A pencil icon, for example, implies text editing. A progress bar indicates a beginning, middle, and end in a process, and a goal to be reached.
Create Hierarchy
One of the most effective ways to provide clarity is to communicate the relative importance of elements on the page. That is to create hierarchy.
03. Create Hierarchy
If everything is a priority then nothing is a priority.
Without hierarchy, each element commands the same amount of attention, which means a user has to read everything from top to bottom to get the whole picture.
When hierarchy is established the relative importance of each element becomes distinct, and the number of things a user has to take in at once is reduced.
The goal of hierarchy is to guide a user’s attention in a sequence that makes it:
- Easier to absorb and comprehend the UI
- Faster to discover relevant information and actions. Usually this means guiding attention from the general to the specific.
There are two ways to create hierarchy:
Adjust visual prominence to draw attention
Create visual hierarchy by making one element more (or less) visually prominent than other elements.
Visual prominence increases with contrast, and contrast increases with surface area and the difference in darkness between a foreground and background color.
Headings should be more prominent than paragraph text, and primary actions should be more prominent than secondary or tertiary ones.
To make text more prominent, for example, increase font size and/or font weight (i.e. its surface area), and make it darker if it’s on a light background.
To emphasize an entire area of the UI, apply a different background color, add a border, and/or use shadow to increase its contrast and give the appearance of elevation.
Arrange elements so that important content is seen first
Structural hierarchy (document hierarchy for web pages) refers to the order of elements on a page, and the nesting of child elements within parent elements.
Show information that communicates the location and purpose of the UI — “Where am I? What is this?” — first. It sounds obvious but this is why page titles and navigation breadcrumbs go at the top of a page.
Nest elements to enable “drilling down” into content. This allows a user to progressively view information with increasing specificity, as they need it, rather than having to view everything up front and all at once.
One way to nest elements is to use expandable and collapsable sections to show and hide information. Another way is to organize content into first-level and second-level pages.
04. Display Feedback
If the UI has changed state or if it’s in the process of changing state, then the user needs to know about it — especially when the change was triggered by an action the user took.
Feedback reduces uncertainty and frustration for the user, and preserves their confidence in the UI.
A UI needs to show feedback for the following states:
Success when a change in state was successful. This doesn’t always have to be a green checkmark and a success message. It can be as subtle as changing a label from “on” to “off,” for example.
Error when a change in state failed or an input was invalid.
Progress when quantity or position has incremented.
Loading when the UI is between states, waiting for data to load.
Empty when there is no data to show. This makes it clear there is no data rather than a bug or connection error.
Connection Status if data isn’t syncing.
Interactivity Hover, Pressed, Focused, Disabled states on interactive elements like buttons, links, inputs, and controls.
05. Enable Recovery
Don’t create dead ends. A dead end is a path in the UI that ends on a view with no options.
Every action should be reversible. There should always be a way to navigate back or forward or to take another action. In rare cases where none of these options are possible, use copy to tell the user what happened and provide guidance on what to do next.
UI patterns that enable recovery include:
- Undo
- Back
- Retry, redo, recover
- End on a main menu or start page
06. Make It Cohesive
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.
Wrapping Up
The six fundamentals listed above summarize technical knowledge and best practices that make it easier for humans to interact with software on screens.
Taken together, they can quickly transform a UI from confusing, frustrating, and inefficient to something that’s clear, accessible, and usable.