Interaction Guides

Purpose

This section defines consistent interaction behaviors that apply across all pages and components. Interaction patterns establish predictable user experiences that reduce cognitive load and build trust.

Interaction patterns answer: How should the platform respond to user actions?

These patterns complement Component Specifications (Section 12) by defining behaviors that span multiple components and contexts.

Top 5 Expectations

CrazyEgg analysis identified 5 user expectations that must help shape the website architecture.

1. Data Must Be Manipulable

Users expect to sort, filter, search, and export product data. Static displays violate fundamental mental models formed by decades of spreadsheet use.

Expectation	Implementation
Sort columns	Click header to sort ascending/descending
Filter results	Attributes filtering with instant updates
Search within results	Search bar scoped to current context
Export data	Download filtered results as CSV/PDF

Research basis: “11-12% of all table interactions result in dead clicks” because current tables are static. Engineers and procurement specialists expect spreadsheet-like manipulation.

2. Actions Must Confirm

Every user action must receive immediate, visible feedback. Silent interfaces erode trust and stall conversion.

Action Type	Required Feedback
Button click	Visual state change (pressed, loading)
Form submission	Loading state → Success/error message
Cart addition	Toast notification + cart badge update
Filter selection	Results count update + filter chip
Navigation	Page transition or content update

Research basis: “Submit button clicked multiple times per user” because forms provide no loading or success state. “Add to Cart actions lack confirmation” across both MOCAP and Cleartec/Beckett sites.

3. Images Must Function

Product images are navigation and evaluation tools, not decoration. Non-interactive images generate rage clicks.

Image Context	Required Functionality
Category tiles	Entire tile clickable to category page
Product thumbnails	Click to view product detail
Gallery images	Zoom on click/hover
Variant images	Switch main image on click

Research basis: “61+ clicks on main image (mostly dead), 8 rage clicks” on RVC product page. “180 thumbnail clicks” on SBT page. Users treat images as interactive controls.

4. Complexity Must Be Guided

Users cannot infer technical parameters without help. Configurators need explicit guidance, tooltips, and examples.

Complexity Level	Guidance Pattern
Simple selection	Clear labels, visual options
Technical parameters	Tooltips explaining each option
Multi-step configuration	Progress indicator, step validation
Size/fit decisions	Measurement guides, fit calculators

Research basis: Customer survey feedback about tube terminology confusion: “The nomenclature was all new to me.” Stakeholders requested “Measurement guides and tooltips” (8.0 MoSCoW score).

5. Friction Must Be Minimal

B2B users are task-focused and time-constrained. Every extra click, unclear state, or missing confirmation increases abandonment risk.

Friction Source	Mitigation
Extra steps	Combine related actions, eliminate redundant pages
Unclear states	Visible feedback for all selections
Missing confirmation	Toast notifications, success messages
Forced registration	Guest checkout for first-time buyers
Repeated data entry	Save preferences, remember selections

Research basis: Users follow task-focused model: “find product → select size → convert → leave.” 75-85% never reach supporting content placed below the fold.

Feedback Patterns

Immediate Feedback

All interactive elements must respond instantly to user input.

Element	Hover State	Active State	Completion State
Button	Brightness change	Darker, slight scale	Success indicator
Link	Underline or color change	Color shift	-
Checkbox	Border highlight	Checked animation	-
Toggle	Background shift	Position change	-
Input field	Border highlight	Focus ring	Valid/invalid indicator

Loading States

Any action taking longer than 100ms must show a loading indicator.

Context	Loading Pattern
Button click	Spinner replaces or appears beside label
Form submission	Button shows spinner, form disabled
Page navigation	Progress bar or skeleton screen
Search query	Skeleton results or loading indicator
Filter application	Results area shows loading overlay
Image loading	Skeleton placeholder with correct aspect ratio

Loading state rules:

Never freeze the interface without an indication
Allow cancellation for long operations where possible
Show progress for operations with known duration
Maintain layout stability (no content shift after load)

Success States

All completed actions must confirm success visibly.

