Anti-neumorphism or pro-neumorphism? Well, here is a better solution
Neumorphism is undoubtedly one of the hottest design trends in 2020. It has attracted an increasing number of designers to explore it on dribbble.com while many articles argue that Neumorphism is only a fleeting trend.
So how to apply the Neumorphism to real-world situations and how can it be adapted to better accommodate usability and accessibility issues?
First of all, designers should be cautious with the overuse of neumorphic design. Using a Neumorphic style on a large scale can be a usability disaster. neumorphic design should be applied to the right components in the right ways. It’s not uncommon to see designers apply neumorphic design to cards, but is it a good idea?
The card is one of the most important components in user interface design. It groups related information and clarifies the hierarchy. Cards are usually clickable, and users can swipe a cluster of parallel cards.
Cards in flat design
In flat design, Usually, the card itself is a link and there might be buttons inside it. Some cards can be floating, some are not. But they are all associated with three actions: click, move, swipe. And users can scroll when they are grouped.
Floating cards are casting shadows on the surface to indicate the distance. This shadowing effect is an affordance that gives a movable feeling to the cards, so users are more likely to interact with them, not just clicking, but also swiping or moving them.
Cards in Neumorphic design
Cards in Neumorphic design protrude from the interfaces. They attached themselves firmly on the ground. The light and dark shadowing effects on the sides indicate that they belong to the ground. Let’s come back to the three actions users can have with the cards in the flat design, cards in Neumorphic design can be clickable, but can they be perceived as movable and swipable (I created this word)? These two actions go against physics. We can’t swipe or move the components that stick to the surface.
The design should follow users’ intuition and avoid misleading or confusing users. So using neumorphic design on cards is not a good idea.
For the same reason, Neumorphism should not be used on the modal box and dropdown box. Both components only temporarily appear on the interface, they can disappear or moved with a single click or swipe. Neumorphic design will mislead people to perceive those components as something attaching to the surface and will stay where they are forever.
The biggest problem so far with neumorphism is its clinginess towards the surface. The protrusion instead of floating status disables many actions that can be done in the flat design.
But how about the other components?
By enhancing signifiers and affordances, Neumorphism might be an ideal remedy to solve the clickability and click uncertainty problem that flat design might have.
Flat design is an aesthetic style that doesn’t use any realistic or three-dimensional visual effects. When designers pursue a flat aesthetic, they often end up removing most of the signifiers (visual clues that tell users what’s interactive) from their interfaces. — nngroup.com
Applied to certain components, neumorphism has its strength. Simply put, neumorphism make toggle more like a toggle and slider more like a slider as well as other progression bar and buttons and this is stemming from neumorphism’s resemblance to skeumorphism.
The qualitative studies of NNG also point out that Flat designs lack needed cues. Those weak signifiers seemed a little bit less conspicuous and users are struggling with identifying them as clickable and tappable.
Flat interfaces often use weak signifiers. In an eye-tracking experiment comparing different kinds of clickability clues, UIs with weak signifiers required more user effort than strong ones. — nngroup.com
Being combined with colors, Neomorphism increases the findability of interactive elements. For it forms a strong signifier to make elements stand out and save users time to find and interact with them. Besides the interactive elements such as toggles and sliders, this is also true for buttons. In flat design, 3D shadows or layering effects are added to clarify the relationships between elements. And Neumorphism enhances those metaphors and principles.
As it has been said in many other articles, the main problem with neumorphism is accessibility. The components don’t have a proper contrast ratio with the background. That is because many practices of neumorphism design only use the shadows and subtle changes in transparency to differentiate components and hierarchy which don’t have proper contrast ratio with the background. To solve this problem, colors can be added to those components.
This new trend indeed brings freshness to the interfaces and spice up the experience. We need to be open-minded and get ready to embrace new changes cautiously. No matter what, being easy to use for everyone should always come first.
The dribbble shots in this article are just intended to better illustrate my points. I respect those designs as well as talented designers who created them. If your design is presented above and you are not comfortable with that, feel free to contact me.
