Hacker News new | past | comments | ask | show | jobs | submit login
Neumorphism in User Interfaces (uxdesign.cc)
145 points by amake 19 days ago | hide | past | web | favorite | 61 comments



> This shot by Dribbble user alexplyuto gained over 3000 likes and pushed the trend forward. [1]

That mockup is aesthetically pleasing, but from a usability perspective it's terrible: every UI element looks like a button. The progress bar (?) looks like a slider. How do users know which elements they're supposed to interact with? Why do we make the same mistakes over and over?

[1] https://miro.medium.com/max/3200/1*gza8htfpZ-5eDabA7_kTJw.pn...


This picture immediately reminded me of this optical illusion:

https://www.thehits.co.nz/media/7538347/untitled-1.jpg


That progress bar doesn't even make sense. For "cash available"? What kind of progress bar makes sense for that? Having available cash in some shitty company's account is not a goal you want to reach.

It is unfortunate that people focus on such superficial aspects of design, especially in UI design. When there's some trend showing up, you'll see countless people talking bullshit about aesthetics and how pleasing things look, and people get so wrapped up in it that they ignore any sense of usability.


Do you look at a thermometer and ask "Who thought a progress bar made sense for the weather? 130 degrees should not be a goal for climate change!" and try to shit on designers for ignoring usability or do you just read it as a meter to see what the temperature is?

Not every bar is a progress bar.


Your pre-existing balance is $100. You just deposited another $100, but it's not yet available. You have $100 available, so the "progress bar" is at 50%.

Not saying I think it's useful to show as a progress bar, but it's not abnormal.


> That progress bar doesn't even make sense. For "cash available"? What kind of progress bar makes sense for that?

Savings goal. Credit limit. Mortgage.

It would be badly named, but it's not completely stupid.


I interpret the credit limit label right below to be the label if the progress bar.


That's exactly what it is; off to the right it says "$220 / $1000", about 1/5th, which is where the bar is.


Is there a good, up to date source on the relevant UI/UX research? I went looking for some the other day and found a combination of opinion, dogma and unreplicated research.


My experience is similar, though nngroup.com has some reports that look like an okay research (though unreplicated as well). NASA's color graphics pages [1] seem to be based at least partially on research, contain further references, and generally seem good to me, but they are focused primarily on accessibility (and similar to WCAG). Searching for relevant papers on CiteSeerX, Google Scholar, and so on usually yields surprisingly little.

[1] https://colorusage.arc.nasa.gov/issues.php


Text contrasts (or, rather, lack of those: red on dark blue, light grey on lighter grey, dark grey on dark orange) are appalling too, as are the tiny font sizes. The website on which it is written has similar issues (and a sticky header in addition to that); it is rather strange to read about subtle differences in UI aesthetics while failures to show comfortably legible texts and indicate element purposes are so common.


Accessibility may be an issue as well. All those subtle shadows defining the ui elements are not clear to an older or limited vision audience.


> That mockup is aesthetically pleasing

No it isn't; I nearly puked in my mouth from looking at that.


I'm one of those weird people who's missed skeuomorphism ever since it fell out of favor. It had so much more charm than the soulless, flat interfaces we get these days. And honestly it was more intuitive too. The accessibility issues with this new style definitely need addressing, but given that I'd be excited to see things move back the other way some.


Indeed.

But there is another aspect besides the aesthetics.

I regularly witness that especially seniors using contemporary smartphone apps or websites have real difficulty telling information apart from interface because of everything being flat.

"Oh, this is actually a button – ...? – how do you know this?"

When my ma asks me this I don't have a good answer other than: "I just know.". Which is terribly telling from a UX perspective.

I studied UX at uni, many moons ago, when it was still called 'HCI' (human-computer interfaces).

Interestingly, how an interface was rendered was never of any consideration or part of the curriculum at the time. I wonder if it is today when people study UX?

