Clear and Concise UI

Style

User interactions should be designed with intentionality and consistency. Follow a logical visual style that ensures buttons, form fields, and other interactive components are easily recognizable for their intended purpose and distinct from the surrounding text or elements. 

Examples of interactive components, including a text input, select box, button, radio input, hyperlink, and checkboxes.

Each of these component types are visually distinct, yet share a common style, making it clear to the user what to expect when interacting with them.

Size and Space

Interactive elements should be large enough for users to easily select. At least 44 pixels on each side is a good baseline. Allow a healthy margin of separation between elements as well, making it easier for users to select the correct item.

Two phone screens side by side, each with four sections with headings and links. The links in the second version are much larger and have more vertical space between them.

The website footer on the left has links that are quite small and crowded together, presenting a challenge for users. The version on the right instead uses a larger font size, with increased vertical space between each link.

Labels & Microcopy

Any text on an interactive element should clearly describe the action or destination the user can expect. Use copy that is succinct and icons that are unambiguous.

Four buttons in a row: One has an icon of a house labeled as Home, a magnifying glass labeled Search, a clock with an arrow circling around it counter-clockwise labeled History, and a person cropped to the head and shoulders labeled Profile.

Each of these buttons is easy to understand because the labels are simple and the icons are easily recognizable.

Interaction States

Create distinct visual variation between states, including:

  • default
  • hover
  • focus
  • active/pressed
  • disabled 

Make sure focus indicators are clearly visible. This could be a solid outline, a background color, or another obvious change.

A button that reads “visit us” in various states: default, hover, focus, and disabled. An email address input is shown in the same four states as well. The hover state has a color change, and the focus state has an outline around the element.

Each state is defined through distinct visual variation.

WCAG 2.1 AA Success Criteria