Skeuomorphic vs Digital interfaces and what will 2013 bring us

We’re well into 2013 already, but now that 2012 is gone, it’s the time to talk about one of the biggest trends in web and user interface design of the past year, and also one of the most loved and hated one, the Skeuomorphic interface.

2012, the year of Skeuomorphic

2012 was specially prolific in mobile and web applications, and with them, several skeuomorphic interfaces were designed and launched, one of the most talked about were the redesigns made by Apple, because of the so harsh transition from their previous digital aqua interface to a completely skeuomorphic skin, and how that created such controversy .

Apple calendar

Skeumorphic is defined as “an element of design or structure that serves little or no purpose in the artifact fashioned from the new material but was essential to the object made from the original material”. A clear example of that is the textures used in skeumorphic interfaces, or even the flip page animation in iBooks, elements and behaviors that are not needed but are maintained to keep a link with the original element, in this case the book.

Reactions of the design community belong on two completely opposite sides, people would either love these interfaces or hate them, there was no middle term in between. Those apps were loved and downloaded by hundreds and millions of users, and hated by as many too. John Gruber wrote a great post about this trend and how it affected the user interface design.

ibooks

The good about skeuomorphic

Skeuomorphic interfaces have been said to be condescending to the user, because the user feels that the application assumes the user ignorance and the need for a digital replica of a daily used object to explain how he will interact with the interface, but hate it as you want, skeuomorphic has its place in the interfaces world.

Audio software such as Propellerhead Reason have been skeuomorphic from day one, and this example serves to show the main advantage of these kind of interfaces, the direct connection between digital interface and analog interface, and in this case it makes sense.

If you’re an audio professional, you probably know exactly everything these cables and buttons and knobs do, and if you don’t and you do learn all that in the software, when faced with a physical mixing table and hardware, you’ll probably know your way around easily after that. So the main positive things about these interfaces are the inherent ease of use, when applied to an already known kind of product, the attention to detail in design, which made the users really attracted by how much detail and care was into every single detail, and the overall richer visual experience when using such interfaces.

The bad about skeuomorphic

Truth be told, most interfaces that went skeuomorph last year didn’t really made a real use of this, and were designed and developed just to stick to a visual trend and win the users by beautifying the interface with shadows and textures.

On the usability side, skeuomorphic interfaces sometimes hinders the use of a product, because by simulating the real and original object, it will end up creating a harder to use interface, adding more clicks and/or menus in between actions, instead of just using newer and better interactions such as gestures. And the biggest disadvantage of sticking to the traditional interface is the fact that it limits the design to replicate something that already exists, not letting the designer to free himself to create and develop new interfaces and paradigms of use.

2013, the year of Flat Design

In all honesty, the original intention of this article was to somehow predict that 2013 would be a year of digital interfaces, but the community and the trend have spoken  already and this prediction is now more of a fact. The fact that the skeuomorph was so heavy, made it desirable and sexy for some time and tiring and old after a while, and with the launch and development of Metro interface from Windows 8, Clear innovative interface, this year will be definitely more focused on creating Flatter, simpler and more digital experiences.

The other end of the skeuomorphic is this simpler and digital interfaces that have been called around the design community as Flat UI or Flat Design, even though some already are trying to change this name to a better one. This look is heavily influenced by Xbox 360 dashboard, Windows 8 and Windows Phone 7, because these were products that invested a lot in these interfaces and had great success with them. Clearapp was also one of the kings of Flat Design in 2012, and was extremely successful due to their gesture-based interface, having no ornaments and no elements besides the essential ones.

You can find all about Flat Design and great examples and inspiration right here in Designmodo. But the reality is that Flat Design is most likely, such as Skeuomorph, a temporary and passing trend.

The almost Flat Design

During 2013, Flat Design will influence the designers to think more about digital interfaces, but in the end this isn’t a solution or a formula that can be applied to any interface to make it great. Matthew Moore has written a great article about this where he talks about an “almost flat design”, a middle ground between the two approaches, where the interface isn’t limited by a trend but instead by focusing on creating a usable and light interface, giving focus on the elements that need it most, and laying out the content in a light and readable way.

The example Matthew gives as a good player in this middle ground is Google, that in the last couple of months/years redesigned pretty much its whole experience in web and mobile, creating simple and flat color interfaces, but not sticking to a flat mindset, instead using bevels and light shadows where they are really needed.

gmail ios

So, what now?

In the end, it all comes down to a design and visual choice of the designer.

Last year I had the chance to design a mobile tourist guide, and used a skeuomorphic approach, since the focus was on developing an interface that would resemble as much as possible an old book (that was the origin of the tourist guides) and to create a personal relation between the user and the interface. This decision was made after being told that a book could never be replaced by an application, because the whole experience of handling a book, touching the cover and the pages, smelling the paper and even the way that a book degrades and crumbles with the passing of time and usage.

So the focus was to create something that appealed to those senses visually, using the textures that one could find in its analog counterparts, even though you can’t replicate the smell and the texture, the visuals were there and the emotional connection of the user with the interface was a bit better due to these details.

Skeuomorphic guide

All in all a conclusion of studying both of these approaches is to not “follow” a trend. A trend is what it is, a passing fad that influences designers and interfaces to follow a specific look and feel, but when designing an interface, the designer should develop a look that is more adequate to the intent of the application, and is one of the beliefs of the community.

I'm an Interactive and Web/Mobile Designer who also writes code for the web. Co-founder and designer at unplu.gg, I sometimes also write at antoniopratas.com. You can follow me on twitter at @antoniopratas.

