UX and UI: two different aspects
A beautiful interface cannot save a poor experience, but a good experience also needs a clear enough interface for users to reach their destination.
UI (user interface) is what customers see and touch: buttons, colors, text, screen layout. UX (user experience) is broader, encompassing the entire journey of the customer from the moment they arrive at the page to when they achieve their goal, where the interface is just one part. Both need to be done together because a beautiful interface on a wrong flow still yields poor results.
- need clear division between experience flow and interface
- Beautiful pages but customers often drop off midway or call back for clarification
- completely new creation, needing to work on both in parallel
- only changing colors or enhancing the surface is enough
- the flow and content are completely fine, just need visual improvements
UI and UX are two terms that are often used interchangeably, even within the design community. This confusion is not just a matter of terminology; it leads to poor decisions in projects: hiring the wrong people, doing the wrong tasks first, and then being surprised when the results are not as expected.
Two concepts, two scopes
UI (user interface) is what customers see and interact with directly: buttons, text boxes, colors, layouts, and the display status of each screen. This is the surface part, the visible aspect.
UX (user experience) is much broader. It encompasses the entire journey of the customer from the moment they discover the product to the completion of their task, including their feelings afterward. This journey includes the interface, but also involves content, flow, loading speed, the logic of each step, and even what happens before and after the customer enters the site.
A movie review website with a perfect interface still provides a poor experience if the underlying movie data is incorrect. This example from the Nielsen Norman Group clearly illustrates what Sinh Vũ often reminds clients: good UI is a necessary condition, not a sufficient one.
Usability is in the middle
Between UI and UX, there is an important concept to know: usability. This is a quality attribute of the interface, measuring three things: can users learn to use it quickly, can they use it effectively, and do they feel comfortable using it.
Usability belongs to the interface but affects the overall experience. A page with high usability means buttons are in the right places, text is clear enough, and the next step appears at the right moment, indicating that the page is performing well in both UI and part of UX.
When to focus on each aspect
Focusing on UX first when customers often leave the page midway, misplace orders, or call back even though the page looks good. This is a sign that the flow has issues: customers do not understand the next step, cannot find the needed information, or lose trust before reaching the conversion button.
Focusing on UI later when flows and content are stable, needing to enhance visual perception and consistency with brand identity. This is when colors, fonts, white space, and images truly come into play.
Creating both in parallel when building something completely new. In this case, there needs to be a workflow and content structure established before or alongside the visual design, not just to create a beautiful interface and then think about the flow.
Common mistakes when mixing up two concepts
- Hire to create a beautiful interface and expect conversion rates to increase on their own, while the issues with flow and content remain unaddressed.
- Treating UX and UI as one, completely skipping the flow and structure building phase, leading to a visually appealing screen but leaving customers unsure of where to go next.
- Evaluating a design solely based on its visual appeal, without checking if it helps the customer reach their goal.
- Thinking that changing colors or buttons improves the experience, while the root of the problem is a lack of convincing content or slow loading pages.
User experience encompasses all aspects of the end user's interaction with the company, services, and products. The interface is an important part of that experience, but it is not everything.
Nielsen Norman Group, The Definition of User Experience (UX)
The viewpoint of Sinh Vũ
Sinh Vũ clearly separates two tasks in each digital project. The first is creating the experience flow on Figma to determine where customers come from, what path they take, what information they need at each step, and where the conversion points are. This is pure UX work, devoid of aesthetics, focusing solely on structure and logic.
After the flow is agreed upon, Sinh Vũ will place the interface on the brand identity foundation, so the page looks trustworthy from the first second. This is a UI task, and it truly shines when placed on the right flow.
Sinh Vũ does not accept creating beautiful interfaces on a flow that has not been thoroughly considered. The final handover always includes a journey map and content strategy, not just design screens.
Decision checklist
Topic: How UX and UI differ. Sinh Vũ guide, sinhvu.com
Select each item you find appropriate, then print or save as PDF to take with you.
If you have marked most of the signs above, this is the time to discuss in more detail. Sinh Vũ can help you review and propose a direction.
References
Nielsen Norman Group, The Definition of User Experience (UX). Nielsen Norman Group, UX vs. UI (video). Practical experience from Sinh Vũ.
Frequently asked questions
Can you hire someone who can do both UX and UI?
Is there someone who can do both, but these are two different tasks that need to be executed in the correct order: content flow and structure first, visual interface second. If you hire someone to do both and they skip the flow stage to jump straight into beautiful design, the result is often a page that looks good but does not lead customers to the purchase or contact point.
How can you tell if the issue with your site lies in UX or UI?
If a client often drops pages midway, places them incorrectly, or calls back even though the pages look good, the issue usually lies in the flow, meaning UX. If the client arrives, understands what needs to be done, follows the steps correctly but feels the page lacks trust or is inconsistent with the brand, the issue lies in the interface, meaning UI. The two cases require different handling.