Skeuomorphism was never gone. Here’s why.
With Apple’s WWDC 2020 just behind us last week we can now take a look at some of the interesting announcements Apple made during the week. What I like, as a designer, is that the design (both UI and UX) of the new operating systems was one of the first topics they discussed.
One thing that has got people talking is the look-and-feel of the new macOS. The internet is divided. Some like it, while others don’t. Apple is moving back towards using a Skeuomorphism-based design language for its UI.
Here’s what that means for the design languages we use in our work.
Table of Contents
What is Skeuomorphism?
Since Skeuomorphism is a design language, we first have to know what a design language is. As described by Nate Baldwin, a “design language” is used to describe the overall visual design of a digital product. It not only defines the components you use in your designs but also why you use it, when you use it and how you should use it.
Skeuomorphism is a design language is known for mimicking elements of your design as to how they look in real life. The idea is that these elements will look familiar to users since they already know what it is and how it works in real life. This will in turn help users understand what the function of the element is on screen. Some famous examples of Skeuomorphism are the recycling bin, the mail icon, and many other icons.
The mimicking of real-life objects is called an affordance, as introduced by James Gibson in 1977. Having clear affordances is a big part of a good usability design. You can’t do without, really.
To give you an example, the horizontal surface of a chair affords sitting while the protrusion of a button affords pressing.
By closely replicating their real-world counterpart, elements designed following a Skeuomorphism design language show you what you can do with them since you already know what they can do in real life. It greatly helps with learning to understand how you can use your products.
Why did we move on from Skeuomorphism?
You might be thinking…if Skeuomorphism is so great, why did it disappear from most operating systems a few years back? Why don’t we use it anymore in our designs? There are a few reasons.
- Opponents of Skeuomorphism say that it is too cluttered. The details of elements that are designed this way clutter your screen and are distracting to users.
- Users are getting used to the products they use. There’s a new generation growing up in a world where technology is all around them. They do not need to have real-life “training wheels” to guide them. There’s room for new designs, patterns, and interaction.
- In addition to that, you don’t have to mimic real life. You can make use of the strengths and benefits that the screen provides. For example, you do not have to mimic a protruding button on a touch screen, since the user will not actually press the button. Another great example is the pull-to-refresh pattern. It is based on the real-life slot machine movement, but in a new digital way, without Skeuomorphism.
What design languages have we used since?
Apple and Microsoft made the switch to something we now call Flat Design roughly around the same time. Apple released iOS7 at the end of 2013 while Microsoft released Windows 8 at the end of 2012. Google came with Material Design, an evolution of flat design, in the summer of 2014. All three of the big players focussed on removing clutter. No more replica’s of real-life objects, no 3D and no drop shadows.
What role do design trends play in design languages?
Design trends come and go. We get bored easily. As human beings, we’re always looking for something new. Flat design might make way again for some sort of Skeuomorphism (or something else) in the future.
As users, we’ve had some time to get used to a new way of using our (mobile) devices. We do not need to see the real-life connection of an on-screen element to understand what it does anymore. There’s an entire generation growing up without knowing what a floppy disk is, so why should the save icon still look like it?
Apple arguably made a big breakthrough in the way we used our mobile phone in 2007 when Steve Jobs announced the first iPhone. Even breakthroughs take some time to get used to. Six years after the first iPhone, Apple moved on from Skeuomorphism. That has been plenty of time to get used to our new devices.
Skeuomorphism is making a comeback…but was it ever really gone?
After the release of iOS7, the imminent death of Skeuomorphism was announced by many designers. However, Skeuomorphism was never really dead. It only has been put more on the background in how we design operating systems now.
Removing shadows, 3D effects and more does not remove the real-life connection a design element has to an object. On many occasions, we still use the floppy disk as a save icon, the telephone icon for calls and text bubbles for messages. If you zoom in on the Messages icon used in iOS you will see that the general shape of the text bubble remains the same. This means that the Skeuomorphism affordance remains as well. The only thing that changes is the focus. By removing bezels, shadows, and gradients the icon becomes flatter, but still recognizable as a text bubble.
If Skeuomorphism is dead, take a look at why Microsoft used to call Windows 8 “Metro”.
Right, just like the real-life counterpart. It is in our nature to spot patterns in our environment. In that way, Skeuomorphism will never die or disappear. It will always be a part of how we see things and how we design them. The only thing that will change is how much it will be on the foreground of our designs.
Take a look at the Apple Watch or smartwatches in general. One big part of the design for smartwatches is designing the watch face. Watch faces look like their real-life counterparts. Now that we are getting more used to using a smartwatch, we are seeing more abstract or “flat” watch faces. We are moving away from a Skeuomorphism-focussed design language to a more flat-design focussed one now that smartwatches have been around a fair bit longer. Because of that, we can afford to create more colorful, abstract, and playful watch faces, without the interface getting cluttered or unclear for the user.
However, that does not mean the new watch faces lose the affordances they bring.
That’s the thing. We’ve always had multiple design languages. The only thing that changes is the trend of which design language has the primary focus in our design. Whichever one that is depends for a big part on the maturity of the product the design language is used for.
The general idea is that the more we are used to a product, the more flat-design-focussed the design language we design for the product is.
Design languages have focus
We have to get used to a new product whenever a new product hits the market. That’s the case for users but for designers as well.
The success of this new product depends on how easy it is to use said product. Skeuomorphism affords the user guidance and support. It helps users get used to your product. When your users are getting used to your product, you can make the switch to a more flat design language, as we have seen in the past with smartphones.
There have been many new developments in the world of design, tech, and consumer products since the introduction of smartphones. We now have smartwatches and wearables, augmented reality, and virtual reality. Some of which are still very new to us. That’s why we’re seeing a comeback of a more Skeuomorphism-focussed design language regarding those new technologies and products. We will see Skeuomorphism return, just as we will be seeing a more flat-design focussed design language after that, once users are getting used to new ways of interacting with these products.
The takeaway for designers
As designers, we have to acknowledge that Skeuomorphism and Flat Design aren’t separate design languages. We combine both in a design language that is either Skeuomorphism-focused or flat design-focused. Which one that is changes through time-based on the maturity of the product you’re designing for and the current design trend in general.
Was this post helpful to you? Share it with others!