A very common error that you come across while working on internet is ‘404 error’ or ‘Page not found’ error. This appears when you enter a web address that does not exist.
The message that appears on this error page should be designed in a way that does not give user a negative impact. Along with giving a reason of the error, this page should re-direct user to an actual page of the site.
When you see a ‘Page not found’ error while browsing on internet, you feel very frustrating.
Many popular websites have designed error page in a way that despite of an error it gives user a pleasant user experience that tells him about the error in a humorous way and guides him to a correct path.
It means when you design your website, do not neglect this page and spend some time to design it properly as it is important for your users.
Here are 24 examples of 404 error pages that will help you understand how to design a user-friendly error page.
1. Adobe
Adobe’s error page provides a pleasant look at once with a large visual image on right side and a short message in the center of the page.
The title of error page is mentioned beneath the top bar: 404 Error Page. This title is not much prominent on UI and at once user looks at the idiom placed in the front and the visual image on the right side.
The error description uses an idiom that appeals the user. But at the same time, it is not necessary that every user understands the idiom. However, the message detail is mentioned in simple language and says: Sorry, that page can’t be found. No reasons are given that why this error has occurred.
The user is given two options to remove this error. One is to move to the Adobe home page, the other is a search option that helps user to move to Search page where he can find the required items from the site.
A big visual image related to the idiom displays in front of error message that looks attractive on the screen.
Like other site pages, Sign In option and link to common pages are part of the Error page.
2. Amazon
Amazon provides a simple and attractive error page.
‘Sorry’ mentioned in large fonts gives user an idea that something is not correct here. The error description says that we couldn’t find that page. No reason of this error is mentioned on the page.
User is given two options to remove the error. He can go to the Home page of the site, or he can try searching on the entire site.
A big visual picture of a dog is providing a light impression to user. A link to Amazon blog with an interesting tagline gives user a humorous experience. User can follow the blog link to go to Amazon’s blog page.
3. Awwwards
Awwwards’s error page is simpler yet descriptive one.
The page displays a large image of 404 that gives user an indication that error has occurred. The error message describes the error detail and reason in a user-friendly language.
The page contains common links and options like any other page of the site.
A menu displays that allows user to go to the other site pages and an option to Submit your Site displays on the top.
Link to coming conferences is also shown for the user so that he can follow them if he wants.
UX World is an approved Educational Partner of the Interaction Design Foundation, the world’s largest UX Design learning community.
Get 3 months of free membership to learn UX Design here!
4. Behance
Behance’s error page is like other site pages with an error message in the center of the page.
The error message simply states that page is not found. However, no reason is mentioned that why this message appears and what user has done wrong.
To remove error, they provide user an option to checkout different galleries and projects on Behance. For this purpose, a list of categories is displayed so that user can click on them and go to the projects belonging to that category.
Popular design projects are also displayed on the page.
5. Canva
Canva’s error page displays a blurred background image with an error message inside a dialog box.
The error message is not user-friendly and written in technical language. This is not clear that what is the error, what is the reason of the error and what user should do to remove the error.
However, a link to Canva’s home page is visible at right bottom of the page that user can click and go to the home page of the site.
6. DesignerNews
DesignerNews’s error page is much simpler with no text on it.
A large visual image of 404 with no description of error displays on the page.
Perhaps an assumption is used here that user is learned enough to understand the 404 error code. Though this is not a correct assumption and a designer should not leave such gaps for the user.
A link to home page is given to go to the home page of the site.
7. Dribble
Dribble’s error page gives a nice and lighter look to the user.
The page displays an error message along with a visual indication of error type as 404. No other description of error is given on the page.
There is an interesting option for the user that he can use to change the theme of error page. While he is on the page, the design allows him to play with the color theme and see the changes at the same time in 404 image.
In addition, links to Home and Contact page is given the user to move to those pages.
Search option allows user to find out what he wants to see.
8. eBay
eBay’s error page is the simpler one.
It contains all common options that display on any other page of the site.
Error message is displayed in plain text in the center of the page. There is no particular error type, description or reason mentioned in the message.
Link to Home page is available so that user can start over again. In addition, a link to Help is given so that user can find out the required help topic.
Search option allows the user to find an item from the site that he is looking for.
9. Etihad Airways
Etihad airways error page is like other conventional pages of the site with links to common pages.
There is no visual indication on UI about error. The page title shows that this is an error page.
A detailed and good description of error is given beneath the title that also contains link to Home page.
In front of error description, few common options are given as thumbnails that allow user to further explore the site.
10. Flickr
Flickr error page is very simple and does not include much information.
Page title is 404 that indicates that an error has occurred. The error code is also mentioned in technical language which is not understandable for the user.
User is given the option to go through the best photos to remove the error.
Other common options display just like other site pages. Search option allows user to enter name of photos, people or groups to find them.
11. Notes
Notes displays an error page which is simple yet intuitive.
A cute image indicates about the error with a description that why this error has occurred.
The only other thing is the link to Home page. It can be seen that user is asked to get in touch with the site owner, however there is no such link or address for the user to follow.
12. Google
Google’s error page is very simple with very less information.
The language being used is not user-friendly. An image displays a broken robot holding a tool in his hand which is not going along with the description as no one seems here to help you resolve the error.
There is not any visible option to go anywhere from this error page. The user can click on Google image to go to the Home page.
13. Interaction Design Foundation
IDF error page uses the same template that is being used for other pages of the site and at once it is difficult to find out that this is an error page.
The page title does not indicate anything related to error. However, a small icon with 404 text displays that is not much visible on UI.
There is an option to send a custom error message that helps to resolve the problem. Also, the page contains link to an article related to 404 error pages that is a way to move the user to site’s articles.
Like other pages, there is a link to common site pages and Home page. Login option is also presented on the screen.
UX World is an approved Educational Partner of the Interaction Design Foundation, the world’s largest UX Design learning community.
Get 3 months of free membership to learn UX Design here!
14. Instagram
Instagram displays a simple error page with just one line of text.
The error message displays in plain textual form with good description and possible reasons of this error.
Login option and links to Home page and other common pages of the site are available on UI.
15. Justinmind
Justinmind’s error page uses a nice theme that gives user a feeling of some error at first glance.
The page contains error message in the center with large fonts. The error description is written in simple language, however there is no reason that why this error has occurred.
In addition to common links on top bar, the error message also ends up with three options for the user where he can go from this error page.
A large visual image displays along with the error message. Overall page theme and layout looks appealing to the user.
16. Lego
Lego’s error page gives a nice impression to the user.
It displays error in the form of an image where a Lego man is trying to connect two wires. However, error description is not much prominent on UI.
Link to Home page and other common pages of the site are given.
17. Linkedin
Linkedin’s error page uses a pleasant template to display error message.
Error message title and description is placed in the center of page. There is an option to go to Help center and find the answer of your questions.
Link to Feed and Home page are given along with common page options. There is an option to change the language of the site.
18. MailChimp
Mailchimp’s error page uses a good design template.
It contains an error message along with an image where an animal is trying to search something deep inside ground. The error description does not say anything about the reason of the error.
Links to Home page and common site pages are also given. Option to login in the site and searching the site are displayed on UI.
19. Medium
Medium displays a simple and useful error page.
It displays an error message with a title of 404. Though no reason of this error can be seen on the page.
Link to home page and search option display where user can find any article or author.
20. Mockplus
Mockplus error page is simple and useful.
A big visual image displaying 404 looks good and user can immediately depict that this is error page without reading any text on the page.
The possible reasons of error are described in a simpler way.
Links to common pages can be seen on the error page just like any other page of the site.
UX World is an approved Educational Partner of the Interaction Design Foundation, the world’s largest UX Design learning community.
Get 3 months of free membership to learn UX Design here!
21. Qatar Airways
The error page of Qatar Airways seems like any other page of the site.
A big image of air hostesses displays on error page does not give impact of an error page. However, page title shows the text Page not found.
The description says, ‘Please select a different page’, though there are not any available list of pages seen at the same place. Detailed description mentioning error reasons is available but not much prominent on screen.
All other common links, link to Home page and search option are visible just like other site pages.
22. Sitesee
Sitesee error page is very simple with a little different content.
Instead of displaying a conventional error message, they said that there is nothing to see. They ask the user to send a tweet to them so that they can solve the problem. They move the user to the Twitter page of the site.
The option to go to the Home page of the site is available on the screen.
23. UI Movement
UI Movement error page uses a simple design just like other pages of the site.
It displays an error message that page is not found along with small description. Link to Home page is given in the error page.
UI movement wants to take advantage of this error page and gives the user a Subscription option. This option allows the user to subscribe the site, so he may get some good articles/blogs in his email regularly.
Remaining options on UI are the same as displayed for any other page of the site.
24. YouTube
YouTube error page displays an interesting and simple design.
A funny image shows where a monkey is trying to search something which gives user an idea that website is looking for something that it couldn’t find.
A simple error message displays with the image. This message does not give any reason of the error.
However, it presents user with an option of searching something else that he may able to find on the site.
Conclusion
A user-friendly error page contains:
- An image related to the error
- Error title that is prominent on screen
- Description of error in simple language containing: error, reason, solution
Preferably,
- Error page template should be different than other site’s pages so that it grabs user’s attention when it opens.
- Theme should be like the site itself.
Thanks for reading. Find more related articles at uxdworld.com.
- Get my free 5-day UX design course via email. k
- SIGN UP to get Free E-Book: UX Design Fundamentals to learn best practices, UX design process, and career advice from expert designers.
