OOPS! Examples of Creative 404 Error Pages & Mistakes.
Generosity of Eye: Art Transformed into Education

404 Information & Great User Experience

The first step for creating your own 404 Error page is to have an idea of unique content that represents your unique work. If your 404 page is delightful, entertaining, or engaging, this is an opportunity to engage with your viewer . . . and most likely that viewer will not abandon your site. 

Beyond the great idea (a topic covered in a previous post), a primary consideration is the user experience on your website. 

User experience is the future of web design. As the web matures in the information age, it is no longer simply about providing information. More and more, the user seeks an engaging experience while visiting every website. So, even when the visitor arrives at your 404 error page, this can be an opportunity to re-engage and help the use get back to the information or items they were looking for.

Beyond the aesthetic content, what information should your 404 page include: 

  1. Acknowledgement that the link or URL did not work;
  2. Header with your website identity;
  3. Contact information so visitors can either report the problem, or ask you where to find specific information;
  4. Search box that can guide the viewer in their search;
  5. Website navigation options should include a return to your home page along with standard website navigation header and footer;
  6. Optional: an automatic re-direct return to your home page. This will be covered in a future post. 

Here are some examples of 404 error pages with the information that creates success!

Pinterest-404 pageThe Pinterest 404 error page takes the simplest practical approach. It acknowledges a mistake and suggests other Pin boards that are popular, engaging options to look at. It can't get any easier than that while it still keeps the viewer on Pinterest, their primary goal. 


Check out this 404 page for  Audiko 404page

Audiko (right.) The graphic image is so great you don't even care whether you can't find the page you wanted. The search box is helpful for getting back on track to find what the visitor was looking for on this website. Their objective is to keep their customer on the site. 


Below is the 404 error page for the Computer History Museum.404-computer-museum

404-computer-museum-oopsThis satisfies all the important criteria with the acknowledgement "Oops!" and explanation of the mistake. The error page keeps  museum identity, thematic graphic, search box, and a link back to the home page. It could be better with more graphics, but it does the job. 

404-art-biz-coach-makevoer-lostAlyson B. Stanfield uses a personal and effective graphic with a profile shot of herself lost inside of an art installation by Tobias Rehberger at the Denver Art Museum in 2010. This image is inserted into the 404 page along with the acknowledgement "Oops your are lost now."

This error page contains the important components for the best user experience on a 404 error page - a  graphic, clear website identity, link for contacting her directly, along with navigation bar at the top with promotion for her upcoming workshop. Functionally it is a great user experience. Alyson has changed an error into an opportunity.

A personal profile approach (as demonstrated by Alyson Stanfield) could work for any artist's or maker website. 

Caren404-Beaded-Garden-Flowers-Click, from Beaded Garden, has allowed me to share her 404 error pages. She purchased the sad flower picture from istock photo. 404-Beaded-Garden-FlowersShe said, "I believe respecting copyright is important so I purchase images if I need them.  There are some pretty inexpensive [images]."
She also said that "whenever the 404 page is landed on, I get an email that tells me what page the user was trying to access so I can fix it." What a great idea.  

The image of the sad flower relates to the Beaded Garden style of the work, and offers a text explanation to the user about how they landed on the 404 error page, giving navigation options to her website. There is also a Google search box at the top. This 404 page effectively keeps the user on her site for potential engagement and possible purchase. 

The final 404 example for an artist's 404 error page is this outstanding example from Dilbert.com. Thematically consistent with the site, it is a real treat to find a comic that explains where you have arrived. The navigation at the top will take you back to exploring more on the site.

P.S. Click on any images including the Dilbert cartoon to visit the 404 page.