Dec 16, 2022

Consistent with what?

“Consistency” is a word you hear a lot in tech. Designers talk about it (do not play the “drink when you hear this word” game with this word at a design systems conference), developers talk about it, everyone! But when it comes to consistency, it’s important to recognize that consistency comes in different flavors.

Case in point; I was working on a piece of UI for a new feature, and after iterating on a few different expressions in both light and dark mode, I couldn’t reconcile the fact that the card looked “right” with a subtle drop shadow in light mode, but looked “right” with a subtle edge highlight in dark mode. My logic brain was screaming. “Inconsistent!” “Bad!”

But then it hit me; my faithful and trusty gut brain was focused on the fact that this inconsistent implementation is actually entirely consistent with the laws of physics, and how light behaves in the real world. If you shine a light down on a glossy white object that’s sitting on a white surface, you’re going to see shadow. Highlights are there, but they’re blown out because everything is white on white. If you use a black object on black surface, the shadow is very difficult to see but now the highlights stand out. Inconsistent from an implementation perspective, perfectly consistent from an “adheres to the laws of nature” perspective.

Another case where this is true is “mathematical centering” vs. “optical centering”. Logical-brain loves mathematical centering, and derides things like “magic numbers”. But take a look at this humble play button comparison, with the triangle mathematically centered on the left, and optically centered on the right:

You might be thinking to yourself right now, “there is no way that the option on the left is centered”, and you would be wrong. There is exactly as much space on the left side of the triangle as the right. But there’s also no question that the “perceptually consistent” version on the right looks “correct” and the “mathematically consistent” version doesn’t. Consistency is all well and good. Just make sure you’re picking the right kind.

Read more notes