404: Turning an Error into an Opportunity
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's 404 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.
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 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.
Blizzard'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.
Dribbble'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.
Mint'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.
ESPN'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.
Hard Rock'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.
AMC Theatre'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.
In the Talk, he mentions Athletepath's 404 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.
Promising Options
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.
Blizzard'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.
Dribbble'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.
Mint'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.
ESPN'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.
Hard Rock'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.
AMC Theatre'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.
