404 Design
This is part of my collection of design notes on web interface elements. The idea is to document the design thinking behind some of the common design patterns currently out there.
Purpose of the 404 page
Visitors usually end up on the 404 page by accident and the purpose of the page is to inform them that something went wrong and provide instructions on what to do next. In most sites, 404 page shouldn’t expect high visits but for sites that hosts temporary contents which can be shared, it’s likely to encounter frequent visits to 404 page due to expired links. Good 404 page should:
- Have company branding to acknowledge that visitors are still on the site
- Indicate that something went wrong
- Have instructions on where to go next (e.g. go back to home, visit x page)
- Keep visitors clam or even delight them
Examples of good 404 page design:
Mailchimp’s design hit all the marks based on what I consider a good 404 page. It contains strong branding, indication of what went wrong, what to do next, and it delights the visitors.
A List Apart’s 404 page provides really strong branding (and keeps the blog site elements) and quite a few instructions on what to do next. If you are browsing A List Apart and ended up here, it’s hard to feel lost because this page is just like another post.
Heyzap’s 404 page reflects the fun aspect of the brand and provides a link back to the home page. In addition, the entire page is an interactive game that can potentially makes the visitors actually feel good about finding this page.
There are many designs out there that are creative but missing a few components. In my opinion, the design can be stronger just by adding a simple what to do next instruction or have a stronger branding. I will provide a few example links below:
This is part of my collection of design notes on web interface elements. The idea is to document the design thinking behind some of the common design patterns currently out there.
