Skip to main content

Consistency vs Clarity

How usage of consistency should be inconsistent.

The goal of any UI is to make things clear and easy for the user, consistency is one of the main ways to achieve this because by making things consistent, you make patterns known, and you stop the user from guessing, this tends to make things better for the user by removing stop and think moments. However, there are two problems, firstly, over consistency is as bad as a complete lack of consistency, and consistency can be used to justify any number of terrible design decisions.

The long and the short of it, is that a lot of people get confused by consistency and end up tripping over themselves. The problem is, many designers strive for consistency without realising it's a sliding scale; you can go from everything being insanely inconsistent - let's say every button in your app has a wildly different design - to insane consistency - every button being identical, including the icons and text. I've obviously taken two extreme positions here, but it illustrates a point, extreme inconsistency would at least still be somewhat usable, if hilarious, and extreme consistency on the other hand, would not even be remotely useable. Here’s a practical example. Figma's drop-down menus and split state menu button. The interface for these is consistent, but the interaction is inconsistent, this mismatch is a problem. Clicking anywhere on the dropdown triggers a menu, but a user can click as long and hard as they like on the identical looking split state menu and the menu will not appear until they click on the tiny arrow icon. This is what I would deem an over consistency. These distinct interactive elements should in fact, look distinct, this prevents frustration, mine-sweeping and avoids the dreaded bottleneck where a user has to stop and think. These can be done well, all you need is some sort of delineation between the button sections, an affordance if you will. An affordance is an inconsistency which tells a user what something distinct does precisely because it is inconsistent with other UI elements. Affordances are not optional in good interaction design.

Next time someone uses the argument that something should be more consistent, take a moment to ask "consistent with what?", because with the answers to that question, things sometimes become a lot less scientific and a lot more subjective. A very simple and common example of this is visual designers making all their icons a single consistent colour - something which actively harms usability - a happy medium would be colouring icons by category or usage, or just using colour naturally in designs.

Next let's consider a more complex example of being consistent with 'competing software'. This is a very common choice product designers make - to copy someone else in the field, especially if the feature in question is required but not a differentiating factor. The theory goes that if you copy the other software then your users who switch will not need to relearn how some concept works, because it will be the same. So far so good, what could go wrong? Well, the problem is, we don't know how the competition ended up implementing said feature the way they did.

  • It's impossible for us to know the internal politics that lead to a product design, e.g the loudest voice in the room or the most senior voice, rather than the most skilled may have won out.
  • It may be a mistake.
  • It may be unfinished.
  • Budget/time may not have allowed for a polished product.
  • It could just be good old fashioned incompetence.
  • Technological constraints of the time may have been a limiting factor.
  • Or, it may really be the right choice.

So if you copy a feature blindly, you may be copying faults and providing a suboptimal product, you might not think this is too bad due to the inherent advantages, but this can have far reaching consequences. Let me introduce you[1] to the insanity which was (and still is) everyone copying how Photoshop gradients work, which can be summarised with the Erik McClure quote: "CSS does it wrong because SVG does it wrong because Photoshop does it wrong...".

Finally, a third kind of example: if an app appears on Android TV, WebOS and tvOS, and it requires an onscreen keyboard, is this keyboard exactly the same on all platforms, thus being consistent across all your products? Of course it isn't, it would be idiotic to do that, instead you would be consistent with the platform (to take advantage of additional platform features like being able to type on your phone, and accessibility settings). Such over consistency is quite common, the NowTV app on Apply TV used the same unusably awful keyboard on all platforms until very recently.

Suffice to say, consistency is not the goal, clarity is the goal. Consistency is a sliding scale that you can use to achieve clarity, but if you're not sure what to be consistent with, or if consistency would harm usability in any way, do whatever makes things clearer for the user.

 [1] See https://erikmcclure.com/blog/everyone-does-srgb-wrong-because/