How to create user personas [with examples]
26 Mar 2021
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.
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%.
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.
Now you know what user experience is, let’s take a look at the next concept.
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:
Invest in improving these elements, and you can skyrocket brand trust, referrals and loyalty.
So far, in this article, we’ve defined what UX and UI are. Now let’s summarise the key differences between the two.
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.
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.
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:
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.
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.
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.
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.
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.
Ready to improve your website or app and increase your ROI? Learn how our experts can help.
A forward-thinker by nature, Ryuji’s vision is motivated by his experience and ingenuity. Having worked at the forefront of digital design for many years, Ryuji brings with him the determination to generate powerful and innovative solutions.