Header_blog

Coding Education

5 min read

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

Published: 12.08.2026·Updated: 12.08.2026
Bayu Nugraha

Bayu Nugraha

Children's Coding Specialist

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

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

UIUX
Concerned withAppearance: colour, buttons, type, layoutExperience: flow, ease, how it feels to use
Its main questionDoes this look clear and pleasant?Do people actually accomplish their goal?
Visible?Yes, immediately on screenNo, only felt while using it
How to test itLook at it and judgeWatch 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.