UI, UX, CX and HX. The Differences?

UI design

Image by William Iven from Pixabay


The abbreviations UI, UX, CX and HX are used in design (especially web and app design) and are often confused or even misused.

UI = User Interface is widely used as it describes the design of the website (or app or device) as that place where the human interacts with the machine. This includes the flow of the product through wireframes elements such as graphic design colors and lines but also the research aspects of UX.

UX = User eXperience (also called UE, just to further confuse things) is a person’s emotions and attitudes about using a particular product, system or service.

CX = Customer Experience is more of a term used in the commerce aspects of using a website and can more widely apply to offline experiences. The overlap is the parts of the customer “journey.”

HX = Human Experience is a new term I have seen but it doesn’t even have a Wikipedia entry – which tells you something about its limited usage.

The terms certainly have some overlap and perhaps not all of them are needed. HX seems to be an umbrella term for what a customer experiences when they use your website – which makes it sound like a synonym for CX. Not all “users” are customers (in the sense of making purchases) and so those terms emerged.

The links above go to the Wikipedia entries and are a good starting place, as is the video below.

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?