Neumorphism Shows Accessibility Is Still a UI Afterthought for Some
It was the embossing effect heard ’round the digital design world. Ukraine-based UI/UX designer Alexander Plyuto uploaded in November a nifty-looking banking-app prototype design on Dribbble, the digital design portfolio platform. He described the style as an evolution of skeuomorphism, the largely out-of-vogue design concept in which digital representations realistically mimic the look and texture of the thing being represented. (Think Apple’s old Newsstand, which looked like a wooden shelf.)
Plyuto essentially blended a bit of old-school tactility with the flat minimalism that dominates contemporary app design, and the mix struck a chord. Commenters on the post — which has racked up more than 300,000 views and 4,800 likes — were particularly taken with the ultra-low-contrast shadows, which made buttons appear as if they were emerging organically from the app’s background.
The style spread further when Poland-based UI designer Michal Malewicz, of HYPE4, designed a prototype in the “new skeuomorphic” vein in front of a live audience at the studio’s Do Good Shit conference, then mused about the results in UX Collective. He also christened it: Neumorphism.
Yet even as Malewicz brought the trend closer to primetime, he immediately laid bare its flaws.
“The funny thing is that, in my very first post, I specifically said that it’s not good for every possible UI element,” Malewicz told Built In. The foremost problem is accessibility, specifically the fear that users with visual impairment could have a very hard time recognizing those pretty, beveled buttons as buttons — since they’re so of a piece with the background.
There are aesthetic limitations too.
“It’s not only accessibility; when we overuse something that’s very monochromatic, if you make every element in that style, the app is basically one color,” Malewicz said.
In fact, the whole neumorphism debate served as something of a petri dish for a whole host of ongoing UI discussions. We talked with Malewicz about how the micro-trend shined a spotlight on accessibility concerns, the cyclical nature of digital aesthetics, the need for a more centralized style guide, and the importance of developing mixed skill sets in UI and UX.
Keep Accessibility Front of Mind
On his blog and in our conversation, Malewicz floated a prescription for the neumorphism-curious: Try the aesthetic in app cards, but keep it away from buttons.
“If you maintain a proper hierarchy of elements [in cards], you’ll be able to understand it right away,” he said. “If you’re able to remove the neumorphic card from underneath the actual card layer and still see where things begin and end, then neumorphism is great.” (See a visual breakdown here.)
But for essential elements, like buttons, the lack of clarity is a deal breaker. Users who have visual problems or users in developing countries who rely on older, low-contrast, low-screen-quality phones would have trouble differentiating.
“You don’t know if something’s a button or just text or if it’s in a pressed state or an active state — it looks the same,” he said. “For those people, it breaks the entire experience.”
The fact that Plyuto’s design gained semi-viral traction before such accessibility issues were raised illustrates that it needs to be more front-of-mind among digital designers, according to Malewicz.
“It’s good that all this happened because it showed that accessibility is still under-appreciated, and a lot of people don’t even consider it at all,” he said.
Of course, plenty of digital designers use platforms like Dribbble and Behance to gather feedback on still-germinating ideas rather than only showcase finished products. And such accessibility concerns would hopefully be fine-tuned as prototypes graduate to actual products. But the neumorphism debate shows that UI “sandboxes,” as Malewicz characterizes Dribbble, can sometimes encourage aesthetics that don’t prize accessibility — and designers should be vigilant of that.
“When you look at Dribbble designs, I’d say 80 percent don’t pass the WCAG [Web Content Accessibility Guidelines] at all,” Malewicz said. “People are just not considering it.”
He points to form designs on British government websites as a good example of prioritizing usable interfaces over merely pretty ones. “They have very strong thick borders on forms and everything is easy to understand,” he said. “The contrasts are very high but not so high that it’s an eyesore.”
The contrast is high compared to what you’ll find in the sandbox too.
“On the other hand, you have so many Dribbble dashboards and login forms with very light borders in text fields,” Malewicz said. “They can be difficult to see even for people without vision problems.”
Added Malewicz: “But [the discussion] is bringing accessibility back to the forefront, which is very useful.”
Toward a unified (but creative) structure
Beyond accessibility, for Malewicz (left), the neumorphic moment is a case study in how digital-design watchers risk getting swept up in presentation before practicality. As he sees it, in lieu of more formalized, industry-standard guidelines, the UI community sometimes runs ideas through the discourse until the negative aspects fall away and we’re left with what works.
That’s basically what happened with neumorphism, and the process seemed to run effectively enough. But, Malewicz argued, it would likely run smoother if the industry adopted a rigorous agreed-upon framework — a UI style manual, if you will.
“In many cases, the UI knowledge we have is very spread out, and there’s no real place that brings it all together,” he said.
There are organizations like the World Wide Web Consortium, which publishes the WCAG, that offer practical advice on web accessibility design. And the Department of Health and Human Services’ usability.gov site is a well-known resource repository, as are company-affiliated ones like Apple’s Human Interface Guidelines and Google’s Material Design.
“But UI itself, and especially UI trends, it’s basically a free-for-all,” he said.
The question becomes how to lay that bedrock without stifling creative juices.
“There needs to be more structure, but in a way that still spurs creativity,” Malewicz said. “There are so many nice things to come that we can’t even imagine yet. But there needs to be structure to begin with.”
Especially for developing designers, that lack of structure can foster an echo chamber of popular styles, risking calcification similar to how “the Instagram look” ossified into cliche.
“A lot of young designers fixate on popular profiles and don’t consider much beyond [having] nice artwork on their profiles,” he said. “But hopefully this will bring some discussion and some new context that is more structured.”
Malewicz refers back to Plyuto’s ground-zero design, where he noticed a usability gaffe beyond questionable visual clarity. Instead of a back arrow that users would tap to move backward in the app — as virtually all apps have — there was a toggle that they’d shift left. “It made me laugh, but everybody was still so obsessed with how nice it looked [overall],” he said.
Malewicz raises the example not to drag Plyuto, but to diagnose a larger chronic shortcoming within digital portfolio communities: “We need to look beyond the pretty picture,” he said. “See the interface.”
At the very least, an updated literature might be in order.
“A big problem in UI is that there aren’t really many books that are purely UI-related that are in any way modern enough,” he said. “The few that exist are at least 10 years old.”
UX & UI Need to Inform Each Other
If concern over Dribbble artists sidelining usability or a congenital lack of structure sound like new verses in a familiar old song, Malewicz agrees. Even though digital design principles are framed as a UX/UI symbiosis, the forward slash between those abbreviations sometimes feels more like a barrier than connective tissue.
Yes, the neumorphism saga saw (some) UI folks dismissing UX, but it fits a pattern that runs both ways, according to Malewicz. He feels strongly that if designers are to develop truly mixed skill sets, UXers need to collectively overcome any residual condescension directed at UI.
“The perception of a UI designer is almost like a kid with a box of crayons, who paints whatever the smart people in meeting rooms come up with,” he said. “Every UX designer should know UI enough to be confident to make and show the rest of the team a screen — one that would only need a few tweaks by somebody who’s better at UI.”
Lean on the expertise developed by UI designers, especially when building standby elements that have long-established best practices associated.
“In UX, we know a lot about making good flows for registration logins, dashboards, profile pages, things like that,” Malewicz said. “Of course there’s still a need for completely new products, but most products use the same dynamics and elements. And they’re already pretty good.”
Recommit to Quality Assurance
It’s clear from our conversation, and from Malewicz’s post-mortem blog dissections of his own and others’ neumorphic designs, that he’s a stickler for details. To that end, he’s a bit worried that the attention garnered by the trend might lead observers to simply characterize the Great Neumorphism Debate of 2020 as a healthy critique that improved upon early rough drafts.
That did happen, at least if folks stay as rigorous as Malewicz in applying or rejecting neumorphic precepts. But it risks undercutting a scarier truth: too often, the bad stuff still slips through the cracks and onto our smart devices.
“Aside from major apps — Uber, Airbnb, PayPal, things like that — startup apps in particular, especially ones that don’t have huge funding, most of those UIs are really bad,” he said.
“We have so much knowledge, inspiration and good practices, but there’s still just so much bad quality out there.” Banking apps, which sometimes sport misaligned buttons or off-center text within buttons, are common culprits, he said.
The industrial UI of tech hardware could use some tightening too. Malewicz recalls comparing the difference between the bottom of the iPhone 6 and Samsung’s counterpart model. “The Samsung had all the ports and all the speaker grills and everything randomly placed wherever it would fit. And Apple had it perfectly in the center in one symmetrical line. Polish even the non-essential details,” he stressed.
Malewicz hopes the neumorphism saga points more attention toward a larger discussion of quality assurance.
“A lot of UI is just having a good enough trained eye to know where to place rectangles so they look nice together,” he said, self-deprecatingly, of grid layout structure. “It’s not rocket science, really.”
“But the issue is that people get either too excited or too negative about stuff instead of trying to focus on delivering the highest quality,” he added.