Thoughts

Is there hope for Neumorphism?

Poor implementations of Neumorphism may be unusable for people with visual impairments, but by following some of these guidelines, it’s possible to avoid those pitfalls.

by Sam Vitale Kofman

There are few things that designers love more than new trends: they love to love them, they love to hate them, and they love to debate them. The hottest trend of 2020—”Neumorphism”— is no different, and has been attracting attention since its discovery earlier this year.

Fig 1 - Alexander Plyuto rendering

Origins of Neumorphism

As with many trends, it’s difficult to put a time-stamp on the inception of Neumorphism. One writer attributed it to Dribbble user Alexander Plyuto who published this piece in November of 2019 (Fig. 1). The sleek, “high fashion” design immediately gained momentum, accumulating over 4000 likes in just a few months.

The etymology of the word itself also hints at its origins—a portmanteau of “new” and “skeuomorphism.” Skeuomorphism is (was?) a trend that has become synonymous with early iOS interfaces; it’s an aesthetic that mimics the three-dimensional world by relying on effects like bevels, shadows, and highlights. Vestiges are still visible today in places like your desktop trash bin which looks—well, like a real trash bin.

Neumorphism borrows from this aesthetic, but in very specific and recognizable ways. Let’s take a look at some of those characteristics.

Hallmarks of Neumorphism

Also termed “soft UI,” Neumorphism is easily recognizable. Subtle shadows of light and dark combine with a monochromatic color palette to afford interfaces an almost plastic look, as if the elements have been extruded from their background. (Compare this to Material Design, which acknowledges a three-dimensional space by having elements hover over their background.) There are a number of resources that help designers achieve Neumorphism, like Michal Malewicz’s article, Neumorphism in User Interfaces. Developers have even started preparing for technical implementation by creating CSS generators.

Fig 2 - Comments from other UXers

The Controversy of Neumorphism

Few designers have dismissed Neumorphism as being unattractive, but many have voiced their concerns regarding its usability. Take, for example some commenters on Michal Malewicz's Medium article. One contributor claimed that it was “just another stupid trend”; another accused it of violating “the roots of design philosophy.” (Fig. 2)

These critiques seem dismissive. The reality of Neumorphism lies somewhere between the praise of zealots and the vitriol of haters. As with many design trends, its most effective implementation occurs when it is used in conjunction with other trends. In this article, I’d like to take a nuanced approach to its evaluation to uncover how it should (and shouldn’t) be used.

Neumorphism and Confusing Affordances

In 1966, psychologist James Gibson coined the term “affordance” to refer to the actions that are possible with a given object. For instance, a staircase “affords” the ability to either ascend or descend. Later, design authority Don Norman expanded the definition to include “perceived affordances,” which refer to actions that a user thinks are possible with a given object but may, in fact, not be. Ignoring these perceived affordances makes for poor, unusable designs. It is also the primary criticism of Neumorphism. Let’s take a closer look with an example.

Fig 3 - Example offering little perceived affordances

Buttons in user interfaces demonstrate the concept of affordance well; designers use effects like bevels, drop shadows, and color to encourage users to click on them. But because of the low contrast inherent in Neumorphism, these cues are largely lost (Fig. 3) and users, especially those with visual impairments, don’t know what to do. Is that item clickable—or isn’t it?

Fig 4 - Fordham adds border to increase affordance

Improving Neumorphism:

The obvious problem in the above design is the lack of contrast, but how do we address this without disrupting the softness of the overall style? Some designers, like Michael Fordham, have suggested adding color to other elements of the button: text, borders, and icons. In order to maintain the three-dimensional awareness of Neumorphism, we also need to demonstrate a depressed button; use the color system we just established to make these states clear. You can play with Forham’s example.

This may be a usability improvement over the previous example, but many would argue that it is far from ideal—and perhaps that it has even lost much of the original appeal.

The Real Solution

If we’re honest with ourselves, we like Neumorphism because it looks pretty. It’s an aesthetic movement, not a UX movement. For that reason, its use ought to be restricted to the aesthetic aspects of an interface—elements that are “extra”—not crucial to understanding, meaning, or function.

Fig 5 - Balancing the neumorphic aesthetic with a more usable button

Instead of trying to pigeon-hole elements like buttons and switches into Neumorphism, designers should be preserving the ways these elements already work. In this way, they can use Neumorphism to complement already usable designs in non-invasive ways. The example above demonstrates one way this may be accomplished using Neumorphic cards.

Final Thoughts

This article isn’t intended to dissuade intrepid designers from experimenting with Neumorphism. By all means, explore! Push limits! Try things! But be mindful of balancing pretty aesthetics with accessible user experiences. If you don’t trust yourself to straddle these responsibilities, here’s a simple litmus test to ensure you’re on the right track: Look at your design. Now imagine someone can’t see the Neumorphic component. Is the design still usable? If it is, congratulations, you’ve implemented Neumorphism effectively. If it’s not—if your button loses its affordances, for instance—then consider employing a different design approach--and employ Neumorphism somewhere more innocuous.

So, is there hope for Neumorphism? Yes, I think there is--so long as designers aren’t reductive about it. Like all trends, Neumorphim isn’t “good” or “bad.” Instead, its value is relative to context; poor implementations of Neumorphism may be unusable for people with visual impairments, but by following some of the guidelines I propose here, it’s possible to avoid those pitfalls. At the end of the day, if you can use Neumorphism to make a design look fresh and shiny without harming usability, then I think you’ve earned the right to say, it’s “neu and improved.”

We'd love to keep in touch!

Opt in for occasional updates from us. Privacy Policy