action
Button
Triggers an action when clicked. The most important interactive element in any interface.
input
Text Input
Lets users type text — names, emails, search queries, etc.
input
Select / Dropdown
Pick one option from a list. Great when there are 4-15 choices.
input
Checkbox & Toggle
Let users turn options on/off. Checkbox for forms, toggle for settings.
display
Card
A container that groups related info — title, description, image, action. The building block of modern UI.
Badge / Tag
Small labels to show status, category, or count. Think notification dots and status pills.
Data Table
Organize structured data in rows and columns. Essential for admin panels and dashboards.
Modal / Dialog
Overlay window that demands attention. Use sparingly — it interrupts the user's flow.
Toast / Notification
Brief, auto-dismissing messages that confirm an action without blocking the user.
Navigation Bar
The top bar that appears on every page. Contains logo, links, and utility actions.
Tabs
Switch between views within the same context. Keeps users oriented without page reloads.
Sidebar Layout
Vertical navigation panel on the left/right. Standard for dashboards and admin panels.
Form Layout
How to structure forms that users actually complete. The #1 conversion killer when done wrong.
User-Centered Design
Design decisions should be based on user needs, goals, and behaviors — not assumptions. The most fundamental UX design principle.
Consistency & Standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions and maintain internal consistency.
Accessibility (a11y)
Design products that can be used by people of all abilities — including visual, motor, auditory, and cognitive disabilities. Good accessibility benefits everyone.
Visual Hierarchy
Guide users' attention through size, color, contrast, spacing, and positioning. The most important elements should be seen first.
Error Prevention
Design to prevent errors from occurring in the first place. Even better than good error messages is a design that prevents the problem from happening.
Task Success Rate
The percentage of users who successfully complete a specific task. The most fundamental UX metric — if users can't complete tasks, nothing else matters.
Time on Task
How long it takes users to complete a specific task. Shorter is usually better — indicates efficiency and low friction in the design.
System Usability Scale (SUS)
A standardized 10-question survey scored 0-100 that measures perceived usability. Industry average is 68. Quick, reliable, and widely used across industries.
NPS & CSAT
NPS (Net Promoter Score) measures loyalty — would users recommend you? CSAT (Customer Satisfaction Score) measures satisfaction with specific interactions. Both essential for UX reporting.
Conversion Rate & Drop-off
The percentage of users who complete a desired goal (purchase, signup, form submission). Combined with drop-off analysis, it reveals exactly where UX problems cost real money.
Usability Testing
Observing real users as they attempt to complete tasks with your product. The most powerful UX research method — reveals problems you can't find any other way.
User Interview
One-on-one conversations with users to understand their needs, motivations, pain points, and behaviors. The foundation of user-centered design — listen before you design.
A/B Testing
Comparing two versions of a design with real users to determine which performs better. The gold standard for data-driven design decisions — lets users vote with their behavior.
Wireframe
A low-fidelity visual guide representing the skeletal framework of a page. Shows layout, content placement, and functionality without visual design details. Think before you beautify.
User Persona
A fictional but research-based representation of your target user. Includes demographics, goals, frustrations, and behaviors. Keeps the team aligned on who they're designing for.
User Journey Map
A visual representation of the user's end-to-end experience with your product across all touchpoints. Reveals pain points, emotional highs and lows, and opportunities for improvement.
User Flow
A diagram showing the step-by-step path a user takes to complete a task in your product. Uses flowchart symbols to show decisions, actions, and outcomes. Essential for complex interactions.
Progressive Disclosure
Show only the essential information first, then reveal more details on demand. Reduces cognitive load by not overwhelming users with everything at once. Less is more, revealed progressively.
Skeleton Loading
Display placeholder shapes that mimic the content layout while data loads. Feels faster than spinners because it gives users a preview of what's coming. Perceived performance matters.
Empty State
What users see when there's no data to display — first use, no search results, or errors. A well-designed empty state guides users toward their next action instead of showing a blank screen.