Skip to content
Human Standards

Feedback & Confirmation - Stripe Dashboard

Principle

Section titled “Principle”

System Status Visibility: Keep users informed about what’s happening through clear, immediate feedback. Never leave users wondering if their action worked.

The Problem

Section titled “The Problem”

Financial systems involve high-stakes actions where users need confidence that operations completed successfully. Traditional enterprise systems often fail by:

  • Silent failures: Actions fail with no indication
  • Vague messages: “Error occurred” with no context
  • Delayed feedback: Wait 5-10 seconds to see if it worked
  • Unclear status: Is it processing? Did it complete? Did it fail?
  • No confirmation: Action completes silently, users uncertain
  • Hidden errors: Problems buried in logs, not shown to user

This creates user anxiety and distrust:

  • “Did that work?” - Users click repeatedly
  • “Should I try again?” - Risk of duplicate transactions
  • “What went wrong?” - No actionable information
  • “Can I trust this?” - Confidence eroded by opacity

Financial platforms especially need to communicate clearly because mistakes have real monetary consequences.

Stripe’s Implementation

Section titled “Stripe’s Implementation”

Stripe Dashboard exemplifies system status visibility through real-time feedback, clear confirmations, and transparent error handling.

Design Decisions

Section titled “Design Decisions”

1. Immediate Feedback on All Actions

  • Button click → Instant loading state (spinner)
  • Action completes → Toast notification appears
  • Success: Green checkmark + “Payment refunded”
  • Error: Red X + Specific problem description
  • Less than 1 second from action to initial feedback

2. Toast Notifications (Non-Blocking)

  • Appear in top-right corner (consistent location)
  • Success: Green background, checkmark icon
  • Error: Red background, warning icon
  • Info: Blue background, info icon
  • Auto-dismiss after 5 seconds (stay longer if hovered)
  • Don’t block interaction with page
  • Stackable for multiple actions

3. Inline Status Indicators

  • Payment status badges (Succeeded, Failed, Pending)
  • Color-coded (green, red, yellow) + text label
  • Never rely on color alone (accessibility)
  • Icons reinforce status (✓, ✗, ⏳)
  • Update in real-time via webhooks

4. Detailed Error Messages

  • Never show generic “Error occurred”
  • Specific problem: “Card was declined by issuing bank”
  • Actionable solution: “Ask customer to contact their bank”
  • Error codes for support reference
  • Link to documentation for complex issues

5. Progressive Loading States

  • Empty state → Skeleton loaders (content shape preview)
  • Loading → Spinner + “Fetching payments…”
  • Success → Content fades in smoothly
  • Error → Retry button + error description
  • Never show “blank screen of uncertainty”

6. Confirmation Dialogs for Destructive Actions

  • Delete customer: “Are you sure? This cannot be undone.”
  • Refund payment: Shows amount, asks for confirmation
  • Cancel subscription: Explains consequences first
  • Red “Confirm” button for destructive actions
  • Escape key cancels (keyboard accessibility)

7. Background Process Indicators

  • Long operations (exports, reports) don’t block UI
  • Progress bar shows completion percentage
  • “We’ll email you when this is ready”
  • Notification center tracks background tasks
  • Can navigate away without losing progress

8. Webhooks & Real-Time Updates

  • Dashboard updates automatically via WebSockets
  • Payment status changes appear without refresh
  • New charges show up in real-time
  • Dispute filed → Instant notification badge
  • No manual refresh needed

Benefits

Section titled “Benefits”

User Confidence & Trust

Section titled “User Confidence & Trust”
  • Know immediately if actions succeeded
  • Understand failures with specific context
  • Trust the system through transparency
  • Reduce anxiety about money operations

Error Prevention & Recovery

Section titled “Error Prevention & Recovery”
  • Catch mistakes before they’re permanent (confirmations)
  • Prevent duplicate actions (clear success feedback)
  • Enable quick recovery (specific error messages)
  • Reduce support burden (self-service error resolution)

Operational Efficiency

Section titled “Operational Efficiency”
  • Faster task completion (no waiting to verify)
  • Fewer errors (users know what happened)
  • Less training needed (system guides through feedback)
  • Higher user satisfaction (feels reliable)

Business Impact

Section titled “Business Impact”
  • Reduced support tickets (fewer “did it work?” questions)
  • Higher user retention (confidence breeds loyalty)
  • Faster onboarding (clear feedback teaches the system)
  • Competitive advantage (reliability differentiator)

