404 Error: Page Not Found. Ugh! Isn't that such an awful thing to come across? The only thing worse than hitting a 404 page is encountering a standard, boring and useless 404 page.
If you're not exactly familiar with 404 errors, it's the default page when you're asking a website for a page and it can't find it. This usually happens by following a bad link. A 404 error is in a family of browser errors including bad request, gone and forbidden.
There's a short Ted Talk
from May 2012 (only four minutes and four seconds long, to be exact) by Renny Gleeson
all about 404s and how they're missed opportunities at your site. Gleeson is the Global Director of Interactive Strategies at Wieden+Kennedy, an advertising agency.
A user can hit a 404 page for a number or reasons. The link they're following from another site could be wrong, or they misspelled the URL. Maybe they followed an internal link on your site that's moved and you forgot to update it with the new location. No matter the reason, according to Gleeson, a 404 error page is like a slap in the face for the user.
"What a 404 page tells you is that you fell through the cracks," Gleeson said in the Ted Talk.
In the Talk, he mentions Athletepath
page because "finally there was a page that actually felt like what it felt like to hit a 404!"
Athletepath's 404 page, while funny, is still functional for the user. The top navigation and footer are still accessible and they give the user options for what to do next. Athletepath also acknowledges that it could be their fault the user ended up at the error, and provides a way for the user to report it.
Which brings us to the different kinds of 404 pages. There are silly and funny ones that are basically useless, and there are informative ones that maybe aren't the fanciest. Click the photos to see the different 404 errors in action on their respective sites.
Styled Yet Useless
These sites have taken the time to design a 404 page, but they haven't added any assistance to the user.
The Internet Movie Database
's 404 isn't much more than the standard 404 error page that the browser will display. If you keep refreshing it, the page will show different modified quotes from popular movies. If you're a movie fan it's at least slightly entertaining. However, it only displays two links for the user. The home page and the specific movie page of the quote that's displayed. The search bar isn't present, and neither is any of the navigation. Plus, it doesn't empathize with the user that something's gone wrong.
All entities of Google
, including Gmail, Google+, and Google Earth, display this essentially useless 404 page. Sure, it's a little cute and the Google logo is a link back to the Google home page, but there no information at all for the user except showing them the URL they typed in. The links normally at the top right for things like Gmail are no longer accessible and the footer has completely disappeared.
We've come across a few sites that are starting to get the point, by alerting users that they've reached an error page and have included a limited amount of options for them. These pages are missing something essential to help the user on their quest to find a specific page, be it a search bar, navigation, or helpful links.
We Are Spry
, a digital interactive agency, has a funny error page. The giant looping video of the sad dog is hilarious. But, although there's a link for the home page, and the navigation is all still accessible, there's no other help for the user, and nowhere to report the issue if it happens to be internal.
's error page cleverly makes it look to the user that the site is literally broken. The navigation, though skewed, still works. It's not just an image that was uploaded to look like the navigation. The footer is all still accessible. While this page is styled, it's still missing a place for the user to submit an error or search for what they might have been looking for.
's error page is styled inline with their basketball theme and has a link to contact them about the error or the option to go back to the home page. While those are all great options, all the navigation is missing and a search bar isn't available.
s 404 error page is visually appealing and includes some help for the user. However, the links that are available to the user are minimal and there is a lack of any kind of navigation or search bar.
Informative but Boring
There are a bunch of sites that are extremely helpful to the user, but are missing an opportunity to further their brand
by creating something funny or memorable for the user to look at.
's error page creates a lot of different options for the lost user. Is it missing an opportunity to maybe show some of their funny "Not Top Ten" moments? Surely. However, all of the navigation is still present and the search bar is enlarged and front and center. It doesn't include an option to report the error. ESPN's error page is a little more usable than many other sites since there are two different types of errors that the ESPN page can display. If you've typed something that it recognizes as a word it will do a search of the site and show you a list of options including the words you've used (see the above photo).
If ESPN can't figure out
what you're looking for based on what you've typed in, then it will present a list of the top searches in the last 24 hours and another list of the most recent searches.
Whole Foods Market
's site is similar to ESPN's in that it lacks an interesting element, like displaying something like broken eggs, but is still extremely usable. All of the navigation is still accessible and it presents the user with a list of what they might have been looking for as well as a link to the site map. This site also doesn't have an option for the user to report an error.
A Little Bit of Everything
These 404 pages are not only interesting, they're also extremely usable.
's 404 page is a great example of a usable yet memorable error page. All of the navigation is still accessible to the user and the search bar is prominent. While this page doesn't directly ask the user to report an error, one of the links that's displayed under the search is "Contact Us." Since Hard Rock is about music, they've made their error page all about music too, and done it in a funny way. It's also, in a way, sympathizing with the user for finding the "lame" error page.
's error page, though brief, is wonderful for many reasons. Since it's movie theatre, they've used a play on a quote from Star Wars
(which a bunch of different sites not related to movies use, like GitHub's below) and added some playful text for the user. While this 404 page doesn't include navigation or a place to report an error, it includes links to the most popular parts of AMC's site and is visually interesting.
While simple, GitHub
's error page is helpful to the user as well. The sign in portion is still accessible and the search bar is prevalent. If a user wanted to report an error, he'd be able to with the prominent "Contact Support" link.
A lot of people have different opinions about what makes a great 404 page. Some people think it must always contain a site map or something similar. Others think the 404 page should never include the main navigation because it should stand out as different from the rest of the content on the site.
Including "404" on the error page isn't always necessary. While a lot of people do know what 404 means, to a lot of people it's just a bunch of numbers their computer spit out at them.
Is there a wrong way to present a 404 error page? Definitely. The absolute worst things you could do is not make one or merely suggesting that the user "go back." You might as well have not taken the time to create a 404 page if it only contains a link back. A lot of users stumble across sites through links on other sites. If you only give the option to "go back" then that user will end up back at the site they got your link from. It's completely unusable for them.
Is there one best way to present a 404 error page? Not really. You want to get to know your user and figure out what they would want to see or what would be most helpful for them. The last three sites are great examples of understanding and assisting the specific users for those sites.
"Little things done right actually matter and well designed moments build brands," Gleeson said. "A simple mistake can tell me what you're not, or it can remind me why I should love you."