In the 90's/early 2ks, when I was at uni, all interfaces elements on all OSs where somehow 3D. Except for menus. I guess that's why. It was accepted that mirroring a physical element, even if highly stylized, was the way to go.

But then there were also style guides for every platform.

While this is not related to the topic it is somehow connected. Best practices for any OS are regularly ignored for unified platform experience between the different incarnations of an app these days.

And so I often wonder wtf. happened to all the knowledge we accumulated in this field when I see contemporary apps or websites.

As for 'skeuomorphism' -- it still exists in it's best from (imho) from the early 2000s, in some modern apps. For example the Soundbrenner one comes to mind [1].

[1] https://www.soundbrenner.com/themetronome/

[edited for typos]


> And so I often wonder wtf. happened to all the knowledge we accumulated in this field when I see contemporary apps or websites.

Why not ask the graphic "designers" responsible for all these contemporary UI atrocities?

They'll tell you think you want skeumorphism, but really don't, so accept what they deign to build for you and be quiet


A few years down the line we'll see people experimenting with bringing in more textures and decorative details and then, hey, here we are back in the world of faux leather-bound planners and music players made out of jeans and whatnot.

And I, for one, will be delighted, because I've been tired of everything having to be flat shapes on bright white backgrounds for at least half the past decade.


The problem with all these crazy textures, drop shadows, and chunky buttons, is that they get tacky very quickly. While plain simple layouts are timeless.


People are going to misuse any design guideline -- that doesn't say anything about the guidelines themselves. Plain, simple layouts lend themselves to abuse just like textures, shadows and chunky buttons. The results are equally silly -- your average super-flat, plain, simple layout with flat, simple icons is as annoying to interact with as the tackiest Winamp skin you can remember.

Skeumomorphism has become this mythical beast that supposedly meant every interface was hard to use, cluttered and unintuitive. But we actually had a lot of very good, very useful interfaces back when it was a thing. In fact most programs written after GUIs became common enough had pretty good interfaces. Outrageous skins and things like Kai Power Tools were exceptions, not the norm.


> People are going to misuse any design guideline -- that doesn't say anything about the guidelines themselves.

I think it says a lot. Just like with diet plans, compliance rates are important in design guidelines. It’s not good enough to say “my guidelines are great if followed strictly” when no one seems to follow them strictly.


Both extremes are poor. One is tacky and distracting. The other provides very poor usability. IMO, Windows 95-era UI elements were probably optimal.


Nothing in nature is that flat or that simple. Millions of years of evolution have made our eyes adapted to look at things with texture. The idea of creating interfaces that only convey information that is needed does not mesh with human nature.

A good analogy for this is exercise. You would think that the more you use a machine the more wear and tear it will gain. Counter intuitively our bodies are designed to be used and are actually more healthy the more you use it.

Same with the world our eyes interact with. You would think our user interfaces should be minimal but our eyes are designed to work with noise. Flat interfaces don't really exist in nature and they should not exist in UI.

I propose a new design movement. Like the Paleo diet, I call it Paleo design.


> I call it Paleo design

Go for it. Come up with some rules + create some examples + market the hell out of it + charge for training classes = profit!


Arrows are artificial to the eyes. They never existed in nature. However, people have been recognizing hand signals for years.

Paleo design involves replacing all flat arrows with a photorealistic picture of a hand curled into a fist with the index finger pointing at the subject.

That's a free lesson in paleo design for you!


We've found evidence of bows and arrows from at least 60k years ago. I think that plenty old enough to qualify as "paleo" :)


Next, we'll be simplifying the hand down to a few strokes in a well-defined order, and...


Right, the optic nerve between the eye and the human brain has finite bandwidth. As a designer you want to minimize the information traveling across the wire to maximize efficiency.

An arrow represents the minimum amount of strokes needed to convey the needed information. I shall call this minimal form of design "minimalism!"


I don't think the discipline of computer user interfaces has been around long enough to say anything is "timeless".

