Neuomorphism — A passing fad or is it here to stay?
I was searching for design trends coming in 2020 and came across a term that has been used on multiple design platforms — Neuomorphism. I looked on dribble for it and my first thought was, this looks amazing!. The keyword here is “LOOKS”, we’ll get to it in a while. Now what is this Neuomorphism and why is it hailed all over the internet as one of the biggest UI trends of 2020?
Neuomorphism (or Neo-skeuomorphism) is a term coined by Michael Malewicz. Its a modern iteration of a style of designing web elements, frames, screens, etc. known as Skeuomorphism. The feel of it : Flat but realistic. In detail : Soft transition between UI elements (buttons, cards, input fields, graphs, boxes, etc) and background.
How is it different form the good old skeuomorphic?
To simplify, Skeuomorphism = Apple before iOS 7
Skeuomorphism as a word and a style was highly popularised by Apple in the design of their products. Their app icons, logos, visual elements were very realistic and imitate real world items, they are also highly detailed to make the user experience more personal. Later with iOS 7, came the paradigm shift that changed the game completely and the flat UI was adopted throughout the apple ecosystem. Neuomorphism, I would say is the love child of good old skeuomorphic and flat UI.
The “Neuo” Visual Style
If we have a closer look at this visual style, we’ll find that many of the old elements that characterised its predecessor has been stripped down to the minimum. There is that 3 dimensional feel to it (protruding buttons, inner shadows etc.) but its subtle.
Colour
Mostly pale colours are used for the surfaces; colours with low chroma and observable close to whites, beige or soft greys. Also, gradients are only employed as close colours to each other or to drive interest to specific sections of the design.
Visual Representation
Neuomorphism makes use of very subtle effects and does not represent objects in the real world as is (in case of skeuomorphic).
Effects
Rather than using the extreme realistic effects, it uses very accessible effects to HTML and CSS, like Double Drop shadows, Gradients, Fill, Stroke and in extreme cases Inner shadows, all of which can be achieved in their natural code forms by any developer.
Programs to use
All contemporary visual design tools such as Adobe XD, Figma, Sketch, Photoshop etc. are capable of making neuomorphic elements.
The Big Question — Is it practical?
After scrolling through thousand times on design forums and dribble shots, i was convinced that this style is not very practical and has various accessibility and usability issues.
Neuomorphism in its truest form fails when comes to cognitive, physical and visual disability, let’s find out why.
Visual
When we design a button with an important CTA, we often consider and take note on the contrast ratio to make it stand out, as well as easily readable on the page. However, with Neuomorphism, there’s no such thing as contrast ratio, because the button IS the same material as the background. The only thing that separates them is the angles and a variety of soft shadows.
Cognitive
Objects with shadow are often highlighted more as compared to those without. But with Neuomorphism, most of the elements float and stand out, competing with one another on a single screen. It’s much harder to perceive the exact hierarchy in design, which then leads to the screen lacking a proper focal point and thus, creating confusion in eye tracking. Missing hierarchy on the screen has a significant effect on the user’s decision-making process. Therefore, with multiple actionable items but missing the design hierarchy and focal point, it creates a barrier that hinders understanding for users to comprehend what’s happening on that screen which may result in confusion and poor judgment. A good UI/UX doesn’t require users to think.
Physical
What is “Selected”?
What is “Clickable”?
What is the “Hover” state”?
What is the “Focus” state?
Is this “Disabled”?
The questions are endless!
Since Neuomorphism plays around with various shadow tones and angles, one can’t help but wonder where the fine line between what is clickable and what is not. Every product that applies Neuomorphism could have their own rule of UI stages depending on the product’s function and requirements; but with the different levels of shadow, angles, and float level, Neumorphism creates confusion for users due to lack of consistency, disoriented actionable items which ultimately creates a physical barrier for disabled users.
My two cents
While this new trend is making designers very excited and is a visual pleasure to the eyes, it’s not very practical in the real world scenarios. This trend started at dribble in december 2019 and since then, shots after shots of beautifully crafted UI screens and app designs are added on the platform on daily basis but if we analyse carefully, they have huge accessibility and usability issues.
I am still not convinced that this is going to be the next big thing of the digital world but if you think otherwise, do not hesitate to contradict me in the comment section.
To answer the question in the title if its just a passing fad?
In my opinion, IT IS!
