THE CORE AIM OF VOCABULARY MASTERY · UI/UX VOCABULARY · USER → TASK → INTERFACE → FEEDBACK → IMPROVEMENT
UI/UX vocabulary is the language used to describe user interfaces, user experience, interaction patterns, research, usability and design decisions. Terms such as wireframe, prototype, user flow, affordance, feedback, usability, accessibility, heuristic and friction matter because product design depends on shared language about how people understand and use an interface.
The core aim of vocabulary mastery for UI/UX vocabulary is user-centred clarity. Learners should be able to describe what a user is trying to do, what interface element supports the task, where confusion or friction appears, and what evidence justifies a design change.
This page is the UI/UX Vocabulary owner inside the eduKateSG Vocabulary hub. For implementation language, use Frontend Development Vocabulary. For broader web systems, use Web Development Vocabulary.
Central proposition: UI/UX vocabulary is mastered when a term helps explain what the user sees, what the user expects and why the design succeeds or fails.
The 60-Second UI/UX Vocabulary Router
- Research: user, persona, interview, observation, pain point.
- Structure: information architecture, navigation, hierarchy, flow.
- Design: wireframe, mock-up, prototype, component.
- Interaction: affordance, feedback, state, error prevention.
- Evaluation: usability test, heuristic, task success, friction.
- Inclusion: accessibility, contrast, focus, screen reader.
The UI/UX Vocabulary Architecture
| Area | Core terms | Core question |
|---|---|---|
| Research | user, need, pain point | Who is using this and what are they trying to achieve? |
| Structure | hierarchy, navigation, user flow | How is the experience organised? |
| Design | wireframe, prototype, component | How is the idea represented? |
| Interaction | affordance, feedback, state | How does the interface communicate action? |
| Evaluation | usability, friction, task success | Where does the experience break down? |
| Accessibility | focus, label, contrast | Can different users operate it successfully? |
UI and UX Are Related but Different
UI focuses on the interface people see and interact with. UX is broader and includes the whole experience of trying to accomplish a goal with the product or service. Good UI can support good UX, but visual polish alone does not guarantee usability.
A Worked Example: Wireframe vs Prototype
A wireframe usually shows structure and layout at a relatively simple level. A prototype represents interaction or behaviour so a flow can be experienced or tested. A prototype may be low fidelity or highly realistic depending on the purpose.
A Worked Example: Affordance and Feedback
Affordance concerns what an element suggests can be done with it. Feedback tells the user what happened after an action. A button may look clickable because of its affordance; a loading state or confirmation message provides feedback after it is clicked.
Usability Vocabulary
Useful terms include learnability, efficiency, error rate, task success, friction and cognitive load. These words become useful when tied to observed user behaviour rather than design opinion alone.
Accessibility Vocabulary
Accessibility language includes keyboard navigation, focus order, semantic label, screen reader, contrast and alternative text. These terms help teams discuss whether the interface works for users with different abilities and assistive technologies.
How to Learn UI/UX Vocabulary
- Analyse real interfaces and identify the design pattern.
- Run short usability tests.
- Compare wireframes and prototypes.
- Use task-based user flows.
- Pair every design term with observed user behaviour.
- Inspect accessibility states and labels.
- Practise explaining design choices in plain language.
Common UI/UX Vocabulary Mistakes
Treating UI and UX as synonyms
Repair: separate interface presentation from the broader user experience.
Using persona as a stereotype
Repair: base user models on research and relevant behavioural patterns.
Calling personal preference “usability”
Repair: connect claims to tasks, users and evidence.
Treating accessibility as visual contrast only
Repair: include keyboard, semantics, focus and assistive technology.
Frequently Asked Questions
What is UI/UX vocabulary?
It is the language used to describe user research, interface structure, interaction design, usability, prototyping and accessibility.
What UI/UX terms should beginners learn first?
Start with user flow, wireframe, prototype, component, affordance, feedback, usability and accessibility.
What is the difference between UI and UX?
UI focuses on the interface; UX includes the broader experience of achieving a goal with the product.
What is a prototype?
It is a representation of a design that allows interactions, flows or assumptions to be explored and tested.
How can I learn UI/UX vocabulary?
Study real interfaces, run small usability tests and connect every term to observed user behaviour.
Where This Article Fits in the eduKateSG Vocabulary Ecosystem
- Vocabulary Hub — the broad route.
- Frontend Development Vocabulary — implementation.
- Web Development Vocabulary — the web stack.
- Customer Service Vocabulary — user-facing communication.
- Research Vocabulary — evidence and testing.
The UI/UX Vocabulary Standard
UI/UX vocabulary reaches its core aim when words make the user’s task, the interface behaviour and the design evidence easier to discuss.
That is the standard: design language that stays connected to people using the product.