I am sure people making advertising art in the 1950s thought their work was "timeless" too but from a modern perspective there sure is a distinct look; today's Apple-led "minimalism" will probably look just as archaic most of a lifetime later.


¿Apple-led "minimalism"?

IIRC apple were the last to get off the skeumorphism train. Microsoft's metro look was the first significant player in this round of the minimalist trend


I'm not convinced a design principle based off of a vacuum moulded plastic aesthetic is going to age well either.


People thought Windows 8 looked awful when it launched 8 years ago. It looks awful now.

People have been complaining about flat design since it got introduced, but entry level designers have been forcing it for a whole decade now all while users have been complaining about being unable to find out what’s even usable. It’s a timeless mistake, that’s for sure.


I don't want or need my UI to pretend it's a Nordic modern art museum. Seeing all that screen space wasted on huge margins, drop shadows, and glow effects makes me want to cry.

I would rather see more of the information I frequently need, or the controls I frequently use, without having to dig through page stacks and submenus to find them.

In cases where there isn't any more commonly-used stuff to display, I'd rather have text that can be easily read without squinting/glasses/giant phone screen, and controls that can be easily operated while riding in a vehicle.


This is why every actually-productive program ends up looking "ugly" - think Blender or any other 3D tool, or Emacs, or a well fleshed-out IDE, or a professional engineering tool. The screen is cluttered with dialogues and toolboxes, many of which can be customized and rearranged into precisely the tool you have in mind.

Consider, for example, that Word 6 for Windows 3.1 let you do more to customize toolbars and menus than the latest Office 365 does inside the browser. The market was for a professional, to some extent, before; Microsoft Works was the dumbed-down version for more casual needs. Now, it seems like that professional set of functionality is an afterthought for a lot of UX designers.

Then again, you only really need pro UX when your goal is to actually get your product working well for people that aren't good at discovering interfaces themselves. If your target market is used to hammering their way through ugly UIs and CLIs out of necessity, pro UX focused on the 99% might not be the best investment; being consistent in your choices to at least make results predictable is probably the best lesson to apply in its stead.


Full-on skeuomorphism and full-on flat design are extremes of the UI design spectrum, the real beauty lies between the two.

For more business-oriented applications I would personally still go for flat design, since it will always look more neutral and professional than the potential "let's have fun" skeuomorphic version.


Don't forget to also read from the same author "Neumorphism will NOT be a huge trend in 2020" https://uxdesign.cc/neumorphism-will-not-be-a-huge-trend-in-...


This article uses the spellings "neuomorphic" and "Neuomorphism" in places, which just highlights the fact that dropping the "o" was a mistake and obscures the origins of the word.


I thought for a second it was some sort of portmanteau of the German 'neu' and Greek 'neo'


FWIW there is already some push back on this trend in design circles. I just want buttons and form elements to look like you can interact with them again.


My personal pet-peeve is designers removing hyperlink underlines from everything. You can never tell what is a link and what it just plain text, sometimes hovering over it doesn't even activate any response. Links have underlines for a reason dammit.

Even right now above this edit text box, all the links at the top of hacker news (" psweber 8 minutes ago | parent | on: Neumorphism in User Interfaces ") have their underlines removed. Some of that text is links, some of it is not. How do you know which is which? Well you have to hover over them, one by one, to figure it out. It's a weird design trend that became such an annoying default rule.


> designers removing hyperlink underlines from everything

That's like getting mad at a high school student for sending a open letter to parliament asking to made dictator and them saying yes. Designers shouldn't even be in a position to make that decision in the first place and browsers shouldn't listen if they do.


There’s a relatively hidden option to re-enable this on iOS, at least; the “Button Appearance” Accessibility setting.


Why the push back? I'm not a designer but these look just as interactable as anything from Material Design


In the dribbble screenshot highlighted in the article, everything looks interactive. The UI looks like it's composed entirely of buttons, sliders, and spin wheels.

