“If you’re paying attention to what’s going on in the design world, you’ve probably noticed the ongoing debate around skeuomorphism vs. flat design.” Good overview of the subject from Sacha Greif. This is a very important point: “But where the main victim of realism is merely good taste, taking minimalism too far can have serious consequences on usability. Users have come to rely on a lot of subtle clues to make their way through an interface: buttons have slight gradients and rounded corners, form fields have a soft inner shadow, and navigation bars ‘float’ over the rest of the content. Remove all these clues, and you end up with a flat world where every element is suddenly placed at the same level, potentially leading to confusion: Is this a button, or simply a banner? Will anything happen if I tap this?”
Good question. Let’s not confuse users.
There’s a difference between minimalism and removing useful features.
Too bad the Windows 8 UI team didn’t read this before cementing “everything is just text” into the Metro/Modern UI.
There are several screens in Win8 where there’s no indication of what’s clickable. Headings, icons, text, links, buttons, everything is the same, with just minor variations in font (mainly size).
Dear God, this.
I just installed Office 2013 and I can’t stand it. In addition to adding useless padding inside the UI (a la Gnome/GTK), the completely flat design makes it hard to see what’s what and distinguish toolbars from tree views and menus and lists. It’s a mess. And it’s ugly to boot.
Web browsers have long addressed this kind of usability problem in a beautiful, minimalistic way
http://blogs.adobe.com/dreamweaver/2011/09/getting-rid-of-blue-bord…
But you don’t need to copy real world objects to do this. After all hyperlinks don’t copy the real world yet its pretty obvious what is a hyperlink and what is not, because it gives a visual clue. its bold, or underlined, or a different color or all of the above.
Frankly most of this stuff just screams “We wanna look cool!” and using win 8 (as much as I hate that POS) as an example is wrong because I doubt you’d find many usability experts that would call Win 8 anything but a failure in design as NOTHING has any real visual clues in that OS. Oh and the calc example also sucks, what do you want them to do, put the numbers on backwards? All keypads have had a similar layout since touch dialing so that is what folks are comfortable with, blame ma bell.
But at the end of the day let’s call a spade a spade and just admit everybody is copying Apple okay? if Apple said calcs should be backwards and all buttons should look like pimples every stupid thing would look like that within a year. its hot, lots of money there, i get that. But don’t make it out to be any kind of major design choice as its not. Its no different than how every app in the 90s looked like Win98, that was what was popular and where the money was so that was what you got.
You might hate skeumorphism, but have you considered the alternative. Nothing looks like a button, and i would bet that the OS9 platinum look will be stillconsidered the best of all time. Looks is not everything, that OS was awful in almost aspects, but it was the prettiest and still is.
I don’t see how the abstract visual notions we have (and are mentioned in the posting) are skeuomorphism. It’s more like a GUI convention the users learned over time. Like that links are underlined.
I would posit that there is a wide range of possibilities between skeumorphic and flat.
I hated os9 platnum, but that might be skewed by terrible memories of using and developing for the platform. I think brushed metal was the best look for Macs.
What is abstract about making a digital target area look like a physical button? What is abstract about making a virtual file visible as an icon that looks like a textual document? What is abstract about radio buttons? Checkboxes?
These are foundational, fundamental UI conventions that are 100%-rooted in skeuomorphism. Some people simple don’t like it being pointed out because it destroys the argument that “skeuomorphism is bad.”
When people say “skeuomorphism is bad”, what they’re really saying is “woodgrain-patterned plastic cases on electronics are tacky”.
Skeuomorphism an extreme on a continuum, as is flat design. The problem with flat design is it prevents affordances and the problem with skeuomorphism is that it impairs consistency.
Smart design sits in the middle. After all, too much of almost anything is a bad thing.
Also, really? Checkboxes are simply digital mimicks of things in the real world? I see them as almost identical digital copies. What if I used a Wacom Cintiqu to check a digital checkbox. It wouldn’t be skeuomorphic, it’d be a checkbox on a digital page.
To clarify where I’m coming from, a plastic TV housing is blatantly not made of wood and no amount of pattern-print will change that.
A desktop application’s GUI is not made of stitched leather and no amount of patterning will change that… though it can still be visually-pleasing.
I like visually-pleasing applications, but I’ve never really perceived them as “made of” anything but the virtual pseudo-plastic (almost) that grey backgrounds register as in my mind. (I tried to explain the feel for years… then I bought a Rosewill RK-9000I keyboard and realized it was an almost perfect example of the desired “slightly matte” except for the sound my finger still makes if I rub on it)
In some cases, not in all. In the former, they are using terminology ineffectively and aren’t helping their case. In the latter, they are making an extreme case that is not well supported.
No, Skeuomorphism is not the extreme at the end of the continuum — it is it’s own whole spectrum. There are innumerable instances of skeuomorphism even in “flat” designs like Metro and Holo.
Why is it a checkmark at all? It could be yes/no text, or a red or green circle, or any number of non-analogous objects. Why a checkmark instead of a tick, or a dot, or an X (which it may be)? Yes, trying to make a reference to something that you are already familiar with in some other context is the definition of skeuomorphism. Whether the analog is very close to its digital counterpart or not very similar at all doesn’t change that it is skeuomorphism.
Isn’t the definition of skeumorphism specifically “Adding design elements that have no purpose except to look like something else” – like the modillions in classic greek architecture that are meant to look like the ends of wooden beams, but are completely superficial in a stone temple? (In other words, a design variant of what biology would call a vestigial element).
Abstracted down to the basics, a checkbox is just a way to say “you can make a selection here” and “you have selected this” – and nothing about that is vestigial; you need both parts, and they can’t be made much simpler than a box and a mark. The form itself is inspired by a paper variant, sure – but skeumorphism would be to add elements that only served a purpose on paper.
Edited 2013-02-14 11:34 UTC
The standard buttons in any gui toolkit I’ve ever seen look nothing like the physical buttons I’ve seen in my real life. So they have an aspect of abstraction built into their looks. Its a kinda but not really aspect.
Icons of written documents aren’t bad, but the more you actually make them look like a mini photograph of a document, the worse they are. Usually less is more in this case. Microsoft has always used a giant W for Microsoft word documents, sometimes with a litte doc behind it. It works great. If you made it more skeumorphic it wouldn’t be so great.
Radio buttons? Again the standard ones look nothing like real old school 1970’s buttons that you’d find on radios.
Check boxes? I don’t press them in real life. I can’t press them again to remove the check mark I made.
Its a blend of skeumorphic and abstraction that we are used to on computers, and that’s what works best, imho.
Edited 2013-02-13 17:23 UTC
The level of familiarity or photorealism or direct analog doesn’t change that it is in fact skeuomorphic. Why do buttons need to have a false sense of depth when you are dealing with a 2D target area? As soon as you start to appeal to some unnecessary analog it is skeuomorphism.
I think my point is being misinterpreted. My point is: skeuomorphism is both unavoidable and desirable despite what some would say or have us believe. Of course, it is a question of degree. But unfortunately, I’ve had to endure nearly 2 years of black-and-white arguments saying that it is bad — quality articles like this one are returning the nuances back into the debate.
There’s nothing in the definition of skeuomorphism that says that the analog must be “real old school 1970’s buttons that you’d find on radios.” People have been using the term since before the turn of the century — before there were computers or even transistors.
More or less what I am saying, yes.
Edited 2013-02-13 20:14 UTC
I think we’re saying the same thing, but my point that I was trying to emphasis is that there are not real world analogs to some of the controls you highlighted.
Most people under the age of 30 have no experience with real world radio buttons. The thing that makes it a good control is not its resemblance to familiar real world object, but just our own history of computerized interfaces. When the first set of physical radio buttons were created, they weren’t designed in relationship to any other thing. The designer needed to solve a problem and created an interface to solve that problem.
So I think that’s the crux of today’s task for a designer, balance the familiar (weather that’s a real object, or just a previous widget) with just a pure design to solve the given task.
That’s pretty much what the article says if you read it.
Yes, I did. I didn’t think the poster I was responding to did.
I’m a minimalist. I like simple (my background is plain black). But anybody who has tried to use Microsoft Azure knows flat can be taken too far. It is impossible to tell buttons from headings from text. You just have to know
For all the moaning an whining about skeumorphism, my own opinion meshes with the comments above, that despite all the tacky leather, etc, sometimes there must be visual clues to make using an application easier. I don’t want to spend an hour poking my finger around on a screen trying to figure out what is actually clickable and what effect it has, when a slight visual clue might do the job and make the learning curve of an app much easier. With a lot of “Metro” apps and “flat” apps, there are no such clues, and that’s not good. Balance in everything.
Great article. Sums up a lot of important opinions regarding skeuomorphism and flat design.
One thing that mobile touch screens lack is that you can’t get feedback when you’re hovering over something like you do on the desktop.
I think this is one of the greatest challenges going forward and managing a great balance without overdoing it towards any direction.
Good article.
Win8 gives you no visual clues as to what does what.
I reckon BeOS got it just about right.
Mac
Hmmm… the supposed debate between skeumorphism vs. flat design seems like a false dichotomy. The two aren’t even mutually exclusive except for the fact that there aren’t any “flat” interfaces outside of computer interfaces for skeumorphism to draw from.
Personally, I’m not a fanboy for any particular school of UI design. I just like UIs that are simple to use, simple to understand and flexible/powerful like everyone else. How you achieve this may vary.
On an unrelated note, I see good UI design as one of the greatest weaknesses of the uber-geek/open-source developer community. It usually seems to take a much larger organization, company or the rare single individual with a clear vision to actually provide an UI that is powerful and reasonable enough for common use. This is one of the reasons for Google and Apple’s great success: presenting power and complexity in an appealing aesthetic while keeping it easy to use.
Edited 2013-02-14 14:56 UTC