Action	Success Pattern	Duration
Add to Cart	Toast: “Added to cart” + View Cart link	4 seconds
Form submission	Inline success message or redirect	Persistent until dismissed
Save action	Brief checkmark animation	2 seconds
Filter applied	Filter chip appears, count updates	Instant
Selection made	Visual selection indicator	Persistent

Success message content:

Confirm what happened: “T-250 added to cart”
Provide next action: “View Cart” or “Continue Shopping”
Include an undo option where appropriate

Error States

Errors must be clear, specific, and actionable.

Error Type	Display Pattern	Content
Field validation	Red border + inline message below field	What’s wrong + how to fix
Form submission	Error summary at top + field highlights	List all issues
System error	Modal or inline message	What happened + what to do
Network error	Toast notification	Retry option
Not found	Dedicated page or inline message	Suggestions + alternatives

Error message principles:

Explain what went wrong in plain language
Avoid technical jargon or error codes shown to users
Provide specific guidance to resolve
Never blame the user (“Invalid input” → “Please enter a valid email address”)

Progressive Disclosure

Users engage intensely with above-the-fold content but abandon before reaching supporting content. Average scroll depth is 35-45% across all page types.

Content Placement Hierarchy

Priority	Content Type	Placement
Critical	Product selection, configuration, primary CTA	Above the fold
Important	Key specifications, stock status, pricing	Within first scroll
Supporting	Related products, guides, cross-sells	On-demand (expandable)
Reference	Technical specs, certifications, policies	Tabs, modals, or links

On-Demand Patterns

Pattern	Use Case	Trigger
Expandable row	Additional product details in table	Click row or expand icon
Tooltip	Brief explanation of term or field	Hover (desktop) / Tap (mobile)
Modal	Detailed content without page navigation	Click “Learn more” or icon
Accordion	Multiple content sections, one visible at a time	Click header to expand
Tab panel	Related content categories	Click tab
Drawer	Filters, navigation, secondary content	Click button to slide in

Point-of-Need Information

Critical information must appear where users need it, not in separate sections.

Information	Placement
Measurement help	Icon beside dimension fields → opens guide
Material guidance	Link in material dropdown → opens comparison
Fit explanation	Tooltip on size chart headers
Temperature ratings	Badge on high-temp products
Stock status	Inline with product row, near Add to Cart
Shipping estimate	Visible before checkout commitment

Research basis: “Specs in table: Use tooltips, expandable rows, or modal dialogs” instead of placing below fold where “only 18% reach informational text.”

Breadcrumbs provide orientation and enable navigation up the hierarchy.

Rule	Implementation
Always visible	Present on all pages except homepage
Complete path	Show full hierarchy from homepage
Current page	Last item not linked, visually distinct
Clickable ancestors	All parent levels are links
Truncation	Middle items truncate on mobile if needed

Example: Home > Products > Caps > Tapered Caps > T-250

Browser back button must work predictably.

Scenario	Expected Behavior
Filter applied	Back removes filter, stays on page
Modal opened	Back closes modal
Tab changed	Back returns to previous tab
Page navigation	Back returns to previous page
Form submitted	Back may show confirmation, not resubmit

Implementation: Use browser history API to manage state changes. URL should reflect filterable/linkable state.

Persistent Elements

Some elements must remain accessible regardless of scroll position.

Element	Behavior
Primary navigation	Sticky header (desktop), hamburger (mobile)
Search	Always accessible from header
Cart	Badge visible, clickable from header
Contact	Floating button on mobile, header on desktop
Back to top	Appears after scrolling below fold

Form Patterns

Field Interaction

Event	Response
Focus	Visible focus ring, label remains visible
Input	Real-time character count if limited
Blur	Validation runs, error shows if invalid
Valid	Green checkmark (optional), error clears
Invalid	Red border, error message below field

Form Layout

Principle	Implementation
Single column	All fields stack vertically on mobile
Logical grouping	Related fields grouped with headers
Required indicators	Asterisk or “Required” label
Optional indicators	”(Optional)” suffix where needed
Field order	Most important/common first

Form Submission

