UI design improvement for a large site or system can seem like a gargantuan task. In some cases I’ve seen, we’re talking about hundreds of templates across even more screens. What’s often overlooked in these situations is the fact that huge improvements can actually come from very small, specific changes — sometimes to a single UI element. When you’re up against the wall and are falling short on time and resources, you focus on single interactive elements that are used most frequently across the system. In our case today, that means buttons.
When I work with clients to audit UI and UX, I look for low-hanging fruit; areas where big improvements can come from small efforts. And the recurring problem that I see in nearly every system I look at is a lack of differentiation between Primary Actions (the core action the user is meant to take) and Secondary Actions (ancillary options). Both types of actions usually appear onscreen as buttons.
When UI design work is template-based, button styles for core actions are usually identical. So if we have two options on a screen — Save and Cancel — the UI usually looks like this:
The problem with this approach is that it increases the likelihood a user will select the wrong choice: clicking or tapping cancel when they meant to save. This happens because the two are visually indistinct from one another, and because humans act according to habit and reflex; we’re hitting the button before actually reading what it says. That conditioned response comes from years of use with similar (and different) products, and it’s extraordinarily hard to undo. Even though the labels are different, the brain will immediately interpret them to be the same.
Visually separate primary and secondary actions.
The solution is to first position the items in context of use, from most likely to be used to least likely to be used. The Primary Action, the choice that the majority of users will make, is always first, appearing to the left. Secondary or tertiary actions should appear next, to the right. So our redesign looks like this:
The Primary Action is a button, while the Secondary Action is a text hyperlink. This is enough to instantly differentiate the two at a glance. The eyes and the brain will fixate on the area of most contrast and visual importance, which is the button shape; this will be interpreted as the core action. Simple fix, guaranteed results.
When tertiary actions exist, add a style.
In cases where there is a single Primary action accompanied by both Secondary and Tertiary actions, the same problem exists. Out of the box, each choice will typically look like this:
Again, there is no obvious visual distinction. Again, a user’s instant, reflexive response can cause them to make the wrong choice. So we apply the same rule as above, but this time, the pattern changes slightly. The Primary and Secondary Actions are buttons — but each is styled differently. The Tertiary Action, clearly set apart from its companions, is displayed as a text hyperlink, as in this example:
Patterns like these can and should be adopted as design patterns, applied consistently across every screen in the system. If you do nothing else but establish visual differentiation for Primary, Secondary and Tertiary actions, I can guarantee you will see positive results in terms of positive UX and, in the case of forms, significantly improved time to completion. Data-entry intensive apps and systems in particular can benefit massively from this simple UI change.
It takes nearly no time to create or tweak styles to reflect this hierarchy. And as I’m sure you can see, these are small, simple changes. But the simple act of making them in your UI delivers huge benefits.
. . . . . . . . . . . . . . . .
If you’d like to get more advice from me every month on topics like this — in the form of training videos, full-length courses, e-books, downloadable templates and more — check out my NEW online school, the UX 365 Academy. Every month I publish new content, and you also have access to every course, book and training video I’ve ever created — some of which have never been published online before now.
