#  Clear and Concise UI 

 



 ##  

  expand\_more  

 
  

 

##  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.](/sites/g/files/omnuum12446/files/styles/hwp_1_1__960x960_scale/public/2025-10/designers-ui-components_2.png?itok=dtHB3zlJ) 

 



 

 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.](/sites/g/files/omnuum12446/files/styles/hwp_1_1__960x960_scale/public/2025-10/designers-ui-space_0.png?itok=1NQlKT3k) 

 



 

 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.](/sites/g/files/omnuum12446/files/styles/hwp_1_1__960x960_scale/public/2025-08/designers-uielements-labels.png?itok=fpkVQs00) 

 



 

 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.](/sites/g/files/omnuum12446/files/styles/hwp_1_1__960x960_scale/public/2025-10/designers-ui-states.png?itok=2UjXgMoZ) 

 



 

 Each state is defined through distinct visual variation.



   

---

 

##  WCAG 2.1 AA Success Criteria 

- [1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)
- [2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html)
- [2.5.8 Target Size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)
- [3.2.4 Consistent Identification](https://www.w3.org/WAI/WCAG21/Understanding/consistent-identification.html)
- [3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html)