While user interface (UI) and user experience (UX) are often used interchangeably, they are distinct concepts.
UI vs UX: Similar Goals But Not The Same
Both UI and UX work together to create a user-friendly interface that helps a target audience easily navigate and interact with a website, product, or app.
Let’s go through each.
User Experience Explained
User experience is how easily a user can move around a site, app, or product to accomplish their goal. It’s about solving user problems and delivering an overall experience that resonates positively and creates goodwill.
UX is rooted in data. UX teams focus on gathering qualitative and quantitative data to uncover user pain points and develop effective solutions. UX teams use UX research tools like card sorts, tree tests, user interviews, and surveys to uncover user needs and figure out the best solutions. They also conduct usability testing to see how well designs work for end users.
The data collected from these research efforts form the backbone of future UX decisions, whether a product is being designed from scratch or an existing product is being reevaluated. Well-researched and analyzed data helps UX teams avoid going down dead end paths during the product development process. It also helps them pinpoint issues with designs already in place.
Great UX starts long before a product makes its way to a user. UX professionals are there from the start of any new project. Their work adheres to five layers of great UX explained by Jesse James Garret in his book Elements of User Experience.
- Strategy – where business objectives and user needs meet. Both are important and great design balances the two.
- Scope – where strategy is transformed into the design requirements needed in the simplest yet most effective way.
- Structure – where interactive design and information architecture is defined to begin fleshing out what the product will look like and how it will function.
- Skeleton – the fleshed out version of the structure that identifies where elements are located and how they interact.
- Surface – what the user actually sees.
UX involves tangible things like information architecture and site navigation, but also ties into the psychology of the end user. Good UX helps a user get what they need as fast as possible, with as little friction as possible. Great UX understands the user’s feelings and emotions, then creates products that resonate.
If UX was a person, it would be an architect. It’s the entity responsible for figuring out what the user wants and needs, building an effective blueprint to meet those requirements, and guiding the construction of the final deliverable.
Depending on the size of an organization, the UX team can be a single person wearing many hats or a group of UX professionals. UX-specific roles typically found in larger UX teams include:
- UX designer – a generalist role that is involved in all aspects of the product design process, from concept ideation and prototype development to user testing and product release.
- UX researcher – a specialist with an understanding of human behavior, knowledge of the technical testing tools used to surface data about user needs, pain points and emotions, and analysis skills to interpret the data into actionable insights.
- UX engineers – “unicorns” of the UX world, these people have UX design knowledge and skills in frontend development. This means they can code the prototypes and write code to launch the product. If you’re a designer thinking about getting into UX, having this extra skill set gives you an excellent chance of elevating your starting salary.
- Visual designer – a specialist, often a graphic designer, who understands the theory behind great design and has the technical skills to bring the UX designer’s ideas to life for the end user. This is where UI comes in.
User Interface Explained
User Interface is the visual side of the UX equation. It’s about the aesthetic experience a user has when engaging with a product. It’s the tangible side of the user experience.
UI includes things like color schemes, icons, buttons, and other design elements and functionality a user sees. It encompasses all types of interactive user interfaces, including gesture-based, graphical, and voice-controlled.
Great UI relies on visual designers that possess a mix of artistic skills and UX knowledge. You’ll often find graphic designers in the mix, but also will see people with backgrounds in art theory and interactive design. UI focuses on design and layout with an emphasis on the individual elements found on each page.
UI professionals make decisions about all aspects of a screen or page design. Using their design knowledge, they choose button shapes, banner designs, images, and typography. They go beyond the obvious design elements, and also guide things like swipe and scroll motions, animations, and screen transitions.
But it isn’t just about making things pretty. UI professionals must also consider user needs and expectations. They think about things like is the design…
- a guide for the user?
- what the user expects to see?
- relevant?
- perceived as valuable?
- aligned with the overall brand identity?
UI experts create storyboards to explain design ideas, and assist with developing mock-ups and prototypes to explain and test site functionality. But UI professionals don’t work in a vacuum. They base their work on the framework and guidance developed by UX designers and other UX team members.
If UI was a person, it would be an interior designer. It’s the entity responsible for ensuring that the product is aesthetically pleasing, follows principles of great design to meet user needs, and delivers a consistent, on-brand experience.
Why UI and UX Need Each Other To Be The Best For Users
You can’t have great UX without great UI. Nor can you have great UI without great UX.
These are bold statements that are sometimes hotly debated in UX circles. But both are true.
Even though UI is a subset of UX, there is a symbiotic relationship between UX and UI. They need each other, and neither can succeed without the other.
When it comes to digital experiences, people form first impressions in less than a second–0.05 seconds to be exact. That means that if your UI is not up to par, visitors will leave because they already decided it isn’t worth their time to stick around and explore.
You literally have less than one second to capture their attention with great UI.
But even if your UI is dialed in, you still have another hurdle. Your UX has to give users what they want without friction. If a user has to struggle to navigate a site or figure out where to find what they’re looking for, the best UI in the world isn’t going to keep them around.
The goal is to deliver great UI and UX that work in tandem to deliver an exceptional user experience. That’s top-level UX (sorry, UI, you get lumped into UX at this point). It is–or should be–the goal of any product team.
Here’s an example of UX and UI not working together to deliver excellence. Let’s say a person learns a lot about a certain feature during their buying journey. So far the UX team has done a great job. But when the user starts trying to use the feature, the feature doesn’t work as they thought it would. The UI is disjointed from the UX, and results in a frustrating experience for the user.
So how do you ensure that UX and UI are singing the same song to deliver an optimal user experience? Here’s one example.
Let’s say your organization wants to design a new mobile app to supplement its bricks-and-mortar stores. The UX team is first on the scene. Their job is to flesh out the functionality of the app and map the user journey.
How is the user going to realistically use the app? Will the app let users complete purchases online? Will customers have insight into their purchase history from the app, in-store, or both? Can customers initiate returns on the app?
The UX team does the research, synthesizes the data, and works closely with the product development team to design a framework that maps out the entire user’s journey.
Then it’s time for the UI team to step in. This team creates the designs, visuals, and interactive elements that bring the user journey to life. UI works together with UX to refine the details and deliver the final design. Then it’s off to the developers to bring these designs to life.
