UX Magazine

Defining and Informing the Complex Field of User Experience (UX)
Article No. 1104 October 3, 2013

Does Skeuomorphic Design Matter?

In the early 1900s, electricity was scary.

The lack of understanding surrounding this new technology contributed to a great deal of public fear.

The sign pictured below, from a turn of the century hotel, offers us a glimpse of what it must have been like for guests to make sense of the confusing installations of metal, glass, and wire they found lurking in their rooms.

When it comes to emerging technologies, the stakes for design are high. One misstep and a promising new product can become yesterday’s news. To be effective, designers must set their sights well beyond easy-to-use. We need to convey more than how. We need to convey what as well. We need to be interpreters, to contextualize new products and concisely convey their identity, purpose, and value.

One approach, commonly called design metaphor applies a known concept to a new context to help people make sense of new products. As in literature, repurposing known concepts is a shortcut for accessing shared cultural memory—tapping into the past to make sense of the present.

Skeuomorphs and Affordances

Since the introduction of iOS 7, the blogosphere has been alive with debate on Apple’s departure from skeuomorphism—the yellow lined legal pad of Notes, the leather bound folio of Calendar. We are now deeply mired in a flat vs. skeuomorphic debate that reduces skeuomorphism to coddling kitsch and equates flat design with high-modernism. Both sides have missed the point.

Skeuomorphs in design aren’t useless decoration, but contextual clues. Like design metaphor they are the visual equivalent of figurative language—enabling designers to quickly tap into shared cultural understandings and convey complex meanings in a straightforward way. They work as a new kind of affordance, one that communicates not function but identity.

We shouldn’t abandon cultural affordances like skeuomorphs because some find them tacky or overused

Affordances, a concept originated by James Gibson, are an object’s inherent possibilities for action. Donald Norman evolved this definition to encompass the act of communicating possibilities for action through design. These perceived affordances are lingua franca for product designers. Every day we shape things to emphasize their utility, to show how this device operates or to illustrate how to use that application. Until now, this approach has been primarily focused on utility and operation.

A designed affordance: The classic example of a rotating door handle [flickr: sk8geek]

The design of a rotating door handle, for example, suggests how to use it, but does not give us context for what it is or why we should use it. Smartphone or lawnmower, before we figure out how something works, we usually ask what kind of a thing it is and why we should use it in the first place.

Reconsidering Skeuomorphs as Cultural Affordances

Skeuomorphs are stories of utility frozen in time. A new kind of affordance—a cultural affordance—that provides the context we need to understand the possibilities for action. They don’t work because they coddle or educate the user—digital wood grain shelves and page-flips didn’t teach people how to read ebooks—they work because they leverage a user’s past experience and apply that understanding to something new.

Take this electric kettle for example. Though thousands of variations exist, we still understand the basic shape as a vessel for heating water. Designers have used a variety of cultural affordances to communicate this purpose. The tapering shape—originally larger on the bottom to maximize contact with the heat source—is no longer a requirement, but remains a key feature. The exaggerated, arching handle amplifies the kettle-ness of the object. Even the electric plug plays a role. Expanded to the scale of a stovetop heating element, it indicates where to put the kettle for use, though this modern version transmits electricity, not heat.

The kettle retains the basic shape of its ancestors and through that shape conveys its purpose. Its form is no longer tied to its literal function, but rather to functional analogs of the past. In the digital realm, where there are fewer precedents for utility, figurative design has long played a critical role in helping people make sense of new products.

The tabbed folders and icons in the Xerox Alto interface

Xerox Alto, the first commercially available graphical user interface (GUI), laid the groundwork for design metaphors like representational icons, tabs, and "spatial" organization. But there are many more ways to guide users through an interface beyond the ubiquitous tabbed folder metaphor introduced by the Alto. Other metaphor-like conventions like visual synecdoche, where a part can stand for the whole—a letter icon for the inbox—or even playful visual puns, where multiple meanings can be attributed to one object, can also help people make sense of unfamiliar digital territory.

