Visualizing the differences between UX and UI

What is UX? Isn’t that just UI?

It is common for people, even inside tech circles, to use the acronyms UX and UI as synonyms, but they are quite different. UX stands for “user experience” while UI stands for “user interface.”

We’ll let Wikipedia do the defining:

• “User experience (UX) is the way a person feels about using a product, system or service. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership, but it also includes a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system. User experience is subjective in nature, because it is about an individual’s feelings and thoughts about the system. User experience is dynamic, because it changes over time as the circumstances change.”
• “A user interface is the system by which people (users) interact with a machine. The user interface includes hardware (physical) and software (logical) components. User interfaces exist for various systems, and provide a means of: (a) Input, allowing the users to manipulate a system, (b) Output, allowing the system to indicate the effects of the users’ manipulation.”

Visualizing these terms

Still too broadly defined? Need something more concrete? Designer Ed Lea designed a series of photographs which viewed in order creates a very simple visualization that define the differences between UX and UI, revealing how they are not, in fact, synonyms, and demonstrates how they relate to a product.

Further, the visualization shows the role of servers and data centers, and will make all of these terms much easier to understand:

See? That isn’t too complicated. Now, when you go to that tech happy hour and someone says that they do “UX and UI,” you know what they are talking about and can ask relevant questions (and in some cases, you’ll spot the acronyms being used interchangeably and you will know the difference).