Covid19 update: WE ARE OPEN... it's business as usual and we look forward to hearing from you.

UX (User Experience Design) vs UI (User Interface Design) – A basic guide

If you step into the Teapot office, you’ll often find our designers and developers discussing the UX and UI of a new website. They may sound like technical jargon, but we promise they’re not as scary as they sound. Put simply, UI is focused around the interactively and visual appeal of a product or service and UX is about making sure the user is left feeling like they’ve had a good experience overall. Good UI can mean very little if the UX is bad, so it’s important that both of these are considered in great detail.

In this blog, we’ll further explain the differences between UX and UI and why they play an important role in finding the best solution for your website, app or email marketing.

What is UX (User Experience Design)?

So imagine you’re searching an online shop to find an item of clothing you’ve been wanting to buy. The menu wasn’t particularly clear but, after 20 frustrating minutes of clicking around, you eventually found the item you were looking for. The sizing and colour options were confusing which made it very difficult to choose – the tiny, poor quality pictures didn’t offer any help either! When you finally did make it to the checkout, the very clunky and long winded process in front of you had you head straight to another shop knowing you weren’t likely to visit that one again. That is a prime example of bad UX design in a website.

UX is seen as human-first design. Its main focus is to make sure that any user can smoothly and easily get from A to B with minimal complications. A website with bad UX design will still allow a user to complete their task, but one with good UX design will leave them feeling positively about their experience and increase the chance that they will return in the future.

In UX design, empathy is key

If you own an online store, it’s important to try and view your site from a user’s point of view. Is it easy to navigate? Is the checkout fast and fuss-free? Are there any improvements to functionality that could be made?

Empathy is the key to good UX design, so look to your target audience for inspiration. From their age to their location, understanding your users will allow you put yourself in their shoes. This can then help you easily spot the faults and will enable you turn your site into a functional and useful tool.

What is UI (User Interface Design)?

In contrast to UX, UI design is geared more towards overall visual appeal and interactivity of a product or service.

Now imagine the example shop from the last section was entirely different. The navigation was simple and it was easy to find what you were looking for in minimal time. The size-guide on the product page allowed you to pick your perfect size without hesitation. In no time at all you were at the checkout and within seconds your new item was paid for and on it’s way to your door. Unfortunately you didn’t find it particularly appealing to look at and it didn’t really feel as though much care had been taken in its appearance. It felt dated and not your style at all. While the website was good to use and you bought the item you wanted, you may feel like shopping around in the future to find other sites that appeal to you more.

UI design is a form of visual communication that plays a hugely important role in building an emotional connection with a user. A positive emotional connection creates trust and familiarity that increases the likelihood a user will return to your site in the future. As UI can directly impact UX, it’s important to take time and care over your website’s design and consider whether it appeals to your audience.

In UI design, consistency is key

UI designers look in great detail at all visual aspects of the site, paying extra attention to any visual interactive touchpoints. These include, but are certainly not limited to, buttons, colours, typography, imagery and spacing. The most important aspect of a website’s design is ensuring it is visually consistent from start to finish.

An inconstant use of call to action button styling will make it easy for the user to overlook key areas of interest, while an inconsistent imagery style can make a user question the legitimacy of your product. By creating that consistency throughout, your site will look great, be simple to use and will add a crucial trust factor for any potential buyers.

“UI is the bridge that gets us where we want to go, UX is the feeling we get when we arrive.” – Jason Ogle

Hopefully that has helped clear the air a little about the differences between UX and UI and why they’re both as important as each other.

If you need help with your website and don’t know where to start with improving it, our in-house digital and design teams can help point you in the right direction!

About Beth

My role at Teapot is create all things digital (and to drink copious amounts of tea…). While I mostly work with websites I also design all online assets and emailer templates – anything you need to boost your online presence!

Give us a call on 01460 281865 or email us to see how we can help you!