Skeuomorphism User Experience (UX) topic overview/definition

What is Skeuomorphism?

Skeuomorphism is a term most often used in graphical user interface design to describe interface objects that mimic their real-world counterparts in how they appear and/or how the user can interact with them. A well-known example is the recycle bin icon used for discarding files. Skeuomorphism makes interface objects familiar to users by using concepts they recognize.

Skeuomorphism is related to what ecological psychologist James Gibson termed “affordances.” Affordances refer to action possibilities of objects or other features of the environment. The most commonly cited examples of affordances include door handles and push buttons; their physical designs inform users that they can be rotated or pushed. Skeuomorphism represents affordances in digital user interfaces. It fits with our natural interpretation of objects—but in a digital world.

Skeuomorphism’s use in making interfaces more familiar and thus easier to use stems from the early days of computing and mobile computing. For instance, early versions of Apple’s mobile operating system, iOS, used skeuomorphism heavily across its user interface (e.g., buttons resembling glossy ‘real’ buttons, photos with white borders looking like physical photographs, etc.). Skeuomorphism in iOS was widely regarded as part of the reason it was so intuitive to use by people who had never used a touch-based smartphone before.

It has been widely debated, however, whether users have become so accustomed to interacting with graphical user interfaces that skeuomorphism is no longer necessary. Opponents of skeuomorphism argue that natural-looking objects can make an interface look cluttered and that some of the objects mimicked in skeuomorphism have become obsolete and meaningless to users (e.g., the floppy disk for the “Save” action). Proponents, on the other hand, argue that humans can never become as accustomed to the digital world as we are to the physical world—so, simple skeuomorphism will continue to be helpful.

Literature on Skeuomorphism

Here’s the entire UX literature on Skeuomorphism by the Interaction Design Foundation, collated in one place:

Featured article

Skeuomorphism is dead, long live skeuomorphism

Skeuomorphism is dead, long live skeuomorphism

Skeuomorphism has been a very useful concept in design, then it became the most hated concept in design, and then it came back from the dead. Understanding skeuomorphism lets designers help users through learning curves and make decisions as to whether skeuomorphism still serves a purpose today.

Skeuomorphism is where an object in software mimics its real world counterpart. The “trash can” is, perhaps, the most recognizable skeuomorphic object. Though the good old “save” icon was once skeuomorphic but following the demise of the floppy disc – it no longer bears resemblance to the world of today.

Skeuomorphism began to take shape in the 1980s. One of its earliest proponents was Steve Jobs of Apple. The idea was simple; computer interfaces would be much more intuitive to users if skeuomorphic design was applied.

That trash can let users drag stuff they didn’t want on their computers to an actual bin. You could move files to folders (another real life equivalent). It meant that we weren’t baffled by all these new facilities because we had something to reference them against in real life.

James Gibson, the environmental psychologist, once suggested that we perceive the world as a set of “affordances”. An affordance is an object that’s shape suggests its use. The most commonly cited affordances would include door handles and push buttons. Skeuomorphism also represents “perceived affordances”. It fits with our natural interpretation of objects but in a digital world.

The Trouble with Skeuomorphism

Skeuomorphism helped a generation through the learning curve of coming to grips with a digital era. But, it also began to hold us back. We became familiar with the concepts and they entered the language and our day-to-day lives but skeuomorphic design led to huge amounts of clutter on the desktop. They brought too many useless details to our computers which we no longer needed.

There’s a whole generation out there now that has never known a world without computing. The visual metaphor isn’t necessary any more.

Author/Copyright holder: Lifemaestro. Copyright terms and licence: CC BY-SA 3.0

The Rise of Flat Design

In 2007, Forbes magazine announced the death of skeuomorphism. Apple (to be followed quickly by Google) had settled on a new form of design – flat design

Flat design mandated that graphic user interfaces (GUIs) should be freed from clutter. There was no need for bevelled edges, gradients, reflections, and skeuomorphism. The digital interface should be exploited for its own strengths.

Visual clarity was put at the forefront of design. If you use Windows 8, for example, you’ll find that the start button brings you to a shining example of flat design. All those icons are gone and they’ve been replaced with tiles – tiles that bring you actual data in both written and graphical format – they can deal with greater levels of complexity in the interface without compromising the user experience

Of course, Windows 8 was not universally loved but that may have something to do with the transition between the old and new being so dramatic. It might have been easier to inch away from skeuomorphism for Microsoft rather than to run away from it.

iOS 7 was Apple’s leap into the world of flat design and was, from a consumer acceptance perspective, more successful than Microsoft’s. This may have something to do with Apple’s trendy, design audience compared to Microsoft’s more staid and older demographic. However, the minimalist approach of iOS 7 was hailed as a work of genius. Skeuomorphism was declared dead on the spot – the new metaphorical, rich flat design was the way forward.

We’d argue that skeuomorphism and flat design aren’t as far apart as they appear. A camera icon, for example, still appears on the camera functionality in iOS 7. It may be a slightly less realistic camera icon than would have been used in the past but flat design doesn’t so much replace skeuomorphism as mute it.

Author/Copyright holder: GraphBerry. Copyright terms and licence: CC BY-SA 3.0

The Return of Skeuomorphism

Those that declared the death of skeuomorphism got carried away. It might have seemed logical at the time – smartphones and tablets were after all only extension of the computing frameworks we already knew. But then something changed – the smart watch arrived on the market.


Author/Copyright holder: Pebble Technology. Copyright terms and licence: CC BY-SA 1.0

Watches have not been a traditional part of the computing line up. In fact, the digital watch has always been regarded with a certain scepticism (or even disdain) among the watch wearing community at large. It may do the same thing as an analogue watch, it may even do it as well as an analogue watch but for the majority of watch wearers – it doesn’t do it as prettily.

Phones, tablets, desktops, laptops can make a fashion statement but for the majority of the time; they aren’t part of our day-to-day fashion decisions. The smartwatch is different.

To encourage people to use the smartwatch, manufacturers need to convince them to give up their old watches. It seemed unlikely that Rolex, Tag Heuer, Breitling, Patek Phillipe, etc. would be shaking in their shoes if the smartwatch experience was a digital one.

Skeuomorphism was embraced by canny smartwatch manufactures once again. The faces of smartwatches are designed to mimic that analogue watch experience. So that when the user goes to examine the time – the real world and the digital are as one.

In fact, it can be argued that the smartwatch itself is skeuomorphic. It’s not a watch. It’s a computer. But it’s a computer that you wear on your wrist. The current designs which all mimic the wrist watch may be a gentle way to ease consumers into a transition before a new form of iconic design arises for future generations of smartwatches.

The Take Away

Design trends come and go. Skeuomorphism can be very useful. It can also be taken too far. Flat design came about in response to the over use of skeuomorphism. The current trend in smartwatches is a return to it – but for how long?

References

Check the IDF course on Affordances: https://www.interaction-design.org/courses/affordances-designing-intuitive-user-interfaces

The BBC takes a long look at the history of skeuomorphism in devices - http://www.bbc.com/news/magazine-22840833

Kelsey Campbell-Dollaghan argues the case for the permanency of skeuomorphism in design - http://gizmodo.com/skeuomorphism-will-never-go-away-and-thats-a-good-thin-1642089313

The Next Web examines the contrast and debate over flat design vs. skeuomorphism here - http://thenextweb.com/creativity/2015/01/23/skeuomorphism-vs-flat-design-ongoing-conversation/

Forbes’ premature celebration of the end of skeuomorphism can be found here - http://www.forbes.com/sites/timworstall/2013/09/19/apples-ios7-well-it-was-time-for-skeuomorphism-to-die/

Fast Company examines the rise of skeuomorphism on the wrist - http://www.fastcodesign.com/3036347/wearables-week/the-most-hated-design-trend-is-back

Hero Image: Author/Copyright holder: Klaus Göttling. Copyright terms and licence: CC BY-SA 3.0

Show full article Show collapsed article

Learn more about Skeuomorphism

Take a deep dive into Skeuomorphism with our course Affordances: Designing Intuitive User Interfaces.

Affordances are a key concept for designers. If you want to build products that are intuitive and easy to use, fully understanding the relationship between the human mind and technology is crucial. An “affordance” refers to the possibility of an action on an object; for instance, we say that an elevator button affords being pressed, and a chair affords being sat on. The concept was popularized by HCI (human-computer interaction) expert Don Norman in the late 1980s, and it has since played an essential role for user experience professionals and researchers. Understanding this term is essential for anyone who wants to get a deeper appreciation of what it means for a product to be “intuitive.”

Taking this course will teach you both the theory of affordances and also how to build instantly perceptible affordances into your own designs. Your users should be able to identify the actions afforded by a design with speed and accuracy. Thus, the better you can make your affordances, the more likely you will prevent the user from becoming frustrated (which can happen very quickly). In order to achieve this, you as a designer must appreciate how users perceive the world and how experience, context, culture, constraints and other factors affect our ability to detect the possibilities of actions on offer. This is at the heart of why those interested in a design career and established designers alike must gain a firm grounding in the meaning and potential application of affordances as a designer’s tool.

Throughout the course, we identify the major milestones in the evolution of the term “affordance” and outline how it applies to practical user experience (UX) design. Along the way, we look at the affordances of objects in the real world and screen-based interfaces so as to reinforce the concepts and principles covered in each lesson. You will soon realize how vital a solid grasp of affordances is—the name of the game is to make designs that users can take to naturally and without having to hesitate to ask themselves, “What happens if I do this?”.

All literature

Affordances

Ch 44: Affordances

44.1 AbstractThe concept of affordances originates from ecological psychology; it was proposed by James Gibson (1977, 1979) to denote action possibilities provided to the actor by the environment. In the late 1980s Norman (1988) suggested that affordances be taken advantage of in design. The suggestion strongly resonated with designers’ concern...

Book chapter