Structural Design

Component

A reusable interface or system element designed to perform a defined role within a larger product or service.

Concept facts

A component is a reusable element with a defined purpose, structure, behavior, and implementation rules within an interface, design system, or software system.

Also known as
UI component, interface component, reusable component, design-system component, software component
Used in
Design systems, product interfaces, public-service portals, forms, dashboards, component libraries, front-end implementation
Interpret with
Purpose, behavior, states, accessibility, content rules, interaction pattern, technical implementation, and reuse context

Plain-language explanation

A component is a reusable part of an interface or system. Examples include buttons, form fields, alerts, cards, tables, navigation items, status badges, upload controls, or confirmation messages.

A component is not only how something looks. It should also define behavior, states, accessibility, content rules, and how it should be used.

In a design system, components help teams create consistent interfaces. But a reusable component must be tested and documented carefully, because any weakness can spread across many products or services.

Why it matters

Components reduce repeated design and development work. They also help make interfaces more predictable for users.

For institutional systems, components can standardize important behavior such as validation messages, document upload, status feedback, confirmation, keyboard focus, and error recovery.

The risk is that a component designed for one simple use case may be reused in a high-stakes context where it does not provide enough guidance, accessibility support, or service-specific information.

Use contexts

  • Design systems
  • Form and dashboard design
  • Public-service portals
  • Enterprise applications
  • Component libraries
  • Front-end implementation
  • Accessibility and QA review

Application guidance

Define each component’s purpose, allowed variants, states, content rules, accessibility behavior, and usage limits.

Test components in realistic contexts, not only as isolated examples. A document-upload component may work well with one file but fail when users need to upload several document types with different validation rules.

Document when a component should not be used. Reuse is valuable only when the component fits the task and context.

Practical example

A banking platform uses the same alert component for minor tips, KYC verification failures, fraud-risk warnings, and account restriction notices.

The component is visually consistent, but the high-risk alerts need stronger hierarchy, clear next steps, accessible focus behavior, and support references. The team revises the component rules so critical compliance messages are not treated like ordinary interface hints.

Interpretive boundaries

  • A component is not only a visual block.
  • Reuse should not override task-specific clarity or risk.
  • Components need states, behavior, accessibility, and content rules.
  • A component can be consistent and still be inappropriate for a context.
  • Component quality affects every product or service where it is reused.

Applied at Userhub

Components are relevant when Userhub evaluates design systems, forms, portals, dashboards, and institutional interfaces where repeated elements must support consistency, accessibility, and task accuracy.

See Userhub UX Lab for applied UX research and evaluation context.

Sources and references

  • ISO. (2020). Ergonomics of human-system interaction — Part 110: Interaction principles (ISO Standard No. 9241-110:2020). International Organization for Standardization.
  • ISO/IEC/IEEE. (2011). Systems and software engineering — Architecture description (ISO/IEC/IEEE Standard No. 42010:2011). International Organization for Standardization.
  • Szyperski, C. (2002). Component Software: Beyond Object-Oriented Programming (2nd ed.). Addison-Wesley.
  • Tidwell, J., Brewer, C., & Valencia, A. (2020). Designing Interfaces: Patterns for Effective Interaction Design (3rd ed.). O’Reilly Media.

—

Cite this entry

APA

Userhub. (2026). Component. UX Reference. https://userhub.com.bd/reference/component/