Typewriter 404 Error Page
UX Writing & Design
It is always a challenge in UX design to handle errors gracefully. I often screenshot and share the 404 pages I've discovered that are able to remedy an unfortunate situation through humor and empathetic design. I decided to design a 404 page for my own site to challenge myself. I don't expect that users will run into many errors on my site, but at least I can make it a less irritating experience should that occur.
The best 404 pages succeed by using the following strategies:
Acknowledge the issue and the user's frustration.
Utilize humor and empathy to make the experience less annoying.
Maintain a design consistent with the site and brand style.
Give the user options for returning to the home page, search box, or other links.
Reduce cognitive load and further impositions on the user's time with concise, minimal design.
I kept those strategies in mind as I designed my site's 404 error page.
Process and Challenges:
I love vintage typewriters and feature one on my home page background, so I planned to use one to maintain a consistent theme. I found a typewriter image in Canva and a fun, typing animation for text. I needed to find a humorous message, so I researched typewriter jokes and puns and created a word bank for my message. There were many variations on "thousands of monkeys with thousands of typewriters," but I didn't come up with anything I liked referencing it. There was one joke that had potential, "I'm not like other keyboards, I'm qwerty!" I substituted "404 error page" for "keyboards" for my first option. I tried a couple variations on "throwing the page away" and "carriage return" since correcting errors is irritating for both typewriters and page not found errors.
I polled 8 friends and family members ranging in age from 19-47 to see which of the three designs had the best feedback. Everyone liked all the designs, but the "Qwerty" option got the most votes. Most users said that they liked that, "it was concise while still connecting to the theme." The reference to the "carriage return" was a little obscure for some users as well, so I decided to go with the "qwerty" design.
Adding a homepage return button was the final step I needed to create my 404 error page with all of the good design strategies I listed. I added a button for the homepage since that would be the most convenient place to return for anyone reviewing my portfolio site. I hope that this page is only found through following the link button here, and not from any actual errors.