A new term for an old design language.
*Warning, long read! There’s a TL:DR at the end!*
Who here remembers, or refuses to remember, skeuomorphism? The design language that ruled our screens before 2013, did more than just being a difficult spelling term. Use of felt, leather, and metal knobs in user interfaces was ubiquitous at the time, and although it seems tedious and antiquated now, it served its purpose very well while it was necessary.
A background on skeuomorphism ⏮
Skeuomorph: n. a visual element of a graphical user interface that mimics a physical object.
At the beginning of the rise of digital interfaces, computers were seen as high-tech, complex stuff that belonged in science fiction. Because of this, using a computer, especially for consumers, was an alienating and confusing task, and one which was portrayed as daunting and difficult. This is why the use of skeuomorphs was necessary at the time. Thanks to these visual cues, users were able to better understand and find affordances across interfaces. It was a lot easier to find a save button that looked like a disc than looking for whatever abstract illustration that may be used today.
For example, in early Macintosh computers, Susan Kare’s iconography made computing more approachable and friendly. As a result, the Macintosh was successful and known as the “computer that said ‘hello’ ”. Simple things that we take for granted now are in thanks to the use of a stripped down version of skeuomorphism.
Minor things such as a trash icon that resembled an actual trash can, and smiling or frowning glyphs pointed the user in the right direction. Skeuomorphism evolved even more in the post-pc era. Lack of physical, tactile controls on the device required new affordances to be present in order to make the user feel at home when using devices such as the iPhone. These skeuomorphs were present for the same reason they were present in the Mac — because without them it would be an alienating experience. In the wake of this, feedback from interactions also mimicked the real world, or at least what designers thought should happen in the real world. Digital buttons would depress just like real ones, the notes app featured lined paper with a marker font, the calendar app had leather textures and metal hinges, and iBooks had wooden shelves…You get the point, all of the graphic elements were designed to look as though they weren’t just on the screen. The metaphor used for interfaces was the world surrounding the screen. Without it, there would be no contextual elements for first-time users which, at the time, made up a large portion of users. Contextual elements allowed users to immediately understand what they were doing, regardless of their level of experience.
RIP Skeuomorphism 💀
Contextual elements in UI/UX design just aren’t necessary anymore. These days, people begin using devices such as computers, tablets, and smartphones starting at 4 or 5, and that’s pretty late for some. (I got my first iPad in the 2nd grade) As more and more people became accustomed to GUIs on mobile and desktop devices, the need for physical metaphors in graphical elements has slowly faded away. Metal knobs, felt backgrounds, and wooden shelves were pushed away in favor of gradients, clean lines, *shudders* long-shadows..you know the drill, flat everything.
Without the need for physical metaphors within UIs, designers got more creative freedom, this may or may not have been a great thing, but the old ball and chain had finally been cut loose. All traces of realistic features have disappeared, sinking behind translucent cards, and parallax wallpapers.
The need for skeuomorphism and affordances based on real-world objects has passed, and because of this, the need for our devices to mimic what we see in everyday life is gone. This is mostly because our devices have now become that real world, everyday life we were once trying to replicate. But, if you dig deep enough, behind the aforementioned layers of flat shapes, bold typography, and minimalist palette; you’ll find tiny remains of the skeuomorphs which had been left behind. New metaphors, interactions, and affordances that have given rise since the fall of skeuomorphism. I call them, *drumroll* “Newmorphs”.
Newmorphism? Who’s she?
Newmorph: n. an artifical affordance in a graphical user interface that makes the user feel like they’re using a physical object.
Feedback in UI design has changed a lot, espescially due that extra freedom we now have in creating metaphors behind simple interactions. What once had to replicate real-world objects has been replaced with new ideas, like ‘quantum-paper’ or devices that tap you when you get a message. The way I see it, newmorphs are like micro-skeuomorphs, where they still are in reference to physical objects that came before but are repurposed for new usages.
Paper, Shadows, and Natural Animation
One very prominent example is Material Design. I’ve had a love-hate relationship with Material Design, or rather with the people who misuse it, but what it seeks out to do is very cool. My favorite part of Material is Google’s creation of new interactions. Newmorphs found in Material include associating physical materials with the elements on screens. Shadows, hierarchal layering, and responses to users’ responses are what make Material special.
The Google Design team described shadows and layering of elements in their ‘Making Material Design’ videos as a way to provide users with context of what’s more important within the interface. Buttons that are ‘higher’ than other elements are immediately seen as more prominent. They took a lot of design philosophy into account when crafting the system. One example of this was realizing that when interacting with the device, there’s a gap between the user’s finger and the elements on the screen, separated by a few millimeters of glass. So when users touch an element, the element, attracted to the user’s finger like a magnet, raises and a touch ripple goes across that element. This is a change from how designers used to approach interfaces. It provides users with greater context of the app they’re using, and although the user can still use the interface without these affordances, it’s a lot nicer with them.
Smartwatches and Voice Assistants, necessary Newmorphs
The Apple Watch, released in 2015, was a new space for Apple, and in a way, it forced them to revert back to their skeuomorphic practices. Different inputs such as the Digital Crown made physical references to a software experience. The crown, combined with ‘taps’ from the vibration motor, created a more seamless experience for the technologically literate, first-time-watch-users.
This kind of affordance, of subtly incorporating real world mannerisms, is found in voice assistants such as Alexa, Siri, and Google Assistant. We are now talking to an artifical person to turn on our lights, learn about the weather, and hear jokes. What’s become more and more interesting is the way people have begun to think and talk about their new assistants. In many cases, users will refer to Alexa and Siri as a ‘she’ as opposed to an ‘it’. The connection between a virtual assistant and a real person is almost like a skeuomorph in the sense that it makes talking to a computer seem normal. With chatbots gaining traction in the world of technology and design, this newmorph that makes communication with the software more approachable and seamless. But they’re still computers… I think.
Okay, so you just labored through 1200 words on what UI/UX used to be like, and how it’s history still shines through some of our newer, refreshed practices. But, how does any of this help us and how can we use these so-called Newmorphs to our advantage? Here’s what I think. Although there’s no longer a need for users to see literal cues in their everyday interactions, taps on the wrists, quirky illustrations, and buttons with reactive shadows don’t hurt the experience! When a little goes a long way, small, unobtrusive references can make the difference between a task and an experience.
I would love to hear your thoughts, and how you think this kind of design will grow in the future.
Thank you for reading! You can keep up to date with my work on dribbble and check out my site, KudosWall!
Should you say 'please' and 'thank you' to your Amazon Echo or Google Home?
When you're asking a digital assistant to do something for you, do you say "please?" How about "thank you?" It's a…www.theverge.comSkeuomorphism 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…www.interaction-design.orgMake Your iOS App ‘Feel’ Better — A Guide Over Taptic Engine & Haptic Feedback
Update: Checkout my open source framework, Piano. It makes using the Taptic Engine much easier, allowing you to create…medium.com