I love the small details in web design. One of them is design of 404-pages (error pages). So I’ve worked a bit on my 404-page, and made three quick tips for 404-design. You should also review your 404-page:-)
When are 404-pages used?
404-pages are used when the content that should be shown on a given page doesn’t exist. That happens when:
- The user tries to navigate to a page that doesn’t exist (ie. by typing a wrong URL in the address-bar)
- When a link points to a page/content which has been deleted or moved to a new URL
- When there’s an occasional glitch on the site
What makes a good 404-page?
An error page is just plain annoying for the user. So, in many ways, the main purpose with the 404-page is to minimize damage, and help the user overcome the obstacle. The standard WordPress-404 page is typically something like a message in plain text:
Oops! That page can’t be found.
It looks like nothing was found at this location. Maybe try a search?WordPress TwentyNineteen Theme
That can be spiced up a bit, and turned into a better experience for the user!
Tip 1:Be a bit more amusing
There’s no obvious reason to be way too serious, especially when You have led the user into a dead end. So a little self-deprecating humor fits a 404-page well. At least if You’re not an undertaker – in that case, You should probably not crack the greatest jokes on Your 404-page.
The humour doesn’t necessarily have to be visual – a simple, little wordplay can also do the trick. Have a look at the web dev tool Jekyll for a great example.
Tip 2: Entertain the user
Tip 3: Help the user move on
The 404-page shouldn’t run off with all the attention. The user did after all get there when looking for something else. So help the user find other relevant content on Your site. Include a search form, links for the latest news or products or the likes in order to make it easy to move on.
As mentioned, I’ve made a new, simple 404-page for myself. For the graphics, I’ve found an old photo of myself, glitched it on photomosh.com and used it as a full-screen background. I like the idea of a glitched photo, now that my website is primarily about photography/videography:-)
I didn’t spend too much time on the text. I have used the words “damn” and “major glitch” – they fit my tone of voice well (my personal way of talking).
After a little explanation, I give the user the possibility to go to the home page or search the site. I should probably spice the page up a bit, and show the latest 3-4 articles. But… I might do that later. Until then, enjoy my new 404-page😉