Welcome to the world of product design, where a single conversation can include terms like “heuristics,” “affordances,” “design tokens,” and “iterative feedback.” The field of User Experience (UX) and User Interface (UI) design is filled with specialized jargon that can be intimidating. For newcomers, developers, product managers, or marketers, this terminology can feel like a foreign language, creating a barrier to effective collaboration.
Table of Contents
This glossary is designed to be your translator. Its purpose is not just to define words, but to build a shared vocabulary. When a designer, a developer, and a product manager all mean the same thing when they say “MVP,” the real work can begin.
This guide is structured as a simple A-Z glossary. We have also included “Spotlight” sections for the most common points of confusion, such as the difference between UI and UX, to provide deeper clarity.
The A-Z Glossary of UX & Design
A/B Testing
A/B testing is a straightforward experiment used to find out which version of a design performs best. You create two (or more) variations of a webpage or app screen—Version “A” (the control) and Version “B” (the variation)—and show them to different segments of your audience at random. You then measure which version was more successful in achieving a specific goal, such as getting more clicks or signups.
What is the goal of A/B testing?
The goal is to eliminate guesswork and make data-driven decisions. Instead of having an internal debate about whether a “Buy Now” button should be green or orange, you can test both and let real user behavior determine which one leads to more conversions. It is a core method of Conversion Rate Optimization (CRO), helping you get more value from the website traffic you already have.
What's the difference between A/B testing, Split testing, and Multivariate testing?
- A/B Testing typically tests a single element’s change (e.g., a new headline vs. the old one).
- Split Testing is a type of A/B test where the two versions are significantly different, such as a complete redesign of a page (Version A) versus the original (Version B).
- Multivariate Testing involves testing multiple combinations at once. For example, you might test two different headlines and two different button colors simultaneously to see which combination performs best.
Accessibility (A11y)
Accessibility is the practice of designing products, services, and websites so that people of all abilities can use them. The term “A11y” is a common abbreviation, or numeronym, where “11” represents the eleven letters between the “A” and the “y”.
What does accessibility mean in practice?
It means actively removing barriers. For a user with a visual impairment, this includes ensuring your site is compatible with screen readers and that text has sufficient color contrast. For a user with a motor disability, it means ensuring your site can be navigated using only a keyboard. This also extends to providing captions for users with auditory disabilities and using clear, simple language for users with cognitive disabilities.
This practice often benefits everyone. For example, closed captions, designed for users with hearing impairments, are also used by people watching videos in a loud environment or with the sound off.
What is WCAG?
WCAG stands for the Web Content Accessibility Guidelines, which are the globally accepted standards for accessibility. The guidelines are often summarized by the acronym POUR :
- Perceivable: Users must be able to perceive the information (e.g., providing text alternatives for images).
- Operable: Users must be able to interact with the interface (e.g., all functions are available from a keyboard).
- Understandable: The information and the operation of the interface must be clear (e.g., using simple language and predictable navigation).
- Robust: The content must be robust enough that it can be interpreted reliably by a wide variety of devices and assistive technologies.
Affordance
An affordance is a “hint” or cue that an object or interface provides to its user about how to interact with it. It is the unspoken language between the user and the design. For example, a button on a website looks raised and clickable, which “affords” (or hints at) the action of clicking.
What are some examples of affordances?
- Explicit Affordance: The hint is obvious and direct. A button with the word “Login” on it clearly communicates its purpose and action.
- Hidden Affordance: The hint is not visible until the user takes a specific action, like hovering. A drop-down menu that only appears when you hover over a navigation bar item is a hidden affordance.
- Metaphorical Affordance: The design uses a real-world object as a metaphor to communicate function. A floppy disk icon to “Save” or a heart icon to “Favorite” are examples of metaphorical affordances.
- Negative Affordance: This hint communicates that an action is not possible or inactive. A “Submit” button that is “grayed out” and unclickable until a form is filled out correctly is a negative affordance.
What's the difference between an Affordance and a Signifier?
This is a common point of confusion, even among design experts.
- An Affordance is the possible action itself—the relationship between the user and the object. A chair affords sitting.
- A Signifier is the visual cue that communicates that affordance. The shape of the chair (a flat seat) signifies that you can sit on it.
In digital design: a button’s underlying code affords the action of clicking. The button’s visual design (its color, shape, and label) is the signifier that tells the user, “You can click me.”
Beta Testing
Beta testing is the final phase of testing before a product is officially launched to the public. In this stage, a nearly finished version of the product (the “beta version”) is released to a select group of real users. These users test the product in their own real-world environments to help find any bugs, usability issues, or pain points that the internal team may have missed.
Breadcrumb
A breadcrumb is a small navigation trail that shows a user their current location within a website or app. It typically appears near the top of a page and looks like a path, such as: Home > Men > Shoes > Running Shoes. Breadcrumbs help users understand where they are in the site’s hierarchy and allow them to easily navigate back to a previous section or the homepage.
Card Sorting
Card sorting is a popular UX research method used to understand how people naturally organize information. In a card sorting session, participants are given a set of digital or physical “cards,” each with a topic or item written on it. They are then asked to group these cards in a way that makes logical sense to them.
Why do UX designers use card sorting?
This method is used to design a user-friendly and intuitive Information Architecture (IA), or navigation structure, for a website or app. It helps designers answer the question, “Where would a user expect to find this information?” By using the user’s mental model, not the company’s internal structure, to organize content, the resulting design feels much more intuitive.
What are Open vs. Closed Card Sorting?
- Open Card Sorting: Participants are given cards to sort and are then asked to create their own labels for the groups they’ve made. This method is used early in the design process to discover the categories and labels that users find most logical.
- Closed Card Sorting: Participants are given cards and a set of pre-defined categories. Their task is to sort the cards into these existing categories. This method is used later to validate whether the chosen category labels are effective and make sense to users.
Cognitive Load
Cognitive load refers to the amount of mental effort or “brain power” a user must exert to use a product or complete a task. Every element on a screen—every button, image, and piece of text—adds to this load.
As a designer, the goal is to minimize cognitive load. If a user has to think too hard, they will become confused, frustrated, and likely abandon the task. This is achieved by using familiar patterns, providing clear labels, and breaking complex tasks into simple, step-by-step processes.
Competitor Analysis
A competitor analysis is a structured review of competing products within the same market. Designers and product teams conduct this analysis during the research phase to identify what their competitors do well, where their weaknesses lie, and what features users have come to expect as standard. This process helps the team make informed design decisions, find opportunities for differentiation, and avoid “reinventing the wheel” for common features.
Dark Patterns (Dark UX)
Dark patterns (or Dark UX) are deceptive and manipulative design tricks used in websites and apps to make users do things they did not intend to do. These practices benefit the company, often at the user’s expense.
What are common examples of dark patterns?
- Roach Motel: The design makes it very easy for a user to get into a situation (like signing up for a subscription) but almost impossible to get out of it (like finding the “cancel” button).
- Forced Continuity: You are asked for your credit card for a “free trial,” and when the trial ends, you are automatically billed without a clear warning or an easy way to opt out.
- Preselection: The design pre-ticks boxes for you, often for options that benefit the company, such as “Yes, sign me up for marketing emails!”.
- Confirmshaming: This technique uses guilt-tripping language to make you opt-in. For example, the “no” option for a newsletter might say, “No thanks, I hate saving money”.
- Bait and Switch: The user attempts to do one action, but a different, undesirable action happens instead.
Dark patterns are not just unethical; they are bad for business. They destroy user trust, severely damage brand reputation , and are increasingly being targeted by consumer protection laws.
DesignOps
DesignOps (Design Operations) is the practice of integrating and managing the people, processes, and tools that support a design team. It is the “backstage crew” that allows a design team to work efficiently and scale effectively.
A popular analogy is that if designers are the “chefs” creating great experiences, DesignOps is the “kitchen manager” who sets up the kitchen, writes the “recipe book” (the design system), and ensures the “supply chain” (tools like Figma) is working for everyone.
Why is DesignOps important?
DesignOps answers the critical question of scalability: “How do we maintain quality and consistency when our design team grows from 5 people to 50?”. It achieves this by standardizing processes (e.g., how design reviews are conducted) and tools (e.g., ensuring everyone uses the same component libraries), allowing designers to focus on designing rather than on administrative overhead.
Design System
A design system is a company’s “single source of truth” for product design. It is a centralized, evolving library of reusable components, guidelines, code, and assets that ensures all products look, feel, and function consistently. A well-known example is Google’s Material Design.
What's in a design system?
A comprehensive design system is much more than just a set of design files. It includes:
- UI Components: The reusable “Lego bricks” of the interface, such as buttons, forms, and icons.
- Design Tokens: The underlying variables that store design decisions like colors, fonts, and spacing.
- Code Components: The actual, production-ready code snippets for developers to implement.
- Guidelines: Clear documentation on how to use the components, accessibility standards, and the brand’s tone of voice.
What's the difference between a Design System, a UI Kit, and a Style Guide?
These terms are not interchangeable, and the distinction is important.
- Style Guide: A static document outlining brand rules (logo, colors, typography).
- UI Kit: A file (e.g., in Figma) containing reusable UI components for designers to use.
- Design System: The complete “full stack.” It includes the style guide and UI kit, but also adds the code components, design tokens, principles, and governance models. It is a living product that serves other products.
Design Tokens
Design tokens are the “single source of truth” for the smallest, most granular design decisions—such as a specific color, a font size, or a spacing value—stored as a variable.
Think of it this way: instead of telling a developer to use the color hex code #007bff (a “hard-coded” value), you create a token named color-primary. The token’s value is #007bff.
Why are design tokens so important?
Design tokens are the “missing link” between design and development. They solve a massive collaboration bottleneck. When a brand’s main color needs to be updated, the designer updates the color-primary token one time in a central location. This change then automatically propagates across all platforms—updating the variable in the web app’s CSS, the iOS app’s JSON, and the Android app’s XML.
provides a great analogy: Tokens are like actors. You choose the actor (e.g., a specific hex code), but then you just refer to them by their role (“primary-brand-color”). In your daily work, you just need the role; you don’t have to remember the specific actor.
Edge Case
An edge case is a rare or extreme situation that a user might encounter, which falls outside the typical “happy path” of the design. It is a scenario that is unlikely, but still possible.
What are some examples of edge cases?
- Empty State: What does the user see when they first sign up and their dashboard is empty (e.g., no projects, no friends, no data)?
- Maximum Input: What happens when a user with an extremely long name tries to fit it into a small form field?
- Technical Failure: What does the user see if their internet connection drops while they are uploading a file?
- Zero Results: What screen is shown when a user’s search query returns no results?
Considering edge cases is a mark of a mature design process. Ignoring them can lead to user frustration and a feeling that the product is “broken” or “buggy”.
Empathy Map
An empathy map is a simple, collaborative tool that teams use to gain a deeper, more human understanding of their users. It is typically a visual chart divided into four quadrants: Says, Thinks, Feels, and Does, with the user “persona” at the center.
How do teams use an empathy map?
After conducting user interviews, the team will place their research findings (quotes, observations) into the appropriate quadrants:
- Says: What the user literally said in the interview (e.g., “This button is confusing”).
- Thinks: What the user might be thinking but not saying (e.g., “Am I stupid for not understanding this?”).
- Feels: The user’s emotional state (e.g., “Frustrated,” “Anxious,” “Relieved”).
- Does: The user’s physical actions (e.g., “Hesitated for 10 seconds,” “Clicked the wrong link”).
The true power of an empathy map is in revealing contradictions—for example, when a user says “This is fine” but their actions (does) and emotions (feels) clearly show they are frustrated. This helps the team uncover the user’s true underlying needs, not just their surface-level statements.
Ethnographic Research
Ethnographic research is a qualitative research method where the researcher observes users in their natural environment to understand their real-world behaviors, contexts, and cultural nuances.
This is different from a usability test, where a user is brought into a controlled lab environment. Ethnography involves the researcher going to the user—visiting their home, their office, or observing their commute.
The primary benefit of ethnography is in discovering the difference between what people say they do and what they actually do. By immersing themselves in the user’s world, researchers can identify pain points, “workarounds,” and unmet needs that would never be mentioned in an interview or a survey.
Fidelity (Low-Fidelity vs. High-Fidelity)
In design, “fidelity” refers to the level of detail and realism of a design artifact, such as a wireframe or prototype.
What is Low-Fidelity (Lo-Fi)?
Low-fidelity (Lo-Fi) means basic, simple, and unpolished. This includes quick paper sketches or simple, black-and-white digital wireframes. The purpose of a lo-fi design is to test the core concept, structure, and user flow—not the visual design. It’s fast, cheap, and easy to throw away, which encourages experimentation and prevents the team from getting too attached to a single idea.
What is High-Fidelity (Hi-Fi)?
High-fidelity (Hi-Fi) means polished, detailed, and realistic. It includes the final colors, fonts, images, and content. A high-fidelity prototype looks and feels just like the final product. The purpose of a hi-fi design is to test the visual design, specific interactions, and overall usability with users, or to present the final design to stakeholders for approval.
Gamification
Gamification is the practice of adding game-like elements—such as points, badges, levels, and leaderboards—to a non-game product or service. The goal is to make the experience more engaging, motivating, and enjoyable.
What are some examples of gamification?
- Duolingo: The language-learning app uses “streaks” to motivate daily practice, “XP” (points) for completing lessons, and leaderboards to create friendly competition.
- LinkedIn: The “Profile Strength” bar is a form of progress bar that motivates users to complete their profiles by adding more information.
- Starbucks Rewards: The “stars” system is a gamified loyalty program that rewards points for purchases, encouraging repeat business.
Gamification taps into core human motivations: the desire for achievement (badges), a sense of progress (points), and social connection or competition (leaderboards).
Generative AI (in UX)
Generative AI refers to a type of artificial intelligence that can create new and original content, including text, images, music, and code. It does this by learning patterns and relationships from massive datasets.
How is Generative AI changing UX design?
- Faster Research: AI can analyze and summarize thousands of user reviews or interview transcripts in seconds, identifying key themes and pain points.
- Enhanced Ideation: Instead of a designer manually creating 3 design concepts, AI can generate 50 variations in a minute, allowing the designer to explore more possibilities.
- Automated Prototyping: New tools can turn simple text prompts (e.g., “create a login screen for a travel app”) into fully-designed UI components or even working code.
- Personalized Experiences: AI can power dynamic UIs that adapt in real-time to a user’s behavior, needs, or preferences, creating a unique experience for every user.
Will AI replace UX designers?
The consensus is no, but it is fundamentally changing the job. AI is a powerful tool that automates mundane tasks (like resizing images or generating component code). This frees designers to focus on the uniquely human skills that AI cannot replicate: empathy, strategic thinking, understanding user context, and curation. The designer’s role is evolving from “pixel-pusher” to “design curator” and “problem-solver”.
Heuristic Evaluation
A heuristic evaluation is a “health inspection” for a user interface. In this method, a small group of usability experts (not real users) inspects the design and judges its compliance with a set of established usability principles, known as “heuristics”.
What are heuristics?
Heuristics are simply “rules of thumb” or best practices for usable design. The most famous set is Jakob Nielsen’s 10 Usability Heuristics, which were developed in the 1990s and are still widely used today. In plain English, these include:
- Visibility of system status: Keep users informed about what’s going on (e.g., a loading bar).
- Match between system and the real world: Speak the user’s language, not technical jargon.
- User control and freedom: Provide a clear “emergency exit,” like an “undo” or “cancel” button.
- Consistency and standards: Don’t make users wonder if different words or icons mean the same thing.
- Error prevention: Design the system so that users can’t make a mistake in the first place.
- Recognition rather than recall: Show users their options instead of forcing them to remember information.
- Flexibility and efficiency of use: Provide shortcuts for expert users.
- Aesthetic and minimalist design: Don’t clutter the interface with irrelevant information.
- Help users recognize, diagnose, and recover from errors: Write error messages in plain English that suggest a solution.
- Help and documentation: Make help easy to find.
Heuristic Evaluation vs. Usability Testing: What's the difference?
- Heuristic Evaluation involves Experts identifying problems based on a checklist of principles. It is fast, cheap, and can be done early.
- Usability Testing involves Real Users trying to complete tasks. It finds problems that experts might miss because they are not the target audience.
These methods are best used together. A heuristic evaluation is often run first to fix the “obvious” usability problems, allowing the subsequent usability test to focus on deeper, more context-specific issues.
Information Architecture (IA)
Information Architecture (IA) is the art and science of organizing, structuring, and labeling the content of a website or app so that users can easily find what they are looking for.
A common analogy is that if your website is a supermarket, your IA is the plan that decides which items go in which aisles and what the signs on those aisles say. Good IA means users can find the milk without having to search the entire store.
IA is the “backbone” of the user experience. It is not just the navigation menu; it is the entire logical hierarchy and labeling system that makes a product feel intuitive. Key tools for developing an IA include Card Sorting, Sitemaps, and User Flows.
Interaction Design (IxD)
Interaction Design (IxD) is the practice of designing the conversation between a user and a product. If UI design is what it looks like, IxD is how it works and feels when you interact with it.
A helpful analogy: If UX is the entire road trip, and UI is the look of the car’s dashboard, then IxD is the act of driving—how the steering wheel turns, how the pedals respond, and the feedback the car gives you.
What are the 5 Dimensions of IxD?
Interaction designers think beyond the screen. They consider 5 “dimensions” to craft an interaction :
- 1D (Words): The text on buttons, labels, and instructions.
- 2D (Visuals): Graphics, icons, and typography that the user interacts with.
- 3D (Physical Objects/Space): The medium—a mouse, a finger on a touchscreen, a keyboard.
- 4D (Time): How the interaction unfolds over time, such as animations, sounds, or videos.
- 5D (Behavior): The user’s action (like clicking) and the product’s reaction (like a menu appearing).
Iterative Design
Iterative design is a simple, repeatable process for creating and refining a product: Build -> Test -> Learn -> Repeat. It is a cyclical approach of continuously improving a design based on feedback.
The core philosophy is that your first design is never perfect. Instead of spending six months building a “perfect” product in secret (known as the “waterfall” method), the iterative approach builds a small piece, tests it with users, learns from their feedback, and iterates (improaws) the design. This process reduces risk, saves money by catching flaws early, and ensures the final product actually solves a real user problem.
Journey Map (User Journey Map)
A user journey map is a visual story of a user’s entire experience with a product or service, told from their perspective.
What's in a journey map?
A journey map is much more than a simple list of steps. It is a chart that tracks several lanes of information for each stage of the journey :
- Actions: What is the user doing?
- Touchpoints: What part of the company are they interacting with (e.To., the website, a support email, a physical store)?
- Thoughts: What is going through their mind?
- Emotions (Feelings): How do they feel? (e.g., “Confused,” “Relieved,” “Frustrated”)
- Pain Points: Where are the moments of friction?
- Opportunities: How can we fix these pain points?
Journey maps are powerful empathy-building tools. They force the entire team to see the product not as a set of isolated features, but as a complete experience through the user’s eyes. This often highlights painful “gaps” in the experience, such as the handoff from the sales team to the support team.
Key Performance Indicator (KPI)
A Key Performance Indicator (KPI) is a specific, measurable value that demonstrates how effectively a business (or a design) is achieving its key objectives.
What are some common UX-related KPIs?
KPIs provide the “hard data” that designers use to measure their work and demonstrate its value to stakeholders. They generally fall into two categories:
- Behavioral KPIs (What users do):
- Task Success Rate: What percentage of users can successfully complete a specific task (e.g., “make a purchase”)?
- Time-on-Task: How long does it take a user to complete that task?
- User Error Rate: How many times did the user click the wrong thing or have to go back?
- Attitudinal KPIs (What users say):
- System Usability Scale (SUS): A standardized 10-question survey that provides a quick score of a product’s usability.
- Net Promoter Score (NPS): Measures user loyalty by asking, “How likely are you to recommend this product to a friend?”.
- Customer Satisfaction (CSAT): A direct measure of satisfaction, often asking, “How satisfied were you with this experience?”.
Lean UX
Lean UX is a design philosophy that prioritizes speed, collaboration, and learning over detailed documentation and deliverables. It is focused on reducing wasted time and effort.
The core idea is to skip the long, formal design process. Instead, Lean UX teams work to build a Minimum Viable Product (MVP), get it in front of real users as quickly as possible, and use that user feedback to guide the next small step.
The Lean UX cycle is a simple loop: Think -> Make -> Check (or Build -> Measure -> Learn). This approach shifts the team’s focus from “Outputs” (e.g., “Did we deliver the wireframes on time?”) to “Outcomes” (e.g., “Did we solve the user’s problem?”). It is highly collaborative, bringing designers, developers, and product managers together to solve problems as one unified team.
Mental Model
A mental model is a user’s belief about how a system works.
Where do mental models come from?
Users form their mental models based on their past experiences with similar products. This is explained by Jakob’s Law: “Users spend most of their time on other sites, and they prefer your site to work the same way as all the other sites they already know”.
Examples:
- Everyone has a mental model for an e-commerce “shopping cart.” They expect to be able to add items, review them, and then “check out”.
- Users expect a magnifying glass icon to mean “Search”.
- Users expect a logo in the top-left corner of a website to be a link back to the homepage.
Good UX design matches the user’s mental model, making the product feel intuitive. When a design breaks a user’s mental model (e.g., the “back” button on a site doesn’t behave like the browser’s “back” button), the user feels confused, frustrated, and assumes the product is broken.
Microcopy
Microcopy is the small, targeted text in a user interface that guides the user. It includes the “words on the buttons,” error messages, placeholder text in form fields, and tooltips.
Microcopy is not marketing copy. Marketing copy sells; microcopy helps.
Why is microcopy so important?
- It guides users: A clear button label tells a user exactly what will happen (“Save and Continue”) vs. an ambiguous one (“Submit”).
- It prevents errors: Helpful text under a password field (“Must be at least 8 characters”) saves the user from failing.
- It builds trust: A tiny line of text like “No credit card required” on a free trial signup can dramatically increase conversions because it anticipates and relieves a user’s anxiety.
- It shows personality: It’s a chance to use the brand’s voice and make the experience feel more human and less robotic.
Minimum Viable Product (MVP)
A Minimum Viable Product (MVP) is the smallest possible version of a new product that a team can build to test its most critical business assumption.
The goal of an MVP is not to be a perfect, feature-complete product. The goal is to collect the maximum amount of validated learning about customers with the least amount of effort.
What is an MVP in practice?
An MVP is an experiment. For Dropbox, the MVP wasn’t even a working product; it was just a video demonstrating the file-syncing concept. The overwhelmingly positive response to the video validated their assumption that people wanted this, before they spent millions building the full technology.
A common mistake is to misunderstand the “V” in MVP. It must be Viable—it has to provide some core value to the user. It’s the first small, usable slice of a product, not just a collection of half-built features.
Onboarding (User Onboarding)
User onboarding is the process of actively guiding new users to find value in your product. The goal is to turn them from first-time, confused users into long-term, successful customers.
The main objective of onboarding is to get the user to their “Aha!” moment as quickly as possible—the moment where they personally realize the value your product provides.
What are common onboarding patterns?
- Product Tours: A guided walkthrough of the main UI elements.
- Checklists: A simple list of “getting started” tasks (e.g., “1. Create a project,” “2. Invite a teammate”) that motivates users by showing a progress bar.
- Tooltips & Hotspots: Small pop-ups that contextually explain a specific feature when you first encounter it.
- Welcome Message: A simple screen that greets the user, orients them, and asks a key question to personalize their experience.
Good onboarding is critical for retention. Many users will abandon an app after using it just once. A strong onboarding UX is the antidote, as it proves the product’s value early and reduces churn.
Pain Point (User Pain Point)
A user pain point is any problem, frustration, or moment of friction that a user experiences while trying to achieve their goal with a product.
What are examples of user pain points?
- Design/Functionality Pain Points: “This website is too slow,” “This link is broken,” “I can’t read this tiny text on my phone”.
- Process Pain Points: “The checkout process has too many steps,” “I can’t find the ‘contact us’ page”.
- Financial Pain Points: “This product is too expensive,” “I was surprised by a hidden shipping fee at the end”.
User research is the practice of finding these pain points , and good UX design is the practice of solving them.
Persona (User Persona)
A user persona is a fictional, representative character created to stand in for a key segment of a product’s target audience. Although the persona is “fake,” it is based on real research (from interviews, surveys) about actual users.
What's in a persona?
A persona is much more than just demographics (e.g., “Age: 30-40”). A useful persona focuses on:
- A Name and Photo: (e.g., “Sarah, the Busy Project Manager”).
- Goals: What is this person trying to achieve?
- Pain Points: What is currently frustrating them?
- Behaviors: How do they use technology? What other products do they use?
Why do teams use personas?
Personas are a powerful tool for building empathy and alignment. They prevent the team from designing for themselves (a problem called the “elastic user”). Instead of a vague “the user,” the team can align around a concrete question: “Would Sarah find this feature useful?”.
Prototype
A prototype is an interactive simulation of a final product. Teams use prototypes to test their designs with real users before writing a single line of production code.
The key word is interactive. If it’s a static image, it’s a Wireframe or a Mockup. If you can click on it and it reacts (e.g., a button takes you to another screen), it’s a prototype.
Prototypes can be:
- Low-Fidelity: A simple, clickable set of wireframes (see “Wireframe”) used to test the basic user flow.
- High-Fidelity: A highly realistic simulation made from final “Mockups” that looks and feels just like the finished product.
Qualitative vs. Quantitative Research (Beginner's Guide)
User research is broadly divided into two main types: Qualitative (Qual) and Quantitative (Quant).
What is Quantitative (Quant) Research?
- The “What”: This research is all about numbers, data, and statistics. It’s objective and measurable.
- Answers questions like: “How many…?”, “What percentage…?”, “How long…?”.
- Common Methods: A/B tests, surveys sent to large groups, and web analytics.
What is Qualitative (Qual) Research?
- The “Why”: This research is all about understanding why people do what they do. It’s non-numerical data based on words, observations, and feelings.
- Answers questions like: “Why did users get confused here?”, “What are their motivations and frustrations?”.
- Common Methods: One-on-one user interviews, usability tests, and ethnographic studies.
Why do you need both?
Quantitative and Qualitative research are most powerful when used together.
- Quant tells you WHAT is happening (e.g., “Analytics show 70% of users are abandoning the payment screen”).
- Qual tells you WHY it’s happening (e.g., “We interviewed 5 users, and they all said they were confused and frustrated by the hidden service fee”).
Responsive Design
Responsive web design is the approach of building one website that automatically responds and adapts its layout to fit any screen size—from a giant desktop monitor to a small smartphone.
How does responsive design work?
It is built on three core CSS techniques :
- Fluid Grids: The layout is built with flexible units (like percentages) instead of fixed units (like pixels), so it can stretch and shrink.
- Flexible Images: Images and media are set to scale down within their containers so they don’t “break” the layout on a small screen.
- Media Queries: This is the code that allows the site to “respond.” It’s a set of rules that says, “If the screen is this small, apply these new styles” (e.g., stack the columns vertically).
Responsive design is now essential, as the majority of all web traffic now comes from mobile devices.
Sitemap
A sitemap is a visual “blueprint” or flowchart that shows the hierarchy and structure of all the pages on a website.
If a wireframe is the blueprint for a single page, a sitemap is the blueprint for the entire building. It shows how all the rooms (pages) are connected and organized.
A sitemap is a key deliverable of Information Architecture (IA). It helps the entire team plan the user flow, understand the project’s scope, and get alignment from stakeholders before building begins.
Storyboarding
Storyboarding in UX is the practice of creating a short, comic-strip-like story to visualize a user’s experience with a product.
Why do teams use storyboards?
- Context & Empathy: A storyboard forces the team to think about the context of the user. Where are they? (At a busy coffee shop?) What are they feeling? (Rushed and stressed?) What just happened before they used the app? This provides a much richer picture than just looking at a screen.
- Collaboration: It’s a simple, visual way to present a user’s problem and a proposed solution to the whole team (including developers and stakeholders) that is more engaging and easier to understand than a complex document.
Tree Testing
Tree testing is a UX research method used to test the “findability” of a website’s navigation structure (its Information Architecture).
Card Sorting vs. Tree Testing: What's the difference?
These two methods are opposites that work perfectly together.
- Card Sorting (Step 1): You give users content and ask them to build the structure (the “tree”). This helps you create your navigation.
- Tree Testing (Step 2): You give users the structure (the “tree”) and ask them to find the content. This helps you validate your navigation.
In a tree test, you give a user a task (e.g., “Find ‘men’s running shoes'”) and show them a simple, text-only version of your site’s menu. You then observe if they click the correct path (e.g., Sports > Footwear > Running) or if they get lost.
Usability
Usability is a measure of how easy a product is to use. It is a core component of the overall User Experience.
What makes a product "usable"?
A product with high usability is :
- Easy to Learn: A new user can quickly figure out how to accomplish their goals.
- Efficient: Users can complete their goals quickly and with minimal effort.
- Memorable: When a user returns to the product after a period of not using it, they don’t have to re-learn it from scratch.
- Forgiving: The design prevents users from making errors, and provides clear error messages to help them recover when they do.
- Satisfying: Users have a positive and pleasant experience while using it.
Usability Testing
Usability testing is the most common method for evaluating a product’s usability. It involves watching real users try to complete real tasks with your product (or a prototype) and observing where they struggle, get confused, or fail.
How do you run a usability test?
- Plan: Define your goals and recruit 5-8 users who represent your target audience.
- Write Tasks: Create a script of realistic tasks, e.g., “Imagine you want to buy a gift. Find a product and add it to your cart”.
- Conduct: Ask the user to “think aloud” as they perform the tasks. The researcher’s job is to observe, listen, and not lead the user.
- Analyze: After the sessions, the team identifies common pain points and recommends solutions.
What's the difference between Moderated and Unmoderated testing?
- Moderated: A facilitator (researcher) is present (either in-person or remotely) to guide the user, ask follow-up questions, and dig deeper into their “why”.
- Unmoderated: The user completes the test alone, typically using a remote testing tool that records their screen and voice. This method is faster and cheaper but less flexible.
User-Centered Design (UCD)
User-Centered Design (UCD) is a design philosophy and process that places the user at the center of every single decision. Instead of starting with a cool piece of technology or a business goal, UCD starts by asking, “What does our user need?”
The core principles of UCD are :
- Involve users from the very beginning through user research.
- Iterate on designs based on continuous user feedback.
- Address the whole user experience, not just a single feature.
UCD is the “why” behind most of the methods in this glossary. Teams conduct “user research” and “usability testing” in order to practice User-Centered Design.
User Experience (UX)
User Experience (UX) refers to a person’s total experience and overall feeling when interacting with a product or service. It encompasses every single touchpoint, from the first time they hear about the product to the moment they use it and any customer support they receive afterward.
UX is not just the visual design (that’s UI). UX is the underlying strategy that answers critical questions like:
- Is it Usable? (Can I use it easily?)
- Is it Useful? (Does it solve my problem?)
- Is it Accessible? (Can everyone use it?)
- Is it Enjoyable? (Is this a pleasant experience?)
User Interface (UI)
The User Interface (UI) is the specific visual and interactive part of a product that a user interacts with. It is the “skin” of the product—the buttons, icons, colors, typography, and screen layouts.
UI is a part of the overall User Experience. Good UI (a beautiful, clear layout) contributes to good UX (a pleasant, easy experience). However, it’s possible to have a beautiful UI that is terrible to use (bad UX).
User Flow
A user flow is a simple diagram that maps out the specific path or sequence of screens a user takes to complete a single task.
For example, a “Password Reset” user flow would show this path: Forgot Password screen -> Email Input screen -> “Check Your Email” screen -> Reset Password screen.
User Flow vs. Journey Map: What's the difference?
- A User Flow is a simple, tactical diagram of screens and actions within the product.
- A Journey Map is a complex, strategic story that includes the user’s emotions, thoughts, and off-site experiences.
User Research
User research is the foundation of all good UX. It is the systematic study of target users to understand their behaviors, needs, motivations, and pain points.
The goal of user research is to replace the team’s internal assumptions with real-world evidence. It is the process that ensures you are solving a real problem for real people, not just building something because you can.
What are the two main types of user research?
- Generative (or Exploratory) Research: This is done at the beginning of a project to generate ideas and deeply understand the user’s problem space. It answers the question, “What should we build?”.
- Evaluative Research: This is done after you have a design or prototype to evaluate how well it works. It answers the question, “Did we build the right thing?” (Usability testing is a primary example).
Voice User Interface (VUI)
A Voice User Interface (VUI) is an interface that allows a user to interact with a system using only their voice. The most common examples are virtual assistants like Apple’s Siri, Amazon’s Alexa, and Google Assistant.
What makes designing a VUI so challenging?
The biggest challenge is the lack of a screen and visual cues. In a Graphical User Interface (GUI), a user can see all their options (e.g., menus and buttons). In a VUI, the user has to remember what commands they can say. Therefore, a good VUI must proactively guide the user, often by “providing information about what they can do” (e.g., “You can ask for today’s weather or a weekly forecast”).
Wireframe
A wireframe is a simple, low-fidelity “blueprint” for a digital screen or page.
It is a “skeleton” of the page, made up of just boxes, lines, and placeholder text. A wireframe intentionally has no color, real images, or polished fonts.
The purpose of a wireframe is to force the team to focus only on the page’s structure, layout, and content hierarchy. Because they are so fast and cheap to create, they are the best tool for iterating on the core structure of a design before investing time in visual polish.
Beyond the Jargon: Building a Culture of Shared Understanding
The goal of this glossary was not to help you win an argument with jargon, but to help you end one with clarity.
A shared vocabulary is the foundation of empathy and effective collaboration. When a design team, a development team, and a marketing team can all speak the same language, they can stop debating definitions and start focusing on what truly matters: understanding their users and building products that solve real-world problems.
We hope this guide serves as a valuable resource for you and your team. Bookmark this page for your next project kickoff.
