interaction-design

name	interaction-design
description	Creates intuitive user experiences through feedback patterns, microinteractions, and accessible interaction design. Use when designing loading states, error handling UX, animation guidelines, or touch interactions.
license	MIT

Interaction Design

Create intuitive user experiences through thoughtful feedback and interaction patterns.

Interaction Patterns

Pattern	Duration	Use Case
Microinteraction	100-200ms	Button press, toggle
Transition	200-400ms	Page change, modal
Entrance	300-500ms	List items appearing

Loading States

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

function LoadingState({ isLoading, children }) {
  if (isLoading) {
    return <div className="skeleton" style={{ height: 200 }} />;
  }
  return children;
}

Error States

function ErrorState({ error, onRetry }) {
  return (
    <div className="error-container" role="alert">
      <Icon name="warning" />
      <h3>Something went wrong</h3>
      <p>{error.message}</p>
      <button onClick={onRetry}>Try Again</button>
    </div>
  );
}

Empty States

function EmptyState({ title, description, action }) {
  return (
    <div className="empty-state">
      <Illustration name="empty-inbox" />
      <h3>{title}</h3>
      <p>{description}</p>
      {action && <button onClick={action.onClick}>{action.label}</button>}
    </div>
  );
}

Accessibility

// Announce state changes to screen readers
function StatusAnnouncer({ message }) {
  return (
    <div aria-live="polite" aria-atomic="true" className="sr-only">
      {message}
    </div>
  );
}

// Respect motion preferences
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

Animation Guidelines

• Keep animations under 500ms (longer feels sluggish)
• Use ease-out for entering, ease-in for exiting
• Respect prefers-reduced-motion
• Ensure focus indicators are always visible
• Test with keyboard navigation

Best Practices

• Provide immediate feedback for all actions
• Show loading states for waits >0.5s
• Include clear error messages with recovery options
• Design meaningful empty states
• Support keyboard navigation