Stage	User Experience
Before submit	Validate all fields, disable submit if invalid
Submit clicked	Button shows loading state
Processing	Form fields disabled, loading visible
Success	Success message, redirect or next action
Error	Error summary, scroll to first error, focus field

Inline Editing

For account and cart contexts, enable editing without page navigation.

Context	Pattern
Cart quantity	Increment/decrement buttons or editable field
Shipping address	Edit button → inline form → Save/Cancel
Payment method	Edit button → inline form → Save/Cancel
Profile fields	Edit button → field becomes editable → Save

Research basis: Debbie Gerlach: “Even though it looks like you can edit it, it won’t let you. You must back out of the cart and then add or change.” Inline editing prevents this friction.

Selection Patterns

Single Selection

For choosing one option from a set.

Pattern	Use Case	Behavior
Radio buttons	2-5 visible options	One selected at a time
Dropdown	6+ options or limited space	Opens list, one selection
Segmented control	2-4 options, prominent choice	Toggle between options
Card selection	Visual options with details	Click selects, shows active state

Multiple Selection

For choosing multiple options.

Pattern	Use Case	Behavior
Checkboxes	Options list	Independent toggles
Chip/tag selection	Compact multi-select	Click to add/remove
Multi-select dropdown	Many options, space limited	Checkboxes in dropdown
Transfer list	Large sets, need organization	Add/remove between lists

Product Variant Selection

Special patterns for product configuration.

Variant Type	Pattern
Color	Visual swatches with border on selection
Size	Buttons or dropdown with size labels
Material	Dropdown with material name + key property
Quantity	Input field with increment/decrement buttons

Selection feedback:

Selected option visually distinct (background, border, checkmark)
Price updates if variant affects pricing
Stock status updates if variant affects availability
Image updates if variant affects appearance

Cart Patterns

Add to Cart

Step	User Experience
Click Add to Cart	Button shows loading briefly
Item added	Toast notification with product name
Cart updates	Cart icon badge increments
Continue shopping	Stay on page, toast has “View Cart” link

Mini Cart

Accessible from the header without navigating to the cart page.

Element	Content
Trigger	Cart icon click or hover
Display	Dropdown or slide-in panel
Content	Item list (thumbnail, name, qty, price), subtotal
Actions	View Cart, Checkout
Limit	Show first 3-5 items + “and X more”

Cart Page

Section	Content
Item list	Product details, quantity editor, remove button
Summary	Subtotal, estimated tax, estimated shipping, total
Actions	Continue Shopping, Proceed to Checkout
Cross-sells	”Frequently bought together” or “You may also need”

Quantity Updates

Input	Behavior
Increment (+)	Increase by 1, check max
Decrement (−)	Decrease by 1, minimum 1
Direct input	Accept valid integers, validate on blur
Remove	Confirm if qty > 1, immediate if qty = 1

Package quantity alignment: If products have minimum order quantities or packaging units, show helper text and auto-adjust to valid quantities.

Checkout Patterns

Checkout Flow

Step-based checkout with clear progress indication.

Step	Content	Validation
1. Contact	Email, phone (for order updates)	Email format, required fields
2. Shipping	Address, method, carrier options	Address validation, method selection
3. Payment	Payment method, billing address	Card validation, terms acceptance
4. Review	Order summary, final confirmation	All previous steps complete

Progress Indicator

State	Visual Treatment
Completed step	Checkmark, muted or green
Current step	Highlighted, numbered
Future step	Muted, numbered
Clickable	Completed steps clickable to return

Guest vs. Account Checkout

User Type	Experience
Guest	Full checkout flow, account creation offered at end
Logged in	Pre-filled contact and shipping, saved payment options
New account	Create account during checkout or after

Research basis: Competitive analysis: “Open checkout (Caplugs, Fastenal, Rose): Guest allowed = 20-35% higher first-time conversion.”

Order Confirmation

Element	Content
Success message	”Thank you for your order”
Order number	Prominently displayed
Order summary	Items, quantities, prices
Shipping info	Address, method, estimated delivery
Next steps	”You’ll receive an email confirmation”
Actions	Print, Track Order, Continue Shopping

