You’ve no doubt come across blog posts pitting UX and UI against each other like two heavyweights going toe to toe in the ring. A quick Google search will show that ‘UX vs UI’ posts are all the rage, but the truth is that we shouldn’t be thinking of these two elements like Rocky Balboa and Apollo Creed. 

‍

OK, maybe that’s not completely true. We can think of UX and UI as Rocky and Apollo, but only in Rocky 3 - you know, when they’ve become best friends and stopped punching each other in the head. 

‍

That’s because UX and UI should actually be understood not as contrasts, but rather elements that enhance one another. Just like Rocky and Apollo’s spars make them both better fighters, UX isn’t as effective without UI, and vice versa. 

‍

This is why striking the perfect balance between design and function is so important. If you understand how to ensure harmony between UX and UI, you can find the most effective middle ground to the ultimate benefit of your digital product. Get it wrong, and your product risks being dysfunctional or unengaging, leaving your users to feel like they’ve just received a right hook from Clubber Lang.

‍

The UX/UI relationship

So how do you find this middle ground to avoid being knocked down to the canvas? First, you need to understand what’s meant by both terms:

‍

• UX stands for user experience, and encompasses all aspects of the end-user's interaction with a product, influencing their perception of utility, ease of use, and efficiency. Ultimately, it’s concerned with the user’s emotion; how do they feel when they interact with a product? 
• UI stands for user interface, and encompasses the visual layout and design of a product, and any element a user interacts with. It’s concerned with the specific touchpoints a user engages with when using a solution 

‍

With these definitions in mind, it’s easy to see why people are often so keen on establishing differences between the two. After all, they’re two distinctly separate approaches to a problem…right?

‍

Well, no, not exactly. 

‍

A common example of this frequent misunderstanding is the analogy of the ketchup bottle - in fact, it’s even become a meme:

Yep, we’ve seen way better memes too, so we’ve just found one that actually makes sense…

But aside from not making us chuckle, what’s wrong with this ketchup bottle meme that seems to do the rounds online every few months? 

‍

In short, it’s too redactive - way too redactive. Yes it’s intentionally simple to convey a simple message about the differences between UX and UI, but by ignoring the complex and multifaceted nuances of each, it ends up missing the mark completely. 

‍

Allow us to explain. The point the analogy is trying to make is that while the glass bottle, labelled UI, is aesthetically pleasing, the plastic bottle, labelled UX, is functional. After all, the plastic bottle is stored upside down and can be squirted, meaning it’s more practical - no more slapping the bottom of the glass bottle just to end up with a dollop of ketchup on your favourite jeans! 

‍

But the implication here is that the shift from glass to plastic represents the shift from UI to UX; UI focuses on the aesthetics and UX focuses on the function. But this simply isn’t the case. Rather than existing as two opposing entities, one actually informs the other. In fact, it’s fair to say that they can rarely exist autonomously - UX can only really exist when there is a UI to experience. 

‍

So in the ketchup bottle analogy, the glass bottle isn’t just a UI consideration. Sure it looks more visually pleasing, but the glass also serves functional purposes, meaning it has its own UX too. If you keep your ketchup in the fridge, for example (who does that?!) the glass will keep the sauce cold more effectively than plastic, contributing to a better overall experience for the user.

‍

In a similar breath, the bottle’s ergonomic design means that it fits better into your hand and is easier to squeeze, but this improved experience of using the bottle (or in other words, its UX) is made possible by the UI in the way it was designed to fit into the hand using specific shapes and moulds. 

‍

So to make this analogy correct, both the plastic and the glass bottles should be understood as the UI, while the UX should be understood as the interaction with the product. Yes the plastic bottle offers a better experience, but an improved UX doesn’t imply the absence of UI, and vice versa. 

‍

In short, both bottles have their own UX and UI as the two coexist in everything - UX is facilitated by UI. And so, the task when building a product is to create the best UI that generates the best UX. And just like the plastic ketchup bottle demonstrates, this requires compromise.

‍‍Still with us? That was a whole lot of information at once - how many times did we say UX and UI?! Let’s move on from all this ketchup chat and start applying what we’ve learned so far to a technical context. Is anyone else suddenly craving some chips…?

