Differentiating Between UX & UI

Let’s start by defining UX & UI

How often have you come across this one, “What is the difference between UX & UI?” Infact it’s often one the first questions that an uninitiated client might ask. But what is not so cool is when two terms are used interchangeably as if they meant one and the same thing.

Often however, it is not the client or anyone else to blame. Professionals within the design fraternity often use the two together and sometimes even one for the other. Understandably this can lead to a lot of confusion. So let’s try and understand the differences between the two.

UX is the abbreviation for User Experience and obviously therefore, UX Design stands for User Experience Design. User Experience is the overall experience that a person has with a company, brand, product, service or anything else. This experience may be in the domain of websites or mobile applications. But truly it is much more and beyond that. UX is about the experience at the moment of engagement or consumption of a product or service as well as the pre & post experience of such a moment.

The term User Experience was introduced by Don Norman as, “User experience encompasses all aspects of the end-user’s interaction with the company, its services and its products.” Suffice it to say that UX is the overall experience that a person has when he/ or she sets out to do something.

Coming to UI, it stands for User Interface. And so UI Design is User Interface Design :-). Just like UX Design, UI Design too is not limited to just websites and mobile apps, but is also relevant in the physical world. UI Design is all about the various physical elements (or virtual elements in case of websites, mobile app, software apps, etc) that you interact with (overtly or sub-consciously), as you work towards gathering information or completing a task. As a definition for UI, I like to define it as “the visual aspects of any software, a physical thing or a system that a person sees or interacts with”.

Unlike your typical scientific definitions, UX-UI are not all black & white. There is undeniably some overlap between the two and therefore often it is tough to completely refute any definition.

Maybe a couple of examples can help understand this better

Take an example of a 15-piece pack of Snicker bars. The marking at the top-corner of the seal that says “Tear Here” along with the slight-cut in the edge, is UI. Whereas the ease with which the person is able to actually tear open the pack is UX. The ease with which the zip-lock (below the tear-line) can be re-sealed and re-opened, again is UX. However in relation to this zip-lock itself, a small line of text (and its placement well below the ‘tear-line’) that reminds to the person to zip the pack to ensure that none of the precious bars fall-off.

To take an example from the virtual world and a rather complex one at that – think of shopping online. You go to the website, search for the shoes you want, select size and colour and checkout. The UX pre-empts and plans the overall journey from the homepage to the checkout page. Infact UX can and should go several steps ahead in planning the journey all the way upto delivery of the shoes and any after-sales. UX tries to plan and provide for the various options/choices to be made  along the way and at other times identifying and hiding away things that are unnecessary for decision-making. UI, on the other hand, focuses on bringing this journey to life creatively. Ensuring that the aspects of the journey that are key to the successful completion of the journey are well highlighted and other aspects that are good to have but not necessary are provided for without creating clutter. (A paragraph as long as this one is also perhaps bad UX 🙁 …)

It is often said that where UX ends, UI starts. And yet if you understood what I’m trying to say the previous para, you’d realise that there is a lot of overlap between the two. Understandably, some of the best UI Designers are those who have a very good understanding of UX Design.

UX-thinking v/s UI-thinking

UX starts with identifying a human problem that needs to be solved or a need that has to be fulfilled. It then understands the human-behaviour in relation to the problem/need category. And goes on to plan the journey towards resolving that problem or fulfilling the need.

UI comes into play once the understanding of the human behaviour and the plan for the journey are in place. It’s about creating the layout, design, etc that will ensure that the planned journey is fulfilled with ease. 

Let’s look at another example to understand this difference in thinking.
Take the case of a departmental store that needs directional signage for stairways, lifts and restrooms. The choice of location for the signage, such that shoppers in any part of the store are able to find one from where they are standing and then putting them up at a height so that the visibility is not blocked by anyone or anything – that is UX. While ensuring that the colour of the signage-board, the font-size, the thickness of the illustrations, icon-design, etc ensure that there is clear comprehension about what the signage is saying/indicating – that is UI.

To summarize

Clients are already taking great, in-depth interest in UX-UI as we move into a virtually connected world where a person’s virtual interactions start to have a great impact on the success or failure of any brand or business. And it is important that we are able to unambiguously able to explain to them what’s what.

This becomes all the more critical for agencies and designers who now invest so heavily in UX and the process of UX & UI. The last thing you want is for a client to think of the UX-stage feedback and approvals as only a ‘process insisted upon by the agency’ while the real feedback and approvals (or rejections) only come in after UI presentation. Not only is that man-hour loss for the agency/designer but actual delay in project-rollout for the client that can severely impact their business plans.

Leave a Reply

Your e-mail address will not be published. Required fields are marked *