When is a button not a button? Reflections on flat “design”

Posted on October 4, 2013
Updated October 1, 2019

Read on for the answer to this enigma.

iOS7 went live went live last week. Love it or hate it, you’ll notice a move away from the bumps, shadows, curves and gradients you knew, towards a lighter, simpler and flatter visual style. It’s both the latest trend and a move towards simplicity.

“Flat design” has been gaining momentum for the last year or so. We still see gradients and drop shadows all over out screens, but we’re also seeing more solid blocks of colour and sharper edges. Funnily enough, while everyone’s proclaiming the world flat once again, it’s only in the last couple of years that 3D has become simple to emulate on the web, with browser support for shadows and gradients becoming fairly standard and uniform.

There is definitely still a need for 3D on the web.

It’s still useful for buttons to show elevation, for example (although they don’t here). Along with the new iOS flatness came a paradigm shift for navigation, from button to link. It’s not for me to say if it’s good or not. Links take up less room spatially, but aren’t cognisable visually. Not many users will get stuck on this, but even an experienced user such as myself will spend more time looking for the right navigation link. I would have preferred buttons, but flat ones (such as below this post).

Still, I’m all for flatter interfaces.

Firstly, it’s less confusing. There’s none of the mental overhead involved in processing a supposedly tumultuous landscape of bumps and rises (that doesn’t quite make visual sense much of the time). It’s visually cleaner: It leaves cognitive room for things that matter, such as visuals that support the content, or the brand.

Secondly, It helps highlight the things that really need to stick out into the third dimension.

Thirdly, it forces more logical on-screen structures. If you can’t rely on depth as a primary distinguisher or hierarchy, you’re forced to create a structure that explains itself.

Lastly, flat scales better. Shadows of all types are CPU intensive: mobiles devices can struggle scrolling on shadow and gradient sites; images that lack internal detail, such as solid colours, can be compressed better – or compiled at higher resolutions to look slick on the many retina displays in use today; where there used to be files, there can be space.

Just like the glitter and shine all over the web of the last five years, indulgence in the third dimension was always going to be a temporary celebration of new browser capabilities. Common sense usually takes a hiatus when something brand new appears. It’s not usually apparent how to best use something until after some time spent learning by experimentation.

Thus, we’ve tried adorning our 2D with faux 3D to add interest because we could. Many of realised it’s not useful. ‘Flat design’ is just a reactionary swing of pendulum, like – a reaction. But While simplicity should be just the default state of things, flat isn’t necessarily universality simple.

PS – “flat design” is a misuse of the word design. “design” is a process. Not an outcome. Flat design is a misnomer, unless you’re referring to a process that is flat.

A. When you can’t tell it’s a button.