If a design goal is to make interactive elements seem interactive, and make non-interactive elements seem non-interactive, this has failed. It's bizarro Material Design.


The designs in this article are elegant, and functional. I think the most important lesson to be learned here is that you must think carefully about how your GUI presents itself to the user, and service the needs of the user as they go through the OOBE (i.e. first time user) stages ..

It is interesting to note also, that the rules exposed in this dialog are not exclusive to the web and DOM ideology, nor also to native UI abstraction/conformance. One could just as easily apply these principles to a real-mode UI framework such as plain ol' SDL.

If neuomorphism persists, will it become platform independent, and thus erode market-framework domination?


If you have safety, discoverability, and direct manipulation you have less of a need to turn a small flat piece of glass into a simulation of a physical control panel. Mobile device screens are a new medium. Do the things that free you from pre-smartphone thinking. "Flat" isn't a goal. Neither is realism. You can't wireframe direct manipulation (or even long-press, or multi-finger touch). So it is underutilized.


I think WinAmp was the worst skeuomorphic offender - could look cool but annoying to interact with. Apparent "WinAmp is back" is a thing...


They might literally mean WinAmp is back in the sense that Radionomy acquired it and restarted development.


I recently bought a software synth [1] with a UI along these lines just because I thought the UI was so pretty. It has a real Teenage Engineering [2] look to it. I think a lot of the most interesting, useful and beautiful UI work at the moment is happening in the iOS audio world, some of the soft synths I use are stunning to look at and incredibly intuitive.

[1] https://klevgrand.se/products/hillman [2] https://teenage.engineering/products


Biomorphism: https://en.wikipedia.org/wiki/Biomorphism

But yeah, why use an existing definition if you can reframe and score SEO points..


1. Biomorphism attempts to emulate nature. But "new"-morphism is just a slight deviation from the existing trend that (some) people seem to like. In my view it looks more like 70's sci-fi (or lo-fi if you're a hipster) which is also quite trendy at the moment.

2. There is no SEO benefit to a word that nobody is searching for. That is, unless it catches on.


What makes 70's sci-fi stuff lo-fi are just the recording/production artifacts of the time, the intention was hyper-modern, like you said, a deviation of the mid century modern/flat UI trend.

Remove the lo-fi artifacts and the result is just hyper-modernism, created by designers applying biomorphism while focusing more on shapes and depth.

Biomorphism is all about shapes and depth, and avoiding hard edges. It can come in many forms, for example forms that stem from stones shaped by water over millenia, caves that serve as inspiration for interiors, rounded hexagonal patterns that are inspired honeycombs for example, like in the Dribbble shot in the article.

Rectangular shapes in UI's are just a result of other shapes being unfeasible at the moment, but it's still biomorph where possible.


How about Compumorphic GUIs? Graphical user interfaces should look like they were drawn by a computer.

https://www.saatchiart.com/art/Sculpture-file-garden/391790/...

http://arts.siggraph.org/siggraph2011/artists/IanGwilt.html

https://www.academia.edu/524626/Compumorphic_Art_-_The_Compu...

>Compumorphic Art - The Computer as Muse

>Dr Ian Gwilt Sheffield Hallam University

>Key words: compumorphic art, art history and theory, transdisciplinary image

>Introduction

>In this paper I posit the idea that the term ‘compumorphic art’ can be used to describe an emergent collection of artists and artworks that reference the digital computer for creative stimulus, cultural commentary and aesthetic composition. The term compumorphic art can be thought of as a useful placeholder to describe the relationship between material art and inanimate/digital content in the context of the 21st Century technological/artistic experience. Furthermore, I will propose that compumorphic artworks may refer to not only the visual aesthetic of the digital computer, but often reflect or question the emotion values and ontological qualities we commonly assign to computing technologies. However, the rubric of compumorphic art is by no means resolved - in the provision of a definitive list of artists or artworks. With this in mind I will be describing two recent examples of my own art practice that sit under this term. The works described are concerned with the reconceptualisation of the Graphical User Interface (GUI), by reimagining computer desktop icons in material and hybrid media art forms.