Newsletter

16 Comments
  1. Toolinfy Mar 15, 3:56 pm

    Great, interesting artcle. Thanks!

    Reply
    +1
  2. Marcus Johansson Mar 15, 8:26 pm

    Funny thing about Propellerhead is that they also was pretty early with flat design. Remember their Figure app.

    Reply
    +8
    • Antonio Pratas Mar 15, 9:26 pm

      Totally true! I didn’t thought of that, good call.

      Reply
      0
      • Sean Mar 27, 12:10 am

        Figure is a really great example of agile product development and early release. I am a regular user of the app and what started out as a fairly simple jamming tool is now able to produce quite complex sounds. I’m hoping they add cut & paste options along the timeline so you can produce 2 – 3 minute tracks instead of just 30 second loops.

        Reply
        +1
  3. Jussie Mar 15, 9:52 pm

    Excellent blog post, I for one really hope that Apple will move away from over using skeuomorphic design.

    Reply
    +5
  4. Rodrigo Bellão Mar 15, 11:09 pm

    Great post, opens a lot of discussions.
    Trends are dangerous and often serve those who are not familiar with the design process.
    I believe that many customers seeking the services of a designer come with intentions of following a trend, because it is more affordable and reduce the risks that innovation carries.
    It’s a necessary evil that allows many ideas coming out of the paper.

    Reply
    +7
  5. Glenn Mar 16, 12:01 am

    Hidden due to low comment rating. Click here to see.

    Reply
    -16
  6. Craig Hill Mar 19, 3:46 am

    The debate over ‘skeuomorphic’ design vs ‘flat’ design rages on, as a designer with over 15 years of interface design I think this can be summed up a lot more simply while using that Google reference as an example.

    “but not sticking to a flat mindset, instead using bevels and light shadows where they are really needed.”

    That’s not a mix between skeo/flat thats’ just good interface design, not hamfistedly sticking to a trend, using colour, space, light & shadow to guide a user through a design, it was true when I started and just as true now.

    Metro/Win8 flat? there’s ‘shine’ and drop shadows on that ‘My games’ tile that is (assumedly) hovered over.

    Don’t over-do any design style, but ignore anything at your peril as well.

    Maybe Picasso had it right with that just enough paint to tell the story line (I think I made that quote up – but you get the idea.. was it Miles Davis maybe?)

    Reply
    +3
    • migko Mar 19, 5:30 am

      very good point.
      best example for skeuomorphism is a simple button. a button in the real world is made so that you know you can push it, it’s made that you WANT to push it.
      if everything is flat and you have a more complex interface you can’t tell the difference between a button and not-a-button.

      googles design respects that. it’s simple or call it minimalistic but interface elements such as buttons are designed the way they should be. and that’s why skeuomorphism isn’t bad and will never die.

      Reply
      +3
  7. Don108 Mar 19, 8:10 am

    It seems to me you are suggesting the logical and reasonable path: use skeuomorphic UIs where they make the interface clearer and easier, but don’t use it when it’s unneeded or adds complexity. I would certainly agree.

    However, I respectfully disagree with your claim that the UI in “Xbox 360 dashboard, Windows 8 and Windows Phone 7…had great success…” Although the jury is still out on Windows 8, it is currently a disaster with manufacturers refusing to make products that use it. It’s level of failure is only surpassed by Windows Phone 7 which is an admitted failure. Xbox 360 was a product failure, costing Microsoft billions due to poor quality and a failure rate of over 50%. While improvements have made it successful, it still brings in only a financial pittance compared to Windows or Office.

    Reply
    0
  8. Stephan Mar 19, 9:22 am

    The first article you have linked to defines Skeumorphism as “the imitation of another object by copying its material AND shape AND functionality”. In this regard one could argue that “elements and behaviors that are not needed but are maintained” – as you mention in the third paragraph – are simply a case of bad design choices.

    Reply
    +1
  9. Costa K Mar 19, 5:51 pm

    I think the criticisms surrounding skeuomorphism is simply another Apple bashing exercise. Skeuomorphism is everywhere and has been around for decades yet it didn’t seem to bother anyone until the iPad.

    But no one seems to be saying anything abut the garish colors of Windows 8 or how silly all those tiles can be or how Microsoft still uses icons dating from Windows XP amongst it all. Not to mention how shocking it is seeing a 24″ monitor fill with purple or bright red when an app is selected. Windows 8 looks a mess. And don’t get me started on the Windows Store – all those apps grouped in rectangles are just plain awful.

    Yet for some reason we don’t talk about this because Apple’s iCal app has a leather look.

    Reply
    +1
  10. James Mar 20, 9:03 am

    >> “This look is heavily influenced by Xbox 360 dashboard, Windows 8 and Windows Phone 7, because these were products that invested a lot in these interfaces and had great success with them.”

    If you define great success by low sales and customer dislike.

    Reply
    +3
  11. Raitis Mar 29, 1:06 am

    I hate skeumorphism in web interfaces. I hate even the word itself. But when I do design work I use skeymorhism myself. You know why? Coz I really miss the real world :)

    Reply
    0
  12. Helen Bailey Apr 23, 3:39 pm

    Skeuomorphism is not a new trend it has been with us for quite a long time, but you’re right, 2012 can be called the year of skeuomorphism You will hardly find a designer who hasn’t heard about this trend yet, but your article makes some important things clear, thank you.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters