UX Glossary

Definition:

Comparing two versions of a webpage or app to determine which performs better.

Example:

Testing two different button colors to see which gets more clicks.

Best practices:

• Test one variable at a time to isolate the effect.
• Ensure a significant sample size to get reliable results.
• Run tests long enough to gather meaningful data before making changes.

Definition:

Ensuring that your product is usable by people of all abilities and disabilities.

Example:

Adding alt text to images so screen readers can describe them to visually impaired users.

Best practices:

• Use high-contrast colors to ensure text readability.
• Ensure keyboard navigability for those who cannot use a mouse.
• Follow WCAG (Web Content Accessibility Guidelines) to cover the basics of accessible design.

Definition:

The property of an object that indicates how it can be used.

Example:

A button looks clickable because of its shape and shading.

Best practices:

• Use familiar design patterns that clearly suggest their function.
• Ensure visual cues match the action (e.g., links should look like links).
• Test affordances with users to ensure they are intuitive.

Definition:

Elements that prompt the user to take a specific action, like buttons or links.

Example:

A “Sign Up Now” button that encourages users to create an account.

Best practices:

• Make CTAs clear, visible, and actionable.
• Use verbs that inspire immediate action, like "Get Started" or "Learn More."
• Place CTAs in strategic locations where users are most likely to engage.

Definition:

The amount of mental effort required for a user to use your product.

Example:

A cluttered interface with too many options can overwhelm users.

Best practices:

• Simplify navigation and use intuitive design patterns.
• Use clear, concise language that users can easily understand.
• Group related items together to create logical, digestible chunks of information.

Definition:

Ensuring uniformity in design elements across your website or app.

Example:

Using the same button style, color, and font throughout the site.

Best practices:

• Establish a design system or style guide for all team members.
• Keep your visual elements consistent to build familiarity.
• Use recognizable patterns that users already know.

Definition:

Deceptive design techniques that trick users into taking unintended actions.

Example:

Hiding the “unsubscribe” button in an email to make it hard to opt-out.

Best practices:

• Avoid misleading users; prioritize transparent design.
• Conduct ethical reviews of your UI to spot any dark patterns.
• Test with users to ensure the design is not inadvertently manipulative.

Definition:

Design elements that go beyond functionality to create a memorable and enjoyable experience for the user.

Example:

Animated micro-interactions that respond playfully to user actions.

Best practices:

• Use subtle animations to add a touch of delight without distracting users.
• Incorporate elements of surprise and personalization where appropriate.
• Ensure delightful elements do not compromise usability.

Definition:

A collaborative visualization used to articulate what a user sees, hears, thinks, and feels, helping teams understand user experiences.

Example:

Mapping out a customer’s emotions during a frustrating checkout process.

Best practices:

• Use empathy maps in early design stages to capture emotional insights.
• Involve diverse team members to get a well-rounded perspective.
• Regularly update empathy maps as new user insights are gathered.

Definition:

The design of a page or screen when no data or content is available, providing guidance on what to do next.

Example:

A blank to-do list that suggests, “Add your first task!”

Best practices:

• Provide clear instructions or actions that users can take to fill the empty state.
• Use illustrations or encouraging language to make the empty state engaging.
• Offer tips or examples to help users get started.

Definition:

Design principles aimed at preventing user errors before they occur.

Example:

Confirming with users before they delete an important file.

Best practices:

• Provide clear guidance and instructions on form fields and inputs.
• Use confirmation dialogs for actions that can’t be undone.
• Highlight potential errors early, like missing required fields.

Definition:

A predictive model of human movement used in UX design to determine the time required to move to a target area, such as a button or link.

Example:

Placing frequently used buttons closer to the user’s primary action area.

Best practices:

• Place interactive elements within easy reach of where users will likely need them.
• Make important buttons large enough to click easily.
• Avoid placing critical actions too far from other frequently used elements.

Definition:

Visual representations of user interaction data that show where users click, scroll, or spend the most time on a page.

Example:

A heatmap showing users frequently click on an unlinked header, indicating a desire for more information.

Best practices:

• Use heatmaps to understand user behavior and optimize page layouts.
• Identify underperforming elements and areas with high interaction.
• Adjust content positioning based on heatmap insights.

Definition:

A usability inspection method where evaluators identify usability problems in the UI based on established heuristics.

Example:

Assessing a site against Nielsen’s 10 Usability Heuristics.

Best practices:

• Use multiple evaluators to get diverse perspectives.
• Prioritize issues by their impact on the user experience.
• Compare findings against known best practices and standards.

Definition:

The structural design of shared information environments, organizing content to help users navigate efficiently.

Example:

Categorizing a blog’s content into clear, logical topics.

Best practices:

• Use card sorting to understand how users naturally group information.
• Implement a clear and logical hierarchy.
• Label content in a way that users will understand at a glance.

Definition:

Small pieces of text that guide users through a process, like buttons, tooltips, and error messages.

Example:

A button that says “Add to Cart” instead of just “Submit.”

Best practices:

• Be clear and concise; every word counts.
• Use a friendly, approachable tone that matches your brand.
• Ensure that microcopy reduces user errors and improves the flow.

Definition:

The simplest version of a product that can be released to validate core features and gather user feedback.

Example:

Launching a basic app with only essential features to test market demand.

Best practices:

• Focus on core functionality and avoid feature creep.
• Collect user feedback early to guide further development.
• Iterate based on real-world use rather than assumptions.

Definition:

The process of guiding users through the initial setup or introduction to a product to help them understand its features and benefits.

Example:

A tutorial that shows users how to use key features when they first open an app.

Best practices:

• Keep onboarding concise; highlight only the most critical actions.
• Use interactive guides or tooltips to provide context-sensitive help.
• Continuously refine the onboarding experience based on user feedback.

Definition:

A technique that shows only the most important information upfront and reveals additional details as needed.

Example:

Showing basic settings on a page, with an option to “Show Advanced Settings” for expert users.

Best practices:

• Use progressive disclosure to reduce cognitive load and keep interfaces clean.
• Test with users to ensure they can easily find hidden options when needed.
• Balance between too much and too little information to keep users engaged.

Definition:

Creating an early model of a product to test ideas, gather feedback, and refine design concepts.

Example:

Using Figma to create a clickable prototype of a new app feature.

Best practices:

• Start with low-fidelity prototypes to quickly test core concepts.
• Use high-fidelity prototypes to refine visual design and interaction details.
• Involve users in prototype testing to validate functionality before development.

Definition:

A design approach that ensures websites and applications work seamlessly across different devices and screen sizes.

Example:

A website that looks good on both a mobile phone and a desktop screen.

Best practices:

• Use flexible grids and images that adjust based on screen size.
• Test designs on multiple devices to ensure a consistent experience.
• Prioritize mobile-first design, as users increasingly access the web via mobile devices.

Definition:

Observing real users as they interact with your product to identify usability issues.

Example:

Watching users struggle to find the checkout button on an e-commerce site.

Best practices:

• Test with real users who match your target audience.
• Observe silently but be ready to ask open-ended questions.
• Focus on understanding user behavior and identifying roadblocks.

Definition:

A design approach that prioritizes the needs, wants, and limitations of end-users at every stage of the design process.

Example:

Iterating on a prototype based on user feedback from usability tests.

Best practices:

• Conduct thorough research to understand user needs.
• Involve users in testing phases to validate design decisions.
• Continuously iterate based on feedback to improve the experience.

Definition:

The path taken by a user to complete a task on a website or app.

Example:

From landing on the homepage to completing a purchase.

Best practices:

• Design intuitive flows that guide users toward their goals.
• Minimize the number of steps required to complete a task.
• Remove distractions that could lead users off the intended path.

Definition:

A visual representation of the process a user goes through to accomplish a goal on your website or app.

Example:

Mapping out the steps a user takes from first encountering a product to making a purchase.

Best practices:

• Identify key touchpoints and pain points along the journey.
• Use insights to improve the overall experience and remove barriers.
• Keep the map updated as your product evolves.

Definition:

A fictional representation of a typical user based on research, detailing their needs, goals, and behavior patterns.

Example:

“Sarah, a 35-year-old marketer who values quick and intuitive tools to save time.”

Best practices:

• Create personas based on real data, not assumptions.
• Use personas to guide design decisions and keep the focus on user needs.
• Update personas as you gather new insights from user research.

Definition:

The accumulation of design decisions that negatively impact user experience, often resulting from shortcuts taken during development.

Example:

A feature that was rushed to release without adequate user testing, leading to confusion.

Best practices:

• Regularly review and prioritize UX debt alongside technical debt.
• Plan for incremental improvements rather than large, disruptive overhauls.
• Involve stakeholders in discussions about the long-term impact of UX decisions.

Definition:

The immediate visual response to a user action, such as a button changing color when clicked.

Example:

A form field highlighting in red when an invalid input is detected.

Best practices:

• Ensure feedback is prompt and clearly communicates the outcome of an action.
• Use animation sparingly to enhance, not distract, from the task at hand.
• Provide feedback that helps users understand what to do next.

Definition:

The arrangement of elements in a way that implies importance, guiding users’ eyes through the content.

Example:

A large, bold headline at the top of the page draws more attention than smaller text below it.

Best practices:

• Use size, color, and positioning to emphasize important information.
• Guide users through content in a logical order.
• Avoid overwhelming the user with too many focal points.

Definition:

A basic visual guide that represents the skeletal framework of a website or application.

Example:

A black-and-white outline showing the placement of elements like headers, text blocks, and buttons.

Best practices:

• Focus on functionality and layout, not design aesthetics.
• Use wireframes early to test ideas quickly and make changes easily.
• Share with stakeholders to gather feedback before moving to high-fidelity designs.