UI Pattern and Guidelines
  • User interface pattern guidelines
  • Foundations
    • Accessibility
    • States
    • Colours
    • Typography
    • Grid and layout
    • Icons
    • Data Visualisation
  • Components
    • Avatar
    • Badge
    • Breadcrumb
    • Button group / Select button
    • Button
    • Card
    • Checkbox
    • Contained button
    • Container
    • Counter
    • Divider
    • Empty state
    • Error page
    • Form Fields
    • Footer
    • Icons
    • Legal
    • Link
    • Lists
    • Loader
    • Modal
    • Navigation
    • Notification
    • Pagination
    • Popover
    • Progress bar
    • Radio button
    • Scroll bar
    • Slider
    • Status
    • Switch
    • Table
    • Tabs
    • Tag
    • Titles
    • Tooltip
    • Uploader
Powered by GitBook
On this page
  • Usage
  • Best Practices
  • Examples

Was this helpful?

  1. Components

Error page

PreviousEmpty stateNextForm Fields

Last updated 4 years ago

Was this helpful?

Usage

Error pages are pages that are shown if there is a critical error occurred in the application caused by the user action or system failure.

Since the error is severe, giving proper feedback with possible options to fix the problem is mandatory. The use of illustration on error pages makes light of an unfortunate situation for the user.

Best Practices

  • Communicate the error type clearly with appropriate use of visuals

  • Always show primary navigation and footer on an error page to provide the user an option to navigate away

  • Provide the immediate actions to the user to fix the problem (refresh the page, or similar)

  • Do not contain error page pre-compositions inside card containers

Examples

404 Error

403 Error

401 Error

400 Error

500 Error