‍

Designing and building a digital product is all about striking that perfect balance between aesthetics and practicality. You want a solution that looks great and functions well, obviously. And as a result, there’s a lot to consider when trying to find that middle ground. 

‍

Prioritising how a solution looks over offering the best user experience is a common faux pas, but this can have substantial implications on the success of the end product. For example, while your website may look super swanky, if a user can’t navigate it without confusion or complication, they’re likely to become frustrated. We all know how annoying an overcomplicated website can be! This negative emotion in turn creates a negative UX, ultimately meaning that it’s unlikely your website will convert in its objective. 

‍

Much the same, an all-singing-and-dancing application that doesn’t follow familiar design conventions may struggle as a result of the poor UX this creates. Sure the functionality is there to create an experience like no other, but without a well-informed UI to support the positive adoption of these features and functions, you’ll likely see a drop in user engagement and retention. 

‍

As we’ve established already, it’s all about creating harmony by ensuring UI and UX inform one another rather than contrast. For example, it’s common to use component libraries when designing a product, as this introduces recognisable and user-friendly elements into the build that are tested and easy to use (more on these in this blog post!). 

‍

Although this may cause creative restrictions in the design of a product, these components are still incorporated as the benefits to the UX outweigh the negatives to the UI - it’s a compromise. 

‍

Let’s take a look at a real world example for a second. Head over to this ecommerce site for clothing brand, Supreme, and gather your initial thoughts. Notice anything a bit…different? 

‍

To embody their trendy, against-the-grain brand image, Supreme has rejected many of the traditional UI conventions of an ecommerce site, and while this is effective in mirroring the values of the brand, it’s significantly less effective at creating a positive user experience. Buttons aren’t where you’d expect them to be, navigation is confusing, and the user journey is significantly disrupted as a result. 

‍

Or is it? *insert dramatic dun, dun, dunnnn*

‍

The most important aspect to remember is that this process always needs to remain user-centric. The perfect balance between UI and UX isn’t dictated by your personal preference, but rather by the value it offers the user; what’s the most effective way of creating a positive experience for your user that drives them towards a goal? 

‍

With this in mind, Supreme have actually demonstrated a core understanding of their audience and their behaviours - they know their young, image-oriented users are tech-savvy enough to understand the non-conventional UI, and will identify positively with the attitudes it embodies. As a result, the positives outweigh the negatives, meaning Supreme has achieved effective UX/UI harmony.    

‍

But of course, all this begs the ultimate question: how exactly do you find this perfect balance?

‍

Strategies for creating the perfect balance

Achieving a Beach Boys-worthy harmony between UX and UI requires a comprehensive understanding of how your product is going to be used and who is going to use it. In fact, that’s the only place to start if you want your UX/UI to be pickin’ up some Good Vibrations. 

‍

But be warned: ensuring that this understanding of your users is data-led and well-informed is non-negotiable. The whole purpose of UX and UI is to champion a user-centred design, meaning the more guesswork that’s involved, the harder it is to strike a meaningful UX/UI balance that drives results.  

When we covered user research methods in our deep dive into UX design, we advised using a mix of quantitative and qualitative approaches to paint the most accurate picture of your audience. Sure you need to know who your users are demographically, but you also need a good awareness of their needs, goals, and behaviours. What really makes them tick?

‍

Examples of quantitative data include any internal analytics you have to hand - like an existing website or social media data - and wider stats collected from methods like field studies, and surveys. Qualitative insights, on the other hand, can be obtained through user interviews, focus groups, and workshop sessions - any method that allows you to scratch beneath the surface and learn more about the emotions and motivations of users. 

Once you’re confident that you’ve developed a thorough knowledge of your target users, you can begin constructing accurate user personas that delve beyond the basic characteristics and help you to identify the thoughts and feelings of your users throughout each stage of their journey. As we’ve already established, these factors are fundamental to the overall user experience. 

‍

And if you’ve done all of this successfully, you’ll be armed with a comprehensive snapshot of your audience and have a solid knowledge of who you’re building for, which ensures you take the best approach to deliver the right experience. 

‍

