In Defence of 3D Buttons

There’s been some discussion in the web design community recently about ‘flat’ UI design as the arrival of ‘honest design’. See this post from Allen Grinshtein for example. Of course ‘flat’ design has been around for a long time (here’s a flat design I worked on back in 2007), but has been getting more attention with the arrival of Microsoft’s nice-looking Metro design language for Windows 8. In much of the design community there has been a fairly strong reaction against over-use of 3D gradients and drop-shadows on the web and ‘flat’ design seems like a refreshing way forward. In particular Apple’s use of skeumorphism in the Calendar app in iOS 6 was widely disliked. But having said this, I find that in my UI design work I still tend to favour using the 3D metaphor for buttons. Yesterday I had a bit of a discussion about this with Ben Joyner (chief web designer at the University of Bristol) which has caused me to think a bit more about why this is. I think these are the main points from my point of view.

In usability, familiarity is king

I think that on a web form, the familiarity of a button that looks slightly 3D can give a slight usability edge. People are used to the 3D metaphor and if a submit button has a slight gradient and seems to pop slightly from the page, I think this helps to key people into the function of that element. It doesn’t have to be over the top – the effect can be quite subtle and the casual viewer might not even notice it. But I think in some cases the extra texture of a gradient can help.

Brochure sites vs. web apps

I reckon there is a slight difference here between a standard ‘brochure’ website and a site comprising a lot of interactive forms (e.g. web apps). While I think the choice between flat or 3D is largely an aesthetic design decision in both cases, in web apps (including mobile apps) the greater density of interactive elements on the page makes it slightly harder to mark out affordances with other means such as colour contrast, white-space, etc. In these cases I find it particularly useful to mark out a button with a subtle gradient and/or drop shadow. Although I’m not saying a flat web app can’t be done successfully! With a brochure site (for example where you have little more than a submit button on a search bar) I would have no hesitation in using a flat style.

Working with browser defaults

Although it is possible to replace default browser form elements like select boxes and radio buttons, it is hard to do this consistently across different browsers and results in a lot of extra work. Generally I prefer to work within the flow of the constraints of the medium and accept browser defaults here. So, given that select boxes will look very 3D, I think it can potentially be slightly confusing if submit buttons then look flat. Yes, you can certainly work around this but I usually prefer not to. This is one way in which working with web forms is a bit different from creating a stand-alone new design language from scratch like Metro: they already have their own history and baggage.

So what do you think – are there any real usability implications of the flat vs. 3D styles? Does anyone know of any testing aimed specifically at 3D vs. flat buttons?