Avoiding Design Failures: Skeuomorphism and Flat Design

If you’re a web designer then you have likely seen some debate about skeuomorphism and flat design around the web. As with any design trend, there are good and bad implementations of both. The important thing to keep in mind is that there isn’t a right or wrong way to design something. Diversity in design is what makes it compelling. This article is my perspective on the topic and how you can avoid failing while using any design style.

iphone and windows calculators

Skeuomorphism is a Double-Edged Sword

Skeuomorphism has undeservingly become a dirty word. Skeuomorphism is an object that retains ornamental design cues from an original item that are no longer necessary. Here are a few examples:

  • on your computer interface you store files within a folder, and delete files by putting them in the trash can or recycle bin
  • on Apple’s first versions of iOS, the Notes app looks like a yellow pad of paper with a handwriting font
  • a lightbulb that is shaped like the flame of a candle

Skeuomorphism can be very helpful by giving the user a cue as to how to interact with an object. A link that looks like a button is a clear indication that it can be pressed. A folder icon indicates that this is a place to store things. Skeuomorphism can also be useful in creating an exceptional user experience. A podcasting app could look like you’re in a broadcasting booth. A music player may look like a jukebox. These elements aren’t necessary, but they do add something to the experience.

The main issue with these type of designs is they often become overindulgent to the point where the design elements are no longer fun or helpful, but obstruct the main functionality of the site or app.

The Rise in Popularity of Flat Design

Flat design has always been around, but it has received a resurgence in popularity (an a shiny new name) with companies like Microsoft, and now Apple, redesigning their interfaces to remove extra ornamentation. Many designers are jumping on the bandwagon. This could be a good thing for design if it is done with the right considerations, but unfortunately it can turn into designers spending less time considering their design. Flat design done right should be about simplicity and focus, which is often something that is harder to do than skeuomorphic design.

How Not to Fail: Using Design Principles

The key to not failing, regardless of what style of design you choose, is sticking to design principles. If you start off by deciding what type of design style you’re going to use, the end product is likely to suffer. Instead, start off by thinking about the purpose of the site and how users will accomplish their goals. If you don’t have this part right, no styling will save your project.

Once you’ve got everything planned out, wireframed, and tested then you can move on to enhancing the interface. When deciding between a more heavily ornamented (possibly skeuomorphic) or flatter design, consider the task at hand. Is this site for fun? Is it business oriented? How complex is the task? Generally, I’d suggest that the more repeatedly the tool will be used and the more task oriented it is, the less ornamentation you should put in the way of your user. A design with lots of textures and depth may be beautiful at first but it gets old very quickly if it’s not completely unobtrusive.

Here are a couple of examples. The iOS Game Center has gotten a lot of complaints because of its skeuomorphic design. It is very design-heavy, but at the same time I don’t know how much (or if at all) that is interrupting its function, so I don’t have such a problem with it. It does feel a little overboard though. The notes app however, I find much more obtrusive. I want to open this app, quickly jot down some ideas, and be able to easily access and read them later. The main issue I have is that, in going for a notepad look, they’ve chosen a font that isn’t very readable. Characters such as a zero and an O or a one and an L can’t be differentiated. The cuteness of having a notepad isn’t worth the loss in usability.

ios app examples

On the flip-side, if you’re going to create a flat design you can’t force things to be flat in-spite of usability. If something is a button, you’d better make sure the user knows that it can be clicked. Sections need to be clearly defined by using font-size, font-weights, color, lines, or other visual cues. When a design is lacking heavy ornamentation, it makes all the layout and design choices more obvious, so you can’t afford to get them wrong. Look at each element you have on your page, is it obvious what purpose and function it serves?

I’m going to pick on Apple a bit more here because they have a few good examples of possible design issues in their iOS 7 Beta. For example, the Voice Memo app used a couple flat buttons that work because they’re prominent and circular, but then they made a third button for ‘Done’ that doesn’t appear to be a button at all. In some places they’ve removed the rounded buttons completely, but at least they’ve used color to communicate what can be clicked.

ios7 buttons

The key to make sure your design is working is to test it on people. You’ve likely been looking at the design too long to know exactly where any confusion might lie. When working on something new, consider any existing interfaces that users are familiar with. You don’t have to replicate a physical object exactly, but the design can help inform your decisions. If you have the fundamental usability of your interface right the design can be flat, 3d, skeuomorphic, or anything in-between. The key to a good design is balance.

