How to use Neumorphism without alienating your users
❓ What is it?
Neumorphism is a design trend that has been discussed and written about since the tail end of 2019 but, so far, it seems to be a trend that exists pretty much exclusively on Dribbble.
It’s a nod to the Skeuomorphism of the early 2000s. However, instead of going full blast and literally illustrating a bin or a filing cabinet icon it brings a subtle physicality to elements with shadows and highlights. Kind of like Material Design… but not.
Read: Skeuomorphism / Neumorphism UI Trend by Masterpicks
🤷♀️ So, why write about it now?
I hadn’t included it in my blog listing trends to watch in 2020 because I didn’t (and still don’t) see that it provides any benefit for users. It feels like a trend geared more towards designers rather than users. But you know what, there shouldn’t be anything wrong with that. Designers should be free to make inspiring new things and not get stuck in a design rut.
It has been sitting with me since writing my trends post because it’s just well… too pretty to ignore. Perhaps by looking at its pros and cons it might become clearer where and how it can be used to bring maximum joy to the designer without losing the user.
Read: Neumorphism will NOT be a huge trend in 2020 by Michal Malewicz
✅ Pros
The softening effect it creates with potentially complex content makes the brand appear more friendly and approachable. Tobias Van Schneider recently wrote about the “Kawaiization” of product design in a really cool article that I recommend everybody reads. In it he talks about the “psychological power of cuteness” and how it might be the next evolutionary step away from stark minimalism. Perhaps Neumorphism, done in the right way, can help to achieve peak cuteness.
This example showcases subtle shading and 3D character design to bring to life an interface mock up illustration.
Tobias Van Schneider
Dark mode is a trend that I am completely on board with. I love that it gives a bit more drama to designs and it’s always a good thing to give users the ability to decide how they want content to be displayed. However, it can look kind of flat so styling some elements with shadows and highlights is a great way to add depth and more visual interest.
Filip Legierski for Riotters
Bizarrely, the biggest thing it has got going for it is directly related to some of its major cons (see below). The fact that it still only really exists inside the Dribbble bubble means that it’s still fresh and new. It’s inspirational to look at because it hasn’t been done to death yet.
Read: The Kawaiization of product design by Tobias Van Schneider
🚫 Cons
The overwhelming con with Neumorphism is the potential for creating accessibility issues with interface designs. The use of a shadow or a highlight is unlikely to provide enough contrast to meet accessibility compliance. It may look super slick but if it alienates users then it is not good design.
“We all love the “pretty” but we also need to remember for it to be usable by everyone.”
Putting accessibility to one side, even users with 20/20 vision may miss UI elements that rely on extremely subtle styling. For example…
Invision
The button on this banner call to action is classic Neumorphism and would certainly be an accessibility fail. However, the subtlety of the button is counteracted by making the whole banner clickable. As soon as the user rolls over the banner they can see that it’s interactive and the minimal content makes it easy to understand what the call to action is even if it’s not immediately obvious. If it was on its own or viewed on a touch device though it may have been lost entirely.
Combining the subtle border shading with other visual cues can help to avoid an accessibility fail. This example below uses a coloured icon to provide the main visual indication between active states. The shading is extra. It won’t help users with low vision or with the sun glaring on their screen but it won’t hurt them either.
Neumorphism in user interfaces
Clear hierarchy is a key digital design principle that can drastically affect the way users perceive content. To make sure we draw the user’s attention to the content they need to see designers need to apply careful use of colour, weight, size and positioning. If Neumorphism does take off then it should also be added to that list. When shading is added to every element it becomes unclear what the primary content is and what the interactive elements are.
Smart Home Application by Arun PP
As you can see in the example below, when shading is used in combination with many colours the effect becomes muddied. This suggests that it should be applied with caution when displayed alongside data visualisations or other instances where clarity is crucial.
Banking App by Mikołaj Gałęziowski
Most examples I have seen rely on fairly muted backgrounds to allow the shading and highlights to stand out as much as possible. The example below shows how it could appear against a bold background colour choice.
For brands with highly saturated colour palettes it may not be an appropriate styling choice. This is a matter of taste though… for me it loses something in the highlights while also diminishing the impact of the colour.
neumorphism.io
Check out: Neumorphism.io to see how your brand colours would look with Neumorphic UI
Read: Neumorphism in user interfaces by Michal Malewicz
Read: Is Neumorphism really 2020's hottest design trend? by Jim McCauley
👩💻 Final thoughts
I’m still not convinced that this is going to be a serious trend that will be used widely on real-world projects. It also doesn’t seem like a strong enough style that it can stand alone, especially if it is used in lots of projects. Everything, as always, will start to look the same. Neumorphism should be combined with another style or device to make sure individual brands can still stand out.
However, I feel there are ways it can be used sympathetically to the user. If you can remove the shaded element of your design and it does not affect the user’s understanding of the content or interaction then go for it!
Just leave the buttons alone please. 👍