The distinction becomes clearer when you start with a task rather than a screenshot. A booking form can look polished yet leave you unsure how to correct a phone number. Working through that failure reveals where research, interaction design, interface design and development need to meet.
What Do UX and UI Stand For?
UX stands for User Experience. It includes whether a product meets someone's needs, how it feels to use and what happens around that use. Nielsen Norman Group's definition extends UX across a person's interactions with a company, its services and its products. The experience therefore continues beyond the screen.
UI stands for User Interface. In a digital product, it includes menus, fields, text, icons and the states of those controls. A button's focused, loading and error states are interface decisions too. Clear feedback matters alongside visual composition.
Scroll sideways to read every column. Keyboard: focus the table and use the arrow keys.
| Decision | UX Concern | UI Concern |
|---|---|---|
| Choosing a time | What information does someone need before deciding? | How are available, unavailable and selected times distinguished? |
| Entering details | Which details are necessary, and how can mistakes be corrected? | Where do labels, instructions and errors appear? |
| After booking | Can the person change or cancel the appointment? | How are confirmation and follow-up actions presented? |
| Typical output | Research findings, task flows and test observations | Screen layouts, component states and visual rules |
These are overlapping areas of work, not fixed job boundaries. One designer may cover both in a small team. A larger product team may have separate research, interaction and interface roles. They still share responsibility for helping people complete the task.
How UX and UI Work Together: A Booking Example
The following is a hypothetical design exercise, not a client case study or a report of tests already performed. The task is: “Book an appointment for a suitable time next week.”
1. Identify the Decision Before Drawing the Screen
Find out what someone needs to know before booking: the service duration, location, price or available times. If you have not spoken to users, “people want to see the price first” remains a hypothesis. Existing support enquiries and interviews can help you investigate it. Keep unnecessary personal details out of research records.
2. Design the Flow and Its States
Sketch the path from service selection to time selection, required details and confirmation. A wireframe helps you work through content and controls without committing to a finished visual design. An interactive prototype lets you try transitions and behavior. The distinction is not simply that one is grey and the other colorful.
When designing the time selector, do more than choose a highlight color. Identify the selected time in text, make the control operable by keyboard and show the date clearly on confirmation. If a day has no available appointments, offer a route to another day. Empty and error states belong in the design alongside the successful path.
3. Test the Proposed Solution With a Task
Ask a participant who resembles the intended audience to complete the booking. Avoid instructions such as “press the orange button on the right.” Observe where they hesitate, what they misunderstand and when they need assistance. Usability testing examines how someone performs a task, rather than simply asking whether they like the design.
If they cannot confirm the appointment, separate the possible causes. Is the next step unclear, is the button hard to find, or has the system stopped responding? Those problems call for different combinations of flow, content, interface and engineering work. Changing the button's color will not resolve every failure.
What Does a UI/UX Designer Do?
A UX designer helps define the problem, plan research, organize information and task flows, and evaluate proposed solutions. A UI designer shapes how those flows are presented and operated: typography, spacing, components and their states. A combined UI/UX role can cover a broad span from research to visual delivery, so its actual responsibilities need to be agreed with the employer or client.
Graphic design provides a useful foundation in visual hierarchy. Interface work adds interaction, accessibility and different screen conditions. Understanding font families and weights, for example, helps you define consistent text styles. Whether those styles work still depends on the real content and the conditions in which people read it.
A useful handoff includes more than ideal screens. Show a long name, an empty result, invalid input, loading and a narrow layout. Comparing the implemented interface with the intended behavior helps the team catch gaps between the prototype and the working product.
Which Tools Should You Learn?
A paper flow, a document of interview questions and a spreadsheet of observations can all support design work. Figma is one option for screens and interactive flows; the first-prototype walkthrough shows how to connect screens. Figma's own prototyping documentation explains the interaction features in more detail.
Choose a tool for the output you need. Team comments, sharing permissions, file handoff and access to paid features all affect the decision. Software fluency does not replace research. A clickable prototype also cannot establish how a live product performs, validates data or works with assistive technology.
How Do You Judge Whether the Design Works?
Choose a concrete task and look past visual preference. Can the person understand the next action, recognize the result and recover from a mistake? Usability heuristics provide a structured starting point for reviewing those questions. They do not replace observing people use the product.
- Task outcome: Was the appointment completed, was the correct date chosen, and was help needed?
- Feedback: Is it clear when an action is in progress and when it has finished?
- Access: Can someone operate the controls without a mouse and use the form with enlarged text?
- Screen conditions: Can the same task be completed on a phone? Responsive design involves adapting the layout, not simply shrinking its elements.
If you measure completion time or success rate, record the task, participant count and conditions. A few observations do not establish a conversion uplift across your entire audience. Fix the obstacle you observed, then evaluate the task again.
How Can a Beginner Start Learning UI/UX?
Work through a small task from beginning to end, such as registering for an event. Write a research question, sketch a flow, design its states and try it with suitable participants you can reach. Label a practice project honestly. Do not invent interview findings or quotes from people you never spoke to.
In a portfolio, show the problem, your role, the reasons for your decisions and what changed after evaluation. This UX portfolio approach makes the process visible alongside the finished screens. Coding knowledge can improve collaboration with developers, but software implementation responsibilities vary between design roles.
A worthwhile early goal is to explain why one task has become clearer. That gives you something more useful to discuss than a large collection of screens: evidence for the design decisions you made.
