UI & interface design

Error State & Empty State Design System

Create comprehensive error and empty state designs that transform frustrating moments into opportunities for engagement and guidance. This prompt helps designers develop clear, empathetic, and actionable state designs that maintain user trust and provide pathways to recovery and success.

6 blanks to fill in · Added December 2024 · ui-design · error-states · empty-states · user-experience · error-handling

The prompt

6 blanks

You are an expert UI/UX designer specializing in error state and empty state design. Create a comprehensive design system for error states and empty states for [PROJECT NAME OR APPLICATION TYPE].

Project Context:
- Platform: [WEB/MOBILE APP/DESKTOP/CROSS-PLATFORM]
- Application Type: [E-COMMERCE/SAAS/SOCIAL MEDIA/PRODUCTIVITY/CONTENT PLATFORM]
- User Technical Proficiency: [BEGINNER/INTERMEDIATE/ADVANCED/MIXED]
- Brand Voice and Tone: [PROFESSIONAL/FRIENDLY/PLAYFUL/EMPATHETIC/TECHNICAL]
- Critical User Flows: [LIST KEY WORKFLOWS THAT NEED ERROR HANDLING]

Generate detailed specifications covering:

1. **Error State Classification System**
   - Severity levels (informational, warning, error, critical)
   - Error types (user input errors, system errors, network errors, permission errors)
   - Impact assessment (blocking vs non-blocking errors)
   - Recovery complexity (self-recoverable vs requires intervention)

2. **Error State Design Patterns**
   - Inline validation errors (form fields, real-time feedback)
   - Toast notifications and dismissible alerts (temporary, non-critical)
   - Banner messages (persistent warnings, system-wide issues)
   - Modal dialogs (critical errors requiring immediate attention)
   - Full-screen error pages (404, 500, no connection)
   - Contextual error indicators (icons, color, borders)

3. **Error Message Guidelines**
   - Clear headline structure (what went wrong)
   - Human-readable explanations (avoiding technical jargon)
   - Actionable next steps (specific guidance for recovery)
   - Tone and voice alignment (empathetic, non-blaming language)
   - Progressive disclosure (basic message + expandable details)
   - Accessibility compliance (ARIA labels, screen reader support)

4. **Visual Design Specifications**
   - Color palette (error red, warning amber, info blue with WCAG contrast ratios)
   - Iconography (alert symbols, illustration styles)
   - Typography hierarchy (headlines, body text, action links)
   - Spacing and layout principles
   - Animation and transitions (shake effects, fade-ins, attention-drawing)
   - Dark mode adaptations

5. **Empty State Design Patterns**
   - First-use empty states (onboarding, getting started)
   - User-cleared empty states (intentionally deleted content)
   - No-results empty states (search, filters returning nothing)
   - Permission-based empty states (access denied, locked features)
   - Completed-task empty states (inbox zero, completed todos)
   - Error-driven empty states (failed to load content)

6. **Empty State Components**
   - Illustrative imagery (custom illustrations vs icons vs imagery)
   - Headline and description copy (encouraging, educational)
   - Call-to-action buttons (primary actions to populate state)
   - Alternative pathways (secondary options, educational links)
   - Educational content (feature discovery, usage tips)
   - Success state transitions (congratulatory messaging)

7. **Content Strategy for Each State**
   - Messaging framework (headline + explanation + action)
   - Personality and brand voice integration
   - Microcopy guidelines (button labels, helper text)
   - Localization considerations
   - User education opportunities
   - Humor and delight appropriateness (when suitable)

8. **Implementation Guidelines**
   - Error severity decision tree
   - Pattern selection flowchart (when to use which pattern)
   - Responsive behavior across devices
   - Error logging and analytics tracking
   - Retry mechanisms and fallback strategies
   - Performance considerations (lightweight error states)

