What's the difference between UX and UI?
For those less familiar with the world of UX design, the concepts of user experience (UX) and user interfaces (UI) can seem a little daunting. Although UX and UI have distinct definitions they are inherently connected, which often leads to the terms being used incorrectly or interchangeably.
In layman's terms, user interface refers to the practical side of an app or web design e.g., the screens, content blocks, CTAs, iconography - practically anything a user can see on the screen in front of them. User experience on the other hand refers to the holistic experience a user has when interacting with a digital product. It's how your app, web, or UI design makes the user feel and what value they gain from it.
Still confused? Fear not. Whether you’re a product owner who wants to have better conversations with your designers or you’re a founder running lean and looking to ramp up your DIY design skills, this guide will provide you with a comprehensive break down UX vs. UI and help you understand why it’s important to know the difference between the two.
UI design with Uizard
Skip to section:
The difference between UX and UI
UX design and UI design processes
Why the difference between UX and UI matters
What is UX?
UX stands for user experience, which includes all of the aspects of a user’s interaction with a product, service, or digital platform. UX is fundamentally concerned with understanding a user’s needs, motivations, and pain points throughout their journey to solving a problem or completing a task.
Though we most commonly talk about it in terms of apps and web design, UX is not an explicitly digital discipline. It applies to anything that can be experienced. A good example would be a visit to the Apple store, the gleaming, minimalist temple of commerce that hardly feels like shopping and sets a new precedent for experiential retail.
Steve Jobs — who was notoriously obsessive about every detail, down to the minuscule screws inside a Mac’s hard drive — considered the end-to-end UX of an Apple product. Every single touchpoint on the user’s journey was designed with clear intention, starting in-store through the product unboxing and even to getting service at the famous “Genius Bar.”
The field of user experience emerged from the human factor and ergonomic principles in architecture and industrial design, as well as computer engineering. Today, it’s an integral aspect of a user-centered design (UCD) process, one that involves users at every stage of iteration in order to create useful, usable, accessible, and delightful experiences.
What is UI?
UI stands for user interface. An interface is the point of interaction between a user and a device. A screen is an interface, but so is a panel of buttons in an elevator or a remote control. Unlike UX, UI is much easier to describe in tangible terms because it's focused on visual elements. Simply put, UI considers a product’s look, feel, and interactivity.
When it comes to digital interfaces, i.e., anything screen-based, we can break UI into more granular components. There’s the graphical user interface (GUI, which you’ll sometimes hear pronounced as “gooey”), which includes the icons, buttons, logos, and images that represent calls-to-action or navigation.
With the advent of smartphones and touchscreens came the introduction of the gestural user interface: the swipes, taps, two-fingered scrolls, and pinches-to-zoom of interaction design that have become a second language to us. Finally, many devices use haptics like clicks or vibrations that “allow non-responsive surfaces like touchscreens to emulate the feeling of using real objects like buttons and dials.”
It’s not that we’re just obsessed Apple fans, but Steve Jobs did actually write the book on user interface design. Published and revised regularly since the launch of the Apple II desktop in 1977, Apple’s Human Interface Guidelines have been an indispensable resource for UX and UI designers developing apps for Apple’s OS platforms.
The guidelines not only deliver specifications on how screen elements should look and behave but also include a set of design principles that underpin Apple’s core design philosophy. Naturally, Google has a similarly robust set of guidelines (and principles) for its Android platform.
The difference between UI and UX: A side-by-side look
A user experience essentially comprises many user interfaces that come together in a (hopefully) seamless flow of actions and tasks. UX and UI designers are mutually dependent on one another, with their roles, activities, and outcomes fitting together like puzzle pieces.
The UX designer tends to take the lead in a design process. Working alongside the product owner or key stakeholder(s), UX designers own the overall strategy in terms of determining how to organize the activities and deliverables needed for each phase. They spearhead design research activities and create target user personas. Their user flows and wireframes are the blueprints for the UI designers to work from. UX designers drive customer advocacy throughout the design process, ensuring that decisions about form and function track back to resolving a user problem or meeting a user need.
In parallel, the UI designer will take ownership of the product’s creative direction and work closely with any branding guidelines and assets provided. UI designers are tasked with bringing the brand values to life and expressing them in a way that supports the overall user experience. UI designers turn wireframes into detailed visual design mockups and prototypes that show how a page will look, feel, and behave. Good UI must be as purposeful and accessible as it is visually appealing, which is where it dovetails with UX design in particular. No amount of beautiful UI design can fix poor UX.
UI designers are also a bridge to the development team as they are responsible for the delivery of the final design assets, specifications, and accessibility standards needed for front-end coders. UX also plays a key role here in ensuring the usability of the end-user experience and leading user testing efforts to gather feedback.
With the rise of no-code platforms like Squarespace and more sophisticated design and UX design tools like Adobe XD or Figma, hybrid UX/UI roles are emerging. For example, the role of “product designer” might imply the ownership of a design process, from strategy through execution. Product designers have flexible “full-stack” skillsets that span across UX, UI, and front-end development. Unsurprisingly, these folks are sometimes referred to as “unicorns.” You’re likely to find this role in the tech industry and startup environments, where a “jack-of-all-trades” approach is often needed to keep things lean. Product designers can also be product managers, informing design decisions with business strategy.
UX design and UI design processes
The most practical way of illustrating the breakdown between UX and UI is to look at who’s doing what during each of the phases of a typical design process. Here’s a simple chart we’ve created to make it even easier:
Why the difference between UX and UI matters
For founders and product owners, understanding the difference between UX design and UI design can put you in a better place to make decisions about where, when, and what kind of help you might need to bring your idea to life - or even what UX design software you want to use for your next project. It might also help you identify gaps in your own skillset so you can focus on building it up.
Though UX and UI may focus their attention on different aspects of the design process, what’s far more important is what they have in common: the user. As design skillsets have hybridized and design toolkits have been democratized to be more usable and accessible to a wider audience, what matters is less a division of labor than an ability to connect each design decision to a clear intent that serves a user need. Regardless of roles, understanding your user is the most important design skill of all.
Want to learn more about the world of UX design? Head over to the Uizard blog where we discuss everything from the laws of UX right through to the UX design trends of 2023 and beyond. Ready to bring your next project to life? Sign up to Uizard for free today.