Website Design, Creative Design

What is the difference between UX and UI?

What is the difference between UX and UI?

Two of the most critical elements of web design are the user experience (UX) and the user interface (UI). What’s critical is how well you understand and execute these two elements because together they have a huge impact on whether the goals of your website are achieved– whether that be awareness, lead generation or sales.


What is UX?

User experience (UX) is the experience people have when they are on your website and are interacting with it. The experience is likely to trigger an emotional reaction – which will either be positive, negative, or indifferent. Emotions may include frustration (if the website is slow), happiness (if the content is clear and they find exactly what they are looking for) or even a sense of excitement (if the whole experience is better than what they had expected).

The purpose and goal of UX in web development and optimisation is to take a critical look at all aspects of the site including design, functionality, order of content, navigation, animation, interactivity, and so on. The outcome of the analysis should then provide insight and action points into how you can minimise any potential negative feeling from a user and maximise any positive feelings.

Example of bad UX:

You’re looking to employ the services of a web designer to help update your old website. You go to their website and within 1 second, before you’ve had a chance to take anything in, a sales-focused pop-up is displayed that covers the whole screen. This was unexpected and straight away they’re trying to sell to you [negative experience]. You close the pop-up and start to scroll the homepage but realise there is basically no valuable content on there so you cannot determine the credentials of this web designer or where you should go to find out more information [negative experience]. You decide you want to leave this site, but as you move your cursor to the browser search tab, another pop-up is shown asking if ‘you’re sure you want to leave’ [another negative experience].

Example of good UX:

Using the same context, you land on the website of a local web designer. The first thing you see on this page is a title and description of the service that is available, alongside some really cool animated images that are examples of their previous work [good experience]. You start to scroll down the page and notice that it’s broken into sections providing you with further information about this business such as customer reviews, awards, and other companies they’ve worked with. This delivers confidence to you that this web designer is skilled [good experience]. You now want to get in touch and start a conversation with this designer and you can clearly see a button at the top of the page that reads ‘Get In Touch’ and within a minute you’ve submitted a form to start the conversation [good experience].

Ultimately, a website with a good user experience should achieve the goals of the individual pages, allow the user to achieve their goals without barriers, whilst also generating a positive feeling towards your website, brand, and products/services as a whole.

There are 7 key aspects of a good user experience, and these should always be front of mind throughout the process of web design. These 7 aspects apply to the functionality, design, and content of your website.

 Difference between UX and UI

What is UI?

The user interface (UI) is the look, feel and interactivity of your website. This incorporates everything from imagery, buttons, icons, spacing, typography, colour schemes, and responsive design.

The key goal of UI is to visually guide users through the website and help them take in the information they need to. Colour schemes should be set so that there are no harsh clashes, and so the text is always legible. Typography should ensure fonts and text sizes enable the copy to be easily read and understood. Interactive elements should visually inform the user that they can be engaged with – which can be achieved by adding hover states for example.

It’s important to remember that UI is more than just making your website look pretty. The UI should support the experience and help the user achieve their goals, as well as ensure the page goals are achieved – whether that be for the user to watch a video, submit a form, or visit another page within your website.

Another key consideration is that the UI should be on-brand. It can be easy to want lots of cool animations, interactivity, images, and colours, but one of the goals of UI design is to transfer the brand’s strength and visual assets to the website. This will aid familiarity of your business and its products/services when users are on your website.


Key differences summarised

  • UX is focused on the user’s journey to achieve their goal and the emotions felt during that process, whereas UI focuses more on how the website looks and functions.
  • UX is more conceptual and focused on elements such as experience and feelings, whereas UI is much more focused on the tangible aspects that can be seen and engaged with.
  • UI can be considered as a bridge to help users get to where they want to go, while UX is the thoughts and feelings they have along the way.

Want to take advantage of new social features?

Contact us and a team member will get back to you shortly! 

Jack Kennedy
Jack Kennedy
Jack is the founder of Invanity marketing and has worked in digital marketing since the age of 17. Having been involved in both the client-side and the agency side of the process he is building Invanity with a vision of creating a marketing agency that truly delivers on the results it has promised.