A UX Intro

I was looking through some materials I used in teaching a course that included a unit on UX. The user experience is abbreviated as both UX and UE (which somehow in itself seems like a bad user experience). UX is how a user interacts with and experiences a product, system, or service. In that course, I had students looking at the UX of websites, but it can be applied to many other tech and non-tech instances.

Basically, you look at a person’s perceptions of the ease of use, and efficiency of a site. Companies are obviously interested in that and so designers need to use it in the creation process.

It seems odd that although the questions asked of users seem very subjective, the attributes that make up the user experience are objective.

Here are several basic terms used in UX.

Affordance – is one of the concept features that measures how well a user understands a feature without knowing how to use it. An example on a webpage or an object would be that something that need to be pushed or clicked looks like a button that should be pushed.

A/B testing – a controlled experiment for comparing two versions of the design. For example, you might present two color palettes of the same webpage design to determine if the colors make any significant change to a user.

Wireframes –  a simplified representation of your website or application consisting of just lines and text that can be hand-drawn or electronic and in this early stage true visual design and color are not presented.

wireframe for a user profile page

Mockup – is a richer visual version than a wireframe, including graphics, layout, and style. For products, these can be actual objects that users can hold or see as 3D objects.

Prototypes – are a further step toward the final product or website. This version can be responsive and there may be website items to click or enter data. They usually contain images and content such as text. Product prototypes can be physical objects, but a plastic or metal object might be made from paper or even just a 3D digital version. Technically, wireframes are prototypes but they are “low fidelity” and lack details.

Accessibility is something that is unfortunately too often overlooked. The common perception is that it is about users with disabilities, but that is too limited. Many users have “special needs.” Blindness would certainly be an accessibility issue but so would color blindness. A website designed for desktop users can present accessibility issues for all users if used on a smartphone.

There are many other terms used. The collection and analysis of UX data is itself an entire unit of study that would include things like clickstreams, diary studies, eye tracking, heat maps and card sorting.

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.