When I made my 404 error page for my website, I naively made it a "404 redirect" page.
A "redirect" means that when you land on my 404 page, in about five seconds it takes you back to the home page. This is an optional approach to how to use your 404 page.
Ever since, I have discovered that the Los Angeles County Museum of Art uses a 404 redirect, I feel much better about this decision.
When you land on the 404 error page for the Los Angeles County Museum of Art, it automatically takes you back to the home page and navigation.
So your 404 Error page can be static....or a redirect.
The first step for creating your own 404 Error pageis 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.
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:
Acknowledgement that the link or URL did not work;
Header with your website identity;
Contact information so visitors can either report the problem, or ask you where to find specific information;
Search box that can guide the viewer in their search;
Website navigation options should include a return to your home page along with standard website navigation header and footer;
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!
ThePinterest 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 (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.
This 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.
Alyson 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.
Caren, from Beaded Garden, has allowed me to share her 404 error pages. She purchased the sad flower picture from istock photo. She 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.
Before tackling the technical issues of a 404 error page on your website, try to think of an imaginative idea that can turn a WWW mistake into an artistic, cleaver, interesting and entertaining 404 error page consistent with your art work, media, signature style or brand identity.
My 404 page uses a custom made OOPS! Flower Pin (shown above). My OOPS! Flower Pin was preceded by an earlier idea, the Goof Off Flower (left).
The images for your 404 page can be anything you want it to be, but for artists and makers, the images can and should be consistent with the style of your website and your art or craft. Seems to me it is a bonus for your website if the viewer experiences something special, even in the midst of a technical error. Finding original content is a sure winner on the web. And the content for this 404 page isn't a permanent commitment. You can change your images anytime you want.
Below are a couple of presentations found on the Internet with lots of great 404 page ideas. Following that are more 404 examples from art museums that successfully use the artwork in their collections to present memorable 404 error pages.
The presentation below has even more 404 pages (but most of them are boring and represent a functional corporate solution). Don't let your 404 page look average. Quickly Scroll through the whole presentation as the Lego 404 page (about three quarters of the way through) is fabulous...so keep looking.
As a creative artist and maker, your 404 Page can also reflect your creativity.
Here is the 404 page for the Museum of Modern Art. This is what I would consider an effective use of art in their collection for the 404 page - an Edward Ruscha oil painting "OOF" from 1962.
The 404 page for the Walker Art Center uses three paintings with the numbers 4, 0, 4 from Jasper Johns, Robert Therrien, and Jasper Johns respectively. As you can see below, the use of artwork for the 404 ties directly into their collection.
The San Francisco Museum of Modern Art takes an image from Rico 98 titled Found LOST Bird Poster(right). Thematically it fits right into the concept of a 404 error page. I am not particularly fond of all the white empty space on the page (shown below), but keeping the image small keeps all the pertinent information "above the fold."
"Above the fold" is an old newspaper term. All the important information was above the fold so it was seen when the folded paper was sold at the newspaper stand. In web design it translates to the fact that all the relevant information is visible without scrolling down. "Above the fold" is an essential part of good 404 error page design.
Here is how the Minneapolis Institute of Art plays on the "lost" theme of a 404 Error page.
The Randolph Rogers "The Lost Pleiad"statue is perfect for a 404 error page. It is just wonderful how this marble statue from 1874 is given an unanticipated new context in the 21st century.
The MIA 404 error page also included a Google search box so that the viewer can refine their search without leaving the site, however it would have been better to squeeze all of these features including the statue credits above the fold (perhaps left or right justifying the image). Then the text and search box would fit on the other side.
Despite my advice to be creative, keep in mind that a 404 page should also help the viewer navigate your website. Here is an example of a very creative page that fails to support the navigation purpose. While this is a cute picture and captures the motif for a 404 error page, it is a 404 fiasco, a huge website blunder. Why? Because this has no specific identity for the museum and worse, no navigation back to the website. It leaves the viewer stranded with nowhere to go. This is a big mistake.
Your 404 page should always:
1) reinforce your identity,
2) engage the viewer,
3) keep the viewer on your website
The next post in the series "OOPS 404 Error Page" is a list of recommended information for creative and effective 404 error pages and some hints to avoid some common missteps.
O.K. you've got the idea....think about the potential images for your custom 404 page.
It isn't so hard to do after all and increases the usability of your website.
Why do you need a custom 404 page? A custom 404 page, can make a problem with your website into a fabulous experience. It is an opportunity to keep your customer, client or fan from becoming frustrated and leave your website. A great 404 page can reinforce your identity as an artist, maker or brand. This presentation below by Renny Gleeson, "The Story of the Page Not Found" explains many of the issues.
Why did I create a 404 error page? In an effort to improve my website SEO (Search Engine Optimization) I changed the URL for about 50 pages. Many more changes are in progress. Changing the URL to an SEO optimized format drastically increased the risk that I might make a mistake resulting in a broken link. Though I created redirects for every change (more information on this soon), even a mistyped URL mistake by a future customer can create a 404 error.
404 To Direct or Redirect? That is a question. Without knowing what I was doing, I created a 404 Redirect. In other words, my 404 Error page goes back to my HOME page. This is optional. My 404 Error page could just be a custom page which lets the viewer decide where to go. Think about either option for your own 404 page.
Future posts will offer examples of great 404 page ideas and cover the technical issues along with optimizing your website for SEO and greater visibility.
