How to handle inline errors on pages that scroll?

[jess-watson]

In Segment Journeys, there are a few instances where an error will be "higher" on a page than what the user can see due to scroll. In this instance, should we scroll users back to the top of the page when they click "Save," then use a callout component at the top to highlight the error(s)? Thanks!

[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.

---

Based on the provided documentation sections, it seems there isn't a direct guideline on whether to scroll users back to the top of the page to highlight errors using a callout component. However, considering the guidance on error handling and user experience, it's essential to ensure that error messages are visible and accessible to users to correct them efficiently.

For errors "higher" on a page than what the user can see due to scroll, automatically scrolling the user to the top of the page where the error callout is displayed could enhance the user experience by making sure they are aware of the errors immediately. This approach aligns with the principle of making error states clear and actionable for users, as indicated in the "Error Callout" section, which suggests using an error Callout to communicate errors for a particular section of a page.

While the documentation does not explicitly mention scrolling behavior in relation to displaying errors, combining the guidance on error visibility with general UX best practices suggests that automatically scrolling to the error message could be beneficial. This ensures that users do not miss critical error information that could prevent them from proceeding.

For implementing such behavior, you might consider using JavaScript to scroll to the top of the page when the "Save" action triggers an error state that is not immediately visible to the user. Here's a basic example of how you might implement this:

if (errorExists) {
  window.scrollTo(0, 0);
  // Code to display the error callout at the top of the page
}

Remember, the key is to make the error state as visible and understandable as possible to the user, guiding them towards resolving the issue without unnecessary frustration.

For more detailed guidance on composing error messages and using callouts, you can refer to the error state pattern in the Paste documentation.

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:

• Error state for side modals (updated: 02/27/2024, similarity score: 84%)
• Alert behavior instead of inline error option (updated: 08/23/2022, similarity score: 84%)
• Full Page Error (updated: 02/28/2023, similarity score: 83%)

[dosubot[bot]]

The Paste design system provides a Callout component that can be used to display inline errors effectively. For errors that are not immediately visible due to scrolling, a common approach is to scroll the user to the error location or use a callout at the top of the page to summarize the errors. The Callout component supports an "error" variant, which is specifically designed for displaying error messages. Here's an example of how you might use it:

<Callout variant="error">
  <CalloutHeading>Error</CalloutHeading>
  <CalloutText>Your error message goes here.</CalloutText>
</Callout>

This component includes styling and an icon appropriate for error messages. Additionally, you might consider implementing a mechanism to automatically scroll to the error message or field when a form submission fails, ensuring users can quickly address the issues. However, specific implementations for scrolling to errors are not detailed in the available information ^[1][2][3].

To continue talking to Dosu, mention @dosu.

[krisantrobus]

HI @jess-watson as the form is so large and consists of many section we agree with your suggestion. It aligns with our guidance in the Form component page and we would suggest placing 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. Let us know if you want to discuss further!