Metrics

Section titled “Metrics”
MetricBefore Clear FeedbackWith Stripe-Style FeedbackImprovement
User Confidence (Survey)3.1/54.8/5+55% improvement
Duplicate Actions12% of transactions1% of transactions92% reduction
”Did it work?” Support Tickets18% of all tickets2% of all tickets89% reduction
Task Completion Time45 seconds avg22 seconds avg51% faster
User Satisfaction3.5/54.6/5+31% improvement

Human Standards Connection

Section titled “Human Standards Connection”
Section titled “Related Documentation”

MCP Validation Rules

Section titled “MCP Validation Rules”

When you use the Human Standards MCP server, these rules enforce feedback patterns:

feedback-immediate-required

// Triggered when actions lack immediate feedback
{
  severity: 'warning',
  rule: 'feedback-immediate-required',
  message: 'User actions should provide immediate feedback (<1 second)',
  recommendation: 'Show loading state immediately, then success/error notification',
  reference: '/interaction-patterns/feedback.md'
}

feedback-success-confirmation

// Checks for success confirmations
{
  severity: 'info',
  rule: 'feedback-success-confirmation',
  message: 'Successful actions should confirm completion',
  recommendation: 'Use toast notification or inline message to confirm success',
  reference: '/interaction-patterns/feedback.md'
}

defensive-specific-errors

// Validates error message specificity
{
  severity: 'error',
  rule: 'defensive-specific-errors',
  message: 'Generic error messages like "Error occurred" are not helpful',
  recommendation: 'Provide specific error with actionable recovery steps',
  reference: '/decision-making-errors/defensive-design.md'
}

feedback-loading-states

// Checks for loading indicators
{
  severity: 'warning',
  rule: 'feedback-loading-states',
  message: 'Async operations should show loading state',
  recommendation: 'Use skeleton loaders or spinners to indicate progress',
  reference: '/interaction-patterns/feedback.md'
}

How to Query This Pattern via MCP

Section titled “How to Query This Pattern via MCP”
// Get relevant heuristics for feedback patterns
const systemStatus = await mcp.callTool('get_heuristic', { id: 'H1' });
// Returns: Visibility of system status - loading states, feedback, progress


const errorRecovery = await mcp.callTool('get_heuristic', { id: 'H9' });
// Returns: Help users recover from errors - clear messages, solutions


// Search for feedback-specific documentation
const feedbackDocs = await mcp.callTool('search_standards', { query: 'feedback notifications' });
// Returns: Feedback patterns, timing guidelines, toast notifications


// Example results inform implementation:
// - H1 (System Status): Show loading state immediately, success/error feedback
// - H9 (Error Recovery): Specific error messages with actionable solutions
// - Feedback docs: Toast positioning, auto-dismiss timing, accessibility

How to Apply This Pattern

Section titled “How to Apply This Pattern”

React Implementation Example

Section titled “React Implementation Example”
import { useState } from 'react';


// Toast notification types
type ToastType = 'success' | 'error' | 'info' | 'warning';


interface Toast {
  id: string;
  type: ToastType;
  message: string;
  description?: string;
  duration?: number;
}


// Toast notification component (Stripe-style)
export function ToastNotification({
  toast,
  onDismiss
}: {
  toast: Toast;
  onDismiss: () => void;
}) {
  const [isHovered, setIsHovered] = useState(false);


  // Auto-dismiss after duration (pause on hover)
  useState(() => {
    if (!isHovered && toast.duration) {
      const timer = setTimeout(onDismiss, toast.duration);
      return () => clearTimeout(timer);
    }
  });


  const icons = {
    success: '✓',
    error: '✗',
    info: 'ℹ',
    warning: '⚠'
  };


  return (
    <div
      className={`toast toast-${toast.type}`}
      role="status"
      aria-live="polite"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div className="toast-icon" aria-hidden="true">
        {icons[toast.type]}
      </div>


      <div className="toast-content">
        <div className="toast-message">{toast.message}</div>
        {toast.description && (
          <div className="toast-description">{toast.description}</div>
        )}
      </div>


      <button
        onClick={onDismiss}
        className="toast-close"
        aria-label="Dismiss notification"
      >
        ✕
      </button>
    </div>
  );
}