9. **Specific Error Scenarios**
   - Form validation errors (per-field and form-level)
   - Network connectivity issues
   - Session timeout and authentication errors
   - Server errors (500, 503)
   - Page not found (404)
   - Permissions and authorization failures
   - Payment and transaction failures
   - File upload errors
   - Rate limiting and quota exceeded

10. **Testing and Validation**
   - Error state checklist for designers and developers
   - User testing scenarios
   - Accessibility audit requirements
   - Edge case coverage
   - Error message content review criteria

For each specification, provide:
- Visual layout descriptions or wireframe concepts
- Exact copy examples with variations
- CSS color codes and styling specifications
- Rationale based on UX research and best practices
- Real-world examples from successful products
- Accessibility requirements and ARIA attributes
- Implementation code snippets or pseudo-code

Ensure all designs prioritize user empathy, provide clear recovery paths, maintain brand consistency, and follow WCAG accessibility standards. Transform potentially frustrating moments into opportunities for engagement, education, and trust-building.

Open in ChatGPT

Blanks: Project name or application type · Web/mobile app/desktop/cross platform · E commerce/saas/social media/productivity/content platform · Beginner/intermediate/advanced/mixed · Professional/friendly/playful/empathetic/technical · List key workflows that need error handling

How to use it

Use this prompt to create a complete error and empty state design system that turns negative experiences into positive opportunities. Fill in the bracketed placeholders with your project-specific details to receive tailored patterns, messaging frameworks, and visual specifications that align with your brand voice while following UX best practices for error handling and empty state design.

Tips

Create reusable error message templates organized by error type to ensure consistency across your application and reduce design and development time
Use specific, actionable language in error messages like "Check your email address format" instead of vague statements like "Invalid input"
Include visual illustrations in empty states that match your brand personality but avoid overly cute or distracting imagery that might minimize serious errors
Implement error logging and analytics tracking on all error states to identify patterns and prioritize fixes for the most common user pain points
Test error states deliberately during development by forcing error conditions rather than waiting for them to occur naturally in production
Provide multiple recovery pathways when possible, such as retry buttons, help links, and alternative actions, so users with different needs can find solutions

Error Severity and Pattern Matching

Establish a clear classification system for errors based on severity and impact. Critical blocking errors that prevent users from continuing should use modal dialogs demanding immediate attention, while non-blocking warnings can use banner notifications that users can dismiss. Inline validation errors appear next to form fields for immediate feedback, and full-screen error pages handle catastrophic failures like 404 or 500 errors. Match the visual prominence and interruption level to the error's actual impact on user workflows to avoid alert fatigue while ensuring critical issues receive proper attention.

Crafting Empathetic Error Messages

Write error messages using clear, plain language that avoids technical jargon and never blames users. Structure messages with three components: what happened (clear headline), why it happened (brief explanation), and what to do next (actionable steps). Instead of "Error 403: Forbidden access," use "You don't have permission to view this page. Contact your administrator to request access." Maintain your brand voice whether professional, friendly, or playful, but always prioritize clarity and helpfulness over cleverness. Include progressive disclosure options for technical details that advanced users or support teams might need.

Empty State Opportunities

Design empty states that provide value beyond simply stating nothing exists. First-use empty states should guide new users with clear calls-to-action and educational content about how to get started. No-results states from searches or filters should suggest alternative actions like broadening criteria or exploring popular content. Completed-task empty states can celebrate user achievements with encouraging messages. Include relevant illustrations that reinforce your brand personality, but ensure they enhance rather than distract from the primary action users should take to populate the space.

Accessibility and Visual Design

Ensure error and empty states meet WCAG accessibility standards with sufficient color contrast ratios (4.5:1 minimum for text). Never rely solely on color to convey error status; combine red highlighting with icons, borders, and clear text labels. Include proper ARIA attributes for screen readers announcing error messages and status changes. Design animations that respect prefers-reduced-motion preferences and provide keyboard navigation for all interactive elements. Test error states with actual assistive technologies to verify they communicate effectively to all users regardless of abilities.