Figma template for an error page

Design the error page around its main goal

This error page helps users understand an unavailable page and find a recovery path. Order information around the user's next task, then make the primary action easy to find. Keep supporting details secondary so the screen remains easy to scan.

Organize error page content and actions

Use the screen to organize error message, recovery action and route to useful content. Keep labels, status messages and actions next to the content they describe, and make key information easy to scan. On small screens, keep the primary action and essential details visible first.

Adapt this error page template in Figma

Effective error feedback enhances the user experience by providing clear and concise communication about problems and potential solutions. Components such as tooltips, modal dialogs, inline messages, and alert banners are used to deliver these messages. By clearly explaining the issue and offering actionable steps, error feedback helps users navigate challenges without frustration.

Our UI kit includes customizable error feedback components designed to provide clear, user-friendly notifications and warnings, ensuring users are well-informed and guided through their interactions with the system.