UX/UI: definitions and differences

UX and UI are often confused. Many people do not have an accurate, clear definition of these two concepts. By the time you have read this article, you will be able to define the two ideas and explain their main differences without difficulty.

Definition of UX – User Experience

Or the hidden side of the iceberg.

UX is responsible for the selection, layout and usefulness of the elements of a web or mobile page. UX decides what will be on the page, its architecture and its contents. UX also decides on the function of each of these elements.

Consider the web page as a face: UX decides that the face includes a nose, a mouth, eyebrows, etc. It decides where they are positioned (the eyes next to one other, the mouth at the bottom, the eyebrows above the eyes), it decides that everything is symmetrical and it chooses the texture and granularity of the skin and the functions of each element (the eyes will see, the mouth taste, etc.).

Definition of UI – User Interface

Or the submerged side of the iceberg.

UI is responsible for the visual aspect, the aesthetics of what UI has created. Basically, its task is to embellish the work of UX. UI cannot exist without UX, just as face makeup has no raison d’être without a face. UX is not UI, but UI is UX. UI will choose the colours, the typography, the logo, the design of the buttons, i.e. everything related to the visual aspect of the web page when people see it (without knowing what is behind it). It is responsible for the final appearance.

Let’s take our example of the face again: UI will apply all the makeup needed to meet the client’s expectations and thanks to its creativity, it will design makeup that is attractive and that corresponds to consumers’ needs. So it will make up each element of the face: mascara for the eyes, lipstick, foundation, etc.

If I have made things clear enough, at this stage you understand the difference between UX and UI and you understand their purpose. At least, you are able to define them in your own words.

Defining ‘user experience’

You hear this term everywhere, covering a wide variety of concepts. But can anyone provide a clear definition? One thing is clear: it has to be pleasant. We will try to describe what ‘pleasant’ means. According to Magnus Revang of Gartner, the user experience comprises six areas. The success of each of these areas is taken into account in the UX and UI design. 

Area 1 – Findability – the website is easy to find: SEM work and putting in place all the techniques intended to improve the website’s visibility on search engines.

Area 2 – Accessibility – the website is accessible: the website must be designed so that is compatible with as many terminals as possible.

Area 3 – Desirability – the visual design of the website is attractive and inspires confidence: this is where the choice of graphic design and meticulous ergonomics come in.

Area 4 – Usability – the website is easy to use: browsing the website must be easy and intuitive. Users must be able to find their way around easily.

Area 5 – Credibility – the website is credible and gives an impression of reliability, linking up with area 3 relating to visual appearance, determining the user’s perception of the website.

Area 6 – Usefulness – the website must be useful and efficient: visitors must find answers to their questions quickly and easily.

As you can see, UX and UI both come into play in all of these areas.

The differences between UX and UI

Now that you are able to define UX and UI, it’s important to understand the main differences so that you will no longer confuse them.

To achieve this, we have put together the following table.

We are experts in offshore outsourcing and support our clients throughout their IT projects, from design and UX/UI to offshore development. We also provide them with high-level offshore developers for specialized projects. Our core business is web development and software development. However, we can provide our clients a one-shop solution by relying on partners in our network for other services, such as design and hosting.

Other articles on offshore agile development methods are available here.