Comprehensive production guide to modern digital UI components and design patterns: buttons, input fields, forms, cards, dialog boxes, navigation bars, sidebars, tabs, dropdowns, checkboxes, radio buttons, toggles, progress indicators, error messages, empty states, loading screens, onboarding flows, and multi-platform Web & Mobile UI paradigms.
Buttons are the primary interactive triggers for human-computer action. Effective button design establishes unmistakable affordance, communicates visual hierarchy, and provides deterministic feedback for every physical or virtual state.
Reserved strictly for the single most important action on a screen (e.g., "Complete Purchase", "Create Account"). Strong solid background color with high contrast.
Supports alternative actions without competing with the primary CTA (e.g., "Save Draft", "Back"). Uses an outlined border or light tinted background fill.
Used for subtle, low-priority actions (e.g., "Cancel", "Learn More"). Has no background or border at rest; appears as stylized text that responds on hover.
| Button Type | Best Use Case | Optical Styling | Accessibility Consideration |
|---|---|---|---|
| Primary | Main flow completion (Submit, Buy, Confirm) | Solid brand fill, white text, 8px corner radius | Min 4.5:1 text-to-bg contrast ratio |
| Destructive | Irreversible actions (Delete, Terminate) | Red-600 fill or red border/text | Requires confirmation modal or double-step friction |
| Icon-Only | Toolbar shortcuts, bookmarking, close [X] | Square/circular 40×40px bound, centered glyph | Mandatory aria-label for screen readers |
| Split Button | Default action + dropdown list of variations | Left action segment + right caret divider | Both segments must be independently focusable via Tab |
According to Apple Human Interface Guidelines (HIG) and Google Material Design 3, all interactive buttons must provide a minimum bounding target of 44×44 pt (iOS) or 48×48 dp (Android) to prevent mis-taps caused by the human finger pad.
Form fields are the highest-friction touchpoints in digital software. Designing user-friendly inputs requires eliminating ambiguity through persistent labels, helpful constraints, and immediate contextual feedback.
onBlur), not while the user is actively typing (premature error) or solely upon form submit.autocomplete="email"), input masking for phone numbers, and location auto-detect.<!-- Production Accessible Form Field Structure -->
<div class="form-group">
<label for="user-email" class="form-label">
Work Email Address <span class="required" aria-hidden="true">*</span>
</label>
<div class="input-wrapper">
<span class="leading-icon" aria-hidden="true">✉️</span>
<input
type="email"
id="user-email"
name="email"
placeholder="alex@company.com"
autocomplete="email"
aria-describedby="email-helper email-error"
aria-invalid="false"
class="form-input"
/>
</div>
<p id="email-helper" class="helper-text">We will send your verification token here.</p>
<p id="email-error" class="error-text" role="alert" style="display: none;">Please enter a valid work email.</p>
</div>Cards group related heterogeneous information into an easily scannable, bite-sized container.
Modals demand urgent user attention by interrupting the main flow and disabling the underlying page with a semi-transparent backdrop scrim.
rgba(0,0,0,0.6)) with optional background blur.Wayfinding UI patterns establish spatial orientation, allowing users to effortlessly answer three fundamental questions: Where am I? Where can I go? How do I get back?
Primary horizontal highway located at the top of the viewport.
Ideal for complex web applications, admin dashboards, and SaaS software.
Alternates between parallel content views within the same parent context without page reloading.
Choosing the right selection control prevents user cognitive paralysis and input errors:
| UI Control | Selection Paradigm | Options Count | Effect Timing | Best Use Case |
|---|---|---|---|---|
| Radio Buttons | Mutually Exclusive (Select exactly 1) | 2 to 5 options | Requires form submit | Shipping speed, billing frequency (Monthly vs Annual) |
| Checkboxes | Multiple Independent (Select 0 to N) | 1 to 7 options | Requires form submit | Terms & conditions agreement, email filter tags |
| Toggle / Switch | Binary State (On / Off) | Exactly 1 binary item | Immediate execution | Wi-Fi toggle, Dark Mode switch, Push notifications |
| Dropdown Menu | Select 1 or multi-select from list | > 5 options | Immediate or upon submit | Country selection, state selector, sorting filters |
Never use a Toggle Switch inside a form that has an explicit "Save" or "Submit" button! Toggles signify immediate, instantaneous real-world activation (like a physical light switch). If an action requires clicking "Submit" to take effect, use Checkboxes or Radio Buttons instead.
Jakob Nielsen's first usability heuristic mandates Visibility of System Status. The interface must always keep users informed of what is happening through appropriate, timely feedback.
Communicate task advancement and reduce perceived wait times:
A high-quality error message must never leave the user stranded:
Empty states appear when no data exists (e.g., new user dashboard, cleared inbox, empty search results). An effective empty state consists of:
Modern UX strongly favors Skeleton Screens over traditional spinning loaders. Skeletons present gray placeholder shapes matching the exact layout of incoming content. Research demonstrates skeleton loaders make perceived page load feel 20–30% faster by preparing user visual cognition for the incoming layout structure.
role="dialog" and aria-modal="true" with aria-labelledby), and 5. Focus Restoration returning keyboard focus to the triggering element upon closure.