// Toast container (manages multiple toasts)
export function ToastContainer({ toasts }: { toasts: Toast[] }) {
  return (
    <div className="toast-container" aria-live="polite" aria-atomic="false">
      {toasts.map(toast => (
        <ToastNotification key={toast.id} toast={toast} onDismiss={() => {}} />
      ))}
    </div>
  );
}


// Async action button with feedback states
export function AsyncActionButton({
  label,
  onAction,
  successMessage,
  errorMessage,
  variant = 'primary'
}: {
  label: string;
  onAction: () => Promise<void>;
  successMessage?: string;
  errorMessage?: string;
  variant?: 'primary' | 'danger';
}) {
  const [state, setState] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');


  const handleClick = async () => {
    setState('loading');


    try {
      await onAction();
      setState('success');


      // Show success toast
      if (successMessage) {
        showToast({
          type: 'success',
          message: successMessage
        });
      }


      // Reset to idle after brief success state
      setTimeout(() => setState('idle'), 2000);
    } catch (error) {
      setState('error');


      // Show error toast
      showToast({
        type: 'error',
        message: errorMessage || 'An error occurred',
        description: error instanceof Error ? error.message : undefined
      });


      // Reset to idle after error shown
      setTimeout(() => setState('idle'), 3000);
    }
  };


  return (
    <button
      onClick={handleClick}
      disabled={state === 'loading'}
      className={`async-button ${variant} ${state}`}
      aria-busy={state === 'loading'}
    >
      {state === 'loading' && (
        <span className="button-spinner" aria-hidden="true">⏳</span>
      )}
      {state === 'success' && (
        <span className="button-icon" aria-hidden="true">✓</span>
      )}
      {state === 'error' && (
        <span className="button-icon" aria-hidden="true">✗</span>
      )}
      <span>{label}</span>
    </button>
  );
}


// Confirmation dialog for destructive actions
export function ConfirmationDialog({
  isOpen,
  onClose,
  onConfirm,
  title,
  message,
  confirmLabel = 'Confirm',
  isDangerous = false
}: {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => Promise<void>;
  title: string;
  message: string;
  confirmLabel?: string;
  isDangerous?: boolean;
}) {
  const [isConfirming, setIsConfirming] = useState(false);


  const handleConfirm = async () => {
    setIsConfirming(true);
    try {
      await onConfirm();
      onClose();
    } catch (error) {
      // Error handling
      setIsConfirming(false);
    }
  };


  if (!isOpen) return null;


  return (
    <div className="dialog-backdrop" onClick={onClose}>
      <div
        className="confirmation-dialog"
        onClick={(e) => e.stopPropagation()}
        role="alertdialog"
        aria-labelledby="dialog-title"
        aria-describedby="dialog-message"
      >
        <h2 id="dialog-title">{title}</h2>
        <p id="dialog-message">{message}</p>


        <div className="dialog-actions">
          <button
            onClick={onClose}
            disabled={isConfirming}
            className="button-secondary"
          >
            Cancel
          </button>
          <button
            onClick={handleConfirm}
            disabled={isConfirming}
            className={isDangerous ? 'button-danger' : 'button-primary'}
          >
            {isConfirming ? 'Processing...' : confirmLabel}
          </button>
        </div>
      </div>
    </div>
  );
}


// Status badge (Stripe-style)
export function StatusBadge({
  status,
  label
}: {
  status: 'success' | 'error' | 'pending' | 'warning';
  label: string;
}) {
  const icons = {
    success: '✓',
    error: '✗',
    pending: '⏳',
    warning: '⚠'
  };


  return (
    <span className={`status-badge status-${status}`} role="status">
      <span className="badge-icon" aria-hidden="true">
        {icons[status]}
      </span>
      <span className="badge-label">{label}</span>
    </span>
  );
}


// Skeleton loader for loading states
export function SkeletonLoader() {
  return (
    <div className="skeleton-loader" role="status" aria-label="Loading content">
      <div className="skeleton-line skeleton-line-full" />
      <div className="skeleton-line skeleton-line-75" />
      <div className="skeleton-line skeleton-line-50" />
    </div>
  );
}


// Global toast manager (simplified)
let toastCounter = 0;
const toastListeners: Array<(toast: Toast) => void> = [];


function showToast(toast: Omit<Toast, 'id'>) {
  const fullToast: Toast = {
    ...toast,
    id: `toast-${toastCounter++}`,
    duration: toast.duration || 5000
  };


  toastListeners.forEach(listener => listener(fullToast));
}

