Skeuomorphism: Design We Learned To Outgrow
While Skeuomorphic design may no longer be in vogue, it served as a stepping stone to more contemporary design trends, like material and flat design.
It is 2013. The busy gradients, textures, and shapes of Apple’s iOS 6 have given way to the flat and simpler designs of iOS 7. The ubiquitous skeuomorphic UI design Apple leveraged to familiarize a generation of new smartphone users fades into the past.
Many designers and users welcomed the visual refresh, hailing the new flat designs as minimal and lightweight, compared to the dated and ugly clutter of yesteryear.
It’s possible no iOS update will ever be as visually drastic as the transition from iOS 6 to iOS 7 in 2013. Image Source: Reddit.com
As dated as it may appear now, the skeuomorphic design that proliferated during the early years of smartphones enabled users new to digital touch screens to become familiar with interfaces they had never seen before. This era of mobile UI design served as a foundational stepping-stone for the refined, minimal experiences and visuals we enjoy today.
What is Skeuomorphic Design?
Skeuomorphism, in the sense of interface design, refers to when a design imitates the form of an object in real life. The intention behind skeuomorphic design is that by making something familiar, users don’t have to learn how to use it from scratch. A popular example of skeuomorphic design is Apple’s initial design for their calculator application.
The UI design of this application is literally a simulation of an actual calculator, down to its screen reflection and raised button. Image Source: https://uxdesign.cc
Note that interfaces can still be skeuomorphic if they also emulate the UX of a real object, not just its look. The more updated apple calculator, seen below, no longer looks like an exact port of a physical calculator, but it is still skeuomorphic in the way that it is used.
Chances are that if you’ve used a physical calculator before, you’ll still know how to use this one. Image Source: https://uxdesign.cc
Skeuomorphism & Affordances
So we know that Skeuomorphism emulates real life objects to present familiar, easily understood interfaces to users. What made this design trend so successful in introducing users to new touchscreen technology was its relation to affordances.
Affordances indicate possible actions that can be performed on an object or interface. A common, real life example could be a door knob or a push button. These objects have physical designs that indicate that they can be rotated or pushed. Skeuomorphism brought affordances into digital interfaces so that humans could become accustomed to the digital world as much as we are to the physical one.
Steve Jobs was a proponent of skeuomorphic design, and felt its use in iOS enabled users to make connections to the designs on their screen, like buttons resembling glossy “real” buttons, indicating their intractability.
In a time where user interface navigation on a touchscreen was not nearly as familiar to us as it is now, skeuomorphism provided a shared visual language that could be intuitively used.
Buttons, notches, and sliders pop out of the screen, heavily telegraphing their intractability. Image Source: https://uxdesign.cc
The Transition to Minimalism
As our ability to understand technology progressed, so did design language. With this understanding and familiarity, interfaces began to grow increasingly complex. Cluttered skeuomorphic interfaces, with their inelegant gradients and glossy buttons, were beginning to hinder user experience.
Skeuomorphic interfaces, which relied on familiarity, were sacrificing ease of use, interface scalability, and navigability. The design community began to move towards flatter, more standardized styles that could be easily ported between mobile, tablet, and web. The boxes, squares, and flat backgrounds that replaced the more theatrical emulations of the past were responsive, clear in hierarchy, and practical.
Apple’s iOS 7 design featured flatter, simpler designs that relied on previous user knowledge of touch interfaces. Image Source: https://www.independent.co
With a new focus on clean, lightweight, and function-first interfaces, elements like hamburger menus, pull to refresh, and swipe to delete were implemented to declutter and save space. These elements are non-skeuomorphic, because they have no counterpart in real life and their meaning and functionalities have to be learned.
Under the lens of skeuomorphism, you may view such elements as problematic considering they are not inherently intuitive. Critics of skeuomorphic design argue that users have become so accustomed to interacting with graphical user interfaces that skeuomorphism is no longer necessary.
However, Skeuomorphism is not truly gone, and has returned minorly in the form of visual cues. Within flat and material design styles, designers have since utilized many skeuomorphic cues to showcase hierarchy and affordance, such as drop shadows and depth.
Skeuomorphism in Retrospect
While flat design and the visual trends from 2013 onwards may seem prettier and preferable to what came before, we never could have implemented such design without the foundation that skeuomorphism established.
It makes sense for emerging technology and designers to use skeuomorphism in their designs to anchor us to more familiar analogues. Skeuomorphic design in the sense of pre iOS 7 interfaces may be past its expiration date, however, all designers should know of its important role within UX / UI design.