Skeuomorphism and the User Interface

Written by Chris on November 22nd, 2012. Posted in Design

Skeuomorphism is something that users have come to expect in apps for iPhone, iPad and even the Mac these days. It’s easily recognisable, and Apple has mainly been responsible for bringing simulacra back to user interface design in the past few years with iOS, and then extending that to the desktop with OS X Mountain Lion. Let’s start by clearing up some confusion and common mistakes about some recent terminology that’s being thrown around.

What does this even mean’

A skeuomorph is “an object or feature which imitates the design of a similar artefact in another material”. This isn’t just limited to user interface design; In the physical world, we find them all around us too. Lightbulbs shaped like the flame from a candle, marble or wood grain patterns printed on linoleum, those useless tiny handles you find on some bottles of maple syrup. Things that are ornamental.

So what’s skeuomorphism then’ Aside from being one of the hottest subjects for tech bloggers to write about, skeuomorphism - or a skeuomorphic UI - refers to the overall graphical style of an interface. If done right, things look and behave the same way as the real-life object they are based upon.

What about that other word’ Simulacra. This is something that refers to the likeness or similarity of a real object, but behaves in a different way. This what we commonly see in today’s user interfaces when skeuomorphism is implemented into a design badly - or incorrectly.

What isn’t skeuomorphism’

A common misconception is that a user interface that contains realistic-looking elements, but doesn’t actually mimic any physical objects, is skeuomorphic. In reality it’s completely aesthetic. I like to call this “fauxmorphic” and it is because of this that makes it different from something that is simulacratic. A notable example of this is Apple’s Find My Friends iOS app. On the surface it’s clad in a tanned Corinthian leather texture, with stitched on tab and tool bars giving it the appearance of... nothing. As aesthetically unique as it looks, Find My Friends is based on something completely fictional, unlike similarly designed Calendar and Contacts. One of the problems being that there isn’t a real-life physical equivalent for the app which is why the choice to go ahead and use these textures is an odd one. Why did Apple do this’ What are they trying to achieve’ Well the unique interface certainly makes the app stand out on any iPhone or iPad. It’s one that is easily recognisable and something that has been designed with the average user in mind. It’s an easy app to use and one that looks friendly and uses soft, warm, light colours. Maybe this is was the design brief the Find My Friends designers were given and they worked backwards from there finding that the now infamous leather met the criteria’ Who knows’ Sadly, it’ll remain one of life’s mysteries along with all the other questionable UI choices to come out of 1 Infinite Loop in the past few years.

comparison

Despite it being a current design trend, skeuomorphism isn’t a new thing. The earliest example of realism in an interface that comes to my mind is Calculator which shipped with the Macintosh in 1984. Even today on the Mac, as well as iOS, the design is still the same as the real-life object. Looking at the wider picture, the very notion of the Desktop was of course inspired by the thing it was named after, what with there being folders, documents, and files on both. The reason for this is simple - to help familiarise new users to something that was a new technology. We’re at the stage where we’ll forever be creating new technologies for users to interact with, so should we still be designing in the same mindset to make everything look realistic so it is easier to use, or can we be more clever than that’

calculator

There are many opinions on this matter for and against this realism. Steve Jobs argued when launching the iPhone that it adds sentiment to the device, whilst the words ‘comfort’ and ‘familiarity’ are also banded around positively. ‘Gimmicky’ and ‘patronising’ have also been used to describe it. Lets look at this from both sides.

Why is it good’

Whether it’s decorated in a linen or paper texture or not, there’s guaranteed to be at least one skeuomorphic element in every single app. It’s something that can’t be avoided. Seemingly simple elements such as buttons and sliders are all skeuomorphic. Even things that aren’t visual like the fake camera shutter sound when taking a photo in Camera or Photo Booth give you that reassuring confirmation that you’ve taken your photo. It’s this kind of comfort that can make skeuomorphism a valuable part of an application’s design. Apps that are super-graphical like iBooks look impressive, and are inviting to the customer in an Apple Store to pick up an iOS device and start flicking through the pages of a book, without having to read a manual or sit through a tutorial. This is a great example of making something feel intuitive because it looks and behaves just like a real book. It’s a real novelty the first time someone uses it and it engages positive emotions in people.

iBooks

When selling apps on the App Store, it is important to remember these two things;

  • Customers will judge your app by its icon.

  • Customers will judge your app by your screenshots.

If they overcome the first hurdle then great! We can talk about this another time, but the second point is the true test. This puts a lot of pressure on developers who of course want to make their app’s interface to look visually appealing and tempting to buy as possible. If you show off screenshots of two similar apps, one with a skeuomorphic UI that looks really polished, and another with standard elements that could be easily mistaken for any other app, then the customer’s decision to buy the nicely designed app over the other one could be simply down to how it looks. It could give them the impression that it’s going to be quick to learn and easy to use because it might look like an app that Apple have designed. Although it is not immediately obvious, Clear is skeuomorphic in behaviour. It looks clean and minimal, but the interface and behaviour is inspired by paper. Such as the fold that opens up when you pinch two cells apart and when you pull to create a new item. Origami came in useful here when mocking this up away from the computer to ensure this looked and behaved as realistically as possible. There are things you can do in Clear that you can’t mimic on a real sheet of paper, but really, that’s one of the many things that makes the app so good.

Why might it not work’