From tabs and folders to the digital "click" on today’s cameras, many cultural affordances have become standard patterns that are used by UI designers without a second thought. But as the hotel sign at the beginning of this article attests, emerging technologies without the necessary cultural affordances leave us wondering. What is it for? How will it be used? It can also leave us even a little afraid of the possibilities.

The Untapped Power of Cultural Affordances

In the last 10 years, over a billion people have started using iPhones. At least a few of those users made the mental leap between the yellow legal pad motif—the one that makes digital designerati stomachs churn—and the idea of a place to quickly jot things down. With the potential to communicate not just functionality, but identity and purpose on that scale, we shouldn’t abandon cultural affordances like skeuomorphs simply because some find them tacky or overused.

Faced with ever-increasing digitization of formerly physical products, we should not retreat to the functional, literal design of the past for shortsighted aesthetic reasons. We need to expand the conversation about what design can do through cultural affordances—not simply to address ease of use, but to communicate context, identity, purpose, and value. If we don’t, we may find our users just as wary and confused as the hotel patrons who first encountered the Edison’s innovative new electric lights.

John Payne will be speaking at the Institute of Design's Design Research Conference, October 8-9 in Chicago.

 

Image of legal pad and pencil courtesy Shutterstock

ABOUT THE AUTHOR(S)

User Profile

As a Principal at Moment, John’s passion and knowledge of research and design methodologies help his teams achieve deep empathy that results in valuable products for clients and their customers. His recent work has focused on user experience challenges in healthcare and education, working with clients like Allscripts, WellDoc, AT&T, Memorial Sloan Kettering Cancer Center, and a variety of New York-based startups.

Add new comment

Comments

46
75

Thank you John for a great article. Not only I'm glad to find such a well-spoken defender of Skeuomorphs, but I truly enjoyed the effectiveness and clarity with which you address your points!

48
69

Cool article, made me reconsider my modern sins. Obv right now the flat trend is still riding high. But rarely is there common sense in trends. Though I wonder, where does evolving to more abstract concepts begin?

When they first started selling cars, they debated putting putting a sound of a horse so people would be more comfortable with the idea. To this day we still use horsepower, which is kind of mind blowing.

Thank you for creating a conversation in my head.

50
56

While all the comments are worthwhile and should be commended for content and obvious thinking on the matter. Very well thought out on some.
Did it occurr to any of the designers of these systems to give the user the choice?
Just a thought.

79
72

The use of skeuomorphs, or element of skeumorphic design, has a long history. The pictorial (skeumorphic) quality versus the graphic or more abstracted realisation of a symbol or graphic element is primarily a question of style, and like all styles they come and go. But, as you state in the article, there is a functional element also and they are not simply useless decorations. In my own field, of illustrated non-fiction book publishing, we use descriptive and conceptual diagrams. We have found that most readers prefer pictorial (skuemorphic) elements incorporated into diagrams and thematic maps rather than flat abstracted ones because they find them less ‘technical’ looking and therefore less off-putting.
The use of abstracted ‘flat’ style graphic elements now being used by Microsoft in their Window 7 interface and Apple in its iOS 7 are being championed as new, cleaner and modern. They are nothing of the kind, or at least they are modern inasmuch that they refer back to the Modernist movement of the middle of the last century. Older designers will recall this style from the 1960s, and those of us who have studied design history know that Otto Neurath proposed this style of abstracted symbol design back in the 1930s with the development of isotypes in the representation of statistics and quantities of a whole variety of objects from men and women to crops and aircraft. Today in the UK Jock Kinneir and Margaret Calvert’s road signs, which embody much of Neurath’s thinking, are still with us.

As a designer of diagrams of a conceptual nature I find that language devices are useful and you refer to this aspect when discussing the Xerox Alto GUI and refer to synecdoche, which is a part of speech. However you refer to it as metaphorical, but it is not: it is metonymic. I’m not being simply pedantic about this because the distinction between a metaphor and a metonym is a useful one for the designer of conceptual diagrams (and of course for the writer). A metonym refers directly to it’s subject for example in the Peter Yates film ‘The Deep’ the title refers to the ocean - depth being an aspect of an ocean, here deep is a metonym - (synecdoche a more specific form of metonym is similar where part stands for a whole, as you state, for instance a deckhand, where the ‘hand’ refers to the part that he uses). Metaphors work in the opposite way, that is they are not contiguous to their subject; they work by striking a contrast: so our deckhand might be ‘as thick as two short planks’ a simile that uses metaphor because he is clearly not made of wood. In conceptual diagrams I have used, for example, a ‘tree of life’ metonymic visual element to represent the biosphere, and a tank-like juggernaut metaphor to represent the overpowering global economy. These visual devices devised from parts of speech are readily understood by readers; who do not need to be schooled in them.

