How to create a friendly and elegant 404 pages?

No one would think that a site visitor would stay on the wrong page, but in fact it does. Especially on the 404 error page, visitors will often stay. So, you can design the 404 error page More attractive to the user, and should not let the user can't wait to leave.

What kind of 404 error pages are good? Nature to impress people, can not see the annoyance. At the same time, its design process can also be full of fun. So what should you do to design a good 404 page for your site? Here are a few tips and tricks, as well as some good examples.

　What is a 404 error page?

When a site visitor enters a nonexistent page, a 404 error page is displayed. The reason may be that the page was removed, the server or network connection failed, the user clicked on a bad link, or entered the wrong URL.

Typically, the 404 error page displays one of the following messages:

404 Not Found

HTTP 404 Not Found

404 Error

The page cannot be found

The requested URL is not found on this server

In the overall design of 404 pages, there are two choices: normal 404 pages or custom 404 pages. Ordinary pages simply throw out the information above and do not involve design content. Custom pages require you to design and provide options.

A good 404 error page should tell the user what to do next when they accidentally enter. It should provide useful information to help visitors stay away from your site and then find the information they need. (It's better if the page itself is beautifully designed.) )

Basic prerequisite Information

To ensure full effectiveness, the 404 error page should be inherently simpler. It should indicate that the user has encountered an error (obvious) and what can be done to get out of the page.

And the big pile of technical terminology should not appear on the 404 page. (otherwise it would scare away users.) In fact, even the headline "404 Errors" should not appear on the page, as many users have no idea what this thing means. What you should do is show more meaningful information, such as "no page found".

Other important information is essential to 404 pages. All in all, the key to design is to keep the user from clicking on the page when the page goes wrong instead of closing it.

1. A conspicuous title or text indicates to the user why the current page appears. It's annoying to see that the page you're opening is not the same thing as expected. Be sure to let users know that the page they are opening is incorrect, but the site you are landing on is fine.

2. Search. Provides the same (and consistent) search functionality on the 404 error page As other parts of the site. This makes it possible for users to find the pages they want to visit.

3. Links to homepage and sitemap. This design element can contain headings or footnotes that match other parts of the site.

4. Other simplified information. It is recommended to delete complex navigational functions. If the user goes to the error page, you simply provide it with a few simple options that can be directed to the correct location. If you have too many options, you can make your users more frustrated or confused.

5. Add conspicuous operation tips. Tell the user what to do next.

Give 404 pages A Purpose

An important part of the design process is the purpose when considering 404 pages. Add features that make the page look good and useful.

Google Webmaster Tools offer a number of useful suggestions for what information should be included in a custom 404 page. The recommendations include:

Explicitly inform the user that the page they are looking for cannot be found. Language should be friendly and seductive.

The 404 error page should match the look and feel of other parts of the site.

Consider adding links to popular articles or posts.

Provide users with a channel to report bad links.

Let the network server return the actual 404 HTTP status code when it receives a request for a missing page, lest it appear in the search results.

Use the enhance 404 tool to embed the search box on a custom 404 page.

Use the change's address tool to inform Google of the action of the site.

In addition to the above, there is a hint to designers: play the creative. 404 pages, as long as the technology allows, is not necessarily boring boring.

Recommend a group of Demystified 404 sites, you can learn from: "Come on! Make your 404 pages More Loving"

Design 404 pages with a purpose

When considering the design of the 404 error page, you should first think about its direct contact with other parts of the site. What is the atmosphere and tone of the overall design of your website? How to match 404 pages.

A good error page should be able to seamlessly connect with its site. If your site uses a lively and humorous tone, then 404 pages should be the same. In addition, color and graphic use should also be consistent with the site. But in the design process, must be cautious, do not put the blame on the wrong page to the user's head. (This happens more often than you think.) )

The design of the error page should be an integral part of the overall design plan.

Keep the design consistent. Use the same color, font, and graphic style as other pages on your site.

Keep the brand identity. Use the same logo, title, and footnote processing to help users identify your site.

Maintain a visual simplicity. On the wrong page, less is more.

Do not let the user scroll the mouse. The design should be limited to one screen.

Don't use too many gimmicks. While it's a good idea to maintain the same tone and feeling as the overall site and brand, too much content can make users forget what they're looking for.

apologize for that. When the user enters the error page, you are absolutely fine.

If your site needs to log in, you can add a login feature. (is the error due to user need to log in?)

Play the creative, or show interest. Don't forget to test the page first. Ensure that all users understand your design.

If you use the phrase "404 errors," You should add a line of text telling the user what it means, or how they should proceed next.

12 Excellent examples

It's a special feeling when you run into a good 404 error page. It can slow down the annoyance caused by faulty links. The following 12 pages will definitely make you linger.

　Deviant Art

Scientific access to the Internet.

　　Gig Masters

Ifolderlinks

　Lego

　Limpfish

Magnt

Mattel

　　Npr

　Steve Lambert

Titleist

Tobi

At last

It is difficult, but not impossible, to design an interesting and creative page that has been created as a result of a mistake. Designing a good 404 page requires you to combine simplicity, practicality, and design talent.

What else do I miss about the design of the 404 error page? Have you ever built a good 404 page? Please leave us a message ^ ^