Affordance & Flat Design

In which I wade into the flat design vs. skeuomorphism debate a meer two years after I first started thinking about it and when really the argument’s all but over and there's probably very little I can add to it.

Prompted by this tweet and the website it refers to I was thinking about Metro and the whole flat design thing and how there's a basic assumption at the bottom of it which underpins much of what they’ve done. An assumption which is also, I think, the main thing that’s caused the "flat design" paradigm to fail – when it has failed.

Everything is interactive

When you look at an interface do you assume everything is clickable? You're probably looking at one now. Is everything clickable? It used to be that it was probably very clear what was clickable and what wasn't. In applications you tended to have a frame around the main content (or activity) and this frame, which was usually a nice shade of grey, contained a load of things which looked like buttons or menus, or something recognisable like that.

Take MS Word  in Windows 98 for example. You type your letter in the bottom bit, and above there's about a billion of those little buttons and each one can help you in some way. You start to learn what they do after a while but the first thing you learn is "that is where I go to click things".

That place up there (or down there, or to the side) was referred to as "chrome" by some people. When the Metro guys started out one of the things they wanted to do was to get rid of that. The split between content and chrome didn't seem right anymore. So they wanted to make the content be the interface, so you could interact directly with it.

But in order to do that you need users to understand that they don't need to search out those little button-looking things anymore. As Mike Kruzeniski said in is wonderful How Print Design is the Future of Interaction post.

Today however, most onscreen content is assumed to be interactive. The literal analog affordance is no longer necessary...

I think the problem comes when that assumption doesn't hold. Not everyone assumes everything onscreen is interactive nowadays. Some people are thoroughly used to looking for skeuomorphism to guide them through interfaces, and there's no doubt that the optical illusion of three dimensions is eye catching in a very fundamental way. So why did they think they could do without such a valuable set of clues and cues to help users get around and use their interface?

Not Just Flat

Let’s check out the Metro design principles though because they're great! OK number one (Clean, Light, Open, Fast) is pretty standard but yeah it’s cool. The second (Celebrate Typography) kind of pins their colours to the mast a little more, but still cool. The third one (Alive in Motion) is interesting as putting motion at the centre is fairly bold. Good motion design is often more of a nice-to-have than a fundamental part of UI design. The fourth principle (Content, Not Chrome) I’ve talked about above. And finally the fifth one (Authentically Digital) which is fascinating and throws up a load of questions.

Looking at this you can see the the removal of chrome is part of a larger whole. Not only in conjunction with solid design principles but also an emphasis on movement (which in essence means user feedback as interfaces don't usually move unless in response to a user action) and  not only that but the whole thing is within a larger context of grappling with the question: "What is authentically digital?".

This isn't just about flat, although it can look that way.

Touch & The Children

I think there's two factors which are key to a lot of this. First is the advent of the touch screen. Not only did touch bring with it a different paradigm of interactions but it also heralded a change in terms of space. Moving a little mouse pointer around a (comparatively large) monitor is not like jabbing your finger at an iPhone. There isn't the space anymore for the kind of chrome we’ve had in the past and forcing users to navigate through endless menu options isn't acceptable. Removing the chrome and making the content the interface is necessary.

Second, but related, is the fact that each generation growing with these new technologies forms their own norms and has their own expectations. With touch devices dominating more and more, I think children will start to grow up with some of the in-built assumptions upon which Metro is based. They will expect everything on screen to be clickable (jabbable, touchable) in some way. They won't need things to look like buttons, or menus, or lovely soft leathery handbags in order to know what to do with them. And maybe, just maybe they'll have some kind of a sense, in-built, and probably unexpressed, about what "authentically digital" is.

Doing it Wrong

The website at the top takes almost none of these things into consideration. So few of it’s elements are clickable and it’s movement is decorative but little else. It also seems to have a crazy emphasis on mouse hover as trigger (wha?). Where it is usable it’s only where it makes concessions to chrome (the black bar at the top) not where it embraces the design principles of Metro.

It’s ironic that in producing a design which is little more than "flat" they’ve opened themselves up to being used as an example of why "flat" design is bad.