We know you’re probably sick of hearing it by now, but let us remind you one last time: keeping it user-focused is key! 

‍

The importance of properly understanding your audience really can’t be understated, as its influence on your final product is huge. You can build the same app with the same end goal aimed at two different user groups, for example, and end up with applications with vastly different looks and functions. 

‍

Whether or not your UI/UX is right for your audience relies entirely on how accurate you were in the research stage. But hey, we trust you - we’ve no doubt that you’ve smashed your user research out of the park, which means it’s time to turn insights into actions. 

‍

Using your user personas and journey mapping, the next step is to consider how your UI can facilitate the best UX for your target users. To do this, you’ll need to evaluate how your UI decisions can influence the overall UX of your product. 

‍

Consider UI factors like:

• Employing effective visual hierarchy: you’ll likely be making choices based on visual hierarchy, guiding users’ attention to specific areas and emphasising key elements. Ensure you’re not just thinking of the areas you deem important here (like calls to action or other conversion-driving elements) - consider the information that matters most to your users at this stage of their journey, and how their experience can be positively or negatively influenced by the way this is presented to them
• Leveraging colour psychology and typography: we all know that colour and typography are all the rage in digital design, with businesses adopting a whole host of different options to enhance their brand identity and boost their visual appeal. But be sure to think beyond aesthetics here. Sure it looks awesome, but is it contributing to the UX you want to create? Perhaps your colour scheme doesn’t pass accessibility tests, for example, creating a negative experience for a percentage of your audience. Or maybe you could be leveraging colour psychology more effectively to influence the user experience directly 
• Incorporating interactive elements: interactivity is a firmly established way of improving engagement, but again it’s important to think beyond the initial impression. Don’t just use interactivity as a way of snazzing up your product and grabbing attention; ensure it enhances usability and provides genuine value to avoid damaging your product’s UX

‍

When making these choices, weigh up the pros and cons and decide based on the value it brings to the user. An easy rule of thumb to apply is: if it’s not improving the UX, don’t improve the UI. 

‍

UI is built around all these kinds of decisions, and so it's key that these choices remain guided and well-informed. That’s where best practices come into play. Adopting best practices like consistency with component libraries, accessibility testing, product testing and QA, ensures that your UI is strategically optimised to facilitate the most positive user experience possible. After all, your UX is based on your users, and it’s your UI’s job to formulate the right experience for them. 

‍

Just think of that glass ketchup bottle one last time. When applying these same frameworks to the design and functionality of the bottle, the negatives in the UX outweigh the positives of the UI. By placing the user at the centre of your decision making and considering how the glass influences their experiences using the bottle, you must conclude that compromises to the UI need to be made to improve the bottle’s functionality and subsequently the UX. And as we’re painfully aware by now, the result is the plastic bottle, striking the perfect balance between UX and UI. Oops, sorry - didn’t we promise no more mentions of ketchup?

‍

TL;DR

Places to be? Other articles to read? Not a fan of ketchup? We’ve got you covered with all the important takeaways from this post below:

• UX stands for user experience, and encompasses all aspects of the end user's interaction with a product
• UI stands for user interface, and encompasses the visual layout and design of a product, and any element a user interacts with
• UX and UI coexist in everything because UX is facilitated by UI
• Creating a balance between UX and UI requires compromise 
• The perfect balance between UI and UX isn’t dictated by your personal preference, but rather by the value it offers the user
• Ensuring that this understanding of your users is data-led and well-informed by quantitative and qualitative research is non-negotiable
• Evaluate how your UI decisions can influence the overall UX of your digital product 
• An easy rule of thumb to apply is: if it’s not improving the UX, don’t improve the UI 
• Adopt UI best practices to ensure your UI is strategically optimised to facilitate the most positive user experience possible

‍

Strategically balancing UX and UI requires a solid understanding of the relationship between the two and how they impact the user. Get it wrong, and your digital product is unlikely to drive the results you want to see, so don’t cut corners across these stages. Take the time to learn what your users need and expect, and give it to them through a well-informed UI that enables the experience you want to create. This is the best approach to balancing design and function through a solution that looks great and functions seamlessly - or in the words of Rocky Balboa, ‘that’s how winning is done’.