Skeuomorphism and Neumorphism

 

recycle bin

Why is there an icon that looks like a trash can or recycle bin on your desktop? Are you actually “recycling” a deleted document or photo? Would a shredder make more sense?

Word saveWhy does Microsoft Word still use as an icon to “save” a document an image of a floppy disk that no one uses anymore and that most people under 21 wouldn’t be able to identify?

It is skeuomorphism which is an interface design theory that mimics real-life. In graphical user interface (GUI) design the term describes interface objects that mimic their real-world counterparts in how they appear and/or how we interact with them. If you want to “cut” rather than delete some text, you might click a scissors icon – though there are no scissors involved at all.

The idea goes back to the earliest digital tools that appeared on the first personal computers and in programs loaded from floppy and CD disks. It carried over when all of that moved into the online world. Skeuomorphism makes interface objects familiar to users by using images or actions they will recognize.

When I first taught classes on how to use PhotoShop, I always explained that many of the terms and icons used in this “digital darkroom” mimic the real-world tools we used in the actual darkroom to do things like burn (intensify) or dodge (eliminate) the light from the photo enlarger to the photo paper below.

A discussion of skeuomorphism will also get into affordances, which is a term used to refer to action possibilities of objects or other features of the real world. Common examples of affordances include door handles and push-buttons. Their physical designs inform users that they can be rotated or pushed. A properly designed door handle that should be pulled should suggest that action, and a door that should be pushed should have a physical design that suggests that action. Adding a sign that says “Push” is a lazt=y cheat. A handle suggests that you pull a dor while a metal plate suggests that you push. One belongs on one side of the door and the other on the opposite side.

There are affordances in digital user interfaces. The early Apple computers and iPhones used a lot of skeuomorphism. Buttons looked like something you could push – even though you actually clicked them. Photos might have old-fashioned white borders or 3D edges that looked like physical photographs.

But we have been using these digital tools ten to forty years, so is this skeuomorphism familiarity necessary any more? Are these digital objects relevant to generations of digital natives? Do they clutter the user interface?

Thirteen years ago, people were talking about the death of skeuomorphism. Apple, Google and other big players were opting for a new approach called flat design that was “cleaner” with no beveled edges, gradients, reflections, etc.

In fact, a new kind of morphism has risen – neumorphism. (“Morphism is a concept found in math, biology and other areas that generally means an abstraction that generalizes a way to map from one object to another.)  Some designers are saying that neumorphism will be an important design trend for the 2020s.

Neumorphism doesn’t try directly to imitate lifelike objects and tools. It combines skeuomorphism and flat design. Those things you see on screen should be lifelike enough to be intuitive, but still be based in the virtual world. Visual clarity is key.

Skeuomorphism has been a useful design concept that fell out of favor. But it isn’t gone. That floppy disc icon is still there. We still open directories by clicking something that looks like a manila folder.

In the 1980s, Steve Jobs at Apple was a fan of computer interfaces that were intuitive to users with skeuomorphic design. But some designers think that though it helped people up the digital learning curve, it’s not needed anymore. At the end of his life, Jobs began to embrace flat designs without those beveled edges, and reflections because they were cleaner and less cluttered.

clock face

Sometimes skeuomorphism comes back when we move something analog to digital. One example is the Apple Watch and the many Fitbit and other smartwatches that are far beyond the digital watch of the last century. I’m not surprised that my 2020 automobile with all its screens, WiFi and connections to my smartphone offers me the option to change those digital numbers to the familiar but old-fashioned circular clock face. (Many watches offer such options too.)

Watches have always been a fashion statement on the higher end and smartwatch makers have also embraced that. They brought in tech designers but also high-end traditional watch designers from companies like Rolex, Tag Heuer, Breitling, Patek Phillipe, etc. knowing that their digital versions would be on the high end of purchases and people would expect fashion as well as function.

A smartwatch does tell the time, but that’s pretty far down on the functions list. This has also become true for smartphones. The ability to make a phone call is not the top use of a smartphone. So, should a designer treat a phone or watch as a phone or watch or as a computer in your pocket or on your wrist?

 

 

 

Current Trends for Designing Your Website

If you are designing or redesigning your website now, you should look at some of the current design trends.

Responsive and flat design have both been trendy in the past year, but plenty of older sites have never upgraded. If these terms are unknown to you, that might be a reason to hire a designer! But put simply, flat design is a style with minimum use of  elements meant to give the illusion of three dimensions. That means not using drop shadows, gradients or textures, and employing simple typography and flat colors. Designers like flat design because it allows interface designs to be more streamlined and efficient.  The current version of  the CondeNast.com site is a nice example of flat design. (More on responsive design)

Lack of updating is also a cause for not having a real mobile alternative for your site. That doesn’t mean just that your site can be viewed on a mobile device – any site can be viewed, but does it work efficiently on that platform? This requires a completely different view of the site.

This graphic from Coastal Creative shows 8 trends they expect to influence designs this year. Not every one works for your site. For example, the “cards” design is very popular, but it’s not for all applications.

 

 

Source: 8 Design Trends You Can Expect to See in 2016 | Red Website Design Blog