What is also important to me is the meaning of symbols as well than their graphic realisation, and in the arguments about the use of skeuomorphs this semiotic aspect seems to be overlooked. The actual meaning or contents of symbols are somewhat overlooked in the debate about their realisation: skeuormorphs v abtracted flat symbols - it has become a question of style - what is being shown seems not to have been thought about very much. Thus we still have an old handset for a phone symbol in Windows 7 (even landline phones haven’t looked like this for thirty or more years). And on Kinneir and Calvert’s unmanned level crossing road sign we still have a steam locomotive, which to many means only Thomas the Tank Engine or a heritage steam train tourist location. I’m sure there are many others. Are such things really so culturally embedded that they do not need looking at again? Part of your Lingua Franca for designers: permanent and immutable.

© Patrick Nugent 2013

86
101

Great article! I really enjoyed it.

I think there is a general misuse of the term skeuomorphism, especially in the context of iOS7.

iOS7 forwards the idea of flat design, a design approach that favors simplicity and few visual embellishments and no dimensionality. Then there is dimensionality, the addition of depth or volume to a design. This might include 3d shapes, drop shadows & beveled edges. Lastly there is skeuomorphism, which as described is the use of metaphor in design to leverage built-in affordances.

A skeuomorphic design could also be flat, for example using note paper as a background. There's no dimensionality but the lined paper provides context as to the screen usage. In fact, the current Notes app in iOS7 does this in the screen icon, though strangely removes the lines within the app. A button with beveled edges and/or a drop shadow is NOT skeuomorphic, it's dimensional.

I think a combination of styles can and should be used to create the most seamless user experience for a given task. Choosing a single approach really is a disservice to users and is strictly an arbitrary design choice. We should use all the tools available to us to design the best possible experiences.

69
99

John, great article. Personally I am torn, I like a more minimalistic design and can see how skeuomorphs can add guidance to new users.
I think it's funny and an oxymoron that Apple added a parallax effect to iOS7 as that is a heavy skeuomorphism in my humble opinion.
I took the liberty to quote you here: http://www.planetquark.com/2013/10/16/removal-of-skeuomorphism-parallax-effects-and-the-oxymoron-in-ios7/

81
116

Jesus Christ, this is a bunch of awful arguments. The only reason why early UIs were trying to be skeuomorphic is because the human animal of the time didn't know what they were supposed to be doing with the virtual environment so they tried to emulate the real world as closely as possible. Over time, things became flatter and flatter as a result of a realisation that content is the key thing and any 'design' needs to be as minimal as possible to get away from distracting user from getting to content. Here's an example of 'design' we have currently on our start-up site. It's partly the product of lack of time to put more effort in it, but most people have told us 'this is really well designed' so far, even though it's not visually designed at all. www.award.io

87
94

Thanks, Jason. So your argument is that the 'human animal' has evolved in the past 40 years to be completely fluent with the virtual environment? Does that mean all of us, or just the ones in first-world societies? Or those who can afford computers? Or those who fit the demographic profile that is attractive to marketers? I completely agree that design shouldn't distract from content on a site such as yours. The design of your site is quite minimal and simple, I agree. Beautiful photography as well. Thanks for sharing. But to say it's not visually designed is simply incorrect. It is visually designed whether or or not you intended to make it so. Also, I notice a slight dropshadow on all the linkable titles. That treatment works nicely as a way to differentiate the links from the rest of the type.

81
97

I agree with some others, and am confused about some of your examples. Just because something is machine-era does not mean it is bad in the digital era. The tea kettle is a good example, where physics and ergonomics drive the design more than nostalgia. For real digital design, tabs are a favorite of mine. They evolved over centuries of organizing information to the way they are, and in their various iterations (and there were many) they always work as a way to be aware of and access information at the same hierarchical level. If you built a digital product with a tab bar that looked like it was made of little bits of beige cardstock with typed labels, that would be senselessly decorative, so skeuomorphic. But even the Alto didn't do that, and used the good part (label, sticking up) to draw on the way people actually perceive and understand.

P.S. 1 billion iPhone users? Um... no. This is a good summary. More like 1.5 billion smartphone users, and maybe 300mm on iOS http://venturebeat.com/2013/02/06/800-million-android-smartphones-300-million-iphones-in-active-use-by-december-2013-study-says/

91
100

Thanks for the comment, Steven. Skeuomorphic does not mean senselessly decorative. Skeuomorphic means the design retains cues to features that were necessary in the original, but are no longer necessary in the new technology. Tabs are not necessary, they are a choice the designers made to reference the a form that had "evolved over centuries of organizing information," as you rightly put it. That form is communicative because some of us know it from prior experience. It is in our shared memory, thus it is a cultural affordance.

And, thanks for the correction on iPhone adoption numbers. Much appreciated.

89
93

Ah... So my only concern with that comment is that designers made a choice. I often do not have a choice in the traditional sense, of one made on personal beliefs, needs, etc. I use tabs (for example) a lot because it's the clearly-best pattern for the vast majority of users to understand the information design/IA.

91
105

Hi John, I believe that there is hardly any design - good or bad - that does not make reference (through functional or formal-aesthetic aspects) to some predecessor or cultural memory. So, I agree with you that skeumorphism has its place in design. Even ornament (which is often skeurmorphic) is useful (and functional) when it makes users more comfortable and subsequently more confident with environment and interaction. However, there is a fine line. An example for the inherent "laziness" and redundancy I find in many skeumorphic design is the Thonet chair, a design which in all its beauty was made possible through a special manufacturing technique of shaping wood with steam and pressure (a classical example of 'form follows function"). Once metal work and tube structures became more available the same chairs were built from steel for "sentimental" reasons completely loosing out on the potential for innovation a new material and manufacturing process would bring about. If we are discussing the value of skeumorphism in design we must also not hold back with a critique of design for "nostalgia", which often flourishes in hideous "retro design". We must question to what degree certain designs use skeumorphs to lure users into a (false?) sense of comfort and identity for the lack of original ideas and concepts. Since this debate flared up through Apple's shift away from Skeumorphism, I would like to add that I always perceived the level of Skeumorphism in iOS as flawed and in stark contrast to the innovation Apple brought to the people. I am really happy they moved on. But maybe it was just that little piece of ridiculous ornament that made a massive adoption like this possible? After all, people are people and they love their old stuff.

94
92

Thanks for your perspective, Michael. I agree with you that laziness may be the primary force that propagates skeuomorphs forward, and that the steel Thonet chairs were very nearly a betrayal of the purity of the original Thonet chair. But the fact that some lazy designers made steel Thonet chairs didn't stop others from pushing the boundaries with chairs like Breuer's Wassily chair or Mies' MR (my personal favorite) which both used the new material to it's fullest.

Perhaps we designers misuse skeuomorphs so much precisely because they are held in such low esteem. Design education either ignores or reviles figurative or representational approaches, thus most designers equipped to use them in subtle, nuanced ways. I'm not arguing that we should accept all skeuomorphic design any more than we should accept all design that purports to be modern. But I do think that it has it's place and a 'good' designer should use all the tools at their disposal to achieve clarity of communication.

81
86

meant to say "most designers ARE NOT equipped to use them in subtle, nuanced ways." ;)

93
103

Thanks for the article.

I agree with the kettle comment . It is a highly functional modernistic design. Regulations for 220 AC/DC on kitchen counters are strict for obvious reasons, requiring a socket to be raised so spilled water can't get to it.

Although skeumorphism has it's purposes it is nothing more than a crutch. The.problem with these dated references is that they often have nothing much to do anymore with the affordances of the actual object. My kids get confused when i do the 'tshoo tshoo train'. They don't get it. Analogies like tabs and folders in the digital domain may have helped in the early days of the digital age but I believe that for the last 15 odd years and counting these interfaces hold us back from taking the digital possibility to the full potential . A leather bound address book (and the likes) suggests a mental model which often clashes with the 'real' affordances of the digital tool.

Good design uses subtle, more abstract analogies and other semiotic technics (the term 'metaphor' is used incorrectly here), to frame conceptual models that make reference to the familiar but leave enough room for the potential of the New.

I struggle to follow your idea of 'cultural affordances'. We are talking about semiotics a la Pierce, right? Do you mean with 'cultural affordances' the authentic object to which the analogy or symbol is pointing to?

86
109

Hi Michael. Thanks for your thoughtful comments. While I agree that skeuomorphs can be a crutch, I'm not convinced that no one needs crutches anymore. Nor do I think a retreat to a modernist aesthetic is a way to push the medium forward to it's full potential. What I do think is that cultural affordances—that is, sign systems that draw their meanings from cultural memory—may themselves be a way to advance.

Any design strategy can be used poorly… I love the 'tshoo tshoo train' example. In your context with your child, it is an obsolete signifier, therefore a poor choice of communication tool. In other applications it may be perfectly appropriate. If the mental model afforded by your design clashes with the real affordances of the digital tool, then you've done your job poorly. My assertion is that misuse doesn't equate to lack of value. Tabs and folders may have outlived their usefulness, but that doesn't mean they were never useful. The use of outdated or irrelevant symbols is the fault of the designer, it doesn't mean that designers shouldn't use symbols.

I think we agree that good design: "frames conceptual models that make reference to the familiar but leave enough room for the potential of the new." I believe the notion of cultural affordances gives this notion new breath and has the potential to open up the sometimes impenetrable topic of semiotics to consideration by a wider audience.

87
102

The kettle is a terrible example. The bottom is wider so it doesn't tip over. The "exaggerated" handle makes it easier to pick up (you still have to pour stuff out of it, you know).

Shall we remove the spout as well? After all, the top is removable so you can dump stuff just fine without it.

86
104

Bless you for correctly attributing affordances to Gibson and not Norman.

92
105

Whenever people debate the value / cost of skeuomorphic design, I think about my mother-in-law. Outside of dedicated software that she uses at work, and basic email, she hasn't used a computer in over 10 years. She takes it for granted that she'll never be able to use the latest technology because she's too far behind the learning curve, she just doesn't have the requisite familiarity with digital systems, not any of the requisite skills.

Skeuomorphs are extremely helpful to someone like her when she tries to use, say - and iPad. The familiar visual aspects tell her not only what this app or software does, but also how to use it. It allows her analog instincts to inform her use of the digital technology.

The danger of skeuomorphism, in my opinion, isn't that it became a crutch for lazy design - the real danger is that it can actively obscure the functionality of digital technology that has no analog equivalent, and drive development away from exploring those functions in favor of analog equivalence.

Ideally, it should be possible to design a digital interaction environment, digital technologies, that are instinctual and intuitive in-and-of themselves, without the need for skeuomorphs. But we're not not there yet and skeuomorphic design still has use.

91
94

Completely agreed. Apple and Ive have not made a good product with IOS 7 and for one of the first times I'm very disappointed in Apple. It breaks some really basic usability principles and I'm guessing my father will be trying something else. Couldn't they have at least filled in the icons? It takes much longer to perceive possible actions than before. This is especially painful if in distracting environment.

82
85

I agree absolutely. I was excited at the thought that my 81yo mother seemed ready to finally ditch her ancient PC and buy an iPad for her simple computer needs. I knew she would like an iPad if she ever tried it. Now I'm not so sure. There's simply not enough contrast in the icons, colors, and fonts.

88
96

I tend to agree skeuomorphism has its place, especially when new products, technology or ideas need to be communicated and made familiar to their audience. Over time, that visual metaphor may become unnecessary, but the need for newer metaphors for newer ideas will always exist. Great article!

93
95

Great Article. It touches on the base theory of human cognition and why UX design is applicable.