Skip to main content

We’ve already done an A-Z of web design jargon article and there is a summarised definition in there for both UX (user experience) and UI (user interface). However today we want to talk more in detail about them. If you have been reading our blog for a while now then you know that we are all about improving UX and creating simple UI. But, what exactly are UX and UI? How do they relate to one another? And what are the main differences between them?

That’s why we have written this easy to follow guide all about UX and UI. The web industry is forever growing and so are the professionals utilising it for their businesses. With this continuous expansion, there are more and more people who need to familiarise themselves with the basics such as these popular acronyms.

Where it came from

The term user experience and user interface have been around for years and the concepts they have derived from have been around for centuries. The bare bones of the idea behind UX and UI came from centuries ago as soon as the first product was made and sold. For example, a knight buys a sword. How did it work? His answer would define his user experience. Similarly with user interface- how did the sword look? As you can see the basics have always been there. It is only the acronyms of UX and UI that have been pulled to the forefront of the technology industry in the past few years.

UI and UX Basics

Defining the structure

A simply analogy that our senior developer Pedro mentioned was that getting up on a surfboard and gliding through a wave, is user experience i.e. that feeling you get. Whereas the shape of the board, the wax on it, basically what makes you achieve the ride, is good user interface.

Still with me?

That analogy can be a bit confusing so let’s break it down even more. This time in terms of what we do and what you’re interested in (considering that you’re reading this blog)- web design. The UX of a web design is what the user experiences when on the website. Whereas the UI of a web design is the look and feel of a website.

UX and UI differences

Good versus bad

Good UX is made up of fast loading pages and added functionalities that empower the user and gives them what they want. Think about what sort of elements your users look for in a website because that is what will help you create better UX. On the other hand, bad UX would be a slow loading page, broken navigation and multiple 404 pages.

Good UI would be compiled of a simple navigational menu, easy to find call-to-actions and a coherent layout. To create an effective UI you have to think simplistically. Ask yourself and others what makes the most sense to your users and opt for that. Whereas bad UI would be compiled of an overcrowded experimental menu, layouts that cannot be comprehended and page orders which Sherlock Holmes couldn’t even figure out.

UX and UI Good and Bad

Two pieces of the same puzzle

You’ve probably already worked out that even though UX and UI are different they have the same mission. Both, when carried out successfully, improve your site and its relationship with the user. Which, in short, is what you want your website to be doing to gain more conversions, business leads and revenue.

How they work together

Now that we know the differences we need to know how they work together. Here at 3mil, we always consider UX and UI respectively and we always involve both of them in our website building practices because one cannot exist without the other.

UX and UI puzzle

In short…

UX is how the website functions and UI is how the website presents these functions. Think of UX as how the website works and UI as how the website looks.

That’s it for this post but if you want to do some further reading on UX and UI here are a few of our favourite articles.

UX versus UI

A guide to dissected user experience and interface

As always, if you have any UX or UI related problems or need assistance in any projects please do not hesitate to contact us and we’ll see if we can lend you a helping hand. Furthermore, if you have any questions relating to this article then drop us a message on Twitter or LinkedIn to continue the debate!

Leave a Reply