System Feedback
404
Error 404 Page
Purpose: Clearly communicate that the requested page cannot be found, and guide users back to relevant or familiar sections of the site.
Display and Visual Elements
- Clearly display the “404” error code along with a concise, friendly message (e.g., “Page Not Found”)
- Consider including an illustration or icon that reinforces the error message without being overly alarming.
- Maintain a balance between visual appeal and clear messaging; avoid clutter while ensuring the page is engaging
- Provide direct links to the homepage, sitemap, or key sections of the site.
- Include a search bar so users can quickly find the information they need.
- Offer a link or contact information for support if the user needs further assistance
- Make sure that all interactive elements (such as CTAs and search input fields) are accessible via keyboard navigation and are properly announced by screen readers.
403
Error 403Page
Purpose: Clearly communicate that the user does not have permission to access the requested page.
Display and Visual Elements
- Clearly display the “403” error code along with a succinct message (e.g., “Access Denied” or “Forbidden”).
- Provide instructions or links that help users navigate to permissible areas or contact support if necessary.
- Offer a brief explanation that the user may not have the required permissions, and advise on steps they might take (e.g., signing in with proper credentials or contacting their administrator).
- Keep the design clean and focused, ensuring that the message is the primary focus.
- Provide direct links to the homepage, sitemap, or key sections of the site.
Error Messages
Actions Feedback
Purpose: Provide clear, concise feedback when a user action encounters an error, so users know what went wrong and how to resolve it.
Consistency and Clarity
Provide clear, concise feedback when a user action encounters an error, so users know what went wrong and how to resolve it. Ensure that error messages across the website are uniform in style, tone, and behavior, using the corresponding colors described in this guideline for all error messages.
Content Guidelines
- Use simple, non-technical language that explains the error in plain terms
- Include actionable guidance (e.g., “Please check your input and try again” or “Contact support for help”)
Tone and Voice
- Maintain a friendly and supportive tone to prevent user frustration
- Avoid blame or overly technical language; the focus should be on solving the issue.
Placement Place
- Place error messages near the relevant element (for example, directly below an input field) so users can quickly understand the context of the error.
- Ensure error messages are clear and accessible on all devices. They should scale and reposition appropriately on mobile, tablet, and desktop views.
Screen Reader Support
Use ARIA roles (such as aria-live="assertive" ) to announce error messages to users relying on assistive technologies.