>Biomorphism and antecedent movements to compumorphic art.

>There is an obvious and enduring tradition in human culture to reference the world around us. This is often undertaken as a means for communicating ideas, and accrediting notions of power, ritual and meaning, in an ongoing expression of the relationship between people and the places they inhabit (Feuerstein 2002:7). The term Biomorphism was coined in the 1930’s to describe the work of a collection of artists and sculptors who referenced the organic forms of nature in their artwork. This loosely formed collection included artists such as Barbara Hepworth, Joan Miró, Jean Arp and Henry Moore. The creative referencing of nature seen in the work of these artists frequently went beyond a simple retracing of organic shapes, and through abstraction, often explored the visual characteristics and forms associated with the organic (TATE 2011). We can still see this application of abstracted natural, curvilinear forms occurring in many of the architectural, industrial and product design artifacts of today.

>Around the same time the work of artists from the Futurist and Vorticism movements presented an alternative response to early 20th Century environs. Rejecting the natural form, these art movements were more concerned with the impact of the machine age on society and with visualising the speed of modern urban living (Lynton 1981:97). Together with the later ‘machinic’ forms and affordances of Paolozzi’s sculptural works from the 1940s, these creative works can be seen as forerunners to the notion of compumorphic art, in formal if not political terms. They represented a creative response to the technology of their times, demonstrating how the relationship between technology and society could be considered as an appropriate subject matter for artistic works.


Sorry for the late reply!

>How about Compumorphic GUIs? Graphical user interfaces should look like they were drawn by a computer.

Isn't that where where GUIs are coming from and somehow still the current state?


This tells me Apple did a lot of research on usability edge cases before using the flat look. This Neuomorphism thing needs some of that


So, bevel and emboss? What am I missing?


Old is new again :D


oh cool, unfortunately in 6 years they ll be back to flat again


What about the older design flavors? Isomorphism use to be popular but was replaced by epimorphism and a flavor of monomorphism. Bimorphism was sort of a niche trend along with homomorphism and endomorphism. If you didn't notice all these words are borrowed from concepts that already exist in math that are over 3 decades old.

Maybe I should just stop making up garbage vocabulary for my design ideas. Morphism is a well defined word in both math and computer science so if you want to give a name to a new design follow your old trend of calling something flat design or skeu design or neudesign rather then borrowing a word from a field that has way more legitimacy then a design idea concocted up by some designer last month.


The Greek word for "shape" has had a longer history than computer science. I'll grant you the use in mathematics, since it's difficult to talk about geometry without talking about shape, so it's highly likely that even people like Thales were using it back in the day.

This is the same thing as people insisting that "theory" as used in science has somehow been co-opted and misused by laypeople. The fact of the matter is that a word that has had a common meaning for a very long time has been narrowed and specialized in a specific field of endeavour, and that narrowed meaning doesn't somehow invalidate the older meaning outside of the field.


Nobody uses the greek word anymore. It is therefore invalidated. Morphism is currently used in things more fundamental than geometry, specifically category theory. Look it up on wikipedia, it's official. This medium article is far away from official.

What gets me is that some designer out of nowhere can repurpose the word because it sounds cool. Seriously nuemorphism? This is the inception of a buzzword, created literally for the purpose of "buzz."

I have a new word, it's called "buzzology." The science of stealing legitimate words from academic fields and repurposing them to make your new "theory" or "design" sound much cooler than just a drop shadow behind a box.


Deepak Chopra's got you covered.

https://rationalwiki.org/wiki/Quantum_woo

How about Quantumorphism? All of the buttons and labels have fuzzy blurry edges, and you can't tell if something is a label or a button without touching it, and the act of touching it changes it.




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: