About skeuomorphism—not just for UI designers

We saw a couple time off in Český Krumlov. It is an enchanting little town, the castle and the medieval buildings in the centre of town built along the winding Vltava river are part of the UNESCO World Heritage sites.

We walked a lot in the streets, the town has a very special character you can’t get enough of. During a walk I noticed some interesting ornaments on the buildings.

Most building facades had painted trompe l’oeil (seemingly three dimensional) decorations. As I saw these, I thought of the buttons used on websites, since we use graphical tools, shadows and gradients, to create the same effect in the digital world.

While in architecture one of the reasons for this is to cut costs – obviously it is cheaper to paint on a surface than to create protruding and hollow surfaces – in UI design it is a necessity, as we need graphical tools to create the illusion of 3 dimensions on a flat display, physically it is not possible (yet).

These are nice examples of skeuomorphism as both try to imitate reality with graphical tools. In UI design it became widespread with the advance of touch screen devices. More about this later.

Skeuomorphism in ancient times?

Skeuomorphism might seem something new, a thing of the digital era, but in fact it has been around for thousands of years. We have already known that UX and architecture have common roots. As the photos above suggest, we should look for these common roots in architecture again, but we need to go back a little bit further in time.

One of the earliest examples of skeuomorphism is from Ancient Greece. Early Greek buildings were made of wood, and rafters supported the roof. Later, as technology developed, they started using stone instead of wood. To imitate rafters, stones were carved to look as if they were wooden beams.

These ‘rafters’ had no function, but this design made the stone, the new technology, look familiar to people—they trusted it more when they saw the stone carvings that reminded them of the wooden roof support they knew well. This is the key aim of skeuomorphism: to exploit existing knowledge to make people trust new technology.

Relying on existing knowledge and experience, the function, role, and affordance of new technologies can be easily determined from their shape and appearance.

It is easy to see that the flat screen of a smartphone has no affordance in itself. With no prior experience, users could not handle it. With skeuomorphism, we can use light and shadow on the screen to imitate 3D interfaces (e.g. toggle switches) which have affordance and are familiar because of previous experience and visual effects.

A typical example is the traditional rotary phone dial displayed on a smartphone.

A similar metaphor is the desktop metaphor developed by engineers and designers when the first PCs appeared. The first computer with GUI that was widely used was STAR by Xerox, introduced in 1981. It was its graphical interface where the desktop metaphor was first used: it mapped a desk with papers that could be arranged in folders. If you wanted to delete one, you threw it in the recycle bin. These metaphors made the new interface and functions familiar to the users.

Skeuomorphism is good

Metaphors and skeuomorphism help users recognise and easily use user interface elements relying on their existing knowledge and experience. When touch screen interfaces were new, this was extremely helpful in getting people to accept and use them.

Then designers went a bit overboard. They started using it for the sake of decoration. The nicest example of this is the iCal user interface of the MacOS system (then OSX)— rumour has it that the designers were inspired by the patterns of the seats in Steve Jobs’s private jet 😉

In UI design the skeuomorph trend came to an abrupt end, exactly because of this excessive use for decoration. When the iOS 7 came out in 2013, flat design became widely popular (Apple was not the first to use it, though)—more about this in another post soon.