UI vs UX: The difference between UX and UI

UI and UX are two of the most confused and misused terms in web design. UI, UX, UX design, UI design – many people use them interchangeably and refer to the same thing. Even in the tech industry, it’s common to use the same term. The reality is user experience (UX), and user interface (UI) are very different disciplines requiring very different skill sets.

At the same time, they are complementary – one is integral to the other’s success. Most importantly, you need both if you’re going to achieve an online experience to win customers.  So, what is the difference between UX and UI design? Read on to learn what the terms UX and UI design mean, the key differences between the two terms, how they can work together, and each designer’s different roles.

What is UX?

User experience (UX) refers to the interaction between the user and a product or service. Everyone goes to a website or app with a purpose or goal – this is their user story. The ultimate purpose of user experience design is to create easy, efficient, seamless and all-round good experiences for the user as they accomplish this goal. 

The term first appeared in the book ‘The Design of Everyday Things‘, published in 1988 by acclaimed cognitive scientist and usability engineer Don Norman. It shifted the focus from the computer system itself and the aesthetics of the interface to the user’s needs. In the early ’90s, Don Norman joined Apple Computer, becoming their “user experience architect”.

He then spent decades working inside universities and companies to remind the tech industry that technology should accommodate human needs, capabilities and behaviours, not the other way around. The proof is in the ROI. Forrester Research Findings show that a well-conceived, frictionless UX design could raise customer conversion rates to 400%.

Good UX design should essentially answer the following questions: 

• How does the experience make the user feel? 
• How easy it is for the user to accomplish their tasks and goals? 
• Is the experience smooth and easy, or confusing and difficult? 
• Does navigating through the website feel intuitive and logical or unclear and clunky? 

In this article, we’re focusing mostly on website and app design. Still, essentially, UX applies to any product or service that can be experienced through any medium, whether that’s a supermarket checkout, a coffee machine, or a car. 

UX design recap

• UX design is the process of developing and improving the interaction between users and a company.
• To design UX can refer to both the digital and non-digital medium.
• UX design is not focused on visuals but rather on the overall feel of user experiences.
• UX is a powerful way to drive profits. 

Now you know what user experience is, let’s take a look at the next concept.

What is UI?

User interface (UI) is anything people may interact with to use a digital product or service – such as visual elements, interactive design, sounds and screens. While user experience design looks at a combination of tasks focused on the whole experience, UI design refers to its look and feel, presentation and interactivity, and what’s referred to as the “graphical user interface”.

UI design focuses on being engaging and immersive for the customer. For UI designers, that means considering every visual and interactive element that users might encounter on an interface, from icons, imagery and typography to colour palettes, spacing and responsive design. 

Unlike UX, which can refer to products and services, user interface design is strictly for the digital medium. It just doesn’t make sense when you’re talking about products and services in the real world. 

How important is it to invest in the user interface? The answer is:  Just as important as user experience.  A Nielsen Norman Group article talks about a quantifiable relationship between interaction designs and people’s perceptions of the overall brand personality.  Almost every element of a website or app’s user experience can influence how an organisation’s brand identity or personality is portrayed, including:

• Visual design: how the interface looks
• Content design: how the interface sounds
• Interaction design: how the interface feels

Invest in improving these elements, and you can skyrocket brand trust, referrals and loyalty. 

UI design recap:

• UI design visually guides users through user interfaces and considers all the visual, interactive elements, including buttons, icons, spacing, typography, colours, and more.
• UI design ensures a design is consistent, coherent, visually appealing and accessible. 
• UI design is purely digital. 

So far, in this article, we’ve defined what UX and UI are. Now let’s summarise the key differences between the two.

The main differences between UX and UI

Imagine a problem that people want to solve. User experience design is focused on anything that affects the user’s journey to solve that problem, both on-screen and off. User interface design is focused on how the product’s interfaces look and function.

So, the user interface is only one piece of that journey to solving the problem, while the term “user experience” refers to the whole journey.  

Former Google Ventures partner Ken Norton summarises the differences between the UX and UI with this simple statement: “UX is focused on the user’s journey to solve a problem; UI is focused on how a product’s surfaces look and function.” Another way to look at it is to imagine a product as a restaurant. UI is the table, chair, plate, glass, and utensils. But UX design is everything from the food to the service, parking, lighting and music.

Here’s another analogy by web developer Dain Miller: “UI is the saddle, the stirrups, and the reins. UX is the feeling you get being able to ride the horse.”  To summarise, the main difference between UX and UI is this: UX design is about the experience’s overall feel, while UI design is all about how the product’s interfaces look and function.

This means practical application between UX and UI is very different. The three most important differences between UX and UI design are:

1. UX focuses on the purpose and functionality of the product, while UI deals with the quality of the user’s interaction with the product.
2. UI requires visual design skills related to the interface, while UX required research and analysis skills to ensure users’ needs are identified and met.

3. UX needs strategic skills as the entire experience is analysed, while UI required technical skills to get the design elements in place within the interface.

The important thing to take away is that, despite the difference, you can’t have one without the other – UX and UI go hand-in-hand.  But that doesn’t mean a UX designer can do the job of a UI designer, or vice versa.

