How should an error page (404) behave?

Question

Should it redirect to another page? After how long?

Should there be an index? A box and search free? Or already do the search suggesting pages based on what was typed?

Should it demonstrate that it is a mistake? Should it show the 404? Or is it better to look cleaner and look normal and just need to do something else?

The page should keep the design website or have something neutral? Should it be very clean or with as much information as possible? Should you take advantage of anything else? Advertising?

The error may be from the site or the user who typed something wrong, or even from who placed one link wrong for it, then it may be third party. This is a concrete case for apologize or not?

Finally, what has to be noted on page 404?

This question has already been asked in User Experience. I wanted a more appropriate response to our culture. Note that the answers there were very objective. Do the same here. Only answer if you know how to base it, even if it’s because of your experience, but you need the foundation.

Answer 1

Perhaps unfortunately, the mistake is classic. The Wikipedia so defines him:

the HTTP response indicating that the client has communicated with the server, but the server cannot find what was requested from it

either by a wrong shared link by a third party or a link on your own page that no longer exists.

The page should redirect to another page?

The requested page no longer exists or has never existed. There is no point in redirecting the user to some other page. He accessed page X because he wants to consume the content he was looking for in X, not in Y or even XY.

What you can do is give similar content options, as I approach further, in "The page must have a search field?".

As pointed out by @Anderson, if by chance you know which page your client wanted to go to - this will happen if the page has been moved, return HTTP 301 - redirect without showing the error page, which is more convenient. Think like a block catch, you handle the error and in some situations do not make it clear to the user. This happens to aircraft all the time during their flight, modules and sub-modules stop working and others take over.

"Treating the error is better than showing it" is one of 10 heuristics of usability. I recommend reading of "Preventing User Errors: Avoiding Unconscious Slips" de Page Laubheimer, UX specialist at Nielsen Norman Group, an American UI and user experience consultancy.

The page must have a search field?

This point focuses on giving an alternative to who accesses. If a restaurant no longer has the shrimp to the Lfredo sauce you usually ask, which answer is friendlier?

1. We don’t have that dish anymore.
2. We no longer have this dish, but what do you think of the shrimp in the white sauce?

As a consumer, I prefer to have a similar option, I go with the two.

Provide a link to the home page or a search field. Or both! Whatever, a page that reports an error but doesn’t give any solution attempt or escape hurts the user experience.

If you can know the user’s intent, as in the case of shrimp, and have the search field, fill in the field with something relevant to the intention. Sometimes it is useless for the user to access https://www.maniero.com.br/qwe8jas0 (the correct page was /qwe8jas1) and you fill the search field with qwe8jas0.

In this case, it would be interesting to rethink your link structure for something friendlier, like https://www.maniero.com.br/blog/csharp/tratando-erros and fill the search with tratando erros maybe.

In addition to filling the search can add links as:

• Looking for a blog?
• Looking for C content#?

Since you acknowledge that your website has /blog and /blog/csharp.

Of course, all this if possible. Sometimes he followed a totally unintelligible link or a shortened link like https://ux.stackexchange.com/q/84856/106770.

You can use the subdomains as well. If I am in office.microsoft.com and access a page that does not exist, a link appears saying "looking for Office products?". See in action.

• justinmind: "6 best Practices for 404 pages with killer UX"

The page must demonstrate that it is a mistake?

Yes, the page should demonstrate that it is a mistake. But depending on your audience it does not need to be so clear as to show the 404 code. See some examples:

• The page you are looking for cannot be found. The page you are looking for is not available in the market for your region or no longer exists. (taken from the MS Office store)
• The page you are looking for has not been found. [search field]. Or see the site map. (taken from apple.com/br)
• Looking for something? Sorry, the page you have entered does not exist on our site. Go to the Amazon.combr Home Page (taken from Amazon)
• Oops! Looks like we lost your page. Sorry, we couldn’t find the page you were looking for. Why not do a quick search to be if we can find the information you were looking for? [search field]. [map of the site in the form of a subway map]. (taken from hallaminternet.com)

Jakob Nielsen, author of several usability and UX books, defined, in 1990, heuristics for interface design, in Heuristic Evaluation of user interfaces (do not click the link if you do not want to download the article through Google Scholar). He defends the clarity of the progress and status in which the application lies.

In 1995, to reinforce the heuristics defined by him, Nielsen publishes:

error messages should be expressed in plain language (no codes) and accurate to indicate the problem, and constructively suggest a solution.

On the other hand, when working with a technical audience such as developers, the error code can help to indicate the problem and also lead it to a certain path. A good example is the MSDN, Microsoft development portal, which uses on its pages 404 the explicit error.

