InVision StudioNewUX DesignBurning Questions

Quick summary

Usability design can be very tough, but by bearing in mind the usability best practices outlined in this lesson, we might be able to boost our metrics by up to 135%.

On the agenda

  • What is usability?
  • Tap target UX
  • Form usability
  • Micro-interactions
  • Information architecture

What Is Usability?

Usability is how easy it is to use an app or website, and is measured by a series of usability tests. Should we care? Yes, businesses that spend 10% of their budget on usability design see, on average, a 135% increase in their desired metrics, which clearly indicates that a focused effort on usability offers a fairly decent return-on-investment.

Accessibility vs. Usability

Accessibility is more about accessing an app or website — i.e. seeing it, hearing it, understanding it, interacting with it — especially where disabled users are concerned.

Perhaps you’re wondering, how is this different from usability? 🤔

Ability to use and ability to access aren’t the same thing, since users can still find an interface difficult to use despite it being technically accessible. For example, imagine a carousel that can only be used via swiping — for some users this would be annoying and difficult to use, but for those with motor disabilities, it would be totally inaccessible.

Awesomely, most usability concerns are covered by accessibility improvements, so if you’ve taken our a11y lesson, or read the official-but-much-longer WCAG 2.0 and WCAG 2.1 Guidelines, then you’re actually already halfway there in terms of usability.

As usual, let’s dive into details 🧐.

Designing Tap Targets

Designing tap targets — e.g. buttons, links, form fields, etc. — is tricky stuff, but it’s arguably very, very central to the concept of usability. Here’s what you need to know.

Discoverability: is it where users expect it to be?

Regardless of what the user’s next action is, is the call-to-action (CTA) where the user expects it to be? Think about it: we expect the logo to be in the top-left corner, and the navigation to be somewhere at the top; or on mobile, a hamburger menu in the top-left corner, and most of the navigation items hidden inside it. We call these mental models.

Another mental model: we expect the logo to link back to the homepage!

Designing for mental models

Mental models are formed when users become routine to certain design conventions commonly-used across various apps and websites, or, when they learn how to carry out a similar task flow on our app or website. Aligning our designs with these mental models boosts familiarity, which in turn decreases cognitive load; meaning, that users will be able to use our designs quickly and easily, as opposed to slowly and confusingly.

Remember CPR: Context, Proximity, Relativity.

  • Context: is it needed now?
  • Proximity: does it exist where it’s needed?
  • Relativity: does it work well with related elements?

Clickability: does it look like a tap target?

Assuming that the tap target’s location is aligned with user expectation, is it also identifiable as a tap target? Does it demand the right amount of attention, and also, does it appear to be clickable? Because, if a tap target has low clickability, users will acquire unwanted cognitive load while trying to work out whether or not it’s clickable.

Objects in the real world are 3D. Buttons, for instance, are never totally flat or fully square, so to help the user distinguish between buttons and non-functional rectangles, consider using any of the visual styles below to make tap targets appear more clickable:

  • Shadows
  • Rounded corners
  • Hover and focus states

Here’s a flat button vs. a button with higher clickability:

Clickability of tap targets

Interestingly, tap targets that are too obvious can have a negative effect on the cognitive load if they aren’t yet needed; for example, a submit button that’s been rendered disabled until the form has been filled out correctly should look like a tap target (to help users anticipate their next move), but shouldn’t demand attention.

Disabled button states

Although we covered normal text links in the accessibility lesson, I think it deserves another mention here. Normal text links should be underlined to indicate that they’re clickable, and if used in a body of text, using a different color can help as well. In any case, a visual affordance test can shed some light on this in regards to which elements appear to be clickable or not, but we’ll talk more about usability testing a little bit later.

Just FYI: if the call-to-action isn’t actually a tap target and instead requires the user to scroll or take some other kind of non-clicky action, this should also be made very clear.

Readability: is the UX copy understandable?

Where does the tap target go, or what does the tap target do? Discoverability and clickability is useless if the user isn’t sure what the result of their interaction will be.