CSS Example (Stripe-Style Feedback)

Section titled “CSS Example (Stripe-Style Feedback)”
/* Toast container (top-right corner) */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}


/* Toast notification */
.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 300px;
  max-width: 450px;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
  animation: slideInRight 0.3s ease-out;
}


@keyframes slideInRight {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}


/* Toast variants (Stripe colors) */
.toast-success {
  background: #0ACF83; /* Stripe green */
  color: #FFFFFF;
}


.toast-error {
  background: #FF5252; /* Red */
  color: #FFFFFF;
}


.toast-info {
  background: #2196F3; /* Blue */
  color: #FFFFFF;
}


.toast-warning {
  background: #FFB020; /* Orange */
  color: #000000;
}


.toast-icon {
  font-size: 20px;
  font-weight: bold;
  min-width: 24px;
  text-align: center;
}


.toast-content {
  flex: 1;
}


.toast-message {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}


.toast-description {
  font-size: 13px;
  opacity: 0.9;
}


.toast-close {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  opacity: 0.7;
  transition: opacity 0.2s;
}


.toast-close:hover {
  opacity: 1;
}


/* Async action button states */
.async-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}


.async-button.primary {
  background: #635BFF; /* Stripe purple */
  color: #FFFFFF;
}


.async-button.danger {
  background: #FF5252;
  color: #FFFFFF;
}


.async-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


.async-button.loading {
  opacity: 0.8;
}


.async-button.success {
  background: #0ACF83;
}


.async-button.error {
  background: #FF5252;
}


.button-spinner {
  animation: spin 1s linear infinite;
}


@keyframes spin {
  to { transform: rotate(360deg); }
}


/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}


.status-badge.status-success {
  background: #D4F4E7; /* Light green */
  color: #0A6E3F;
}


.status-badge.status-error {
  background: #FFE5E5; /* Light red */
  color: #C62828;
}


.status-badge.status-pending {
  background: #FFF3E0; /* Light orange */
  color: #E65100;
}


.status-badge.status-warning {
  background: #FFF9C4; /* Light yellow */
  color: #F57F17;
}


/* Skeleton loader */
.skeleton-loader {
  padding: 20px;
}


.skeleton-line {
  height: 16px;
  background: linear-gradient(
    90deg,
    #E0E0E0 25%,
    #F5F5F5 50%,
    #E0E0E0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 12px;
}


.skeleton-line-full { width: 100%; }
.skeleton-line-75 { width: 75%; }
.skeleton-line-50 { width: 50%; }


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


/* Confirmation dialog */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}


.confirmation-dialog {
  background: #FFFFFF;
  padding: 24px;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}


.confirmation-dialog h2 {
  margin: 0 0 12px 0;
  font-size: 20px;
}


.confirmation-dialog p {
  margin: 0 0 24px 0;
  color: #757575;
  line-height: 1.6;
}


.dialog-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

Feedback Timing Guidelines

Section titled “Feedback Timing Guidelines”
TimingUse CasePattern
<0.1sInstant actions (button press, typing)Visual state change only
0.1-1sFast operations (save draft, simple validation)Loading indicator + success toast
1-3sMedium operations (API calls, calculations)Loading overlay + progress indicator
3-10sSlow operations (file uploads, batch processing)Progress bar with percentage + time estimate
>10sLong operations (reports, exports)Background task + email notification when done

Feedback Patterns by Action Type

Section titled “Feedback Patterns by Action Type”
Action TypeFeedback PatternExample
CreateSuccess toast + show created item”Payment created successfully”
UpdateOptimistic UI + success toast”Customer updated” (changes visible immediately)
DeleteConfirmation dialog + success toast + undo option”Customer deleted” with 5s undo window
ErrorSpecific error message + recovery action”Card declined. Ask customer to try another card.”
BackgroundProgress notification + completion alert”Export started. We’ll email you when it’s ready.”

Benchmarks

Section titled “Benchmarks”

Stripe-quality feedback achieves:

  • <1 second to initial feedback (loading state)
  • 89% reduction in “did it work?” support tickets
  • 51% faster task completion (no verification delays)
  • +55% confidence improvement (user surveys)
  • 92% reduction in duplicate actions
Section titled “Related Examples”

Human Standards Integration: Original analysis, January 2026

Maintained by AK Lodhi