Skeuomorphism in Interface Design

That’s right, Skeuomorphism. Let’s take a look at what this bizarre term means, when you should use it in interface design and what can happen when it goes awry.

Skeuo…What?

If you’re unsure what Skeuomorphism is exactly, let’s get some help from the ever-reliable Wikipedia to explain it.

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 – Wikipedia

In the context of digital interface design, this essentially means making elements look like real world objects. Wooden textures, torn paper and stitched ribbons are all examples of skeuomorphism in action and no doubt you have come across many more in recent times.

There are mixed feelings on the use of such elements however and arguments have been made for and against them. Does skeuomorphism add or detract from usability? Does it serve a purpose, or is it purely superfluous? These questions and more will be answered below.

The Current Situation

It’s safe to say that Apple have had an influence in the recent surge of this design style. Apps such as iBooks, Calendar and Find My Friends all feature skeuomorphic design and, inevitably, this has had an impact on the design of many other apps on the marketplace.

Skeuomorphism is just not limited to apps either; it has naturally found its way into the user interface design on many websites as well.

The problem is that when certain design styles become popular, they become increasingly exploited; as has happened on many occasions in the past. The style becomes overused and misused with little thought on the decisions made. When this happens, the style as a whole can lose its effectiveness, which can be a little unfair. Skeuomorphism seems to be heading in this direction. So it is worth looking at both the positives and negatives of using such a style before we make any sort of judgement.

The Pros

Perhaps the number one argument in favour of skeumorphism is that it can help create a feeling of familiarity. Interacting with elements that they are used to in the real world can help users feel more at ease with the experience; something that is especially important for those users who are not completely comfortable with using modern technology.

It is worth noting that Apple is particularly good at targeting this, generally, older and less technologically experienced user group. Many people are now using iPads who will have had limited experience with a traditional computer. So it makes sense, in a way, to make their calendar application look like an actual calendar; something no doubt many people will have already used previously.

With this in mind, it is necessary (as it always is) to consider your target audience when designing your new application or website. Consider whether your audience has much experience with your platform, if there is anything they possibly may not understand and, if there is, whether they may benefit by incorporating skeuomorphic elements or visual metaphors.

Another positive aspect of skuomorphism is its ability to convey a particular atmosphere or generate certain emotions. In real life we can use all of our senses in order to evaluate an object; how something looks, sounds, tastes, feels and smells. By mimicking how a real-world object looks, digital elements can also conjure up the other properties of that object.

For example, a leather-look texture (with the obligatory stitching) can stimulate memories of how leather feels and smells and, in turn, connotes a feeling of refinement and luxury. If these are the types of feeling you want to be associated with, it might be worthwhile to consider using this type of element, providing it makes sense within the context of your project.

Skeuomorphic design also generally does a good job of creating an informal and playful atmosphere. You will often find this style in games or within other leisurely scenarios; such as in Apple’s iBooks app for instance.

In fact, skeuomorphism is a good way to quickly and clearly communicate the theme of your website or app.

Designer Marc Mendell’s portfolio uses skeuomorphism to good effect by simulating a home-work environment. Marc uses a laptop to display work from his portfolio.

Similarly, web designer Zoltan Hosszu makes use of many skeumorphic features within his portfolio website. Within this pseudo home environment, he displays his portfolio on a shelf and even uses spot-lighting for added effect.

It’s common for blogs and online journals to use a paper texture in their designs. IconEden’s blog goes a step further and incorporates stacked paper, leather backing, a ribbon bookmark and even a fountain pen.

So we have seen that skeuomorphism does have some positives. However, as mentioned earlier, it can also have some drawbacks.

The Cons

A large problem many encounter with skueomorphism is that it is easy for things to go wrong when attempting to create realistic elements. The human eye is very good at picking up when things don’t look quite right, even if it doesn’t register at a conscious level. This generally occurs when dealing with light sources, shadows and perspective.

For example, let’s take a look at the bevelled or curved drop shadow that has become popular. It is a change from the standard drop shadow and some may argue that it also looks pretty cool.

However, it doesn’t “feel” quite right. The shadow would indicate that either the object itself is curved or the surface that it is resting on is; but the lighting and shape of both suggests they aren’t. These little things can really make a difference, so attention to detail is crucial when creating skeuomorphic elements and imitating real-life.

Earlier it was mentioned that skeuomorphic interfaces can increase usability by utilizing elements people are already familiar with. While this is still true, it can also have the opposite effect and potentially confuse people if it is not done right.

When a user comes across a digital element that resembles something they are familiar with in the real-world, they will also expect it to behave it a similar manner as well. If the element doesn’t function as predicted, the user may become frustrated; especially if they are an inexperienced user.

It can be all too easy to focus on the aesthetic element of a skeuomorphic interface and overlook the functionality. Neglect functionality however and you turn skeuomorphism into something that actually damages usability and the quality of user’s experience rather than adds to it.

Lastly, a criticism that is often levelled at skeuomorphic interfaces is that they lack creativity and hinder innovation. Technology is one of the fastest evolving markets that is constantly providing more efficient ways of performing tasks, so why look backwards in terms of interface design?

It is common to see to-do lists, note taking and calculator interfaces look like their real-life counterparts, at the cost of potentially making these tasks less efficient than they could be. Real-world, physical objects have limitations that digital elements do not, so by imitating real life designers are restricting themselves and missing an opportunity to take full advantage of the current technology, as we will see below.

Not the Only Way

While skeuomorphism may be popular at the moment, it is not the only method of creating great looking, impressive interfaces.

The popular to-do iPhone app Clear uses a beautifully simple and minimal interface. The design distinguishes this app from the numerous others that feature notepad textures, checkboxes, tabs and other skeuomorphic elements.

Choosing not to emulate a traditional to-do list has allowed the designers to think differently and make full use of the technology available to them. The app has been built around multi-touch gestures and along with smooth animation, it makes for a very unique and elegant experience.

The newest version of Microsoft’s operating system, Windows 8, will also feature a sharp, solid and simple interface design style known as ‘Metro’. The style, which has already featured on the Windows Phone and Xbox Live, is described as ‘Authentically Digital’.

It is very different to what we have seen before from Microsoft and they have clearly decided to go in an entirely different direction to Apple; with a focus on typography and content delivery with little in the way of extraneous details.

Conclusion

Skeuomorphism appears to be pretty popular at the moment, but no doubt this popularity will wane over time. A lot of people’s feelings about this style will generally come down to personal taste. It is likely that experienced technology users may find skeuomorphism unnecessary or even kitsch, while casual users may appreciate it more.

However, we have seen that skeuomorphism has both positive and negative aspects and it is worth taking those into account before implementing this type of style in your next interface design.