The page should keep the website design or have something neutral?

Maintain your pattern. The discrepancy between the amazon website and the error page makes it clear. If it wasn’t for the logo I’d say it was on another site.

Make it clear that something happened and the page was not found, give alternatives and only. Take a break from the ads and let the user find his way there.

• uxdesign.cc: "Design principle: Consistency"
• UX Booth: "Consistency: Key to a Better UX"

This is a concrete case to apologize or not?

The customer is already frustrated because they may no longer be able to find the content they were interested in or something similar. Depending on your audience your page may be up a little more humorous. If it is more formal, apologize or regret what happened ("unfortunately"). Be direct and provide a way to contact the developer for a possible solution.

And what my page should be like?

1. Consistent. Keep your layout pattern.
2. Clara. Be clear with the user of what is happening, without including error codes or technical data explicitly if they add nothing to your audience.
3. Alternative. Don’t be generic, treat the problem by giving content options similar to what user required through links and a search field.
4. Minimal. Take the space for what matters, present what is relevant and cut the superfluity.
5. Easily viewable. Avoid scrolling, let your content be viewed with design and practicality.

See a fragment of a 404 page of Stackoverflow in English.

It gives many options, way of contact with developers, is clean and direct. As it works with a technical audience, it makes clear the HTTP code 404 (it is not in the image because it would get too big)

Answer 2

First, I believe it is interesting to define what an error message is and what it is for.

According to the trusted Portuguese language dictionaries, Priberam, Michaelis and Aulete an error, in summary, would be:

That which is the result of a misunderstanding or a deficient analysis of a fact or a subject. Deception, inaccuracy or inaccuracy. Imprecise conceptualization of an idea or misinterpretation of a subject, of a theme; inaccuracy. Lack of correction, accuracy, perfection, etc.; Failure; Defect; Imperfection.

On purpose of an error message, the following definition fits well:

The purpose of an error message is to help the user who encountered the error, to learn how to avoid the behavior that caused the problem. The program has found a situation that it cannot handle and needs to tell the user, so that the user (or someone else) understands and can avoid the situation that the program cannot handle. [...] Generic error message that says: "an unexpected error occurred" is totally useless in this objective. Gives the user no hint as to what can be changed to avoid the problem, or even fix this issue.

Understanding this definition, it is possible to establish three important points for a good error message:

• Let us know what the problem is.
• Make you feel like there’s something you can do about it.
• Speak as a human and be a consistent extension of the personality of the rest of the application.

---

Redirect to another page?

Should it redirect to another page? After how long?

In general, it is not recommended to redirect the user to another page, especially if it is to a page outside your domain. The main reason is that you never know for sure where the user really wants to go.

If the user is trying to access an old URL that has been moved, it is good to redirect them to the old URL and report that there has been a change of address, and then give the option to follow the link to the new page. But you really should be using a 3xx redirect instead of a 404.

HTTP error codes should never be exchanged and/or misused. Imagine if you are servicing a page that is returning error 500 (Internal Server Error), while actually the actual error is 403 (Access Denied). Unless you’re a psychic, and I apologize if you are, how are you gonna find out where the mistake came from and how are you gonna fix it?

Leave a search box?

Should there be an index? A box and search free? Or already do the search suggesting pages based on what was typed?

It depends on what type of application and the target audience is being treated. In more common cases, it is interesting to leave a search box free. Especially if you already have a fixed navigation bar with a search box (as in the case of Stack Overflow) which will show more links suggesting other sites, it is unnecessary to do both.

In such cases, adopting a page showing related topics is advantageous. It may not be the friendliest alternative in UX issues (some agree, others disagree), but as in the case of Stack Overflow that keeps the navigation bar constantly on all pages, the page suggestions option is something to consider.

Explicitly show the error?

Should it demonstrate that it is a mistake? Should it show the 404? Or is it better to look cleaner and look normal and just need to do something else?

It is useful to show the number 404 for the following reasons:

• He is a shorthand error. 404 already synthesizes an error message;
• The vast majority of people know what 404 means, even if in a simplified way;

Demonstrating error is the best option. It is already public knowledge that running away from problems is not the best alternative (both in life, as in programming). The problem simply grows, turns into a snowball and will only generate more headaches. There are even phrases talking about it:

Don’t run away from your problems or despair. Face them with courage and determination, for if you do not resolve them today, you will surely have to do so tomorrow because they will continue to exist until they are resolved, prolonging your suffering.

^{Source: Thinker}

Briefly, I’ve talked about this in another answer:

