Advertisement
Design Theory

Skeuomorphism in Interface Design

by

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.

Related Posts
  • Design & Illustration
    Interviews
    Interview With Mobile Interface Designer, Alan PowerPreview
    A chat about designing mobile interfaces with Alan Power.Read More…
  • Code
    Articles
    Strategies For Choosing the Right Premium WordPress Theme for Your Next ProjectPremiumwp
    You have your credit card in hand, and you are ready to buy a beautiful, premium WordPress theme for your next website or blog. But where should you begin? Perhaps a search through Google? Maybe a famous WordPress theme site? Perhaps ThemeForest.net? In this post, I aim to arm you with a few tips that will guide you when choosing a premium theme not only purchase a beautiful theme, but one that will meet your needs.Read More…
  • Computer Skills
    App Training
    Everything You Need to Know to Get Started with AsanaAsana logo
    Asana's a popular new team task manager, but it's so much more than just that. Here's the basics of getting started with Asana, so your team can kick your email addiction and be more productive.Read More…
  • Computer Skills
    OS X
    50 Things You Probably Didn't Know About OS X MavericksMavericks400
    Mavericks, the latest major release of OS X (pronounced Oh-Es Ten), is version 10.9 of Apple’s desktop operating system. With, reportedly, over 200 new features Mavericks is no incremental update. Jonny Ive might suggest that “Apple has reimagined the operating system for the desktop”, but the truth is Apple has incorporated some of the best ideas from third-party developers and has sought to integrate some of the features of iOS (the operating system for the iPod Touch, iPhone and iPad) into it’s desktop big brother.Read More…
  • Web Design
    Industry
    Flat Design, iOS 7, Skeuomorphism and All ThatFlat retina
    The notion of flat, "digitally authentic" design has been a popular topic of conversation and controversy recently, especially with the software design efforts of Apple, Microsoft, Google and their respective flagship operating systems. Subtle colours, light typography and the other commonalities of modern flat design have all found a working role in the construction of the neoteric design trends we're all coming to love (or hate). We're going to take a look at these trends in this article to see what all the fuss is about.Read More…
  • Web Design
    Design Theory
    The Future of User InterfacesInterface retina
    We are web designers and developers. As obvious as our work is (we build interactive media applications) there's a deeper meaning to what we do. We analyze design problems and explore different concepts to solve them. This also means that we think of the communication between a device and the user. We develop that communication. We design what the user sees and does.Read More…