When the user click on the search button, he got 500 from the server (xhr error).
Should I display a popup toast say "error.." or put the message in the page instead of the results area?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this communityA 500 should really be a dedicated page that says something like “Sorry, there’s a problem with the service, try again later”.
This is because a 500 is a significant response that users should be made aware of.
I would not put it in the results area because it is not a result. (“0 results found” is still a result so that’s okay)
In terms of toast messages and snackbars, I have distilled down the reasons why you would want to avoid them here:
https://adamsilver.io/blog/the-problem-with-toast-messages-and-what-to-do-instead/
It depends on the behavior of your page. A toast message does make sense if the user can do something else instead and you want to inform the user but not interrupt her. In your case this does not seem to be the case.
So not knowing more I would suggest to display the error instead of the results list. But it is important to gibe the user a hint on what to do next. Should the user just wait a minute and try again? Is the error handled by someone, if so inform the user. etc.
In general, I have seen all error pages (including 5xx) use the main area of the page to inform the user. See examples
The problem with toast notifications is that they're dismissible. So while they add an interruption in the user flow that is very valuable to the user, users can accidentally hide them (especially on mobile devices) and then when they want to review the content of the notification, they have to perform the same step that resulted in an error. Also, they allow very little content.
In short, I think that an appropriate page that provides users with as much information as possible about the error and why it happened is a better solution than a toast notification.