[...] In a synthesized way, explain the minimum to your user, but in a clear and understandable way, and if possible do something that allows the user to know that the problem is not being ignored. Let them take some action, such as submitting the logs or submitting an error report. Alternatively, let them know that the automatic action has already been taken and that your technical staff has been automatically notified that this error has occurred and is working on it.[...]

How should the design on the error page?

The page should keep the design website or have something neutral? Should it be very clean or with as much information as possible? Should you take advantage of anything else? Advertising?

The above section already covers part of the question:

[...] In a synthesized way, explain the minimum to your user, but in a clear and understandable way, and if possible do something that allows the user to know that the problem is not being ignored. Let them take some action, such as submitting the logs or submitting an error report. Alternatively, let them know that the automatic action has already been taken and that your technical staff has been automatically notified that this error has occurred and is working on it.[...]

Keep the design in the pattern of your site and the error message in a simple and understandable way. Some reasons to follow this idea are:

• Your user is not a expert in errors, or a full stack web Developer, then return all the error code, and/or the stack of errors makes no sense (in cases of extra mistakes).

The error should be shown to those who are going to solve the problem. Is it the user? No! So don’t show him what he won’t solve. Show a minimal, complete and understandable error message that tells you why and if it can do anything to collaborate.

• If you change the design of the error page too much, your user may think that they clicked on some improper link, and were redirected to some third-party website.

Try to maintain cohesion between error pages with the rest of your site. Be a consistent extension of the personality of the rest of the application. And please, no publicity when error is occurring. In doing so, the user could easily think, "You have time to post ads, but you don’t solve this crap".

• Alternatively, try to understand that when the layman sees an error message, the first thing he looks for, almost always, is the close button (it’s amazing). You can give 2 lines of message, or a whole stack trace, and yet, there will be users who won’t read.

Do you want an example of this? I’m sure not half of the people in it Stack Overflow in English knows head-on what appears on the modal that appears when you click the button Answer your question (i know you looked now to see what had written). So, by these and others, you can see that there is no reason to inform various codes "strangers" and "numerous error lines".

An apology is worth making?

The error may be from the site or the user who typed something wrong, or even from who put a wrong link to it, so it may be from third parties. This is a concrete case to apologize or not?

Apologize. The user is accessing your website, your responsibility. Imagine the following situation: You go to the bakery and you have no bread, for whatever reason, since the machine broke, the energy ran out, the baker broke his leg, there was no more yeast, or there was no decent crop, and there were no ways to make flour. The owner of the bakery will say:

I’m sorry, but XYZ happened, and then blah, blah, blah...

Besides being a matter of education (it’s good and I like it, and I think you like it too), you’ll be showing that you care about the user. There is also an excerpt from the excellent answer on the appropriate apology what it says:

[...] The fact is that the excuse is an important social lubricant, whose character in the interaction also serves as a way to indicate the real intention of the interlocutor (something like "I really didn’t mean to hurt/bother you on purpose")and so is traditionally used to initiate a conversation considering a possible interruption of any introspection/activity of the recipient of the message [...]

Note that when you apologize, you are "preparing the atmosphere" of the interaction, which still makes it possible, in this case, to offer other products to your customer (just as the owner of the bakery does). If that were the case, he would say something like, "We don’t have X today, but how about a tasty Y and/or Z. We also have A and B available if you want".

Concluding

After these considerations, I believe you can also take a look at these 404 error pages, which exemplify what was said in this reply:

• Github
• User Experience
• Microsoft Technet
• Blizzard Entertainment

Note that all, implements almost everything that has been said. They have apology requests, synthesized information, search box, and the standard convention of use. Of course there is no perfect UX error page. The logic of each page varies greatly with its target audience and the philosophy of the developers. But in general they follow conventional wisdom and "good practice".

Answer 3

On the 404:

• Well, let’s say the code 404 is just an HTTP protocol response code that notifies systems and API’s about an invalid search within that system. (TL; DR: Wrong URL address inside that domain). There are several other codes, and they have the sole purpose of helping the programmer to deal with exceptions about the application.

My view on the pages:

Most sites take advantage of this status code and display pages with this error code to their customers if the URL accessed is incorrect.

• In my view it is necessary that there should be a brief and clear text of the possible error. Also do not re-direct and maintain the structure of the site, because it is important that the user knows where and why the error. (Make a search easy or even create a mechanism that makes a suggestion by related words that URL is a valid solution too)

Examples:

• user tried to access site.com/home but accessed site.com/hoem

• user tried to access a page that no longer exists.

Notes:

It is also common to see the use of site maintenance pages (if it is out of the air due to some error, problem or even a maintenance). On this page yes you should explain in a generic way about the problem and try to redirect to the same failed request for several and several times.