Excellent 404 page design guidelines to be missed

Life is not 404, read all the net also disconsolate. Yes, if you've never opened 404 pages, you can say that you almost never really used the Internet.

The reason for the 404 page's appearance is simple: When you enter the link, the browser to the server request, but the server can not resolve the URL you provide, the server will return to you a "404 for Find" page, in other words is "the server is normal, just did not find the page you want."

Indeed, the appearance of 404 pages is so simple. It was born in the era of Internet and browser, but after nearly 20 years of evolution, it has already evolved an internet-based subculture--404 page is not easy.

So, to create a perfect 404 error page, there are some rules to follow.

Design

First, 404 page design should not divert the user's attention, so that users offset the original purpose. Indeed, the overwhelming majority of users think 404 pages are annoying. So, 404 pages should be considered at the beginning of the design of the website, and make it help users to find what they need, and in this process to avoid users to jump to other sites.

As a secondary goal, the 404 page Design can also provide an opportunity to build and strengthen the brand. If the 404 page is designed to be positive enough, it can leave the user with a lasting impression. In general, users encounter 404 of pages generally because of "open way is not" caused, it is a negative experience, but if 404 pages can help users achieve the goal (in fact, this form of crisis PR), then users may change the view of your site.

In order to avoid the user to 404 pages of antagonistic emotions, the use of color and pictures of the page should be controlled by the proportion and visual effects. Excellent web design in order to strengthen the brand.

Social media

Providing social media links on 404 pages is a good idea to help misguided users solve their problems and to attract more users through social media. Adding Facebook, Twitter, Google +, TUMBLR, microblogging, and micro-mail links to 404 pages will allow users to interact through social media to find solutions without solving problems. Often, other users or fans may be able to give the user a certain amount of help if the official cannot give the solution immediately.

Important Links

Each site will have pages that are frequently accessed by users, and these core pages will lead users to other important information. It is worth mentioning that, in 404 pages to show the site's entire site map is not appropriate, because the user may be lost in the meantime, the user can not find what they want, and then continue to search from dozens of links to what they want, this experience can imagine how bad. Therefore, at this time, it is best to set a maximum of 6~7 an important link. Typically, they should contain the following links:

Back to Home

Recent Posts

Search box

About Us

Contact Us

Of course, the site's search function can be cured on the page, and the content-oriented web site or blog type of site can be recently popular posts added to the site, played a role in drainage.

Provide online contact method

As a way of communicating with users, it is a sincere solution to provide an inline form on page 404 to let the user leave a message. Users can leave contact information through a form, problems encountered, or trying to find the message and content.

If the site itself is biased to sell, then online customer service is also a good solution, directly with customer service online communication can hold more orders, is not it? Direct communication with customer service can find what they want.

Of course, whether online form submission system or online customer service system, please keep the simple and direct form, do not let users get lost in complex interactions and links.

Humor and Multimedia

When the user enters the 404 page, can embed the automatic playback audio or the video on the page, introduces the website to the user or guides the user. In the video or animation to inject the appropriate humor and selling Meng, can alleviate the user's resistance to misuse.

The control of the display of the degree, may bring a surprise to users, happy mood, if you can guide users to solve the problem is better.

Next, I'll show you how to design excellent 404 pages with the examples I've collected below. Many of these pages are interesting and some of them have yet to be improved, but they are quite prominent in some ways and worth learning.

craigslist

Craigslist's 404 page design is quite simple and interesting, and it provides a homepage link to guide the user.

Niki Brown

This 404 page, in addition to providing some important links, also provides a few secret links, when the user points open, you will find some quite good music. This approach will increase the viscosity of the site.

Cubeecraft

As a paper mold class site, its 404 pages highlight the characteristics of the site: it not only selected a character related to the error, but also provided a picture download link--paper mold users can print it out, the role of the paper mold, originality.

Project-euh

This is a very unique 404 page, when you enter this 404 page, the system will have a machine tone to remind you to enter a 404 page, and the image provided in the page is actually an animated link, it will lead you into a fun random page.

Technorati

This is a simple error page, and it also provides subscriptions and recent articles that may attract a subset of users.

Acme

This is a unique 404 page, but there is no doubt that it can add more content.

Expansion broadcast

If you do not find the information you want, you can submit the feedback via the form on this page. Facebook and Twitter links on the page can also help users get more information.

Attrition

This 404 page design is simple, the information is also very intuitive.

Orange Coat

The 404 pages that use flowcharts to guide users to information are very refreshing.

Disney

Disney's 404 pages Summarize common questions and answers and add some useful information, such as download links.

Design Zillas

What's a good 404 page? This is a typical, visual design atmosphere, social media links complete, contact the way clear.

twingly

It looks good to pass the message through the character "ninja".

Webo Group

This is also a simple 404 page.

Griffin Technology

This 404 page also uses a pleasing illustrator, adding contact methods and support teams.

Nosh

This is a unique 404 page that uses video to attract users to stay on the site. As a client-side site, Nosh will also add the website's Android and iOS client links to the page. Nosh does not even forget to leave the entry of the registered website on page 404.

Yeplike

Compared with the ordinary 404 pages, Yeplike is very attentive.

Trentwalten

This 404 page does not do well in information presentation, but the way it displays random pictures on the page is worth learning.

Marvel

As a veteran animation manufacturer, Marvel provides an advanced search function on 404 pages that is absolutely necessary-helping users find the issue they want in their mass anime is really not an easy thing to do.

Mozilla

Mozilla's 404 pages provide users with tips for linking to the home page and bug feedback.

Thcnet

Thcnet's 404 page is also a unique, it does not help the lost users find what they want, but ... Provides the user with a 80 's early text adventure game Zork. If you are a little bit familiar with this European and American users, will be fascinated by this. At least, for me, it was a great surprise.

Limpfish

Limpfish's design is rather humorous, but the information provided to the user is not complete enough to be upgraded.

Starbucks

Starbucks in the 404 pages, to provide users with a home page links, site navigation and feedback page. The page keeps the Starbucks ' own style, elegance and simplicity.

Heinz

Heinz's page design is also very neat, the most important thing is that it is very clever to integrate their own products into the page design.

Inspiration Bit

This 404 page provides users with popular, recommended, and most popular information. The site also provides access to social media.

Realmac Software

Read the "Hangover" series and "due" students, see this page, will definitely smile. Links to Twitter, Flickr and Vimeo are also available at the bottom of the site.

Home Star Runner

This 404 page uses a simple cartoon picture and humorous text, rather with a sense of humor.

Studytonight

Studytonight uses a cartoon lion's anime role, with a corresponding copy to attract users.