User Interface (UI) design is a key element in making websites and apps intuitive and easy to use. However, specialized terms such as “modal” or “wireframe” can be a barrier to beginners.
In this article, we’ve carefully selected essential UI design terms and explained them in a clear, practical way so that designers and small businesses can start applying them right away. Each term is linked to usability and design efficiency challenges, with concise explanations of how it can help. Learn UI design and set your project up for success!
A
| Term | Definition |
|---|
| Accordion | A vertically stacked list of items that expand or collapse to reveal content. |
| Action Button | A button designed to trigger a key action, like “Save” or “Submit.” |
| Affordance | A design element that suggests its usage, e.g., a button that looks clickable. |
| Alert | A message notifying users of critical info, warnings, or confirmations. |
| Anchor Link | A link that jumps to another section on the same page. |
| Avatar | A graphical representation of a user, often a profile picture or icon. |
B
| Term | Definition |
|---|
| Badge | A small indicator showing status, count, or notification. |
| Banner | A prominent message displayed at the top of a page or section. |
| Breadcrumb | Navigation trail showing the user’s location in a hierarchy. |
| Breakpoint | Specific screen width where responsive layout adapts. |
| Button | A clickable element that initiates an action. |
| Busy Indicator | A signal that a process is ongoing (spinner, loading bar). |
C
| Term | Definition |
|---|
| Call to Action (CTA) | A prompt encouraging users to take action, e.g., “Sign up.” |
| Card | A container grouping related content and actions. |
| Carousel | A rotating set of images or content panels. |
| Checkbox | A small box users can check/uncheck to select options. |
| Chip | A compact element representing an input, attribute, or action. |
| Context Menu | A menu that appears upon right-click or long-press. |
| Cursor | A pointer indicating where user interaction will occur. |
D
| Term | Definition |
|---|
| Dashboard | A screen displaying key information at a glance. |
| Data Table | A grid for organizing information in rows and columns. |
| Dialog | A modal window requesting user interaction. |
| Divider | A visual line or space separating content. |
| Dropdown | A menu expanding to show multiple options. |
| Drawer | A panel sliding in from the edge of the screen. |
E
| Term | Definition |
|---|
| Empty State | A placeholder view shown when no data is available. |
| Error Message | A message indicating that something went wrong. |
| Expand/Collapse | A UI element that reveals or hides additional content. |
| Eye Icon | An icon used to show/hide password text fields. |
| Edge Case | A design scenario that occurs under unusual conditions. |
F
| Term | Definition |
|---|
| Faceted Navigation | A filtering system for refining search results. |
| Field | An input area for entering data. |
| Floating Action Button (FAB) | A circular button for a primary action, floating above content. |
| Footer | The bottom section of a page with secondary info or links. |
| Form | A collection of fields for data entry and submission. |
| Frame | A container or boundary for organizing content. |
G
| Term | Definition |
|---|
| Gesture | A touch-based interaction like swipe, pinch, or tap. |
| Grid | A layout structure using rows and columns for alignment. |
| Guide Tour | An onboarding walkthrough showing how to use the interface. |
| Gradient | A gradual blend between colors used for visual depth. |
| Grouping | Clustering related items together for clarity. |
H
| Term | Definition |
|---|
| Hamburger Menu | A menu icon (☰) that reveals navigation links. |
| Header | The top section of a page, often with branding or navigation. |
| Hero Image | A large banner image at the top of a page. |
| Hover State | A visual change when the cursor hovers over an element. |
| Hyperlink | A clickable link that directs users to another location. |
I
| Term | Definition |
|---|
| Icon | A small graphic symbol representing an action or object. |
| Icon Button | A button represented solely by an icon. |
| Input Field | An area where users can type or select data. |
| Interaction Design | The practice of creating engaging interactive systems. |
| Inline Validation | Real-time feedback shown during form entry. |
J
| Term | Definition |
|---|
| Jumbotron | A large, prominent section to draw attention to key content. |
| Justified Alignment | Text spaced so both edges align evenly. |
| Jump Link | A link that skips directly to a specific page section. |
K
| Term | Definition |
|---|
| Keyboard Shortcut | A key combo that performs a specific action. |
| Key Visual | A primary visual element reinforcing brand identity. |
| KPI Dashboard | A UI showing performance metrics in real time. |
L
| Term | Definition |
|---|
| Label | A text identifier describing a field or element. |
| Landing Page | A standalone page designed to drive a specific action. |
| Layout | The arrangement of UI elements on a screen. |
| List | An ordered or unordered set of items. |
| Loader | A visual indicator (spinner/progress bar) showing loading. |
| Localization | Adapting UI text and layout for different languages/cultures. |
M
| Term | Definition |
|---|
| Margin | The space outside the boundary of an element. |
| Mega Menu | A large dropdown showing multiple navigation options. |
| Menu | A list of options or commands. |
| Microinteraction | A small UI response to user action (e.g., like button animation). |
| Modal | A dialog box overlaying content that requires user action. |
| Mockup | A static design representation of the interface. |
| Multi-Select | A control allowing selection of multiple options. |
N
| Term | Definition |
|---|
| Navigation Bar | A horizontal or vertical bar for site navigation. |
| Notification | A message that informs users of updates or alerts. |
| Navigation Drawer | A sliding panel with navigation links. |
| Native App | An app built specifically for a platform (iOS, Android). |
| Node | A connection point or element within a UI structure. |
O
| Term | Definition |
|---|
| Onboarding | A guided introduction for new users of a product. |
| Overlay | Content layered above the main screen (modal, tooltip, etc.). |
| Option Button | A UI control for choosing between options (radio button). |
| Overflow Menu | A hidden menu with additional actions (⋮ or …). |
| Outline Button | A button styled with only a border, no fill. |
P
| Term | Definition |
|---|
| Pagination | Controls for navigating through multiple content pages. |
| Panel | A section of the UI containing related content or controls. |
| Placeholder | Temporary text in an input field as a hint. |
| Popover | A small overlay with contextual info/actions. |
| Progress Bar | A horizontal bar showing task completion status. |
| Prototype | An interactive simulation of a UI design. |
Q
| Term | Definition |
|---|
| Quick Action | A shortcut allowing users to perform frequent tasks fast. |
| Quick View | A preview of an item without leaving the current page. |
| Query Box | An input field for search or query entry. |
R
| Term | Definition |
|---|
| Radio Button | A UI element allowing one option to be selected from many. |
| Rating Stars | An interface element to evaluate content (e.g., 1–5 stars). |
| Responsive Design | A design that adapts to different screen sizes. |
| Ribbon | A set of toolbar commands grouped by function. |
| Rich Text Editor | An editor supporting formatting like bold, italics, lists. |
| Roadmap UI | A visual timeline of planned product updates/features. |
S
| Term | Definition |
|---|
| Search Bar | An input field to search within content. |
| Segmented Control | A horizontal set of buttons for switching views. |
| Sidebar | A vertical panel with navigation or tools. |
| Skeleton Screen | A placeholder loading UI resembling content layout. |
| Slider | A control for selecting a value within a range. |
| Snackbar | A brief message bar at the bottom with optional actions. |
| Splash Screen | The initial screen shown when an app starts. |
| Spinner | A circular loading indicator. |
| Status Bar | A top or bottom strip showing device/app status. |
| Sticky Header | A header that stays fixed while scrolling. |
T
| Term | Definition |
|---|
| Tab Bar | A row of tabs for switching between content views. |
| Table | A grid layout for displaying structured data. |
| Tag | A small label used to categorize or filter items. |
| Template | A predefined layout or structure for reuse. |
| Text Field | An input area for typing text. |
| Thumbnail | A small preview image representing larger content. |
| Toast | A temporary popup message that disappears automatically. |
| Toggle Switch | A control for turning an option on/off. |
| Toolbar | A row of icons/buttons for quick actions. |
| Tooltip | A small popup with contextual help when hovering/focusing. |
| Typography | The style, size, and arrangement of text. |
U
| Term | Definition |
|---|
| Upload Button | A control for selecting and uploading files. |
| User Flow | A path that users take to complete a task. |
| User Interface (UI) | The space where humans interact with a digital product. |
| User Persona | A fictional character representing a target user type. |
| User Profile | A section showing details about a user. |
| Usability Test | A method to evaluate how easy a product is to use. |
V
| Term | Definition |
|---|
| Validation | The process of checking if input is correct. |
| Value Selector | A control for choosing from a range of values. |
| Vertical Navigation | A menu structured vertically on the side. |
| Viewport | The visible area of a webpage on a device screen. |
| Visual Hierarchy | The arrangement of elements to show importance. |
W
| Term | Definition |
|---|
| Walkthrough | A guided step-by-step intro to features. |
| Widget | A small application component with specific functionality. |
| Wireframe | A low-fidelity blueprint of a design layout. |
| Wizard | A multi-step process guiding users through tasks. |
| Workflow | A sequence of steps to complete a process. |
X
| Term | Definition |
|---|
| XML UI | User interface elements defined in XML (common in Android). |
| X-axis Navigation | Navigation structured along a horizontal axis. |
| X-Ray Mode | A debugging view showing UI layout layers. |
Y
| Term | Definition |
|---|
| YAML Config | A configuration format sometimes used for UI settings. |
| Yellow Highlight | A highlight effect for emphasis. |
| Y-Axis Navigation | Navigation structured along a vertical axis. |
Z
| Term | Definition |
|---|
| Zoom Control | A UI control to zoom in/out of content. |
| Z-Index | A CSS property controlling element stack order. |
| Zero State | The first-time or empty-state experience of a product. |
| Zigzag Layout | A layout pattern alternating elements left and right. |
Conclusion
Understanding UI design terminology is the foundation for creating products that are both user-friendly and visually engaging. By applying the knowledge introduced in this article, you can improve usability, streamline the design process, and strengthen your brand value. The best way to start is with small projects or free tools, then refine your designs by incorporating user feedback—this iterative approach is the fastest path to success.
EN
JP
KR
