Designing for usability is not an easy challenge, but by bearing in mind these usability tips, we can design UIs that help the user achieve their objectives quickly, and even boost metrics by 135%.
What you’ll learn
- What is usability?
- Designing tap targets
- Visual hierarchy
- User flows
- Form design
- Designing for thumbs
What is Usability?
Perhaps the most commonly recognized aspect of UX design—usability—refers to making interactions, interfaces, and experiences easier to use. As users ourselves, whose time is often limited and therefore valuable, it’s easy to understand how the #1 focus of usability design is to help the user achieve their objective easily, and quickly.
In fact, businesses that spend 10% of their budget on usability improvements (including usability testing), see a 135% increase in their desired metrics (on average), making the value of usability quite clear in terms of the ROI that it brings to businesses.
Wait, What About Accessibility?
Accessibility refers to the user’s ability to physically access the UI, most notably, disabled users who have the most difficulty in doing so. We recommend taking an inclusive approach to accessibility—that is—offering the same UI to disabled users that we do for non-disabled users. The WCAG 2.0 Web Content Accessibility Guidelines outlines a number of criteria that designs must meet in order to cater for disabled users, but in fact, by meeting these criteria, we’re actually improving usability for everybody.
If you haven’t read our article on accessibility, we 💯 recommend taking a look.
But that aside, let’s run through some usability tips that apply to the wider audience 👍.
Designing Tap Targets
Clicking (or tapping, for touchscreen devices) indicates a user intent, that the user wants to see or do something. Great usability design lies upon the foundation that tap targets (for example, links and buttons) are visible enough to be noticed, large enough to be tapped by fingers and thumbs, and are also clear about what interacting with the tap target means (i.e. what the button will do, or where it will take the user).
Is the tap target at least 44px²?
It’s widely agreed upon that tap targets should be at least 44px² (any smaller and users may have trouble clicking the tap targets accurately), with this being mentioned in not only Apple’s Human Interface Guidelines, but also the official WCAG 2.0 Guidelines. Also, tap targets designed too close together may suffer the same fate (although exceptions can be made for links within a body of text, for obvious reasons).
As mentioned above, some usability considerations are a requirement when it comes to accessibility standards, with the size of tap targets being one of those requirements.
Does the tap target look like a tap target?
Ensure that tap targets are discoverable (i.e. they look like tap targets). A lack of clarity in this respect may increase cognitive load, and even result in a loss of conversions.
While obvious efforts include underlining links (and making them a different color if used in a body of text), this advice more refers to buttons and the incorrect use of the flat design trend. Buttons in the real world are three-dimensional objects—they’re never totally square, and rarely completely flat. For the user to make a distinction between a button and a non-functional rectangular element, we need to consider:
- Adding shadows
- Making corners rounded
- Designing a hover state
Here’s an example of a flat button vs. a button with more clarity.
Does the label describe the resulting action?
Words are used to describe where a link will take the user, or what will happen once a button is clicked, and when necessary, this tidbit of “UX copy” can be complimented with additional content for added clarity. UX copy should match the user intent, for instance, a user looking to signup is more likely to do so if the button says “Sign up”, rather than something obscure such as “Let’s do this”. While we, as designers, love to design UIs that stand out, it should never be at the expense of creating confusion.
Designers should also be very cautious about using no UX copy at all, as icons by themselves are notoriously vague. Here’s a study where the hamburger menu was tested for usability with and without the UX copy, and the example with the “MENU” wording (no icon at all, in fact) resulted in more conversions. That being said, hamburger menus raise a number of other usability concerns, which we’ll discuss later.
Is the tap target reachable by thumbs?
When it comes to optimizing usability and accessibility for mobile devices, we have to consider the fact that we interact with thumbs and fingers, not mice. Sometimes this means offering a slightly different layout and experience for mobile users, for example, moving menu items into more accessible regions (as depicted in the illustration below).
Crafting Visual Hierarchy
Visual hierarchy is used to illustrate which elements are the most important, and in the case of tap targets, we can use visual hierarchy to influence where users will look first. Consider a navigation flow with a login and signup button—first timers will need to signup, current users will need to log in, but which of these do we design to be more obvious? In the example below, we display “Login” using text and “Signup” as a button.
Because it’s a safe bet that users who are logging in have used the interface before, and have learned where things are (i.e. familiarity). First timers will be much slower at using the interface, so catching their attention with a bigger, bolder, and more visually apparent element is essentially saying, “you’re probably looking for this button”.
By using contrast, size, color, proximity, and other design principles, we can reduce cognitive load and ease users towards the action they (probably) want to take.
Here’s an example where Kayako highlights their recommended option 👌.
With a combination of proximity (to bunch related elements together), yet contrast and emphasis (to highlight the option that, statistically, most users are interested in), we can help users make decisions faster. At the end of the day, this is all users really want.
Designing Information Architecture
Information architecture refers to the structure of information—meaning—we don’t want users to have to dig around too much, but also we don’t want to bombard them with information they aren’t really looking for, or too much information at once. We also want to design our sitemap in a way that’s synonymous with the user’s mental model (i.e. put things where users expect them to be, and label them how users expect them to be labeled). We recommend thinking about IA early on, when creating wireframes.
Wireframe tools like Balsamiq and Whimsical are useful for creating low-fidelity mockups with navigation and information in mind. Whimsical is also useful for creating sitemaps and user flow diagrams that demonstrate the flow of information across websites/apps as a whole, not only the display of information on individual screens.
Below: navigation design using wireframes in Whimsical.
Below: user flow design using flowcharts in Whimsical.
Optimizing User Flows
What we want to achieve by creating these user flow diagrams is to reduce the number of interactions required for the user to complete their task (especially on a mobile device where an excessive amount of interactions can be even more frustrating).
Consider this approach to navigation:
As mentioned earlier in the article, this icon represents the controversial hamburger menu, a tap target that reveals a collapsed-by-default (or “off-canvas”) navigation. Hiding all menu items in this way is usually bad UX, because it’s one more (unnecessary) interaction that the user is forced to make. Apps with many screens and websites with huge sitemaps might still benefit from a hamburger menu (we’re not slating it), but we should still try to show the most common menu items upfront.
Don’t create friction where it’s not necessary.
Here’s a fantastic article describing the different ways to approach mobile navigation without the hamburger, since, to be fair, discoverability is reduced by 50% when hiding the main navigation, because the task time is longer, and the task difficulty increases.
Further reading: navigation UX.
Improving Form Usability
Forms are often tricky, boring, and frustrating (they always have been). Here’s a timeless roundup of improvements that can help establish better form usability.
- Group related form fields together
- Avoid a two-column approach to form design
- Auto-choose default or common form values where it makes sense
- Allow the user to tab through form fields with their keyboard
- Placeholder text should never be a substitute for form field labels
- Avoid dropdown boxes where a choice of radio inputs will suffice
- Design form field widths to match the user input, reducing human error
- If a value needs to be formatted in a certain way, communicate this clearly
- Provide clear error messages that explain how mistakes can be corrected
- When doable, correct the user’s mistakes programatically
- Consider logical sequencing (i.e. CVV after CC number and expiry date)
- Make it clear which form fields are optional, and which are required
- Keep it simple (more fields = more frustration, less fields = more conversion)
For best results, usability testing can be used to identify flaws in the navigation, user flows, information architecture, visual hierarchy, clickability, time to task completion, and overall ease-of-use. While UX analytics can also deliver insight into user behaviour, these insights will never be as rich, nor as valuable as the words from the user’s mouth.
By making regular efforts to improve usability and acquire insightful feedback from real users, we can make the user experience of our apps and websites much better.
For more usability tips, you’ll definitely want to read our article on accessibility 💯.
Read both articles as chapters in our ebook, A Beginner’s Guide to Designing UX.
Daniel Schwarz is a UX/UI designer, web developer, and maker by background, but a writer, editor, 5x author, and teacher at heart. Currently a design blog editor at SitePoint (ex Toptal), writer at .net Magazine and Web Designer Magazine, but occasionally a collaborator with top design companies such as Adobe and InVision.