Clear and Consistent UI Improves UX

Clear and Consistent UI Improves UX

UI + UX + Accessibility

"Dumb it down. Our sales team isn't that smart."

I was jokingly told this by one of my Directors years ago. While my initial reaction was, "Dang! That was cold", which made him laugh, he continued to point out where I had made my design too complex. While it was creative, I had sacrificed consistency and practicality.

Because we work so close to a product, it can be hard to step outside and look at it with fresh eyes. We know all the shiny features and warts we covered up with clever hacks. We're biased, and because of this, we sometimes fail to meet our users where they are. We may use industry terms that make sense to us but mean absolutely nothing to the user who wants to understand what our product does or, more importantly, how to perform a specific task within our product. That's why it's important to use plain language when authoring content.

This also applies to UI elements. For example, icons associated with links and buttons that perform a particular action must be identifiable and convey the same meaning. For example, the mail icon in the main navigation that leads to a contact form should not call a phone number when placed in the site's footer. We may know what a particular icon represents in our UI, but from a UX perspective; it's simply a trail marker that points to a task the user needs to complete. Imagine being presented with the same trail marker pointing in two different directions. Which direction do you go? Now imagine coming up to these trail markers while running, which is often the case due to our use of mental models and pattern recognition helping us make quick decisions. This is how users get tripped up, which can lead to errors, which leads to frustration. Just as Steve Krug said, "Don't make me think." The purpose of content or a UI element should be clear. If a user has to question what a particular UI element or term means, we should embrace the fact that they have pointed us to an opportunity to be more empathetic and right bad code.


References:

Aligning Jakob Nielsen's 10 Usability Heuristics with the WCAG 2.1
https://rightbadcode.com/aligning-jakob-nielsens-10-usability-heuristics-with-the-wcag-21#heading-4-consistency-and-standards

WCAG SC 3.2.4 Consistent Identification (Level AA)
https://www.w3.org/WAI/WCAG21/Understanding/consistent-identification.html

Determining Causes and Severity of End-User Frustration
https://www.tandfonline.com/doi/abs/10.1207/s15327590ijhc1703_3