Beauty as a measure of quality

In the world of apps, software, and all things internet there’s a trend towards ‘beauty’ being an important feature of a product. Considering beauty is an intangible quality based on cultural and very personal biases this seems like an impossible thing to try to gauge. It’s essentially meaningless; what’s beautiful to one user might be horrible to another.

The design of an application should certainly aim to be clean, uncluttered, and usable as much as possible. Features should be where the user expects to find them, things should be consistent and unchanging unless there’s a very good reason, nothing should be a surprise. If your product achieves all of these it’s probably closer to what most people would argue is “beautiful”; but even if you have all these qualities in what you’ve built you could still have a sucky product. Aesthetic appeal is not a guide to how useful something is.

“Beauty is no quality in things themselves: It exists merely in the mind which contemplates them; and each mind perceives a different beauty.” – David Hume

You can’t measure beauty – it’s a wholly subjective facet of a designed interface. That’s not to say you can’t measure any aesthetic metrics though. There are aspects of an interface that lend themselves to measurement, and that can be objectively good or bad. Measurable qualities include white space ratio, grid consistency, colour range; not to mention things that can be measured by asking users for opinions.

White space ratio: Literally, the ratio of whitespace to useful content. What’s right for this value is subjective, but very low and very high values tend to look either cluttered or empty respectively. In data business heavy applications a value around 1:4 is a good guide. In a more user oriented design a value of 1:2 is good.

Grid consistency: The variation of placement away from a notional grid. In most applications a variance more than 0 is bad; using a grid based CSS framework tends to make it difficult to design for anything else though.

Colour range: The distance in HSL values between colours used in the interface. Generally speaking, aiming for triadic and quadratic variations with complementary colours for highlights and shadows works best.

So, while “beauty” isn’t a useful term in application design, that doesn’t mean we can’t aim to meet other more objective design goals.