A blog sharing resources and inspiration for designers

  • Jul 24 / 2013
  • 0
skuo
Web Design

Skeuomorphism – What is it & does it work?

header

Skeuomorphism is the term used to describe objects that emulate another material or a real world object, in the design industry it’s often referring to interfaces which use things like textures, shadows and effects to make digital things look real.

A perfect example of this is Apple’s notes app which looks like yellow lined paper, people recognise it as a notepad and use it the same as they would in the real world. Using this metaphor in design is getting met with both love and hate, people are turning against it as the trend is starting to get old but there are some which value its use.

notes

I think there’s a place for it in design but it has to be thought about and treated well. The reason I would use skeuomorphism in my work would be to help the user feel more comfortable with my product because it would appear more familiar to them. A button that looks like something you can actually press may scream “Oh, that’s what I’m meant to click on” but may not be the best looking solution. A toggle to turn something on/off can use skeuomorphism to help indicate that the object can be moved similar to a light switch, but doesn’t have to go as far as imitating it exactly. The example below shows how you could treat a toggle without, with, and a hybrid of skeuomorphism.

tabs

 

If you look at most digital magazines and books available now you’ll see that the designer has translated a print piece into the digital format instead of taking the medium and doing something that is appropriate and engaging. Why should we be limited to traditional thinking when it comes to these things? We should be pushing for solutions which enhance the whole experience of reading, get rid of those annoying page flips and add some seemless scrolling.

In saying that, we also need to be careful that we don’t use interactivity for the sake of it, at the end of the day the content is what it’s all about so we shouldn’t let the chrome (the graphical framework and elements surrounding the content) get in the way. Make it more about what you want to do instead of what device you’re currently using.

There are also technical implications of using skeuomorphism in your designs which may negatively impact the usability of your app/site. Adding textures, shadows, text effects, reflections and any other bits of detail which makes something look more realistic adds filesize in most cases, and also makes it take longer for the device to render. A few seconds of loading time in this day and age can loose you an audience, with everything in the world becoming more and more immediate the average attention span is getting smaller and smaller. There are studies that state how little you actually have to capture people’s attention online.

Apple has been a massive trend setter for using skeuomorphism in their designs, Steve Jobs was allegedly a big fan of it and you can see countless examples in their current interfaces. The company seems to be cutting their ties with this trend and moving toward a flatter and more functional look, this is probably due to Jony Ives who wasn’t a fan of it.

apple

The upcoming release of iOS7 is a great example of this, they have ditched all those shiny buttons and replaced them with flat elements.

iphone

 

People aren’t completely stupid, digital has been around long enough for most people to have learnt what a button is. If they can’t figure it out then it’s probably not even their fault, you should look at the UX to make sure everything is in a logical position. A button should be easily recognised as a button no matter how it’s styled.