As an example, a user looking to start a free trial is more likely to do so if the call-to-action says “Start free trial”, rather than something obscure. While it’s important to communicate personality in our designs, it should never be at the expense of clarity.

General rule of thumb: be clear and human 👨👩.

Writing UX copy

Designers should also be very cautious about using no UX copy at all, as icons by themselves can come across as vague, especially for older users. On the other hand, too many UI elements might be overkill, so finding the right balance is important. This is why you’ll often see well-recognized icons such as the heart icon displayed without any UX copy, especially when the app or website is designed for tech-savvy millennials.

Hamburger menu usability

Tapability: is it reachable by thumbs?

Naturally, this usability tip only applies to mobile interfaces. When designing for handheld devices, we have to consider the fact that users interact with thumbs and fingers, not mice — this means that we need to design different layouts for mobile, because some regions of the mobile screen, as shown below, aren’t very accessible.

An an example, let’s take a main navigation.

While the user’s mental model would typically expect a desktop website’s main navigation to be at the top of the screen, it’s actually the lower region of the screen that’s physically more accessible on a mobile device, which is exactly why responsive design is about much more than simply making designs fluidly adaptable. When designing mobile apps and websites, we actually have to approach things differently.

Generally speaking, it’s best to keep vital tap targets in the middle and center of the screen. For best results, consider taking a mobile-first approach when UX wireframing.

Designing for thumbs

Accessibility: is it at least 44px²?

Although this is more of an accessibility concern, tap targets any smaller than 44px² are difficult to click for anybody, especially when they’re too close to other tap targets.

Tap target accessibility

Designing Interactions

Microinteractions are actions that users take as they work towards an objective like toggling a setting. Similarly, submitting a form might require multiple microinteractions. Regardless, in any case the trick is to offer clear feedback indicating the outcome of the microinteraction. Summarily, interaction design means taking everything that we know about usability and maintaining that usability as the UI changes due to user interaction.

Short and sweet, here’s a list of considerations:

  • Style focus states to help indicate selection
  • Style hover states to confirm tap target clickability
  • Should the task take a while, keep the user informed
  • Allow the user to cancel in the event of mis-interaction
  • Reinforce feedback with lifelike, human-readable animation

Designing Form Usability

Before we wrap up, let’s talk a little bit about form usability. Forms are boring and frustrating, yet, often necessary. Here’s a roundup of tips to improve form usability.

  • Clarify which form field is focused
  • Clarify needs beforehand (e.g. passport)
  • Clarify how human error can be rectified
  • Clarify how data input should be formatted
  • Clarify which fields are optional and required
  • Group form fields that are related
  • Match field width with input expectation
  • Create enough white-space, to aid scannability
  • Attempt to correct human error programatically
  • Split long forms into chunks (and display progress)
  • Placeholder text is useful, but labels are required
  • Allow users to tab through fields with the keyboard
  • Sequence form fields logically (e.g. CVV after expiry date)
  • Consider choosing radio inputs over dropdowns
  • Avoid two-column layouts, for better sequencing
  • Automatically default to commonly chosen choices
  • However, never auto-opt the user into email communications
  • Simplify it: more form fields = frustration and fewer conversions

Naturally, what we’ve learnt about usability so far is theoretical. Every design is different simply because the user’s needs are different, and this is where usability testing enters the field. Usability testing happens before, during, and after the initial design is made, and is used to help us make design decisions that accurately align with the user’s mental model. Without usability testing, we’ll never know if what we’ve designed is truly usable, and if it’s not usable, we also won’t know what to do to improve the usability. Long story short, usability testing turns theory into certainty.

Later on in the series we’ll talk a little more about usability testing and why these usability best practices — also known as usability heuristics — are so foundational.

This guide forms part of our ebook, A Beginner’s Guide to Designing UX.

Daniel Schwarz, author

Daniel Schwarz

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.

InVision StudioUX DesignAdvanced UXInVision StudioUX DesignBurning Questions