What is UI, UX, Usability and Interaction with Example
UI, UX, Usability, Interaction are work closely but work differently. UI is a graphical part. But UX is about enhancing user’s satisfaction. Usability and Interaction are the parts of UX.
Lets take a example to understand better.
Suppose I’m walking on road and I saw a Ferrari coming, I look at it and say ‘wow’.
Now what this wow for?
When I’m look at the Ferrari, I see its vibrant red color, glossy shiny skin (that’s what user can see) its a User Interface or UI.

Now in other case I’m driving Ferrari car.
I feel the seats are comfortable, My legs are easily approaching towards accelerator and breaks, No tension of changing gear every time (Automatic gear), there are buttons for every interaction (on/off light, lock the door etc). That’s UX.

If you remember old cars, driver has to crawl towards other hand door to lock it.
Now this is the problem.
‘driver has to crawl towards other hand door to lock it.’

Now we will see how each designer work closely to solve this problem.
User Experience
When you ask UX designer for solution on this problem. UX guy suggest ‘put a button somewhere so that when driver will press it, other hands door will be lock.’ So, driver will no longer has to crawl for locking the door.
Usability
But where to put that button exactly so that user will easily press it? Now this is Usability. Adjustment for driver/users comfort-ability. when you will ask Usability guy for put that button in car, He will (may)suggest to put that button on steering, below drivers right hand thumb. So, when user is driving a Car, he can easily press that button without taking hands from steering.
Interaction
Now the button will be on steering. But how does user/driver interact with button? Is it toggle switch? Or is it same button for lock and unlock (may be iconic or using LED’s)? In east words Interaction is shaping digital things for people’s use.
Take a look over below buttons.


When you ask Interaction designer for solution, he will think in such a way that less area of steering will be occupied, user/driver will not press that button by mistake while driving. In this way Interaction designer will define the type of the interaction.
User Interface
Now UI Designer will design that button and shape accordingly and (may)put intuitive icon on button so that driver can easily understand the button is for locking the doors.
So In short,
UI is what User can see or touch.
UX is architectural part of UI.
Usability is adjustment for user’s comfort-ability.
Interaction is shaping digital things for people’s use.
Originally shared on uibanana