What’s the difference between UI and UX design?
Anybody even the tiniest bit familiar with software and digital product development is probably aware of the terms, user interface (UI) and user experience (UX). However, even those who are very familiar with the topic can conflate UI and UX, using one phrase when they mean the other, or even seeing them as interchangeable. This article aims to distinguish between UI and UX, highlight their differences and points of contact, and the importance of both UI and UX to the success of your digital product.
Table of contents
If there’s a pair of design terms that are consistently confused, it must be UI (user interface) and UX (user experience). And why not, after all, they both begin with a ‘U’, indicating a focus on the users of digital products, and both have an emphasis on making such products attractive and easy to use. But once we get inside the digital product development process, the UI and UX design are clearly distinct from each other, even if they are inextricably linked.
Why are UI and UX important?
Let’s say you sell goods online and to do so, you have an e-commerce platform – an online location where your customers (users!) can browse, buy, track orders, leave reviews, etc. Assuming your platform fulfills its functions (i.e. your users can buy your products, i.e. the platform works), then whether it is a success or a failure depends on a combination of UI and UX.
In fact, UI and UX together determine the quality of a user’s interaction with a digital product, and therefore their response to it. UI and UX make the difference between a product that users rave about and recommend to others, and a product that is quickly (but not necessarily quietly) abandoned for something ‘better’.
UI and UX are not ‘nice to have’; they are key determinants of your digital product’s success.
Defining UI vs. UX design
UI (User Interface) Design
User interface design is all about the way in which the user interacts with the digital product. This includes the visual elements, and the product’s look and feel (colors, images, typography…). The goal is to create something not only usable but also appealing, regardless of the device and/or screen used to access it.
UX (User Experience) Design
User experience, on the other hand, has a wider focus: the whole user journey, including how the user feels when they use or otherwise interact with the product.
What is the difference between UX and UI?
UI design dates back to the first graphical user interfaces developed in the 80s, allowing users to interact more visually with their computer, using icons, buttons, menus, etc. Similarly, the first point-and-click mouse interface was a significant step in UI design.
The concept of UX design derives from UI – once users have a product interface to interact with, the quality of their experience and how they feel about it (and the impact that has on how they go on to use it, or not) become a key focus for digital designers.
Being focused specifically on a product’s interface or interfaces, UI is a more specific field than UX. As such, it is part of the wider user experience. That wider experience includes the whole user journey: when and how the user first sees or hears of the product, where they can find it, try it out, the purchase/acquisition process, the longer-term use of the product, how they report any faults or other feedback, the response they get to that report… and so on, including how all this makes them feel.
A useful way of explaining the scope of UX is to use the six categories of value from Peter Morville’s ‘UX Honeycomb’:
- Usable – the product and its systems are easy to use; the learning curve necessary for competent use is short and not unnecessarily steep.
- Useful – the product fills a genuine user need or desire.
- Desirable – the product’s aesthetics are attractive.
- Findable – navigation is smooth and intuitively structured, and information can be easily located.
- Accessible – the same user experience is available for all, regardless of disability.
- Credible – the product (and the company producing it) are trustworthy.
It’s clear that UX goes far beyond the functional design of the product. In fact, depending on the type of product and its development, the user experience is changeable but potentially endless.
One way of thinking about the difference between UI and UX is that UI is what the user sees and uses, and UX is what the user feels about what they see and use.
Having defined our terms, let’s take a look at the types of activity undertaken by UI and UX designers.
What do UI designers do?
- Design-focused research – A UI designer needs to understand the product’s users, its competitors, and combine that information with the latest design trends.
- Design systems – Again, in the wider context of a business offering multiple products and services, a UI designer may be responsible for creating a design system that incorporates style guides, pattern libraries, and standardized components and ensures consistency for users. This principle of consistent design goes further, to using common and accepted design patterns (e.g. error messages are red, a ‘bell’ icon signifies a notification, plus common button designs, etc. — all of which reduce the user’s learning curve with the product).
- Visuals – In terms of what a user will see on the screen (or other interface) in front of them, a UI designer is responsible for the choices of colors, icons, buttons, images, typography – all the visual elements.
- Accessibility – Ensuring the design measures up to the current Web Content Accessibility Guidelines (WCAG) which include recommendations on accessibility issues such as text, font size, color contrasts, etc.
- Animation/Interactivity – This includes any interactive element of the interface, e.g. animations, transitions, etc.
- Responsive design – Interface design needs to change depending on the device, platform, and screen being used to access the product.
- Branding – UI designers must factor in the branding of the product, including how it is positioned in relation to the wider branding of the business.
What do UX designers do?
- User research – A UX designer must understand the product’s target users, including the need(s) the product intends to address, user motivations for choosing it, and the impact of design decisions on the user.
- Information architecture – The product’s information architecture greatly influences the product’s ease of use, focusing on the organization and labelling of information and data.
- User flows – A user flow is a diagram showing a user’s whole journey of interactions with the product, everything involved with using it. A UX designer creates the most efficient user flow.
- Wireframing – A wireframe is a kind of blueprint or schematic representing the product’s interface. It could be a hand-drawn sketch but is more likely to be in digital form.
- Usability testing & Analysis – Testing is best done with representatives of real users. Testing establishes whether the product is on track to meet user and business needs, and analysis of results provides valuable feedback for the ongoing design process.
Working in scrum — producing a series of iterations of the product — the UI and UX design functions have regular input to the development of the product. At Boldare, our product designer role brings both UI and UX skills to the process, continually building on and refining the design in response to work done by the rest of the team.
How UI & UX work together
As should be clear by now, although there is a big difference between UI and UX, they are not separate. Both are necessary for the design of a successful digital product, and both impact how the product is received.
A website that is beautiful to look at and easy to navigate (great UI) can still be targeting the wrong users or be based on an incomplete user journey, leaving people unable to find what they’re looking for (terrible UX).
Equally, a wireframe may present the most elegant navigation of the user’s journey (great UX) but the end result uses difficult-to-read colors and fonts and makes no concessions to mobile access (terrible UI).
Any digital product requires competent (or even better, inspired!) UI and UX design if it is to engage with its target users, meet their needs, and keep them coming back for more while recommending it to others.
Difference between UI and UX — Summary
So, what is the difference between UI and UX design? To put it in a nutshell, UI is what enables a user to interact with a digital product; whereas UX is their (emotional) experience and response to that interaction. To use the analogy of a pizza restaurant… UI design focuses on the pizza, the chair, the table, the cutlery, and the glass of wine… and UX design looks at why people eat pizza in the first place, what attracts them to some restaurants and not others, the restaurant’s location and accessibility (public transport, car parking, etc.) and the welcome and service they receive while dining.
With UI and UX design, while the roles may differ (and even be divided into subcategories as we see the increasing popularity of roles and disciplines such as content designer, interaction design, and UX writer) it’s not about opting for one or the other in your development process, it’s about having both. It’s not UI vs. UX; it’s UI and UX.
Are you curious how it feels to join Boldare and spread your wings in UI/UX? Visit our career page and check the current vacancies!
Share this article:
