top of page

Ui & Ux: Simplified



I have often been asked the question: What is UI and UX? Are they the same? Are they connected, and if so, how? Let me try to provide a simple narrative.


UI stands for User Interface, and UX stands for User Experience.

User Interface is how a user interacts with a product, and User Experience is all about how that interaction makes them feel.


UX and UI cannot be separated at any point. UI enables UX. Without UI, there is no way to experience a product. There is a false notion that UI designers work on the interface, and UX designers work on the experience. In reality, both of them work on the interface itself. Experience is invisible, like an emotion. Unless there is input, there is no experience that will surface.


For example, think of a car. Whatever you can see and touch in a car is its UI. Without that tangible car, there is no driving experience, right?


When you improve the UI, the UX becomes better. That's why most UX theories and laws focus on the front-end rules like Gestalt.


Now, let's take a look at what factors of Interface Design defines User Experience

Function + Aesthetics + Affordance = Experience.

Function is the user goal of the product.

Aesthetics is the superficial appeal of the product.

Affordance is an indicator of user touch-points in a product.


To make this easier to understand let's grab a water bottle!

Function: To drink water

Aesthetics: Long, Black, Matte with a Silver Cap

Affordance: Gripped, twist-to-open, built-in straw


The collective outcome of all the above factors defines the experience of drinking water from the bottle.

1 Comment


Osborn Tyler
Osborn Tyler
a day ago

I used the UX research method to analyze customer needs, which allowed me to better understand their expectations and preferences. This helped optimize the product development process, improve their quality, and enhance user experience. The UX research methodology also played a key role in creating more effective solutions and improving customer interactions.

Like
Untitled-1.png
bottom of page