Page level errors guidance

[ankigupta92]

Hello, I am looking for guidance on page level errors where the actual error might be hidden beneath the fold. The possibility of number of errors could be between 1-3, however I am trying to test these solutions for worst case scenario where user might have 10+ errors.
I have explored couple of options in this linked figma

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

For handling page-level errors where the actual error might be hidden beneath the fold, especially in scenarios where there could be multiple errors (1-3 or even 10+), the guidance from the Paste documentation suggests a couple of approaches that could be beneficial for your use case:

1. Use of Callout Component for Errors: As mentioned in the documentation, for errors that apply to a particular section of a page or the whole page, you can use an error Callout to communicate these errors. Within the Callout, you can list errored fields as anchors and shift focus to the first errored field in the form. This approach helps in making the errors visible and accessible even if they are beneath the fold.

2. Consolidating Errors at the Top of the Page: For forms or pages that are large and consist of many sections, it's recommended to place a Callout at the very top of the scrollable container to include all errors in any section. You can use the Callout with a list to display all errors. This method ensures that users are immediately made aware of the errors, regardless of their position on the page.

3. Avoid Accumulating Error States: The guidance also suggests not to accumulate error states in one screen but to display one error at a time, starting with the most critical one, until the user recovers. This can help in avoiding overwhelming the user with too many errors at once and can guide them through the correction process more systematically.

4. Providing Additional Support: Including another way for users to contact support if the error persists is also recommended. This ensures that users have a fallback option if they are unable to resolve the errors by themselves.

Given your scenario where the number of errors could be significant, combining these approaches could offer a comprehensive solution. Starting with a Callout at the top of the page to summarize the errors and using anchors within that Callout to direct users to the specific errored fields could enhance the user experience. Additionally, ensuring that you prioritize errors and provide ample support options can further assist users in resolving these errors efficiently.

For more detailed guidance and examples, you can refer to the links provided in the suggestions above.

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Hide and reveal Alert Notification - Answer (updated: 06/17/2022, similarity score: 86%)
• Error drawer for content editors in Engage (updated: 08/10/2023, similarity score: 85%)
• Full Page Error (updated: 02/28/2023, similarity score: 84%)

[serifluous]

Hey @ankigupta92, sorry for the late reply! We've been discussing this over the past few days, but it looks like your Figma doesn't link to your error exploration anymore. Did you move forward with a solution?

Regardless of how many errors are on a page, there's always a chance that an error could occur in a field that's not currently visible on screen. You'll probably want to use either a Toast or Callout (like you had in your explorations) to show the number of errored fields, and then lean on optimistic design as a principle, assuming that a user will reasonably scroll through the page to fix the full list of errors.

If it's a pretty large concern for this page that there will both be a lot of errors and that users won't scroll, it might also be worth reconsidering the page layout itself and whether there's a possibility of breaking up the content into multiple pages, or breaking up form field validation into multiple steps on the page.

[ankigupta92]

Thanks @serifluous! I did move forward with the callout option after a design crit review with internal design team.