UX Design or UI Design…Or both?

This is a subject that can often be confusing when Digital Consultants  are speaking with clients…well, it certainly was for myself when I first heard the terms UX and UI Design. You’ll often see on Linkedin as well as on many other sites and articles designers talking about great UX and beautiful UI, as well as recruiters posting things such as, ‘Looking for awesome UX’er for brilliant Digital Agency’…but what the hec’ do these terms actually mean?I have attempted to put the following in as simple terms as possible, please bare in mind a lot of these views are from my own perspective.

 UX and UI Revealed

UX stands for User Experience Design and UI refers to User Interface Design. Both are crucial for many web and digital products, however, each of these play a very different part in the process for a web or digital build. 

A good and commonly used way to differentiate the parts of a digital product is as follows – If you think of the end product as a real person…the UX Design represents the organs that keep the body flowing and working correctly, measuring and optimizing and ensure you function smoothly. UI Design would be the visuals of the body, so the skin, hair, all of the aesthetics. Finally the code would be the bones, holding everything together.

In layman terms – UX Design is all about making sure everything’s easy and intuitive to use, UI Design is about making the product visually appealling, and the code itself is how it all functions.

What is UX Design?

User experience design (UX, UXD, UED or XD) is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product.

The above is taken from Wikipedia

So rather than what you see on the product, User Experience is the interactions you make when using the product. Let’s put this in live terms –

Scenario 1: If I was to go on an eCommerce website trying to find a new pair of trainers and it was very difficult to search for the brand I was after, the menu navigation was unclear and confusing, ‘Add to basket’ was not very visible, creating an account took over 5 steps and there was no option to check out as a guest…..you get the picture, everything on the website is hard work. This would be defined as poor UX Design.

Scenario 2: If I head to an eCommerce website to find the same product, the menu navigation is all clear with products and brands clearly set-out, I can use a search tool that presents suggestions when I start typing a product or brand, each product page has all the details for the product you require and a clear Call To Action to ‘Add to basket’. Creating an account takes 2 simple steps and the whole buying process is seamless and well guided. This is a solid case of great UX Design.

UX is not simply menu usability but less obvious things e.g. making sure error messages are both clear and provide a solution to the user, such as a 404 error page providing a message which explains the page doesn’t exist and giving a button to return back to the previous working page.

From a Web Development agency perspective, here is an insight into the tasks we will carry-out during the User Experience Design, once we have started a digital project e.g.a new website and have carried out the research and analysis stages:

1/ User-Flows and Prototyping

2/ Wireframing  (for both mobile and desktop)

3/ Testing and Iterations

What is UI Design

User interface design (UI) or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing the user experience. The goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals (user-centered design).

The above is taken from Wikipedia

User Interface Design is generally understood as the graphic design of a product. However, expert definitions can also refer to UI Design involving structural techniques (just like in UX Design)…meaning it all can get very confusing.

A UI Designer will study all of the elements approved during the UX Stage and will tailor this into a visually pleasing product. So if we are talking about a website, they will design an attractive, enaging and responsive view for the website main pages for both mobile and desktop

Here is an idea of some key User Interface Tasks:

1/ Target Market, Customer Analysis and Design Research

2/ Branding and Graphic Development

3/ Designing for Various Devices (Responsive)

4/ Implementation with Development Team