Jason Santa Maria has a good article on the subject “The Space Between the Notes” and Steven Bradley also has an article called “Flat Design Done Wrong“. Here are a couple great books that can help your design in general: The Design of Everyday Things & Universal Principles of Design.

Have any thoughts on the topic or good/bad example of either type of design? Share them below.

Tags: , , ,

« Older     Newer »

Leave a Comment

12 Comments

  1. Steven Bradley

    Great post Kyle. I think you nailed it that the key is basing everything on solid principles. Then let your aesthetic come naturally from whatever it is you’re designing. There’s nothing inherently better about a design being flat or deep or somewhere in between. If you build on top of fundamental principles you’re going to end up with a good design more often than not.

  2. Carsten Simonsen

    Of course there is difference in the implementation. The major problem is on the other hand not this – but that the majority of customers DONT WANT FLAT design! Neither from W8, nor from IOS7. And it NEVER WAS popular. The number of funkis-houses from the 30’es is so few that they are protected by low against demolition… W8 With it’s Extreme flat design is a TOTAL FAILURE. So is the Windows phone. No one WANT to use a working day looking on quadratic neon-illuminated tiles, as a 24″ cellular phone right upp Your nose.
    Why CANT you understand AND Accept that?

    • Someone Somewhere

      Troll.

      The pure fact that so many major software companies are switching to flat design is a good enough reason to use Flat design. And if you haven’t noticed, Android has successfully employed flat design. So if you want to stick with skeuomorphosm, then do it, but for the rest of us with any sense, we’re gonna go try out this flat design thing without being shouted at by people like you.

      • Carsten Simonsen

        When in need of arguments – one could always degrade to the use of rule-techniques…(“troll”, “rest of us with any sense”)
        You are comparing totally different Products. When I use a large drill-hammer – I want large handles. But not when I use a pinc. There is a major difference between using a cellular phone from time to time – and using a stationary PC 8-14 hours a day. The major shift now is that stationary PC’s is used for PRODUCTION, where pad’s, Phones etc. is used for retriewing this. And that is a major difference – that SHOULD be reflected in the design of OS and UI. In Production many hours a day its intruding and stressing to get large neon-coloures tiles right upp your face on a large monitor. Not so on a cellular phone. Not even to speak of – that 100’s of millions of employed is going to use multiple hours just to get this UI to work for them (and the Company that pay those wages…- we are talking waste of 1000’s of million dollars – in tough times economically…
        The fact is as we speak that Windows 8 has been the largest FAILURE from any fortune 500 Companies in a serious period of time. And the major difference between W7 (witch was a major success) is nothing less than the flat UI (“Modern” or “Metro”). Everything else is better!
        Your sole argument (when excluding the rule-techniques) is that the software-providers is presenting the “flat design”.
        OK – this is at least an argument…
        Flat design is nothing less than a trend – i.e. someone has found out that we need something completely new – and so no one should doubt those intellectuals – it is based on “serious history” (Swiss house). The problem is – that this trend historically did’nt survive! Despite a large number of priest’s – people didn’t want it.
        So it is with W8. I’m sure MS finds it nice that they got “the Peoples reward in design” for W8 – but I’m pretty sure they don’t give a damd if they dont sell sufficient large numbers of OS.
        And I am also pretty sure that any design that does’nt sell for the major market – is going to die out – or being marginalized for some spesially interested groups.

  3. htmlcut

    Thoughtful and useful article. Many are trying flat design now but a lot of them just copy down other sites and forget about design, balance and visitors.

  4. Tarian

    Thank goodness an article that recognises the benefits of visual clues such as colour, depth, shading and detailing to aid navigation – rather than claiming that “Flat” is wholly good.

    That said, I have yet to find a Flat website with functionality and navigation better then it’s predecessor.
    FWIW, above, I prefer the calculator with the shaded (depth) keys to the flat one.

    Without exception, on Flat sites, the User has to waste time discovering what clicks and what doesn’t. Scrolling increases on Flat sites as the screen is filled with a tiny number of monotone panels or large pictures.

    Importantly for commercial sites, Flat design lacks return appeal. I just don’t want to come back unless absolutely necessary.

    Lastly – and this may have nothing to do with Flat design – but seems to be common….

    Why so much grey text? What’s wrong with black?
    Higher contrast allows for a quicker read – and grey on a glaring white background (like this site !!!!) is a pain to read…..

Back to top
More Posts