Error Page

The error page helps the user understand why something's gone wrong and offers a clear way to take corrective action or dismiss the message.

When to Use

When a process fails, use the error page to inform the user clearly and immediately—especially when the rest of the interface can’t recover.
Common scenarios include:
- Critical failures during tasks like submitting a form, saving data, or completing a transaction.
- Backend or service errors that prevent a page or a component from loading.
- Session timeouts or connectivity issues that require the user’s attention or action.
- Permission or access errors that block the user from proceeding.
It’s best suited when:
- The error is unexpected or blocks progress.
- The user needs immediate feedback or reassurance.
- The message needs to stay visible until acknowledged (such as in a persistent modal).

For minor or recoverable issues, like a temporary glitch or using unrecognized letters while typing, use inline error messages.
For validation errors in forms, use field-level or form-level messages to keep context intact.
For passive system updates, such as “You’ve been logged out”, use toasts or banners for less disruptive alerts.

Start with clarity and focus:
- Write clear, non-technical messages to help the user understand what happened and know what to do next.
- Use only 1 clear action per popup. If there are multiple options, prioritize the most helpful one.
Keep it lightweight:
- Offer a “Details” link only if needed, such as for developers or support.
Be consistent with icons and tone:
- Use standard error icons, like a red exclamation point, to ensure immediate recognition.
- Match the tone to the severity. Stay human and calm, not overly dramatic.
Avoid dead ends:
- Always offer an action: “Retry”, “Close”, “Contact support”, etc.
- If nothing can be done by the user, still provide context and reassurance.
Support responsiveness:
- Ensure that the popup scales well on mobile and doesn’t obscure other critical UI.
- Popups must be keyboard navigable and not trap focus.

Tone: Clear, calm, human.
Voice: Friendly but direct. Avoid passive voice and jargon.
Use sentence case for headings and button labels: Only capitalize the first word and any proper nouns.
Use punctuation only in complete sentences, not phrases or button labels.
Be specific about what failed, not just that something failed.

To meet accessibility standards such as ARIA roles, provide keyboard-enabled button navigation.

Tab (or Shift + Tab) moves focus to the next element or the previous element, navigating among action buttons.
Enter or Space triggers the action.