UX/UI design is practised in English almost everywhere: design tools, design system documentation, research reports and the comments developers and product managers leave on your screens all use the same vocabulary. Knowing these terms helps product and UX/UI designers run research, present their work and explain design decisions clearly to developers, stakeholders and international clients.
100 terms
11 topics
52 core terms
200 example sentences
Read, understand, keep going
No account needed. Read the meaning, see where the term is used, then study the examples. Click any word in the lesson for help. You can also select a word and press Alt + Enter.
UX/UI Basics and Process
user experience
noun
Meaning
How easily people reach their goals and how they feel when they use a product, service or website, from the first visit to getting help later.
Where you use it
Usually shortened to UX and said letter by letter. Heard in job titles (UX designer, UX researcher), in design reviews and in phrases like 'this hurts the user experience'. It covers the whole product, not only how the screens look.
Examples
Adding two more form steps will hurt the user experience on mobile.
We hired a consultant to review the user experience of our booking app.
Usage note
UX describes an experience, so 'the UX of the logo' sounds odd; for colours, icons and other visual parts, talk about UI or visual design.
Common phrases
improve the user experience · seamless user experience · user experience design · UX designer
The screens, buttons, menus, text and other visual parts of a product that people see and use to interact with it.
Where you use it
Usually shortened to UI and said letter by letter ('you-eye'). Used for the visual and interactive layer of apps, websites and devices: UI designer, UI kit, a clean UI. Voice assistants and car dashboards have user interfaces too.
Examples
The new user interface looks modern, but users can't find the search bar.
Our user interface team owns the icons, colours and spacing rules.
Usage note
Job ads write both UX/UI and UI/UX; the order does not change the meaning.
Common phrases
intuitive user interface · clean user interface · user interface design · UI designer
An approach that puts users' needs, goals and limits at the centre of every stage of design, using research and testing with real people to guide decisions.
Where you use it
Shortened to UCD. Appears in job ads, process documents and case studies. The international standard ISO 9241-210 uses the closely related term 'human-centred design'. People say a decision is, or isn't, user-centered.
Examples
Our process follows user-centered design: we research, design, test and repeat.
Adding a feature just because the CEO likes it isn't exactly user-centered design.
Usage note
British English writes user-centred and human-centred. Both spellings are correct; just be consistent.
Common phrases
user-centered design process · user-centered approach · principles of user-centered design
Anyone inside or outside the team who is affected by a project or has a say in it, such as product managers, executives, engineers, the legal team or the client.
Where you use it
Designers present work to stakeholders, collect their feedback and try to get their buy-in. Common phrases: stakeholder interview, stakeholder review, keep stakeholders in the loop, manage stakeholders.
Examples
We'll present the new concept to stakeholders on Thursday.
Before designing anything, I interviewed the main stakeholders about their goals.
To improve a design in repeated rounds: make a version, test or review it, learn from the results, then change it and repeat.
Where you use it
One of the most common verbs in design teams: 'iterate on the design', 'a quick iteration', 'after two iterations'. It signals that nobody expects the first version to be final.
Examples
We iterated on the onboarding screens three times after testing.
Ship a simple version first and iterate based on real usage.
Usage note
In design talk the verb usually takes 'on': iterate on the layout. The noun is iteration.
Common phrases
iterate on a design · iterate quickly · design iteration · iterate based on feedback
The stage when designers pass finished designs, specs and assets to developers so they can build them, ideally with a walkthrough and clear notes.
Where you use it
Tools such as Figma's Dev Mode show measurements, colours and code snippets for handoff. Teams talk about a smooth handoff, handoff notes and handoff meetings. The verb is two words: 'hand off the designs'.
Examples
The handoff is on Monday, so every screen needs final specs by Friday.
A good handoff includes empty states and error messages, not just the happy path.
Usage note
Also written hand-off. The noun is one word (handoff); the verb is two (hand off).
A meeting where designers show work in progress and colleagues give structured, honest feedback on whether the design meets its goals.
Where you use it
Often shortened to 'crit'. Good critique focuses on goals and users ('Does this help a first-time buyer?') rather than personal taste ('I don't like blue'). Many teams hold a weekly design critique.
Examples
I'll bring the new dashboard to Thursday's design critique.
In a design critique, explain the problem first, then show the solution.
Usage note
Critique (pronounced kri-TEEK) means careful evaluation, not an attack. Criticism sounds more negative.
Common phrases
weekly design critique · run a critique · give critique · critique session
An unusual situation that happens rarely but must still work, such as a very long name, no internet connection or a user with 500 saved items.
Where you use it
Developers often ask designers about edge cases during handoff ('What happens if the title is three lines long?'). Designing for edge cases means planning empty, error, loading and overflow states, not only the happy path.
Examples
What about the edge case where a user has no profile photo?
We found several edge cases in testing, like German product names that break the layout.
Common phrases
handle edge cases · cover edge cases · edge case scenario · rare edge case
A problem-solving approach that starts with understanding people's needs and moves through defining the problem, generating ideas, prototyping and testing.
Where you use it
Made popular by the design firm IDEO and Stanford's d.school, whose model has five stages: empathise, define, ideate, prototype and test. It is used in business and education as well as design, often in workshops.
Examples
The bank ran a design thinking workshop to rethink how customers open accounts.
Design thinking isn't a straight line; teams often go back to research after testing.
A specific piece of work that a designer or team has agreed to produce and hand over, such as a research report, wireframes, a prototype or final screens.
Where you use it
Common in project plans, contracts and agency work: 'the deliverables for phase one'. Usually used in the plural. Freelancers list deliverables clearly in proposals to avoid scope creep.
Examples
The deliverables for this sprint are the updated user flow and a clickable prototype.
A logo animation wasn't one of the agreed deliverables.
The ideal route through a flow where everything goes as expected: the user enters valid data, nothing fails and the task is completed without problems.
Where you use it
Designers often design the happy path first, then cover error states and edge cases. Developers and testers use the term too. Saying that a design 'only covers the happy path' is a common criticism in reviews.
Examples
The prototype shows the happy path, but the screens for a declined card are still missing.
Let's walk through the happy path first, then talk about what can go wrong.
Common phrases
design the happy path · beyond the happy path · happy path scenario · unhappy path
A design process model with four phases, discover, define, develop and deliver, drawn as two diamonds to show thinking that first opens up and then narrows down.
Where you use it
Introduced by the UK Design Council in the mid-2000s. The first diamond is about finding the right problem, the second about finding the right solution. Designers use it to explain where a project is: 'we're still in the first diamond'.
Examples
We're in the define phase of the double diamond, so it's too early to talk about screens.
The double diamond reminds us to explore the problem before jumping to solutions.
Common phrases
double diamond model · the first diamond · diverge and converge · discover phase
The study of people who use or might use a product, through interviews, observation, surveys and tests, to understand their needs, behaviour and problems.
Where you use it
Done by UX researchers or by designers themselves, before and during design. Teams do, conduct or run user research and share the findings in reports or readout sessions. Also called UX research or design research.
Examples
Our user research showed that most customers shop on their phones during lunch breaks.
We don't have budget for a big study, but we can still do some quick user research.
Usage note
Research is uncountable: say 'some research' or 'a research study', not 'a research' or 'researches'.
Common phrases
conduct user research · user research findings · user research plan · share the research
A one-to-one conversation with a user or potential user, usually 30 to 60 minutes long, to learn about their goals, habits, problems and opinions.
Where you use it
Researchers conduct user interviews with a discussion guide of open questions ('Tell me about the last time you…'). Good interviewers avoid leading questions and ask about past behaviour rather than future wishes.
Examples
I've scheduled six user interviews with restaurant owners next week.
In the user interviews, nobody mentioned price; they all talked about delivery time.
Usage note
A leading question suggests the answer ('Don't you think this is easier?'). Ask neutral questions instead ('How did that feel?').
A set of written questions sent to many people at once to collect their answers, opinions or ratings in a form that can be counted and compared.
Where you use it
Teams send out or run surveys with tools like Google Forms or Typeform, often inside the product or by email. Surveys show what and how many; interviews explain why. Response rate and sample size matter.
Examples
We sent a short survey to 2,000 customers and got 340 responses.
The survey tells us that people are unhappy with search, but not why.
Usage note
As a noun the stress is on the first syllable (SUR-vey); as a verb meaning to question or examine a group, it is usually on the second (sur-VEY).
Common phrases
send out a survey · survey results · in-app survey · survey question
A useful new understanding about users, drawn from research data, that explains their behaviour and points to a design opportunity.
Where you use it
Researchers turn raw observations into insights during synthesis and present key insights to the team. An insight goes beyond a fact: 'users skip onboarding' is a finding; why they skip it and what that means is the insight.
Examples
One key insight was that people compare prices in another tab before buying.
Let's turn these interview notes into three or four clear insights.
Research that collects words, observations and stories from a small number of people to understand why they think and behave the way they do.
Where you use it
Includes interviews, usability tests, diary studies and field visits. Research teams often shorten it to 'qual' ('we need some qual on this'). It answers why and how, not how many.
Examples
The numbers show a drop at checkout, so we'll do qualitative research to understand why.
Eight interviews are enough for qualitative research at this stage.
Usage note
Qualitative and quantitative are easy to mix up. Remember that quantitative contains 'quantity', meaning numbers.
Common phrases
qualitative research methods · qualitative data · qualitative insights · qual and quant
Research that collects numbers from many users, such as survey ratings, click rates or task times, to measure behaviour and spot patterns.
Where you use it
Includes surveys, analytics, A/B tests and benchmark studies. Shortened to 'quant'. Teams usually combine it with qualitative research: quant shows what is happening, qual explains why.
Examples
Our quantitative research shows that 60% of users never open the settings page.
Quantitative research tells us how many users drop off, not why they leave.
Common phrases
quantitative research methods · quantitative data · statistically significant · qual and quant
A review of competitors' products to see how they solve the same problems, what they do well or badly, and where there is room to do better.
Where you use it
Designers often start a project with a competitive analysis: screenshots of rival flows, a comparison table and notes on common patterns. It inspires ideas, but copying a competitor's design without testing it is risky.
Examples
Our competitive analysis shows that all three rivals let users pay without an account.
I'll finish the competitive analysis of food delivery apps by Wednesday.
To find and select suitable people to take part in research, such as interviews or usability tests, based on criteria like age, habits or experience.
Where you use it
Researchers recruit participants through customer lists, social media, recruitment agencies or panels, often with a screener survey to filter people. The noun is recruitment, and recruiting is often the slowest part of research.
Examples
We need to recruit six small business owners who use accounting software.
Recruiting took two weeks, but the sessions themselves took only three days.
Usage note
In HR, recruit means to hire employees. In research it only means finding people for a study, not offering them a job.
A way of making sense of research by writing observations on sticky notes and grouping similar ones together until themes and patterns appear.
Where you use it
A common step in research synthesis, done on a wall or on a digital whiteboard such as Miro or FigJam. The result is often called an affinity diagram. Teams then name each cluster and turn it into an insight.
Examples
After affinity mapping, five clear themes emerged from the 200 notes.
Let's do the affinity mapping together so everyone sees the raw data.
Common phrases
affinity mapping session · affinity diagram · cluster the notes · research synthesis
A fictional but realistic profile of a typical user, built from research, with a name, goals, needs and frustrations, that helps a team design for real people.
Where you use it
Teams create personas after interviews and refer to them by name in meetings ('Would Ayşe understand this?'). Good personas come from research data, not from guesses. The plural is personas.
Examples
Our main persona is a busy parent who orders groceries late at night.
These personas are based on twelve interviews and our support tickets.
Usage note
Stress the second syllable: per-SO-na. The Latin plural personae exists, but designers say personas.
Common phrases
create a persona · primary persona · user persona · persona profile
The full series of steps and experiences a person goes through to reach a goal with a product, often starting before they open the app and ending after they finish.
Where you use it
Used when talking about the big picture: discovering a product, signing up, using it and getting support. Usually visualised in a journey map. 'Customer journey' is the same idea and is more common in marketing and service design.
Examples
The user journey starts when someone sees our ad, not when they open the app.
Let's walk through the user journey of a first-time buyer.
Usage note
A user journey covers the whole experience, including feelings and offline steps; a user flow shows only the screens and decisions inside the product.
Common phrases
map the user journey · end-to-end user journey · stage of the user journey · improve the user journey
A specific problem, frustration or obstacle that users experience, such as a confusing step, a long wait or a missing feature.
Where you use it
Heard in research readouts, journey maps and product meetings: 'the biggest pain point is delivery tracking'. Teams identify, uncover and address pain points. The term is common in sales and marketing too.
Examples
The main pain point in our interviews was the long sign-up form.
This feature addresses a real pain point for small shop owners.
Common phrases
identify pain points · address a pain point · key pain point · customer pain points
A visual timeline of a user's journey that shows each stage, what the person does, thinks and feels, and where pain points and opportunities appear.
Where you use it
Usually built for one persona and one scenario, often in workshops on a whiteboard or in tools like Miro or FigJam. Also called a customer journey map or user journey map. An emotion line shows the highs and lows.
Examples
The journey map shows that customers feel most anxious while waiting for delivery.
Let's build a journey map for new patients booking their first appointment.
A simple diagram, usually split into four parts, that records what a user says, thinks, does and feels, helping a team understand them better.
Where you use it
Teams fill in empathy maps with sticky notes after interviews, often in workshops, and use them as a step towards personas. Some versions add sections for pains and gains.
Examples
After the interviews, we built an empathy map for each type of customer.
The 'feels' section of the empathy map was full of worries about hidden fees.
Any moment or channel where a person comes into contact with a company or product, such as an ad, the website, an email, the app or a call to support.
Where you use it
Shown along the top of journey maps and widely used in service design and marketing. Teams try to keep the experience consistent across all touchpoints, online and offline.
Examples
The confirmation email is an important touchpoint, but nobody on the team owns it.
We listed every touchpoint from the first ad to the delivery text message.
Common phrases
customer touchpoint · key touchpoints · across all touchpoints · digital touchpoint
The way content and features in a website or app are organised, grouped and labelled so that people can find what they need and understand where they are.
Where you use it
Often shortened to IA, said letter by letter. Designers work on IA when planning menus, categories and page structure, using sitemaps, card sorting and tree testing. A messy IA is a common reason why users 'can't find anything'.
Examples
Before we redesign the menu, we need to fix the information architecture.
The information architecture has grown to six levels, which is far too deep.
Common phrases
clear information architecture · restructure the information architecture · information architecture review · IA diagram
A diagram or sequence that shows the screens, steps and decisions a user goes through to complete one task in a product, such as resetting a password.
Where you use it
Drawn with boxes and arrows before wireframing, or shown by linking screens in a design tool. People often just say 'flow': the onboarding flow, the checkout flow. Useful for spotting missing screens and dead ends.
Examples
I mapped the user flow for password reset and found two dead ends.
Can you add the error screens to the user flow before the review?
Common phrases
map a user flow · user flow diagram · checkout flow · simplify the flow
The menus, links, tabs and other elements that let people move around a website or app and understand where they are.
Where you use it
Designers talk about global navigation, the navigation bar (navbar), bottom navigation on mobile and side navigation. Often shortened to 'nav' in casual talk and in file names. The verb is navigate: 'users navigate to Settings'.
Examples
Users couldn't find their orders because 'My account' was hidden in the navigation.
On mobile we moved the main navigation to a bottom tab bar.
Common phrases
main navigation · navigation bar · bottom navigation · navigation menu
A diagram that shows all the main pages or screens of a website or app and how they are grouped and connected, usually drawn as a tree.
Where you use it
Designers create a sitemap early in a project to plan the information architecture and agree on scope with stakeholders. Developers and SEO specialists use the word differently: an XML file that lists pages for search engines.
Examples
The new sitemap removes twelve pages that nobody visits.
Let's agree on the sitemap before anyone starts wireframing.
Usage note
A UX sitemap is a planning diagram; an XML sitemap is a technical file for search engines. Make clear which one you mean.
Common phrases
create a sitemap · visual sitemap · sitemap structure · update the sitemap
A research method in which participants group topics written on cards into categories that make sense to them, showing how users expect content to be organised.
Where you use it
In an open card sort, participants create and name their own groups; in a closed card sort, the categories are given. It can be done with paper cards or online tools and is used when designing menus and categories.
Examples
Card sorting showed that users expect 'Returns' under 'Orders', not under 'Help'.
We did online card sorting with 30 participants before redesigning the menu.
Common phrases
open card sorting · closed card sort · run a card sort · card sorting session
A row of links, usually near the top of a page, that shows where the current page sits in the site structure, such as Home > Shoes > Running.
Where you use it
Usually plural: breadcrumbs or breadcrumb navigation. Common on e-commerce and documentation sites with deep hierarchies, less so in mobile apps. The name comes from the fairy tale where children drop breadcrumbs to find their way home.
Examples
Add breadcrumbs so shoppers can jump back to the category page.
The breadcrumb trail shows the full path, but it's too small to tap on mobile.
Usage note
The b in crumb is silent: breadcrumb is pronounced BRED-krum.
A research method that checks whether people can find items in a site's structure by showing them only a text menu tree, without any visual design.
Where you use it
Often described as card sorting in reverse: card sorting helps build a structure, tree testing checks it. Participants get tasks like 'Where would you find the return policy?', and results show success rates and wrong paths.
Examples
Tree testing showed that 70% of people looked for invoices under 'Account', not 'Billing'.
Let's do tree testing on the new menu before we design any screens.
Common phrases
run tree testing · tree test task · tree testing results · reverse card sort
A simple, usually black-and-white drawing of a screen that shows where content, buttons and navigation will go, without final colours, images or styling.
Where you use it
Made early in a project, on paper or in tools like Figma, to agree on structure before visual design starts. Also used as a verb: 'Let's wireframe the checkout first.' Grey boxes with an X often stand in for images.
Examples
I sketched three wireframes for the home page so we can compare layouts.
Don't worry about colours yet; this is just a wireframe.
Common phrases
sketch a wireframe · low-fidelity wireframe · wireframe the flow · share the wireframes
An early, interactive version of a product or screen that people can click or tap through, used to test ideas before anything is built.
Where you use it
Designers build prototypes in Figma, ProtoPie or even on paper, then use them in usability tests and stakeholder demos. Also a verb: 'We prototyped the new filter in two days.' A prototype can be low or high fidelity.
Examples
Let's test the prototype with five users before the developers start.
The prototype only works for the happy path, so please don't click the settings icon.
Usage note
Stress the first syllable: PRO-to-type. Turkish speakers often move the stress to the end, as in 'prototip'.
Common phrases
build a prototype · test a prototype · clickable prototype · share the prototype link
A static, realistic image of a screen or product that shows the final colours, fonts, images and spacing but cannot be clicked.
Where you use it
Sits between a wireframe and a prototype. Used in client presentations and design reviews to show how the product will look. Also written mock-up, especially in British English; people often say 'mocks' informally.
Examples
The client approved the mockups, so we can start on the prototype.
Can you put the new logo into the App Store mockup?
Usage note
In marketing and graphic design, a mockup can also be a photo template that places a design on a phone, poster or T-shirt.
Common phrases
create a mockup · high-fidelity mockup · present the mockups · device mockup
Describes an early design, wireframe or prototype that is rough and simple, without real colours, images or detailed content, so it is quick to make and change.
Where you use it
Often shortened to lo-fi ('a lo-fi prototype'). Paper sketches and grey-box wireframes are low-fidelity. Teams use them to explore many ideas cheaply and to keep feedback on structure, not colours.
Examples
Start with low-fidelity sketches; it's too early to choose colours.
We tested a low-fidelity prototype made of paper screens.
Usage note
Fidelity here means how close something is to the final product, not loyalty. Stress the second syllable: fi-DEL-i-ty.
Describes a design or prototype that looks and behaves almost like the final product, with real content, colours, images and interactions.
Where you use it
Shortened to hi-fi. High-fidelity mockups and prototypes are used for final reviews, realistic usability tests and developer handoff. They take longer to make, so teams usually create them after the structure is agreed.
Examples
The high-fidelity prototype was so realistic that some participants thought the app was already live.
Don't jump to high-fidelity screens before the flow is approved.
Common phrases
high-fidelity mockup · high-fidelity prototype · hi-fi designs · move to high fidelity
A prototype in which screens are linked together, so clicking or tapping buttons and links takes the user to the next screen as in a real product.
Where you use it
Made by connecting frames in tools like Figma and shared as a link for usability tests or stakeholder reviews. Also called an interactive prototype. Usually only the main paths are clickable, so testers need clear tasks.
Examples
I'll send you a clickable prototype so you can try the booking flow on your phone.
Only the checkout screens are clickable in this prototype.
Common phrases
share a clickable prototype · clickable prototype link · interactive prototype · make the screens clickable
How easily, quickly and successfully people can use a product to complete a task, and how satisfied they feel while doing it.
Where you use it
Used in design reviews, test reports and job ads: usability issues, usability problems, good usability. The ISO 9241-11 standard describes it through three qualities: effectiveness, efficiency and satisfaction.
Examples
The design looks great, but we found serious usability problems in the payment step.
Small changes to labels can improve usability a lot.
Usage note
Usability is not the same as accessibility: a product can be easy for most people and still be impossible to use with a screen reader.
A research method in which real users try to complete tasks with a product or prototype while a researcher watches, to find out where they struggle.
Where you use it
Teams run usability tests in person or remotely, moderated or unmoderated, and turn the results into a list of issues ranked by severity. A well-known rule of thumb from Jakob Nielsen says that about five users reveal most of the major problems.
Examples
We're running usability testing on the new sign-up flow next Tuesday.
Usability testing showed that four out of five people missed the filter button.
Common phrases
run usability testing · remote usability testing · usability testing session · usability test script
A method that shows two versions of a page or feature to different groups of real users at the same time and measures which version performs better.
Where you use it
Used to compare things like button text, layouts or prices with metrics such as conversion rate. Teams need enough traffic for a statistically significant result. Also called split testing; A/B is read 'ay-bee'.
Examples
A/B testing showed that the shorter form increased sign-ups by 12%.
We're A/B testing two versions of the pricing page this month.
Usage note
A/B testing shows which version works better, but not why. Combine it with qualitative research to understand the reason.
Common phrases
run an A/B test · A/B testing tool · winning variant · A/B test results
A review in which usability experts check an interface against a list of accepted design principles, called heuristics, to find problems without testing with users.
Where you use it
The best-known list is Jakob Nielsen's ten usability heuristics, such as 'visibility of system status' and 'error prevention'. It is quick and cheap, but it complements usability testing rather than replacing it.
Examples
A quick heuristic evaluation found fifteen issues before we even recruited users.
Two designers did a heuristic evaluation of the admin panel separately and then compared notes.
Usage note
Heuristic is pronounced hyoo-RIS-tik. A heuristic is a rule of thumb, not a strict law.
A testing technique in which participants say what they are thinking, looking for and feeling while they use a product, so researchers can follow their reasoning.
Where you use it
The standard technique in moderated usability tests. The moderator asks participants to think aloud and gently reminds them ('What are you thinking now?') when they go quiet. People also say 'think-aloud session' or 'think-aloud test'.
Examples
We used the think-aloud protocol, so every session recording includes the participant's comments.
The think-aloud protocol revealed that users read 'Archive' as 'Delete'.
Common phrases
use the think-aloud protocol · think-aloud session · ask participants to think aloud · concurrent think-aloud
A person who takes part in a research session, such as an interview or a usability test, usually matching the profile of the product's target users.
Where you use it
Researchers recruit, screen and reward participants, often with gift cards, and call them P1, P2 and so on in reports to protect their privacy. Remember that the design is being tested, not the participant.
Examples
Three of our five participants couldn't find the return policy.
Remind each participant that we're testing the app, not them.
Usage note
Researchers prefer participant to 'test subject' or 'tester', because it sounds more respectful and reminds everyone that the product is what is being tested.
The percentage of participants who complete a given task correctly in a usability test; one of the simplest and most common usability metrics.
Where you use it
Often reported together with time on task, error rate and satisfaction scores. Teams compare task success rates before and after a redesign. Also called task completion rate.
Examples
The task success rate for changing a delivery address rose from 40% to 90%.
A low task success rate on this step tells us the label is confusing.
Common phrases
measure task success rate · high task success rate · time on task · usability metrics
Usability testing in which a researcher guides each session live, in person or on a video call, giving tasks, asking questions and observing the participant.
Where you use it
The opposite is unmoderated testing, where participants complete tasks alone in an online tool while their screens are recorded. Moderated tests give richer insights; unmoderated tests are faster and cheaper at scale.
Examples
We chose moderated testing because the flow is complex and we want to ask follow-up questions.
Unmoderated testing gave us 50 recordings in two days.
A visual report that uses colours, from cool blue to hot red, to show where users click, move, look or scroll most on a page.
Where you use it
Produced by analytics tools that record real sessions. Common types are click maps, scroll maps and eye-tracking heatmaps. Heatmaps show where people act but not why, so teams combine them with interviews or tests.
Examples
The heatmap shows lots of clicks on the product image, which isn't a link.
According to the scroll heatmap, only 20% of visitors reach the pricing section.
Usage note
Also written as two words, heat map.
Common phrases
click heatmap · scroll heatmap · heatmap data · analyse the heatmap
The part of design that decides how a product behaves when people use it: what happens when they tap, type, swipe or wait, and how the system responds.
Where you use it
Often shortened to IxD. Interaction designers think about states, transitions, feedback, animation and error handling. The word 'interaction' is also used on its own: 'the swipe interaction feels slow'.
Examples
The visuals are done; now we need to work on the interaction design for drag and drop.
Good interaction design tells users that their payment is still being processed.
The signal a system gives in response to a user's action, such as a button changing colour, a loading spinner or a success message, so people know what happened.
Where you use it
A basic principle of interaction design: every action should get clear, quick feedback. The same word also means comments on someone's work: designers give, get and ask for feedback in reviews.
Examples
There's no feedback after tapping 'Upload', so people tap it three times.
Can you give me some feedback on these two layouts before the review?
Usage note
Feedback is uncountable: say 'some feedback' or 'a piece of feedback', never 'feedbacks'.
A quality of an object or interface element that suggests how it can be used, for example a raised button that looks pressable or a handle that invites pulling.
Where you use it
The idea comes from psychologist James Gibson and was brought into design by Don Norman. Designers say a flat link 'has poor affordance' when it doesn't look clickable. Norman later added 'signifier' for the visible clue itself.
Examples
The card has no affordance, so nobody realised it could be tapped.
Underlined blue text is a strong affordance for a link.
The first steps that welcome new users and help them understand a product, set it up and reach their first success with it.
Where you use it
Includes welcome screens, short tours, tooltips, checklists and permission requests. Teams measure onboarding with completion and activation rates. In HR, onboarding means helping a new employee settle into a company.
Examples
We cut onboarding from seven screens to three, and completion went up.
The onboarding asks for notification permission too early.
A person's own idea of how something works, based on past experience, which shapes what they expect a product to do.
Where you use it
Designers try to match the product to users' mental models, for example by using a shopping cart because people know it from real shops. Problems start when the system works differently from what users believe.
Examples
In users' mental model, 'Save' also sends the document, so they never press 'Share'.
The interviews helped us understand customers' mental model of how insurance works.
Common phrases
match users' mental models · mental model of · mismatched mental model · build a mental model
The amount of mental effort a person needs to understand and use something; too much of it makes people slow, confused or likely to give up.
Where you use it
Designers reduce cognitive load by showing fewer options at once, using familiar patterns, grouping information and remembering data for the user. The idea comes from educational psychology.
Examples
Twelve plan options create too much cognitive load; let's show three.
Pre-filling the address reduces cognitive load at checkout.
Anything in an experience that slows users down or makes a task harder, such as extra steps, long forms, unclear labels or slow loading.
Where you use it
Teams try to remove or reduce friction in key flows like sign-up and checkout. Sometimes designers add friction on purpose, for example a confirmation step before deleting an account. The adjective is frictionless.
Examples
Asking for a phone number at sign-up adds friction we don't need.
We removed friction from checkout by allowing guest orders.
A small, single-purpose moment of interaction with its own feedback, such as liking a post, switching a toggle or a field shaking after a wrong password.
Where you use it
The term was made popular by Dan Saffer's book 'Microinteractions'. Designers use small animations and haptics to make these moments clear and pleasant, but too many moving details can feel distracting or slow.
Examples
The heart animation when you like a photo is a classic microinteraction.
Let's add a microinteraction so users see that the item went into the cart.
The way an element looks when the mouse pointer is over it, for example a button getting darker, which shows that it can be clicked.
Where you use it
One of the standard component states, along with default, focus, pressed (active) and disabled. Designers define every state in the design system. Touchscreens have no hover, so it should never carry essential information.
Examples
The links have no hover state, so they don't feel clickable on desktop.
Please add hover states for the table rows before handoff.
Common phrases
add a hover state · hover effect · on hover · button states
A movement of the fingers on a touchscreen, such as a tap, swipe, pinch or long press, that tells a device to do something.
Where you use it
Mobile designers talk about tap, double-tap, swipe, drag, pinch to zoom and long press. Gestures are invisible, so important actions should also have a visible button. iOS and Android differ in some system gestures.
Examples
Users didn't discover the swipe gesture for deleting messages.
Our custom gesture conflicts with the Android back gesture.
Usage note
Pronounced JES-cher. In everyday English, gesture also means a hand movement or a kind act ('a nice gesture').
The short pieces of text in an interface, such as button labels, hints, error messages and confirmations, that guide users through a task.
Where you use it
Written by UX writers or content designers, often together with product designers. Small changes in microcopy can have a big effect on conversion and on the number of support tickets. The wider practice is called UX writing.
Examples
The microcopy under the password field explains the rules before users make a mistake.
Can you review the microcopy on the payment screen? It sounds too formal.
Usage note
Microcopy is uncountable: say 'some microcopy', not 'a microcopy'.
A design that tricks or pressures users into doing something they did not intend, such as a hidden cancel button or a fake countdown timer.
Where you use it
Coined by UX designer Harry Brignull in 2010; many now prefer 'deceptive pattern'. Examples include confirmshaming, sneaking items into the basket and making cancellation very hard. Regulators in several regions now act against them.
Examples
Making 'Cancel subscription' grey and tiny is a dark pattern.
Legal asked us to remove the pre-checked box because it looks like a dark pattern.
Usage note
'Dark' here means deceptive; it has nothing to do with dark mode.
Common phrases
avoid dark patterns · use a dark pattern · deceptive pattern · ethical design
A principle stating that the time needed to reach a target depends on its distance and size: bigger and closer targets are faster and easier to hit.
Where you use it
Described by psychologist Paul Fitts in 1954. Designers use it to argue for larger buttons, especially on mobile, and for placing frequent actions close to where the user's finger or pointer already is.
Examples
By Fitts's law, that tiny close icon in the corner is slow and hard to tap.
Following Fitts's law, we made the 'Next' button full-width on mobile.
Usage note
The researcher's surname is Fitts, so write Fitts's law (or Fitts' law), not Fitt's law.
Common phrases
apply Fitts's law · according to Fitts's law · target size · touch target
A clickable or tappable element that lets users perform an action, such as submitting a form, saving changes or opening a menu.
Where you use it
Design systems define button types such as primary, secondary, tertiary (text) and destructive buttons, plus states like hover, pressed and disabled. Labels should describe the action: 'Save changes' rather than 'OK'.
Examples
Make 'Pay now' the primary button and 'Back' a secondary one.
Users tapped the disabled button again and again because it didn't look disabled.
Usage note
Pronounced /ˈbʌtn/, roughly 'BAT-n', with no clear vowel in the second syllable, not like Turkish 'buton'.
Common phrases
primary button · disabled button · button label · tap the button
A button, link or short message that asks users to take the next step, such as 'Sign up', 'Add to cart' or 'Start free trial'.
Where you use it
Almost always shortened to CTA, said letter by letter. Designers and marketers talk about the primary CTA, CTA placement and CTA copy. A screen usually works best with one clear main call to action.
Examples
Four buttons are competing for attention; this page needs one clear call to action.
Changing the call to action from 'Submit' to 'Get my quote' increased clicks.
Usage note
The plural is calls to action, not call to actions.
Common phrases
primary call to action · clear call to action · CTA button · CTA copy
A menu that stays closed and shows a list of options only when the user clicks or taps it, letting them pick one without taking up space.
Where you use it
Often just called a dropdown; in forms, developers call it a select. Useful for long lists like countries, but for two or three options, radio buttons or a segmented control are usually clearer.
Examples
With only two options, a dropdown menu hides the choices for no reason.
The language dropdown menu doesn't close when you click outside it.
Usage note
Also written drop-down. In most teams, drop-down list and select menu mean the same thing.
Common phrases
open the dropdown menu · select from a dropdown · dropdown options · nested dropdown
A window that opens on top of the current screen and blocks the rest of the page until the user responds to it or closes it.
Where you use it
Used for confirmations, short forms and important warnings. Also called a modal window or modal dialog; the darkened area behind it is the overlay. Too many modals interrupt people, so designers use them carefully.
Examples
Show a modal to confirm before the user deletes the whole project.
On mobile, the modal is taller than the screen and the close button disappears.
Usage note
Pop-up is a wider word for anything that suddenly appears; a modal specifically blocks the page behind it.
Common phrases
open a modal · close the modal · confirmation modal · modal dialog
A small picture or symbol that stands for an action, object or idea, such as a magnifying glass for search or a bin for delete.
Where you use it
Designers use icon sets with one consistent style (outline or filled) and fixed sizes such as 16, 20 or 24 pixels. Icons without labels can be confusing, so important actions usually get a text label too.
Examples
Half of the participants didn't know what the star icon meant.
Add a label next to the icon; a picture alone isn't enough here.
Usage note
Pronounced EYE-kon: it starts with the sound of 'eye', not the 'i' of Turkish 'ikon'.
Common phrases
icon set · icon button · outline icon · icon with a label
Text that tells users something has gone wrong, ideally explaining what happened and how to fix it, for example next to a form field.
Where you use it
Good error messages are specific, polite and helpful ('Enter a date in the future'), not technical ('Error 422'). Designers and UX writers agree where they appear, inline or as a banner, and never rely on red colour alone.
Examples
The error message just says 'Invalid input', so users don't know what to change.
Show the error message under the field, not at the top of the page.
Common phrases
show an error message · inline error message · clear error message · error state
A box in a form or interface where users type information, such as a name, an email address or a search term.
Where you use it
Also called a text field or form field. Designers define its parts (label, placeholder, helper text, error text) and states (default, focused, filled, error, disabled). Visible labels work better than placeholder text alone.
Examples
The phone number input field should accept spaces as well as digits.
When the input field is in focus, its border turns blue.
Usage note
Placeholder text disappears when users start typing, so it should not replace the label.
Common phrases
text input field · required field · input field label · focus the input field
What a screen shows when there is no content yet, such as an empty inbox, a search with no results or a new account with no projects.
Where you use it
A good empty state explains what will appear there and offers a clear next step ('Create your first project'), often with a small illustration. It is easy to forget during design, so reviewers often ask for it.
Examples
The empty state on the favourites page just says 'No items', which isn't very helpful.
Design the empty state too, because every new user sees it first.
Common phrases
design the empty state · empty state illustration · helpful empty state · zero-results state
A small text box that appears when users hover over, focus on or tap an element, giving a short explanation or the name of an icon.
Where you use it
Useful for labelling icon buttons or explaining a term. Touchscreens have no hover, so important information should not be hidden only in a tooltip. Tooltips should also open with keyboard focus.
Examples
Add a tooltip to the info icon that explains what 'net price' means.
On mobile, nobody sees the tooltip because there's no hover.
Common phrases
show a tooltip · tooltip text · hover tooltip · info tooltip
A small square that users click or tap to select or clear an option; several checkboxes in a group can be selected at the same time.
Where you use it
Used for independent choices and for agreeing to terms. When only one option can be chosen, designers use radio buttons instead. Checkboxes have checked, unchecked and sometimes indeterminate states.
Examples
Users can filter by several sizes, so use checkboxes, not radio buttons.
Make the whole label clickable, not just the tiny checkbox.
Usage note
British speakers often say 'tick the box'; Americans say 'check the box'. A pre-checked box for marketing emails can be seen as a dark pattern.
Common phrases
tick the checkbox · check a checkbox · checkbox list · pre-checked checkbox
A switch that turns a setting on or off with one tap and usually takes effect immediately, like turning on dark mode or notifications.
Where you use it
Also called a toggle switch or just a switch. It suits settings that apply instantly; inside a form with a 'Save' button, a checkbox is usually clearer. Also a verb: 'toggle the setting on'.
Examples
Use a toggle for 'Email notifications', because the change saves immediately.
It isn't clear whether the toggle is on or off; the colours are too similar.
Common phrases
toggle switch · toggle on · toggle off · toggle between
An icon made of three horizontal lines that opens a hidden navigation menu, often used on mobile screens to save space.
Where you use it
Named for its shape, which looks like a burger between two buns. It saves space but hides options, so many mobile apps prefer a visible bottom tab bar for their most important sections.
Examples
Nobody found the 'Sell' page because it was hidden in the hamburger menu.
On desktop we show the full navigation instead of a hamburger menu.
Common phrases
hamburger menu icon · open the hamburger menu · hide items in the hamburger menu · navigation drawer
A rectangular container that groups related content about one item, such as a product photo, title and price, and often links to more details.
Where you use it
Cards are common in feeds, dashboards and product lists because they fit well into responsive grids. Designers decide whether the whole card is clickable or only a button inside it, and keep card heights consistent.
Examples
Each recipe card shows a photo, the cooking time and a save button.
The use of size, colour, contrast, spacing and position on a screen so that people notice the most important elements first and read the rest in a clear order.
Where you use it
A regular topic in design reviews: 'the visual hierarchy is unclear', 'there's no hierarchy here'. Designers build hierarchy with heading sizes, font weight, colour and white space. Often just called 'hierarchy'.
Examples
Everything is bold, so the visual hierarchy is lost and nothing stands out.
A stronger visual hierarchy would make the price easier to spot.
Common phrases
clear visual hierarchy · establish a visual hierarchy · strengthen the hierarchy · lack of hierarchy
The arrangement of text, images, buttons and other elements on a page or screen, including their size, position and the space between them.
Where you use it
Used constantly in design and front-end work: a two-column layout, a card layout, the mobile layout. Layouts are usually built on a grid. The verb is 'lay out', written as two words: 'Lay out the cards in three columns.'
Examples
The desktop layout works, but on mobile the sidebar pushes the content down.
Let's try a simpler layout with one main column.
Usage note
The noun layout is one word; the verb lay out is two words.
The choice and arrangement of typefaces, font sizes, weights, line height and letter spacing to make text readable and to set the tone of a design.
Where you use it
Designers define a type scale (for example H1, H2, body and caption) in the design system. Common partner words: typeface, font, weight, line height, legibility. Good typography is one of the strongest tools for visual hierarchy.
Examples
The typography feels heavy; try a lighter weight for the body text.
We kept the typography simple: one typeface in four sizes.
Usage note
Stress the second syllable: ty-PO-gra-phy. Strictly, a typeface is the design (Roboto) and a font is one version of it (Roboto Bold), but many people use the two words as synonyms.
An approach in which a layout automatically adapts to different screen sizes, from phones to large monitors, so the same product works well on all of them.
Where you use it
Designers show responsive design with versions of each screen at key breakpoints, for example mobile, tablet and desktop. Related ideas: mobile-first design and fluid grids. Developers build it with CSS media queries.
Examples
With responsive design, the three columns turn into one on small screens.
The client asked for an app, but a responsive design for the website may be enough.
The empty space between and around elements on a page, which gives content room to breathe, groups related items and makes the design easier to read.
Where you use it
Also called negative space. It doesn't have to be white; any empty area counts. Designers say a screen 'needs more white space' or 'feels cramped'. The spacing values in a design system control it.
Examples
The form feels cramped; add more white space between the sections.
Generous white space makes the pricing table much easier to scan.
Usage note
Also written as one word, whitespace. In programming, whitespace means spaces, tabs and line breaks in text, which is a different idea.
Common phrases
generous white space · use white space · add more white space · negative space
A set of invisible columns, rows and gaps that designers use to place and align elements consistently across a page or screen.
Where you use it
A common web setup is a 12-column grid on desktop and a 4-column grid on mobile. Designers talk about columns, gutters, margins and 'breaking the grid'. Many teams also use an 8-point spacing grid.
Examples
The image doesn't sit on the grid, so the whole page looks slightly off.
We use a 12-column grid with 24-pixel gutters.
Common phrases
12-column grid · layout grid · align to the grid · break the grid
The fixed set of colours chosen for a product or brand, usually with primary, secondary and neutral colours plus status colours such as red for errors and green for success.
Where you use it
Defined in the style guide or design system, often with several shades of each colour (blue 100 to blue 900). Designers check every combination for contrast and test the palette in dark mode as well.
Examples
Please pick colours from our color palette instead of using random hex codes.
The new color palette has fewer brand colours and more neutral greys.
Usage note
British English writes colour palette. Don't confuse palette (colours) with pallet (a wooden platform for goods); they sound the same.
Common phrases
brand color palette · limited color palette · neutral palette · define a color palette
The way elements line up with each other along a shared edge or centre line, which makes a layout look ordered and easier to scan.
Where you use it
Designers talk about left alignment, centre alignment and elements that are 'off' or 'misaligned' by a few pixels. In meetings, alignment also means agreement: 'we need alignment with marketing'.
Examples
The labels and the input fields have different left alignment, so the form looks messy.
Check the alignment of the icons; the last one is two pixels lower.
Usage note
Don't mix up the two meanings: 'the alignment is off' is about pixels, while 'we have alignment' means that people agree.
Common phrases
left alignment · check the alignment · out of alignment · get alignment on
The amount of space between and inside elements, such as the gap between cards or the padding inside a button, chosen to create rhythm and grouping.
Where you use it
Many teams use a spacing scale based on multiples of 4 or 8 pixels (4, 8, 16, 24, 32) and store it as tokens. Common partner words: padding (inside), margin (outside) and gap (between items).
Examples
The spacing between the cards is 16 pixels on one page and 20 on another.
Use the spacing tokens instead of typing random numbers.
A screen width at which a responsive layout changes, for example when three columns become one or the navigation turns into a menu icon.
Where you use it
Designers usually prepare screens for a few breakpoints, such as mobile, tablet and desktop, and developers set them in CSS media queries. Good practice is to place breakpoints where the content starts to break, not at specific devices.
Examples
At the tablet breakpoint, the sidebar moves below the main content.
We need an extra breakpoint around 1,100 pixels, where the table starts to overflow.
Usage note
Developers also use breakpoint for a debugging marker that pauses code; the context makes the meaning clear.
Common phrases
mobile breakpoint · add a breakpoint · at each breakpoint · breakpoint width
Matching the design exactly, down to every pixel of size, spacing and colour, especially when a built product is compared with the original design file.
Where you use it
Used in handoff and design QA: 'Is the build pixel-perfect?' Some teams find it unrealistic for responsive products with many screen sizes and aim for consistency with the design system instead.
Examples
The client expects a pixel-perfect match with the approved mockups.
It doesn't need to be pixel-perfect; it needs to use the right components.
A shared collection of reusable components, design rules, tokens and documentation that keeps a company's products consistent and helps teams build faster.
Where you use it
Many companies publish their design systems, such as Google's Material Design and IBM's Carbon. Designers use, contribute to and maintain a design system; often a dedicated team owns it, both in the design tool and in code.
Examples
Please use the button from the design system instead of drawing a new one.
Our design system has over eighty components, each with code and usage guidelines.
Usage note
A style guide or UI kit is usually only one part of a design system, which also includes code, principles and documentation.
Common phrases
build a design system · maintain a design system · design system team · contribute to the design system
A reusable building block of an interface, such as a button, card or input field, designed once and used in many places with the same look and behaviour.
Where you use it
In Figma, a main component controls all its instances, and variants cover states such as default, hover and disabled. Developers build matching components in code, so designers and developers should use the same names.
Examples
I turned the product card into a component so we can update it everywhere at once.
This date picker isn't in our component library yet.
Usage note
Turkish speakers sometimes say 'komponent'. In English the stress is on the second syllable: com-PO-nent.
A document that sets the visual and writing rules for a brand or product, such as colours, typography, logo use, icon style and tone of voice.
Where you use it
Designers follow or stick to the style guide so that screens stay consistent. In product teams it is often part of a larger design system; content teams may keep a separate writing style guide for spelling and tone.
Examples
The style guide says we only use orange for primary actions.
Before designing the campaign page, read the brand style guide.
A named value that stores a design decision, such as a colour, font size or spacing amount, so designers and developers use the same value everywhere.
Where you use it
Instead of a raw value like #1A73E8, teams use a token like color-primary or spacing-md. Changing one token updates every screen that uses it, which makes theming and dark mode easier. In Figma, tokens are often stored as variables.
Examples
Don't hard-code the blue; use the color-primary design token.
We updated the spacing design tokens, and every screen changed at once.
Common phrases
color tokens · spacing tokens · token naming · update a design token
A ready-made collection of interface elements, such as buttons, forms, icons and navigation bars, that designers drag into their files to build screens quickly.
Where you use it
Some UI kits are free or paid community files; others are a company's own kit built from its design system. Apple and Google publish official UI kits for iOS and Android so designers can match native components.
Examples
I used the iOS UI kit so the settings screen feels native.
Our UI kit is out of date; half the buttons don't match the code.
Usage note
A UI kit is mainly a design file; a design system also includes code, rules and documentation.
A proven, reusable solution to a common interface problem, such as a search bar with suggestions, infinite scroll or a multi-step checkout.
Where you use it
Also called UI patterns or UX patterns. Familiar patterns lower cognitive load because users already know how they work. Design systems often document patterns alongside components.
Examples
Pull to refresh is a design pattern that mobile users already expect.
Before inventing something new, check whether a standard design pattern already solves this.
Usage note
Software developers use design pattern for code structures such as Singleton or Observer. In a design team it usually means an interface pattern.
Common phrases
common design pattern · UI pattern · pattern library · follow established patterns
The practice of designing products that people with disabilities, such as low vision, blindness, deafness or limited movement, can perceive, understand and use.
Where you use it
Often written a11y (a, eleven letters, y). Teams check accessibility against WCAG and talk about accessibility audits, issues and requirements. In many countries it is also a legal requirement for public and commercial websites.
Examples
Accessibility isn't a final check; we think about it from the first wireframe.
The accessibility audit found forty images without alt text.
The difference in brightness between text or an icon and its background, which decides how easy it is to see, especially for people with low vision.
Where you use it
Measured as a contrast ratio. WCAG level AA asks for at least 4.5:1 for normal text and 3:1 for large text; level AAA asks for 7:1. Designers test colour pairs with contrast checker plugins.
Examples
Light grey text on white fails the colour contrast check.
We darkened the button so the color contrast meets WCAG AA.
Usage note
Colour is the British spelling and color the American one. Both appear in design work, but tools and code use color.
Common phrases
low color contrast · check the contrast ratio · meet contrast requirements · high-contrast mode
Software that reads the content of a screen aloud or sends it to a braille display, used mainly by blind and low-vision people to use computers and phones.
Where you use it
Common screen readers are VoiceOver (Apple), TalkBack (Android), and NVDA and JAWS (Windows). Designers make sure headings, labels, alt text and reading order make sense to someone who cannot see the layout.
Examples
With a screen reader, the icon-only buttons are announced as 'button, button, button'.
Test the checkout with VoiceOver; screen reader users can't complete it right now.
Common phrases
screen reader user · test with a screen reader · screen reader support · announced by the screen reader
Short for Web Content Accessibility Guidelines: the international standard, published by the W3C, that explains how to make websites and apps accessible.
Where you use it
Built on four principles, remembered as POUR: perceivable, operable, understandable and robust. Success criteria have three levels, A, AA and AAA; most laws and companies aim for AA. Version 2.2 was published in 2023.
Examples
Our contract requires the website to meet WCAG 2.2 level AA.
This error message fails WCAG because it relies only on red colour.
Usage note
Usually pronounced as one word, 'wuh-cag', though some people say the letters. W3C stands for World Wide Web Consortium.
A short written description of an image, added in the code, that screen readers read aloud and browsers show if the image fails to load.
Where you use it
Short for alternative text; in HTML it is the alt attribute. Designers write or specify alt text for meaningful images during handoff. Decorative images get empty alt text so that screen readers skip them.
Examples
Write alt text that explains the chart's main point, not just 'chart'.
The product photos have no alt text, so screen reader users don't know what they're buying.
Usage note
'Alt' here is short for alternative, not the Turkish word 'alt'. Don't start with 'Image of…': screen readers already say that it is an image.
Common phrases
add alt text · write alt text · missing alt text · empty alt text
The visible style, usually an outline or ring, that shows which element is currently selected when someone moves through a page with a keyboard.
Where you use it
Keyboard and switch users depend on it to know where they are. Removing the browser's focus outline without a replacement is a common accessibility failure, and WCAG requires a visible focus indicator.
Examples
The focus state is almost invisible on the dark header.
Every interactive component in the design system needs a clear focus state.
Common phrases
visible focus state · focus ring · focus indicator · design the focus state
Moving through and using an interface with the keyboard alone, mainly with the Tab, Shift+Tab, Enter, Space and arrow keys, without a mouse.
Where you use it
Essential for people who cannot use a mouse, and used by many screen reader users and power users. Designers specify a logical focus order and make sure menus, modals and custom components work without a mouse.
Examples
With keyboard navigation, you can't get out of the date picker once you're in it.
Test keyboard navigation on the sign-up form before the release.
Common phrases
support keyboard navigation · keyboard navigation test · logical focus order · keyboard trap
An approach that designs for the full range of human diversity, including ability, age, language, culture and situation, so that more people can use a product.
Where you use it
Broader than accessibility: it also considers temporary and situational limits, such as a broken arm or bright sunlight. Microsoft's inclusive design toolkit helped make the idea widely known. Teams include diverse participants in research.
Examples
Inclusive design means testing with older adults, not just colleagues in their twenties.
Captions are a good example of inclusive design: they help deaf users and people watching in noisy places.
Common phrases
inclusive design principles · practise inclusive design · inclusive by default · design for diversity
Ten questions from this glossary. Pick the right meaning for each term and see your score.
How to learn UX/UI design vocabulary
Read real texts from the field every week: case studies in designers' portfolios, public design system documentation such as Material Design and Apple's Human Interface Guidelines, and articles by UX research organisations.
Name your pages, frames, layers and components in English in your design files; using the words for UI elements every day is the fastest way to remember them.
Learn the verbs that go with each noun: you run a usability test, conduct interviews, synthesise findings, hand off designs and ship a feature.
Practise presenting a screen in English in three steps: the user problem, the decision you made and the evidence behind it. Design critiques and portfolio reviews follow exactly this pattern.
Watch out for pairs that look similar but mean different things: a wireframe is not a mockup, usability is not accessibility, and a user flow is not a user journey.
Frequently asked questions
How can I learn English vocabulary for UX/UI design?
Read real texts from the field and notice how designers use words: portfolio case studies, design system documentation, usability reports and the comments on shared design files. Learn each term with its usual partners (run a usability test, create a persona, hand off a design) and use new words straight away when you name components or write notes on your screens.
What is the difference between UX and UI?
UX (user experience) is about the whole experience of using a product: whether people can reach their goal easily, how the steps are organised and how they feel along the way. UI (user interface) is the part they see and touch: screens, buttons, typography, colours and icons. A UX designer asks whether the checkout makes sense; a UI designer decides how each screen of it looks. Many job titles combine the two.
What is the difference between a wireframe, a mockup and a prototype?
A wireframe is a simple, usually grey sketch that shows structure and content placement. A mockup is a static, realistic picture of the screen with real colours, fonts and images. A prototype can be clicked or tapped, so people can move through it and test the flow. Teams often go from wireframe to mockup to prototype, but the steps can overlap.
How do designers pronounce UX, UI, WCAG and other common terms?
UX and UI are said letter by letter: 'you-ex' and 'you-eye'. WCAG is usually said as 'wuh-cag', though some people spell it out. CTA is letter by letter. Watch the stress in persona (per-SO-na), prototype (PRO-to-type) and typography (ty-PO-gra-phy), and remember that the noun survey is stressed on the first syllable.
Should I use the Turkish or the English term at work?
Turkish design teams keep many English words, such as wireframe, persona, component, design system and handoff, often with Turkish endings ('wireframe çizmek', 'handoff yapmak'). Words like kullanıcı deneyimi, kullanılabilirlik, erişilebilirlik and bilgi mimarisi are common in formal documents, job ads and university courses. Knowing both helps you move easily between a Turkish meeting and an English design review.