Okay, so skeuomorphism doesn’t sound all that bad if the familiarity helps people understand how new products and applications work, right’ Well unfortunately it’s not always pulled off as well as iBooks. Lets take a look at Contacts on the iPad and OS X. This is a great example of an app that is simulacratic. It has the same likeness and similarity as a real address book, but from a behavioural point of view it’s just like any other application. Contacts is the app that conjures up every negative association people have of skeuomorphism as a style. Its aesthetics are there purely as a gimmick and not to serve a prominent purpose. You could argue that it looks more pleasing than default UI elements of a source list on the left hand side with the information in the main view, but as it doesn’t behave like a book it makes it questionable as to why it looks like one. As Apple have managed to carry Contacts’ “branding” through the iPad, web and Mac, the visual consistency remains - but keeping that same interface designed for a touch screen onto the desktop is poor design. This breaks a whole manner of UX conventions on the Mac including things like not using the system font, giving the window gems a different padding percentage, using a non-standard window frame, positioning of the search field, as well as lots of other things that all add up.

Contacts

An app that is slightly closer to home than Contacts is Courier. It’s an app that we have a lot of love for, and spent hundreds of hours designing. At the time we decided to take a different design approach to this app than we have done in the past. We wanted to make it really stand out from the crowd, and base it on the kitsch-y metaphor of sending your files in envelopes to their destination. The app is a lot of fun, and certainly isn’t lacking in character but it didn’t quite work out. Some reviews of the app labeled it as being unintuitive and thought that it was confusing for users - but the design was mostly praised for it’s overall aesthetics. As any good professionals would do, we managed to take away a lot from this, and knew how to avoid this problem for our future applications. The next release for us after Courier was Analog and when you compare the two apps side-by-side, there’s certainly a noticeably different design direction. I think with Courier, our goal was to design a simple application based off a metaphor, whilst with Analog, we wanted to make a great photography tool that was simple and quick to use. Analog’s UI was stripped down to the bare essentials, whilst maintaining the feature-set we wanted to ship with and skeuomorphism appears in the interface with the cutting mat-textured canvas the image you’re editing sits on. After Analog came Clear for the iPhone, which goes to the extreme opposite from Courier in terms of design aesthetic.

Courier

The aesthetic point of view

Looking at the two sides, there are pros and cons to using skeuomorphism, but looking from my personal view, I think that the application’s visuals are one of the major factors in shaping its overall user experience. As a designer, I think that the app should look good, and this contributes a great deal to the user as they are using your app. Graphical elements of the apps should be artistically accurate, respecting things like consistency in colour or even a light source for button shadows and highlights. Textures shouldn’t be in your face and distracting the user from the main content. Compare the images of iBooks and Contacts above. One of those mimics exactly how a book would appear if it were viewed top down, whilst the other looks flat and unrealistic. On the other hand, getting all these things right and creating a good-looking app just isn’t enough, it needs to be sound interaction wise, as previously mentioned. We’re incredibly passionate at Realmac about good design and are all firm believers of Dieter Rams’ Ten Principles of Good Design and its strong relevance to user interface design. It’s no secret that Jony Ive and his industrial design team at Apple are fans of this too and many people are expecting this design ethic to be brought over to iOS and OS X after the recent management shakeup in Cupertino.

Real-world inspiration

What quite a few people might not have noticed is that there’s already several applications from Apple that have been inspired by Braun products that Rams has designed. Music on the iPad, which takes after the Braun SK 4 radio and the iPhone’s Calculator, which was originally based upon the famous Braun ET 66. But not every product designed with a skeuomorphic style in mind comes out following these ten famous design principles. Apps that have been designed with too much clutter will cause confusion and as a result, won’t be pleasant to look at or feel enjoyable to use. People have complained about Apple’s current trend towards UI design, criticising that it majorly contrasts with the simplicity of the device that the apps in question are running on. Especially as in every new product video, Jony puts so much emphasis on how obsessive and meticulous they have been with every minor detail, all to benefit the user and allowing them to focus on their content. And if what they’re focusing on is a mess, it’s not going to make using an iPad or iPhone an enjoyable experience.

Rams

All things considered, I think that using skeuomorphism in your app isn’t necessarily a bad thing. Just make sure you do it correctly, OK’ It would be impossible to avoid having any skeuomorphs in an app, regardless of graphical style but it is those familiarities that reassure a user and make it feel like the app uses native behaviours and is in place with its operating system, whether that be iOS or OS X. It’s very easy to go from one extreme to another, and we have experience of both, first with Courier and then Clear, but one of the main things we have in mind whilst designing an application is to ensure that it has character. With Clear, the minimal and clean UI meant that the app could run the risk of feeling cold and sterile, but by adding sentiments such as the use of colour and sound instead of gimmicks, this made Clear the fun app we had set out to design, without feeling the need of decorating it with pointless textures. So by all means, go ahead and use a skeuomorphic UI in your app, but don’t use it simply because a leather texture may look better than a matte gradient. If you think that it fits in well with how the app is used and you can justify your decision - then go for it! But as I previously pointed out, it is a design trend and although trends can appear again, they ultimately don’t last.

It’s probably going to be some time before the whole debate on skeuomorphism settles down - and I’m sure that when it does, it’ll only be when something equally as controversial comes to ground!

As we’ve seen, skeuomorphism is a contentious topic - so if you’ve got any comments feel free to add them below, or get in touch on Twitter - I’m @cjdowner!

You might also enjoy

Realmac is 10!

This week Realmac Software turns 10 years old! Since November 2002 we’ve grown to a team of 10, making apps we love to use. We couldn’t have done it without your support. So here’s a massive…

Read More