Getting Started

UI vs. UX

3 min read
Share

If you though these were interchangeable terms you wouldn’t be alone. User Interface (UI) and User Experience (UX) as terms and concepts are frequently conflated. While the are very different, the distinction can be hard to immediately grasp.

You have remembered learning in early geometry lessons that all squares are rectangles but not all rectangles are squares…We like to use this comparison to quickly illustrate the distinction between UI and UX.

On the left is an illustration of several rectangles in different sizes, showing varied widths and heights. One of these rectangles is also a square. To the right is same illustration, but all of the rectangles are faded out except for the one that is a square.
Rectangles vs. Squares

Similar to how a square is a specific type of rectangle, your UI is a specific aspect of your overall UX. There are many more aspects to a good user experience than only the user interface design. In fact, it’s often argued that the UI is typically the least critical part of ensuring a strong UX is in place.

An illustration of several rectangles in different sizes, showing varied widths and heights. Each rectangle is individually labeled with one of the following terms: Research, Psychology, and Analytics. Finally, a square rectangle is labeled Look and Feel. To the right is the same illustration, but the rectangles labeled Research, Psychology, and Analytics are all faded out. Only the square rectangle labeled “Look and Feel” remains fully opaque.
User Experiences vs. User Interface

Don’t get us wrong, a good UI is important—it can improve brand perception and create trust. A good UI might sway a user into giving your product or platform a try, but if the UI isn’t built on top of a strong foundational UX you’ll likely suffer from issues with conversions, retention, and reengagement.

Think of your UI as the final step in building a house. It’s the paint, the decor, the immutable quality that says “this belongs to my brand no one else's.” Just like a house, if there’s cracks in the foundation it’s going to fall apart—no amount of shiny finishings can fix that.

To continue this analogy, your user experience is that foundation of what you’re building. It’s the architectural blueprints and the licensed contractors. It’s making sure the electricity is wired up before the drywall is hung, and making sure you have enough bathrooms to support the number of occupants that are going to live there. If you ignore these aspects when building a home it’s sage to say the project will have problems. At worst people won’t want to live there, and at best people won’t like living there very long.

Now that we’ve defined why UI and UX are different entities let’s dive into what each of them really are.

What is a User Interface?

Your user interface, at the core, is everything a person can see and touch on a screen. Your UI design defines how your brand is applied across your website or product—it is the look and feel of the individual elements such as:

  • Buttons, menus, icons, colors, fonts, and spacing
  • Photography and illustrations
  • Sometimes, how content is arranged on a page.
A light grey button with dark grey text, above it is a red “x” icon signifying that this button design has issues. Next to it is a bright blue button with white text, above it is a green “check” icon signifying that this button is the better option of the two.
The grey button looks disabled and has low contrast. The blue button has higher contrast. This is an example of a UI decision.

A lot of visual accessibility issues are impacted by UI decisions.

What is a User Experience

UX can feel a lot harder to explain, and to understand. The result of UX is, simply, how a person feels when using a website, product, or service. While UI defines the look of single moments within an experience, UX defines the entire journey as whole.

At a fundamental level UX works to evaluate and answer the following key questions:

  • Is this easy to use?
  • Can people find what they’re looking for or accomplish their goals?
  • Does the process make sense from start to finish?