small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

What Is the Open Web?

From Design System to ‘NFT Design System’: Creating TinyFaces

Published on <a href="https://blog.prototypr.io/in-defense-of-skeuomorphism-2895308218ee?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Alan Sien Wei Hshieh 
It’s not just about graphic design
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*CmgGixnl0SOqib1x5TzClA.jpeg">
<a href="https://en.wikipedia.org/wiki/Skeuomorph">Skeuomorphism</a> gets a bad rap. Before the “rise of flat design”, speaking of skeuomorphism, the principle of emulating real-world items in interaction design elicited thoughts of reading apps with paper textures, and radio apps with faux brushed metal and large dials. Perhaps the company most synonymous with skeuomorphism is Apple, circa 2008. Opening the Contacts app on Mac OS X threw the user into a physical book, complete with pages, paper textures, and cheap-looking leather binding.
<img alt="" src="https://cdn-images-1.medium.com/max/620/1*YBKTizA7TEaKsmgYOIFW8g.png">The Contacts app looked like an address book. Maybe a little too much like an address book.
Given Apple’s strong embrace of emulative, graphical skeuomorphism, other companies followed suit. Soon, it would be hard to find an app that wasn’t resplendent in suede and PU leather.
But as apps hit “peak skeuomorphism”, designers started to feel differently. <a href="https://www.fastcodesign.com/1669879/can-we-please-move-past-apples-silly-faux-real-uis">Designers</a> (and even <a href="https://www.scientificamerican.com/article/apple-shouldnt-make-software-look-like-real-objects/">Scientific American</a>) argued that users had grown to understand UIs to a point where there is no longer a need to simulate physical objects. Perhaps powered by <a href="http://bearlondon.com/a/the-rise-and-fall-of-skeuomorphism">Google and Microsoft</a>, designers started to cut all the realism out of their applications and championed simplicity and cleanliness over simulation. Gradients and textures were kicked out of applications and deemed tacky. Even Jony Ive said that A<a href="https://www.cultofmac.com/246312/jony-ive-explains-why-he-decided-to-gut-skeuomorphism-out-of-ios/">pple’s realism was no longer necessary</a>. (Disclaimer: I work at Apple, and my opinions don’t represent the company or necessarily the opinions of the company.)
The UI/UX industry hailed the death of skeuomorphism and proclaimed flat design as the new king. In doing so, designers threw away principles that would help make their applications understandable, and conflated a mimicry of the real world with a graphic design language.
<h4>What is skeuomorphism, really?</h4>
At its core, skeuomorphism is the design concept that items should represent real-world objects. In UI design, skeuomorphism argues that users can better understand a UI element if it behaves like a real-world analog, because users live in the real-world. This is thoroughly <a href="https://www.crcpress.com/Usability-Evaluation-and-Interface-Design-Cognitive-Engineering-Intelligent/Smith-Koubek-Salvendy-Harris/p/book/9780805836073%5C">supported by cognitive science</a>. If you know how to turn on a light switch at home, you would know how to turn on a light switch on your phone.
Here’s what skeuomorphism is not:
<ul>
<li>A graphic design language. Skeuomorphism concerns conceptually emulating real-world objects. It does not require that objects look exactly like their physical counterparts — that’s just <a href="https://en.wikipedia.org/wiki/Realism">realism</a>. Furthermore, skeuomorphism can be present in anything from haptic feedback and sound effect design.</li>
<li>Outdated. While users might know how to turn on a light switch, at some point they needed to learn how. There are always users who are new to technology or new to a device, and light switches are still much more ubiquitous than iPhones.</li>
</ul>
As an industry, we have failed to divorce skeuomorphism from realist graphic design, and have discarded its benefits along unfairly. Yes, skeuomorphism and “flat design” can definitely co-exist. The linens and the textures we used to see everywhere were merely a visual expression of skeuomorphism.
<h4>The backlash has gone too far</h4>
One of Dieter Ram’s (in)famous <a href="https://en.wikipedia.org/wiki/Dieter_Rams#%22Good_design%22_principles">ten principles of good design</a> requires that design make a product understandable. Skeuomorphism is great for this. The backlash against skeuomorphism has pushed designers too far away from simulating the real world.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aFpOXWmVmTPBQuUbwb4f9g.png">Snapchat’s interaction and visual design don’t parallel the real world.
Let’s take a look at everyone’s favorite app from 2018, the new, “better designed” Snapchat. When first time users open up the app, they are greeted with a viewfinder, which signals camera functionality. Not bad! It’s all downhill from there (much like the indentation of this write-up).
Why is there a big circle in the middle of the screen? Why does trying to Touch ID in the circle record a video? Why do three dots represent “Stories”? Most importantly, why is does tapping the ghost in the corner take me to my user profile? Has opening Snapchat resulted in my death? Will anyone care?
Perhaps what Snapchat really needs is a dose of skeuomorphism. The camera button should behave more like a camera button. Stories should represent stories and not three dots. Tapping on myself, and not a ghost, should let me see my own profile.
<h4>The benefits of skeuomorphism</h4>
Here are some benefits of bringing some of the real-world back into your designs:
<ul>
<li>More familiarity. By making a control or interface behave (and perhaps look) like a physical counterpart, users can draw on previous experience to understand how to use the UI. The digital crown on an Apple Watch moves the arms of the clock on the watch face.</li>
<li>Better affordances. Visual and interaction designs in 2018 lack affordances. As a result, a lot of functionality is unintentionally hidden. (For example, the Android app tray in Oreo). To make up for this, designers often shove in UI-cluttering chevrons, icons, and animations, when a pull-tab may be more obvious.</li>
<li>Better feedback. The physical world generally provides a lot of feedback. If you’re in a car accident, you definitely feel it. Similarly, the haptic, rumble feedback in the Nintendo controller lets players know if they’re taking hits. <a href="https://material.io/guidelines/material-design/elevation-shadows.html">Material Design uses shadows and z-index animations to show that something has been tapped or selected</a>.</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/600/1*1UO8HjpbbH7u2hAa9N62KA.png">Android app trays used to have a big, textured pull-tab that users could pull like a drawer handle. Modern Android has hidden this behind a small chevron. While the prior looks outdated, it’s function as a pull-tab is much clearer.
<h4>Bring it back</h4>
Skeuomorphism comes in many different forms: graphic design, interaction design, haptic feedback design, auditory design, and so on. However, the desire to get rid of gaudy, realistic textures resulted in skeuomorphism getting thrown out with the bath water. As the backlash against skeuomorphism continued, UI designs became increasingly confusing and less self-explanatory.
While we, as designers, don’t need to bring back textures of 2008 to the current decade, we shouldn’t forget the benefits of benefits of bringing the familiar, responsive real-world into our designs. As much as suede was form over function, nondescript rectangles are form over function as well.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=2895308218ee" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/in-defense-of-skeuomorphism-2895308218ee">In defense of skeuomorphism</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

In defense of skeuomorphism

In defense of skeuomorphism

Top Stories