Search Patterns

Search Interaction Flow

Stage	Behavior
Focus on search	Input expands (desktop), keyboard appears (mobile)
Typing (3+ chars)	Autocomplete suggestions appear after 150ms
Select suggestion	Navigate directly to suggested item/page
Submit search	Navigate to results page
No results	Suggestions, browse links, contact option

Autocomplete Behavior

Input	Response
Exact SKU match	Top suggestion with “View Product” action
Partial SKU	List of matching part numbers
Category term	Category suggestion with product count
Application term	Application page suggestion
No matches	”No suggestions” + submit to search anyway

Search Results Interaction

Action	Response
Click product	Navigate to product detail page
Add to Cart (if shown)	Add with default options, toast confirmation
Apply filter	Results update, filter chip appears
Sort change	Results reorder, URL updates
Load more	Additional results append, button updates

Mobile-Specific Patterns

Touch Targets

Element	Minimum Size
Buttons	44×44px
Links in text	44px touch area (padding if needed)
List items	48px height minimum
Close buttons	44×44px
Form fields	44px height minimum

Pattern	Usage
Hamburger menu	Primary navigation access
Bottom navigation	Key actions (Home, Search, Cart, Account)
Drawer	Filters, secondary navigation
Back button	Return to previous screen

Mobile Forms

Adaptation	Implementation
Input types	Use appropriate keyboard (email, number, tel)
Labels	Always visible above the field (not placeholder only)
Layout	Single column, full-width fields
Submit	Large button, bottom of form

Mobile Tables

Adaptation	Implementation
Row to card	Each row becomes a stacked card
Priority columns	Most important data visible, rest expandable
Horizontal scroll	Alternative for data-dense tables
Sorting	Dropdown selector instead of header clicks

Research basis: “Mobile: Each row becomes a stacked card” from Caplugs benchmark. Only 3 of 14 competitors have usable mobile tables.

Error Prevention Patterns

Validation Timing

Validation Type	Timing
Format validation	On blur or after brief pause in typing
Required fields	On blur and on submit attempt
Cross-field validation	On submit
Server validation	After form submission

Disabled States

Use disabled states to prevent invalid actions.

Scenario	Disabled Element
No size selected	Add to Cart button
Required field empty	Submit button (with visual indication)
Out of stock	Add to Cart button (with “Out of Stock” label)
Invalid quantity	Checkout button

Confirmation Dialogs

Require confirmation for destructive or significant actions.

Action	Confirmation
Remove item from cart	”Remove [Product]?” Yes/No
Cancel order	”Are you sure? This cannot be undone.”
Delete saved address	”Delete this address?” Yes/No
Clear all filters	No confirmation (easily reversible)

Undo Capability

Where possible, allow undo instead of confirmation.

Action	Undo Pattern
Remove from cart	Toast with “Undo” button (5 seconds)
Apply all filters	”Clear All” button
Form changes	”Discard Changes” option

Accessibility Patterns

Key	Action
Tab	Move to next focusable element
Shift+Tab	Move to previous focusable element
Enter	Activate button/link
Space	Toggle checkbox, activate button
Arrow keys	Navigate within components (tabs, menus)
Escape	Close modal, dropdown, popover

Focus Management

Scenario	Focus Behavior
Modal opens	Focus moves to modal, trapped within
Modal closes	Focus returns to trigger element
Dropdown opens	Focus on first option
Error occurs	Focus on first error field
Page loads	Focus on main content or skip link target

Summary: Pattern Priority

Based on research severity and frequency:

Priority	Pattern Category	Research Driver
Critical	Feedback (loading, success, error)	Universal feedback gap, rage clicks
Critical	Form validation and submission	Multiple clicks, form confusion
Critical	Add to Cart flow	No confirmation, trust erosion
High	Progressive disclosure	75-85% don’t scroll to content
High	Search interaction	73% priority, broken current search
High	Mobile adaptation	20% of traffic, 3/14 competitors usable
Medium	Checkout flow	Address editing friction
Medium	Error prevention	Destructive actions, invalid states