The Difference and Relation Between UI and UX Design (In 30 Seconds)

February 28, 2018 | By: Krista Kinkade | 3 min read

In an industry dominated by acronyms and jargon, it is surprising that anyone is able to understand what experts are talking about. Terms like ROI, CRO, CRM, and SEO flood the marketing space, and many of these terms are often mistakenly used interchangeably. It’s time to set the record straight.

One instance where this is true is when talking about user experience (UX) and user interface (UI). What do these terms mean? How are they different? Are the terms interchangeable? The terms are different, but one cannot function without the other.

In 30 seconds or less:

User Experience (UX) is the internal/psychological experience that a user has when interacting with a product or service.

User Interface (UI) is the series of visual elements, such as icons, buttons, screens, etc., that a user interacts with.

If you have more than 30 seconds, let’s dig deeper.

What is UX?

UX is a person’s psychological experience as they interact with each aspect of a business’ product or service. This includes the process they go through when learning about a business or brand, the actions they take to interact with said business or brand, and the impressions they take away from these interactions. Consider your experience with a website or a mobile app. When you are unable to complete an action or find the information you were looking for, it can be frustrating. The importance of UX is to improve these types of experiences so users are able to find the information they are seeking or interact with the elements they need in a seamless manner.

UX is not reserved only for digital experiences. While many assume that UX is only valuable in the digital space, it can apply conceptually outside of digital technology as well. Consider a bottle of ketchup, for example. Your experience with the bottle is the combination of other touchpoints as well as the physical bottle itself. Experiences such as purchasing it from the store, the nutritional value of the ketchup, the sensory feelings when you consume it, and how easy it is to locate in the store all influence the overall experience of using this item. The culmination of each of these experiences holistically creates the UX because they influence how the user feels toward the brand or product.

What is UI?

UI is the part of a product or service that a user interacts with. In the digital space, this generally includes websites, applications, standard OS controls, the interface on your phone, etc. With tangible products such as our ketchup bottle example, the UI is the physical parts of the bottle that the user can touch and manipulate. This includes elements like the shape of the bottle, the appearance of the packaging, the creative design of the label, the design of the cap, and anything included in the visual and physical aspects of the bottle.

Example: Ketchup Bottle UX / UI

How would you distinguish between the UX and the UI of the bottle of ketchup? Take a look.

ux / ui design of a ketchup bottle

Shape of the bottle How easy it is to hold/grasp/pour
Design of the lid or cap    Flow of the ketchup, ease of opening or closing, how messy (or clean) the cap stays after use
Design of the label How the brand is perceived or makes a user feel
Material of the bottle Can it be squeezed, can you tell how much is left inside the bottle


These two terms, when used together, create powerful and meaningful experiences for business and products. So what does an expert do?

UX Designer

User Experience designers consider the start-to-finish experience of a product or service. They think through the user’s entire journey, from when the user enters the ketchup aisle at the store, all the way to when they’re slathering it over their favorite meal. UX designers use human-centered design principles to develop wireframes and prototypes focused on the journey that helps the experience feel as smooth and seamless as possible.

UI Designer

User Interface designers have qualities that are similar to those of a UX designer, yet their focus is on the aesthetics and visual elements of the experience with a product or service. UI designers use visual-centered design principles to develop mockups, graphics, designs, and layouts that focus on the visual interface that a user will interact with to complete their goal.

Pairing UX / UI together

So how do you know if UX and UI are done well? If you don’t notice at all.

UX and UI executed well is if you are able to navigate through a website, or walk down the ketchup aisle and find exactly what you were looking for. The UX and UI must work together. You cannot create a good user experience without an intuitive interface.

The next time that you navigate through a digital application or use an everyday object, reflect on the experience that you had. Can you improve or simplify it in any way? These concepts are woven through our everyday lives and interactions.

Higher Education In 2020 - Marketing To Non-Traditional Students

Download Whitepaper