Being a UX designer and UI designer are very different roles that require very different skills. A UX designer considers the user’s whole journey to solve a problem. What steps do they take? What tasks do they need to complete along the way? How intuitive is the experience? The work of a UX designer hinges around finding out what kinds of problems, pain-points and challenges people face on their journey and then working out how to solve them.

Research is absolutely key in this process. UX designers conduct extensive user research to find out who the target audience is and their needs.  Using the responses, they will map out the user journey to consider things like information architecture and features before they create wireframes for the website or app. This is where UI designers step in.  With the skeleton mapped out, UI designers consider all the visual aspects of the user’s journey.

What will the buttons look like? Which images will be featured in each space? How will a user scroll through a page? How will screen sizes be responsive to the device used? UI designers also consider making a site accessible and inclusive by looking at colour combinations, readability, contrast and more. 

To look at it another way, UX designers are concerned with the conceptual aspects, and UI designers focus on the more tangible elements and interaction design.  

How do UX and UI work together?

In this article, we’ve already talked about how UX and UI can’t exist without the other. Something that looks great but is difficult to use is great UI and poor UX. At the same time, something very usable that looks terrible is great UX and poor UI. You need both to create a brilliant experience that people come back for over and over again. 

Forrester’s research revealed that a well-constructed user interface could raise your website’s conversion rate by up to 200%, and a better UX design could yield conversion rates up to 400%.  You can probably think of a time you’ve come across a beautiful website, but as soon as you start using it, you discover it’s clunky and poorly thought out. Maybe the navigation is confusing, or the user flow through the site is challenging, which means you can’t find what you’re looking for.

Will you rave about the site to your friends? No, because good UI can’t make up for bad UX. That’s why UX and user interface need to work with each other.

So what’s the difference between UX and UI designer roles? The UX team works out the website’s flow or app product, how one task will lead to the next, and how the site will help users complete their goals. Meanwhile, in the design process, the UI team works out how all of these interface elements – visual and interactive – will appear to people in the end product. Constant collaboration between UI and UX designers is essential to ensure that the final product is as good as possible.

Research is also a key part of the process for both UI and UX designers. Both need to collect as much information from the end-user as possible, empathise with the user to identify their needs and goals, and then work with each other to get to an incredible end product. Let’s take a closer look at what the two disciplines do:

What are the roles and key responsibilities of UX designers vs UI designers?

UX comes first, so we’ll start with a user experience designer. UX designers focus on understanding their target users through research, testing and feedback. They use quantitative and qualitative insights gained from a range of user research to iterate and improve experiences. But they don’t work alone – they work closely with UI designers, UX researchers, marketers and product teams.

UX designer skills include:

• Research through user journey workshops and competitor analysis
• Product development
• Wireframing and prototyping
• Testing and iteration
• Development planning

On the other hand, UI designers have a goal to make sure the visual elements they choose to create a good experience for the user. Following a design process, they bring the user experience to life and make sure different visual and interactive elements make sense for the user journey.

A UI designer will typically be an expert in:

• Visual branding like Apk Ticket
• Wireframing and prototyping
• Responsive design
• Interactive elements and animation

UI designers should follow basic rules and best practices, but sometimes it’s still worth taking risks to stand out. This challenge is to make sure the risks are not taken at the sacrifice of usability. 

How to learn more about UI and UX

As with all things in the digital world, UX and UI theories and practices are ever-changing. The question is, how do you stay on top of the current UX and UI theories and practices?  Here at Rysen, we have a huge library of resources and articles to help you get started and stay on top of the latest UX trends. 

Here are some more helpful resources you can turn to:

• Don Norman’s The Design of Everyday Things: This is a great place to start and is filled with design gems. Even though it’s over three decades old, it’s still a worthwhile read.
• Everett N. Mckay’s UI is Communication: This text was published in 2013 and is a great introduction to the concept of UI. One thing it does really well is to remove the complexity of UI design.   
• Jennifer Tidwell’s Designing Interfaces: Packed with design best practices, this book helps you understand the connection between design and usability. 
• NN Group resources: This library of articles and videos offers insights into UX in the world today. Don’t miss the video by the UX godfather himself, Don Norman, talking about how designers use the term today. Incidentally, if you want to find out what Norman thinks about Apple design these days, this article is a must-read.

Final thoughts

UI, UX…which one should you use? Even though UI design and UX design are often used interchangeably, it’s important to know the differences between the terms and understand at which stage you should engage each one. Because when you get both right, that’s where the magic happens. People will flow seamlessly through your website, engaging in tasks and ultimately fulfilling their goals. Best of all, they will walk away with enhanced brand trust and be more likely to return over and over again. 

Here’s a recap of the differences between the terms and how they work with each other:

• User experience (UX) design comes before the user interface design
• UI makes interfaces and web design look great, whereas UX makes the product easy to use and navigate 
• UI relates only to a digital product, whereas UX can relate to any product and service
• You need both to create a standout experience for your users and a stellar ROI for your brand.

Ready to improve your website or app and increase your ROI? Learn how our experts can help.

.st{display:table-column; text-align:center;}