
Coding Education
What Are UI and UX: Definitions, Differences, and Examples

Bayu Nugraha
Children's Coding Specialist

UI is the interface a user sees and touches, while UX is the experience a user has while using it.
Table of Contents
The terms stand for user interface and user experience. The usual analogy: UI is the chairs, tables, and lighting in a restaurant, while UX is the whole feeling of eating there - including how long you waited and whether the staff were kind.
UI vs UX
| UI | UX | |
|---|---|---|
| Concerned with | Appearance: colour, buttons, type, layout | Experience: flow, ease, how it feels to use |
| Its main question | Does this look clear and pleasant? | Do people actually accomplish their goal? |
| Visible? | Yes, immediately on screen | No, only felt while using it |
| How to test it | Look at it and judge | Watch real people use it |
The most honest distinction is the last row. UI can be judged by looking. UX can only be judged by handing the product to someone else and watching where they get confused.
Real Examples of Each
Picture a train ticket app.
A UI problem: the Book button is pale grey on a white background and nearly invisible. The label is too small to read in sunlight.
A UX problem: the button is perfectly visible, but booking one ticket takes seven screens, asks for the same details twice, and only reveals at the final step that the seats are sold out.
The second app looks good and is miserable to use. That is why beautiful UI does not automatically mean a good product.
Why They Are Always Named Together
Because each fails alone. UI without UX produces an application that is lovely and baffling. UX without UI produces a sensible flow that looks untrustworthy.
On small teams one person often does both, and the job title is written as UI/UX designer. At large companies they are usually separate roles.
Why It Matters for Kids
Thinking in UX trains a habit that pays off far outside design: attending to other people before deciding. A child designing an app has to ask who will use this, what they will look for first, and where they might get lost.
That habit carries over widely - writing an explanation a friend will understand, structuring a presentation, even inventing fair game rules. All of them require imagining someone else's point of view.
The simplest way to practise at home is also enjoyable: ask the child to notice an app that annoys them, then explain exactly which part is wrong and how it should work instead. On Algonova's teen graphic design track, children design their own app screens using Figma. Try a free class.