# What Is UI/UX? Meaning, Differences, and Examples

> UI/UX combines interface design and user experience. Learn what it stands for, UI vs UX, the design process, 10 usability principles, and an example.

**URL:** https://www.ciptadusa.com/blog/ui-ux-adalah  
**Type:** blog  
**Author:** PT Cipta Dua Saudara  
**Category:** Engineering  
**Published:** 2026-10-22  
**Cover:** https://www.ciptadusa.com/media/uploads/blog/2026-10/1792635448430-ui-ux-adalah-20261022.webp  

## Article

UI/UX combines two disciplines in digital product design. UI (user interface) is the part users see and touch, such as layout, buttons, colors, and typography. UX (user experience) is the user's overall experience with a product or service. Figma describes UI as the interactivity, look, and feel of a product screen or web page, while UX covers a user's overall experience with the product or website ([source](https://www.figma.com/resource-library/difference-between-ui-and-ux/)).

In short, UI answers "what does it look like and how do I interact with it", while UX answers "can users reach their goal easily". This article covers what UI and UX mean, what the abbreviations stand for, how they differ, the UI/UX design process, usability principles you can use to review a design, an example from a business app, and where UI/UX fits in a software project.

## What Does UI UX Stand For?

UI stands for user interface. UX stands for user experience. The two are written together as "UI/UX" because in website and app projects their work depends on each other, even though their focus is different.

## What Is UI (User Interface)?

UI is every on-screen element that serves as a point of interaction between the user and the system. Figma lists four key considerations in UI design ([source](https://www.figma.com/resource-library/difference-between-ui-and-ux/)):

- **Page layout.** How the header, content, white space, and navigation are arranged on a web page or app screen.
- **Color scheme and font selection.** Chosen for consistency, accessibility, and brand alignment.
- **Interactive elements.** Buttons, drop-down menus, forms, and other components that make user flows clear.
- **Wireframe and prototype fidelity.** UI designers turn basic wireframes and prototypes into high-fidelity, interactive mockups.

In practice, UI work produces screen designs, reusable components, and a style guide that keeps the interface consistent as the app grows.

## What Is UX (User Experience)?

Nielsen Norman Group defines user experience as all aspects of the end user's interaction with the company, its services, and its products. The first requirement for a good user experience is to meet the exact needs of the customer without fuss or bother ([source](https://www.nngroup.com/articles/definition-user-experience/)).

This definition goes beyond the screen. Nielsen Norman Group gives the example of a movie review website: even if the UI for finding a film is perfect, the UX will be poor for someone looking for a small independent release if the database only contains movies from the major studios ([source](https://www.nngroup.com/articles/definition-user-experience/)). In other words, UX is also shaped by data, business flows, system speed, and the services behind the app.

UX work includes user research, information architecture, flow mapping, wireframes, prototypes, and testing with users ([source](https://www.figma.com/resource-library/difference-between-ui-and-ux/)).

## The Difference Between UI and UX

Figma describes UI as a specialized subset of UX ([source](https://www.figma.com/resource-library/difference-between-ui-and-ux/)). The table below summarizes the differences:

| Aspect | UI (User Interface) | UX (User Experience) |
| --- | --- | --- |
| Focus | What is on screen and how users interact with it | The user's overall experience |
| Key question | Is this screen clear and consistent? | Can users complete their task? |
| Scope | Layout, color, typography, icons, components | Research, flows, information architecture, testing |
| Deliverables | Screen designs, design system, mockups | Personas, user flows, wireframes, test reports |
| When it happens | After flows and structure are agreed | From the start of the project and after release |

UI and UX cannot be fully separated. A polished interface does not help if the flow is confusing, and a logical flow still feels heavy if the buttons and text are hard to read.

### UI/UX, Usability, and Utility

Two more terms come up in UI/UX discussions. Nielsen Norman Group defines usability as a quality attribute that assesses how easy user interfaces are to use, and utility as whether the design provides the features users need. Together they determine whether something is useful ([source](https://www.nngroup.com/articles/usability-101-introduction-to-usability/)).

Usability is defined by five quality components ([source](https://www.nngroup.com/articles/usability-101-introduction-to-usability/)):

1. **Learnability:** how easily users accomplish basic tasks the first time.
2. **Efficiency:** how quickly users perform tasks once they have learned the design.
3. **Memorability:** how easily users regain proficiency after a period of not using it.
4. **Errors:** how many errors users make, how severe they are, and how easily users recover.
5. **Satisfaction:** how pleasant the design is to use.

## The UI/UX Design Process

Figma outlines five steps of UX design ([source](https://www.figma.com/resource-library/difference-between-ui-and-ux/)). Here is a condensed version, with the UI design stage added:

1. **User and competitor research.** Understand who the users are, the problems they face, and how they behave when using an app. Research findings are consolidated into personas.
2. **Information architecture.** Define navigation, content hierarchy, features, and key flows, including user decision points in a flowchart.
3. **Wireframes and prototypes.** Turn the structure into screen skeletons, then into prototypes people can try.
4. **UI design.** Apply color, typography, components, and visual rules to the agreed wireframes.
5. **Testing and fixes.** If testing reveals confusing navigation, menus, or forms, the team fixes them before launch.
6. **Ongoing updates.** The design keeps evolving after the product is in use.

### Wireframes, Wireflows, and Prototypes

Wireframes show page-level layout ideas, while flowcharts document workflows and user tasks. For apps with only a few core pages whose content changes based on user interaction, Nielsen Norman Group describes wireflows, a combination of wireframes and flowcharts ([source](https://www.nngroup.com/articles/wireflows/)).

A prototype is a hypothesis: a candidate design solution for a specific problem. A direct way to test that hypothesis is to watch users work with it. Prototypes range from paper sketches to detailed mockups, and from static to clickable. Nielsen Norman Group points out that ripping up code is very expensive, while ripping up a prototype is not, especially if it is just a piece of paper ([source](https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/)).

### How Many Users for a Usability Test?

Jakob Nielsen recommends testing with no more than 5 users per round and running several small rounds. In the data he analyzed, 5 users found about 85% of usability problems, and a budget for 15 users is better spent on 3 rounds of 5 users so that fixes can be retested ([source](https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/)).

This applies to comparable users. When an app serves highly distinct groups, such as purchasing agents and sales staff, Nielsen recommends 3 to 4 users from each group when testing two groups, and 3 users per group for three or more groups ([source](https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/)).

## 10 Usability Principles for Reviewing a Design

Jakob Nielsen's 10 usability heuristics are used to evaluate user interfaces ([source](https://www.nngroup.com/articles/ten-usability-heuristics/)). Business owners can use them as a checklist when reviewing a vendor's design:

1. **Visibility of system status.** Keep users informed about what is going on through timely feedback, such as a "saving" indicator.
2. **Match between the system and the real world.** Use the users' language, not internal team jargon.
3. **User control and freedom.** Provide clear exits, such as a cancel button and undo.
4. **Consistency and standards.** The same words, actions, and visuals mean the same thing, following platform conventions.
5. **Error prevention.** Prevent mistakes before they happen, for example with a confirmation before important actions.
6. **Recognition rather than recall.** Show options and information so users do not have to remember them.
7. **Flexibility and efficiency of use.** Offer shortcuts for experienced users without confusing new ones.
8. **Aesthetic and minimalist design.** Do not show information that is irrelevant to the user's task.
9. **Help users recognize, diagnose, and recover from errors.** Write error messages in plain language and point to a solution.
10. **Help and documentation.** Provide guidance that is easy to find when needed.

### Accessibility as Part of UX

A good experience must also work for users with disabilities. The W3C Web Content Accessibility Guidelines (WCAG) are a technical standard for making web content more accessible, and they can also be applied to native apps and software ([source](https://www.w3.org/WAI/standards-guidelines/wcag/)). The principles are grouped into four: perceivable, operable, understandable, and robust. Examples include providing text alternatives for non-text content and making all functionality available from a keyboard ([source](https://www.w3.org/WAI/standards-guidelines/wcag/glance/)).

## UI/UX Example in a Business App

The example below is an illustration, not data from a specific project. A distributor wants an ordering app for its field sales team.

| Problem found | Area | Fix |
| --- | --- | --- |
| Sales reps open 4 menus to create one order | UX (flow and information architecture) | The order flow is condensed into one screen with progressive steps |
| "Send" and "Delete" buttons sit side by side in the same color | UI (interactive elements) | The primary button gets a distinct color and position, and delete asks for confirmation |
| Orders fail to send on a weak signal with no notice | UX (system status and errors) | The app shows "saved, waiting for signal" and resends automatically |
| Price text is too small to read in sunlight | UI (typography and contrast) | Font size and color contrast are increased |
| Product names in the app differ from warehouse terms | UX (users' language) | Terms are aligned with what the warehouse and sales teams use |

Note that some of these problems only surface when sales reps test the app in the field, not when the design is reviewed in a meeting room.

## Where UI/UX Fits in a Software Project

In the [SDLC](https://www.ciptadusa.com/en/blog/sdlc-adalah), UI/UX sits in the analysis and design stages, before development starts. In an [agile](https://www.ciptadusa.com/en/blog/agile-adalah) model, design can be done feature by feature and retested in the next sprint. When building an [MVP](https://www.ciptadusa.com/en/blog/mvp-adalah), UI/UX helps decide which core flows must work in the first release.

UI/UX is also related to [UAT](https://www.ciptadusa.com/en/blog/uat-adalah). Usability testing is done on prototypes so flow problems are found early, while UAT confirms that the built software meets business needs before it goes live.

On the budget side, design is one of the components that shape the [cost of building a web app](https://www.ciptadusa.com/en/blog/biaya-pembuatan-aplikasi-berbasis-web). Nielsen Norman Group points out that ripping up code is very expensive while ripping up a prototype is not, so flow changes are best discovered at the prototype stage ([source](https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/)).

### What Business Owners Should Prepare

1. **Business goals and primary users.** Who will use the app and which tasks matter to them.
2. **Access to real users.** Line up a few prospective users from each group for interviews and prototype tests.
3. **Sample documents and working terms.** Forms, reports, and everyday terms help designers use the users' language.
4. **Brand guidelines.** Existing logo, colors, and fonts, if any.
5. **Design approval criteria.** Agree on who approves the design and on what basis, such as prototype test results rather than personal taste.

More questions for assessing a vendor are in our [guide to choosing a software development company in West Java](https://www.ciptadusa.com/en/blog/pilih-jasa-pembuatan-software-jawa-barat-20260907). If you are not sure you need custom software, read [when a business needs custom software](https://www.ciptadusa.com/en/blog/kapan-bisnis-butuh-software-custom-2026).

## FAQ

### What is UI UX?

UI (user interface) is the look and the interactive elements on screen, such as buttons, layout, color, and typography. UX (user experience) is the user's overall experience with a product or service ([source](https://www.figma.com/resource-library/difference-between-ui-and-ux/)).

### What does UI UX stand for?

UI stands for user interface, and UX stands for user experience.

### What is the difference between UI and UX?

UI focuses on what is on screen and how users interact with it, while UX focuses on whether users can reach their goal easily, including research, flows, and testing. Figma describes UI as a specialized subset of UX ([source](https://www.figma.com/resource-library/difference-between-ui-and-ux/)).

### What does a UI/UX designer do?

A UX designer researches users, builds the information architecture, creates wireframes and prototypes, and tests them. A UI designer turns wireframes into high-fidelity, interactive visual designs ([source](https://www.figma.com/resource-library/difference-between-ui-and-ux/)). On small teams, one person can hold both roles.

### Is UX the same as usability?

No. Usability is a quality attribute of the interface: how easy it is to learn, how efficient and how pleasant it is to use. UX is a broader concept ([source](https://www.nngroup.com/articles/definition-user-experience/)).

### When does UI/UX happen in an app project?

From the start, once business goals and release scope are agreed, and before development begins. Ripping up a prototype costs far less than ripping up code ([source](https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/)). After release, the design keeps being updated based on real usage.

## Design and Build Your App with CDS

PT Cipta Dua Saudara starts every custom software project with a Discover stage to agree on business goals and first-release scope, followed by a Design stage that moves from wireframes to a clickable prototype tested with real users before development starts ([source](https://www.ciptadusa.com/en/services/software)). See our [custom software development](https://www.ciptadusa.com/en/services/software) service, or start with [IT consulting](https://www.ciptadusa.com/en/services/consulting) to map your processes and user flows. We also build our own products such as [Zetta CRM](https://www.ciptadusa.com/en/incubating/zetta-crm), and you can see our work in our [portfolio](https://www.ciptadusa.com/en/works).


---

*Markdown version of https://www.ciptadusa.com/blog/ui-ux-adalah — generated for AI agents and LLM crawlers.*