UI Design Guides
Purpose
This section defines the functional requirements for key UI components based on research findings. Each specification addresses documented user behavior, pain points, and competitive benchmarks.
Component specifications answer: How should each interface element behave to support user goals?
These specifications inform design and development without prescribing visual styling, which will be determined during design system development.
Product Tables
Product tables are the primary interaction surface for product selection. CrazyEgg data shows 46-54% of clicks on MOCAP product pages target tables, with engagement concentrated in the first 8-20 rows.
Core Requirements
| Requirement | Specification | Research Basis |
|---|---|---|
| Sortable columns | All dimension and specification columns are sortable ascending/descending | 11-12% dead clicks on static table headers (CrazyEgg) |
| Sticky headers | Column headers remain visible during vertical scroll | 6 stakeholders requested frozen headers (preliminary feedback) |
| Row highlighting | Active row highlighted on hover and selection | Michael Wester: “gives clear indication of which row user is in” |
| Inline actions | Add to Cart and Request Sample buttons in each row | Caplugs benchmark: “Inline Add to Cart + Request Sample buttons” |
| Quick-add checkboxes | Multi-select rows for bulk cart addition | CrazyEgg recommendation: “quick-add checkboxes” |
Column Structure
Standard columns for dimensional products:
| Column | Content | Sortable | Notes |
|---|---|---|---|
| Part Number | SKU code | Yes | Primary identifier |
| Size/ID | Inside diameter | Yes | Numeric sort |
| OD | Outside diameter | Yes | Numeric sort |
| Length | Product length | Yes | Numeric sort |
| Material | Material name | Yes | Alphabetical |
| Color | Color options | No | Visual indicator |
| Stock | Availability status | Yes | In Stock first |
| Price | Unit price | Yes | Low to high |
| Actions | Cart, Sample, Compare | No | Fixed right column |
Interaction States
| State | Visual Treatment | Trigger |
|---|---|---|
| Default | Standard row styling | None |
| Hover | Background highlight | Mouse enter |
| Selected | Persistent highlight + checkbox filled | Click row or checkbox |
| Added to cart | Brief green flash + checkmark | Add to Cart click |
| Out of stock | Muted text, disabled Add to Cart | Stock status = 0 |
Mobile Adaptation
On screens below 768px, table rows should convert to stacked cards:
| Card Element | Content |
|---|---|
| Header | Part Number + primary dimension |
| Body | Key specifications in label:value pairs |
| Footer | Stock status + Add to Cart button |
| Expand | Tap to show full specifications |
Research basis: Competitive analysis notes “Mobile: Each row becomes stacked card” as Caplugs best practice. Only 3 of 14 competitors have usable mobile tables.
Search Component
Search is the highest-priority fix identified by research. 73% of customers prioritize better search. Ildar Zibarov estimates 20-25% sales increase from fixing search alone.
Search Bar Specifications
| Element | Specification |
|---|---|
| Position | Utility navigation, always visible |
| Width (desktop) | Expands on focus |
| Width (mobile) | Full width below header |
| Placeholder text | ”Search by part #, size, or application…” |
| Icon | Magnifying glass, clickable to submit |
| Clear button | Appears when input contains text |
Autocomplete Behavior
| Input Length | Response |
|---|---|
| 1-2 characters | No suggestions |
| 3+ characters | Up to 8 suggestions after 150ms |
Suggestion categories:
| Category | Priority | Display |
|---|---|---|
| Exact SKU match | 1 | Part number + thumbnail + “View Product” |
| Partial SKU matches | 2 | Part numbers matching prefix |
| Series matches | 3 | Series name + variant count |
| Category matches | 4 | Category name + product count |
| Application matches | 5 | Application name |
Query Type Handling
Based on Search Intent Spectrum from competitive analysis:
| Query Type | Example | Response |
|---|---|---|
| Exact SKU | ”VRC-300-BK” | Direct to product page (no results page) |
| Partial SKU | ”VRC-3” | Filtered results showing matches |
| Dimensions | ”3/8 inch cap” | Products matching size filter |
| Application | ”powder coating” | Application landing page + products |
| Material | ”silicone” | Filtered results by material |
| Generic | ”caps” | Category page |
Search Results Page
| Element | Specification |
|---|---|
| Results count | ”Showing X results for [query]“ |
| Sort options | Relevance (default), Part Number, Price |
| Filter panel | Left sidebar on desktop, collapsible on mobile |
| Result cards | Thumbnail, part number, key specs, price, actions |
| No results | Suggestions + browse links + contact support |
Research basis: Search log analysis shows queries are predominantly part numbers (e.g., “RVC9044”, “KMRC1.875-2”). Current search returns 401 errors for valid part numbers.
Image Gallery
Product images receive 21-44% of page clicks depending on page type. Users expect zoom, variant previews, and clickable behavior.
Gallery Requirements
| Requirement | Specification | Research Basis |
|---|---|---|
| Main image | Large, zoomable product photo | 61+ clicks on main image (RVC page), 8 rage clicks |
| Thumbnails | 4-6 variant images below main | 180 thumbnail clicks on SBT page |
| Zoom | Click or hover to enlarge | ”Users click images expecting zoom” (CrazyEgg) |
| Variant switching | Thumbnails update main image | Configuration accuracy is top image request |
| Color matching | Image matches selected color | 58% customers prioritize color-matching images |
Image States
| State | Behavior |
|---|---|
| Loading | Skeleton placeholder with aspect ratio preserved |
| Default | Full resolution image displayed |
| Hover (desktop) | Subtle zoom indicator appears |
| Active/Selected | Border highlight on thumbnail |
| Error | Placeholder with “Image unavailable” text |
Zoom Interaction
| Platform | Trigger | Display |
|---|---|---|
| Desktop | Hover over main image | Magnified view in overlay or lightbox |
| Desktop | Click main image | Full-screen lightbox with navigation |
| Mobile | Tap main image | Full-screen lightbox with pinch-to-zoom |
Configuration-Accurate Images
When the user selects color or configuration:
| Action | Response |
|---|---|
| Color selection | Main image updates to show selected color |
| Size selection | Dimension callouts update if applicable |
| Material selection | Image updates if material affects appearance |
Research basis: Jim Boehm: “if they choose a red SQT part, the image should show a red SQT.” Shane Flottmann: “correct images showing in the shopping cart.”
Filter Panel
CrazyEgg shows filter toggle received 18.6% of all clicks on one page, including 6 rage clicks when filters didn’t respond. Interactive filtering is a baseline expectation.
Filter Panel Structure
| Position | Desktop | Mobile |
|---|---|---|
| Location | Left sidebar | Collapsible panel, full width |
| Visibility | Always visible | Hidden by default, toggle button |
| Behavior | Instant filter on selection | Apply button optional for performance |
Standard Attributes
| Attribue | Type | Behavior |
|---|---|---|
| Category | Checkbox list | Multi-select (OR logic) |
| Material | Checkbox list | Multi-select (OR logic) |
| Color | Color swatches | Multi-select |
| Size Range | Range slider | Continuous selection |
| Thread Type | Checkbox list | Multi-select |
| Temperature Rating | Checkbox list | Multi-select |
| Brand | Checkbox list | Multi-select |
| Stock Status | Toggle | In Stock Only |
Filter Interaction
| Action | Response |
|---|---|
| Select filter | Checkbox fills, product count updates instantly |
| Apply filter | Results update, filter chip appears above results |
| Clear single filter | Click X on filter chip |
| Clear all filters | ”Clear All” button resets to default |
Filter Chips
Active filters display as removable chips:
| Element | Content |
|---|---|
| Label | Filter name: selected value |
| Action | X button to remove |
| Position | Above results grid, below sort controls |
Empty States
| Scenario | Display |
|---|---|
| No products match | ”No products match your filters. Try adjusting:” + filter summary |
| Zero results | Suggested alternatives + “Clear All Filters” button |
Research basis: CrazyEgg: “Filter toggle clicked 92 times (18.6% of all interactions) but produced little to no result.” Static filters that don’t respond create frustration.
Product Cards
Product cards appear in category grids, search results, and related products sections. 32.9% of homepage clicks target product category images.
Card Structure
| Element | Content | Required |
|---|---|---|
| Image | Product photo | Yes |
| Part Number | SKU or series code | Yes |
| Name | Descriptive product name | Yes |
| Key Spec | Primary dimension or feature | Yes |
| Price | Starting price or price range | If available |
| Stock indicator | In Stock / Low Stock / Out of Stock | If available |
| Quick actions | Add to Cart, Quick View, Compare | Context-dependent |
Cards Usage
- All products grid/list
- Category grid/list
- Search results
- Related products
Interaction States
| State | Visual Treatment |
|---|---|
| Default | Standard card styling |
| Hover | Subtle shadow elevation, image scale or other |
| Focus | Visible focus ring for accessibility |
| Selected | Checkmark overlay (comparison mode) |
Click Behavior
| Click Target | Action |
|---|---|
| Card (anywhere except buttons) | Navigate to product detail page |
| Add to Cart button | Add to cart with default quantity |
| Quick View button | Open modal with product summary |
| Compare checkbox | Add to comparison set |
Research basis: “Users navigate visually through the product grid, clicking images expecting to zoom or reach product detail pages. Text labels are secondary.” (CrazyEgg)
Call-to-Action Buttons
CTA performance is suboptimal across current sites. MOCAP: “CTAs exist but are invisible (small icons lost in dense tables).” Cleartec/Beckett: “Buttons are visible, but feedback is absent.”
Button Hierarchy
| Level | Usage | Visual Treatment |
|---|---|---|
| Primary | Add to Cart, Submit Order, Checkout | Filled, high contrast |
| Secondary | Request Sample, Request Quote | Outlined or lighter fill |
| Tertiary | Compare, Save for Later, Share | Text button or icon with label |
Button States
| State | Visual Change | Timing |
|---|---|---|
| Default | Standard styling | - |
| Hover | Slight brightness/saturation change | Instant |
| Active/Pressed | Darker, slight scale down | Instant |
| Loading | Spinner replaces label or appears inline | During async action |
| Success | Green checkmark + “Added!“ | 2 seconds |
| Disabled | Reduced opacity, no pointer events | Conditional |
Feedback Requirements
All action buttons must provide immediate feedback:
| Action | Immediate Feedback | Follow-up |
|---|---|---|
| Add to Cart | Button shows checkmark, cart badge increments | Toast notification with “View Cart” link |
| Request Sample | Button shows checkmark | Confirmation message |
| Submit Form | Loading state → Success message | Page update or redirect |
| Apply Filter | Loading indicator → Results update | Filter chip appears |
Research basis: “Submit button clicked multiple times per user” because “users complete forms and click Submit without any loading or success state.” (CrazyEgg)
Unit Toggle
Measurement flexibility is a documented need. Customer survey: “Measurements given in engineering, fractions, and metric scales. Be able to select which scale I wished to use.”
Toggle Specifications
| Element | Specification |
|---|---|
| Position | Near specification tables, utility navigation |
| Options | Decimal inches / Fractional inches / Metric (mm) |
| Default | Based on user region or stored preference |
| Persistence | Cookie or account setting |
Toggle Behavior
| Action | Response |
|---|---|
| Select unit | All visible measurements update instantly |
| Preference saved | Persists across pages and sessions |
| Override available | Local toggle on individual pages if needed |
Display Format
| Unit System | Example Display |
|---|---|
| Decimal inches | 0.250” |
| Fractional inches | 1/4” |
| Metric | 6.35 mm |
Research basis: Linda Yang requested a translation fix for the China site metric/imperial toggle. Different markets have different measurement preferences.
Configurator Component
For products with complex parameter dependencies (material × color × fit dimension × length), a stepped configurator replaces flat tables.
Configurator Structure
| Step | Content | Validation |
|---|---|---|
| 1 | Product type or series selection | Required |
| 2 | Primary dimension or size | Required |
| 3 | Material selection | Required if multiple options |
| 4 | Color selection | Required if multiple options |
| 5 | Quantity and packaging | Required |
| Summary | Selected configuration preview | Before Add to Cart |
Step Behavior
| Element | Specification |
|---|---|
| Progress indicator | Visual stepper showing current step |
| Navigation | Back button always available, Next requires valid selection |
| Dependencies | Later steps filter based on earlier selections |
| Inline help | Tooltip icons explaining options |
| Configuration summary | Persistent sidebar showing current selections |
Mobile Adaptation
| Desktop | Mobile |
|---|---|
| Multi-column layout | Single column, full width |
| Side-by-side preview | Preview above or below configurator |
| Horizontal stepper | Vertical stepper or progress bar |
Research basis: CrazyEgg notes “configurator approach suits products with multi-dimensional parameters” while tables suit “products with many dimensional variations.”
Toast Notifications
Confirmation feedback is universally absent across current sites. “A universal UX failure: both lack success states or progress feedback, undermining user confidence.”
Toast Specifications
| Property | Value |
|---|---|
| Position | Top-right (desktop), top-center (mobile) |
| Duration | 4 seconds default, persistent for errors |
| Stacking | Most recent on top, max 3 visible |
Toast Types
| Type | Icon | Background | Use Case |
|---|---|---|---|
| Success | Checkmark | Green | Cart addition, form submission |
| Info | Info circle | Blue | Neutral notifications |
| Warning | Warning triangle | Yellow | Low stock, validation notices |
| Error | X circle | Red | Failed actions, form errors |
Toast Content
| Element | Content |
|---|---|
| Icon | Type-specific icon |
| Title | Brief action summary (“Added to Cart”) |
| Message | Optional detail (“T-250 Red × 1”) |
| Action | Optional link (“View Cart”, “Undo”) |
| Dismiss | X button or auto-dismiss |
Research basis: “Add to Cart actions lack confirmation” across both MOCAP and Cleartec/Beckett sites.
Stock Availability Indicator
Real-time stock visibility scored 8.1 in MoSCoW analysis. Frontline staff rate it 8.5 because they field stock availability questions dozens of times daily.
Indicator Display
| Stock Level | Visual | Label |
|---|---|---|
| In Stock (>threshold) | Green dot | ”In Stock” |
| Low Stock | Yellow dot | ”Low Stock” or quantity |
| Out of Stock | Red dot | ”Out of Stock” |
| Available to Order | Blue dot | ”Available to Order” (lead time) |
Indicator Placement
| Context | Position |
|---|---|
| Product table | Stock column, right-aligned |
| Product card | Below price |
| Product detail page | Near Add to Cart button |
| Cart | Next to each line item |
Additional Information
| Stock Status | Additional Display |
|---|---|
| In Stock | Optional: warehouse location |
| Low Stock | Quantity remaining (if <10) |
| Out of Stock | Expected restock date or “Contact for availability” |
| Lead time applies | ”Ships in X business days” |
Research basis: Essentra benchmark: “Live stock indicators (green/yellow/red dots).” Competitive analysis: “Live stock availability (Essentra, Grainger)” listed as highest-impact trust signal.
Sample Request Component
Sample ordering needs fundamental redesign. Current process requires separate form for each sample. DBI benchmark: “Free samples are $0 line items in the cart.”
Sample as Cart Item
| Behavior | Specification |
|---|---|
| Price display | ”$0.00” or “Free Sample” |
| Add to Cart | Same button as purchase, different SKU or modifier |
| Cart display | Listed with other items, marked as sample |
| Quantity limit | Max 1-3 per SKU per order |
| Checkout flow | Same as paid orders, captures shipping info |
Request Sample Button
| Property | Specification |
|---|---|
| Position | Adjacent to Add to Cart |
| Label | ”Request Sample” or “Free Sample” |
| Visual hierarchy | Secondary button treatment |
| Feedback | Same toast pattern as Add to Cart |
Sample Quantity Limits
| Scenario | Limit | Message |
|---|---|---|
| Per SKU | 1-3 units | ”Sample limited to X units” |
| Per order | 5-10 unique SKUs | ”Maximum X sample types per order” |
| Per account | Based on business rules | ”Contact sales for additional samples” |
Research basis: DBI approach: “Sample CTA prominent… Free samples are $0 line items in the cart. They go through the same checkout flow as paid products.”
Quick Order Tool
Quick Order scored 11 responses (42%) in the customer survey, third-highest priority. Veterans (30% of buyers) know exact SKUs and need speed.
Input Methods
| Method | Specification |
|---|---|
| Single entry | Part number field + quantity field + Add button |
| Bulk paste | Textarea accepting multiple lines (SKU, quantity pairs) |
| File upload | CSV import with SKU and quantity columns |
| Reorder from history | Select from previous orders |
Input Validation
| Input | Validation | Response |
|---|---|---|
| Valid SKU | Lookup succeeds | Show product name, price, Add button |
| Invalid SKU | No match found | Error message, suggest similar SKUs |
| Partial SKU | Multiple matches | Show dropdown of matching options |
| Quantity | Must be positive integer | Inline validation |
Bulk Paste Format
Accepted formats:
SKU,Quantity
T-250,100
RVC-300-BK,50Or space/tab separated:
T-250 100
RVC-300-BK 50Quick Order Results
| Element | Content |
|---|---|
| Product list | Valid entries with thumbnail, name, quantity, subtotal |
| Error list | Invalid entries with reason |
| Total | Order subtotal |
| Actions | ”Add All to Cart”, “Edit”, “Clear” |
Research basis: Fastenal benchmark: “suggestive search, quick-add from results, bulk import.”
Form Components
Forms suffer from feedback gaps. Request Samples form averages 4.39 clicks per visit with 19 rage clicks.
Form Field Specifications
| Element | Specification |
|---|---|
| Label | Above field, always visible |
| Input | 44px minimum height for touch |
| Helper text | Below field, explains format or requirements |
| Error state | Red border, error message below |
| Success state | Green checkmark when valid |
Field Types
| Type | Use Case | Validation |
|---|---|---|
| Text | Name, company, part number | Required, format if applicable |
| Contact email | Email format validation | |
| Phone | Contact phone | Phone format, region-aware |
| Select | Country, state, options | Required selection |
| Textarea | Comments, notes | Character limit if applicable |
| Checkbox | Terms acceptance, options | Required if applicable |
Form Feedback
| Event | Feedback |
|---|---|
| Field focus | Visual focus ring |
| Field blur with error | Error message appears |
| Field valid | Green checkmark (optional) |
| Submit click | Loading state on button |
| Submit success | Success message, redirect or next action |
| Submit error | Error summary at top of form |
Form Layout
| Viewport | Layout |
|---|---|
| Desktop | 2 columns for related fields, 1 column for textarea |
| Mobile | Single column |
| Field width | 100% of container |
Research basis: “Submit button clicked multiple times per user” and “opt-in section generated 19 rage clicks” indicate form feedback failures.
Accessibility Requirements
All components must meet WCAG 2.1 AA standards.
Keyboard Navigation
| Component | Keyboard Behavior |
|---|---|
| Tables | Arrow keys navigate cells, Enter selects |
| Filters | Tab between facets, Space toggles checkboxes |
| Dropdowns | Arrow keys navigate, Enter selects, Escape closes |
| Modals | Tab trapped within modal, Escape closes |
| Buttons | Enter or Space activates |
Focus Management
| Requirement | Implementation |
|---|---|
| Visible focus | 2px solid outline, high contrast |
| Focus order | Logical, follows visual layout |
| Skip links | ”Skip to main content” at page start |
| Focus trap | Modal dialogs trap focus |
Touch Targets
| Device | Minimum Size |
|---|---|
| Mobile | 44×44px (iOS Human Interface Guidelines) |
| Desktop | 24×24px minimum |
Research basis: Navigation section specifies WCAG AA compliance with 44×44px mobile touch targets.
Summary: Component Priority
Based on research severity and frequency:
| Priority | Component | Research Driver |
|---|---|---|
| Critical | Search | 73% customer priority, 20-25% sales impact |
| Critical | Product Tables | 46-54% of clicks, 11-12% dead clicks |
| Critical | Toast Notifications | Universal feedback gap across sites |
| High | Stock Indicators | 8.1 MoSCoW score, daily support load |
| High | Image Gallery | 58% color-matching priority, rage clicks on images |
| High | Filter Panel | 18.6% clicks on filters, expectation mismatch |
| High | Sample Request | 8.2 MoSCoW score, DBI benchmark |
| Medium | Quick Order | 42% customer selection |
| Medium | Unit Toggle | Regional flexibility, customer feedback |
| Medium | Configurator | Complex products, Cleartec/Beckett pattern |