404 errors should not be a redesign artifact

When you’re outlining your roadmap to your next website redesign — or simply shuffling or renaming a few directories on your website — have a plan for setting up redirect links before you even starting writing code.

I’ve been using job sites to illustrate design principles in class because of domain knowledge: most of us have visited at least one job site, if it was just to poke around at possibilities.

The rabbit hole that is the Internet led me to OxFam.org. So I started poking around, trying to answer basic who-what-when-where-why-how questions.

Eventually, I landed on the FAQ.

There are several issues with the answer to the FAQ, “How can I work for Oxfam?”.

• Fitts’ Law – the link is too small and our eye has to move a long way from the question to the “answer” (the link).
• Current jobs would be the better link, if the text were to be maintained as written.
• In the first sentence, Jobs (“Jobs page”) should not be capitalized (eeek!).

However, the section should be rewritten for scannability. Like this, perhaps:

1. How can I work for Oxfam?
See all current job openings at the Oxfam International Secretariat as well as our 17 member organizations around the globe.

That’s it. Nothing about keeping CVs on file [1] or not responding to general requests. Put those tidbits on the jobs page(s), if indeed they are needed.
Let’s say you “saw” the single-word link and clicked Jobs. What would happen? Disappointment, followed by annoyance.

Here’s the broken link: oxfam.org/en/getinvolved/jobs

Here’s the working (at the time of writing) link: oxfam.org/en/work . That’s a major change in directory structure, which suggests a redesign (content, architecture, or aesthetic or all-of-the-above).

What’s wrong with the 404 page?

1. The attempt at humor overshadows any bits of helpfulness. That’s a mega-sized image.

2. “Make sure the URL is spelled correctly”. Grrr. “Helpful” sentences like this one drive me batty. Who actually TYPES a long URL? Get real, folks. Plus, I clicked a link on your own site!

3. We don’t “search” with a site map, we scan it hoping to find what we need. Why not put the sitemap on the 404 page – instead of sending us somewhere else?

• If you click (or tap) SiteMap, the 404 page opens a new browser tab/window.
• Using search-in-page (control/command + F), we bump into yet another directory structure (two new URLs). And they act very differently.

  

  • Jobs with the Oxfam International Secretariat: oxfam.org/en/jobs/secretariat

    

    

  • Job with Oxfam Affiliates (stet): oxfam.org/en/jobs/affiliates

    

4. Guess what happens when I USE THE SEARCH BOX AT THE TOP OF THE PAGE? I’ve blown the surprise with my shouting. Yup. The 404 page refreshes itself when you use the built-in search box; i.e., the search field does not work.

What happens if I click “Try a search” — the link on the 404 page?
I go to oxfam.org/en/search/node .

Type in “jobs” and the search engine results page is far from  helpful … which is not uncommon for search within a website domain.

OK, then. What have we learned?

• Make a plan when you re-architect a website, before you start coding. That plan must include a process for setting up redirect links. This ensures a more frictionless user experience on your site. It also means any external links pointing to your site (not just search engines) will still work.
• Mistakes happen, so how can we mitigate the 404 frustration? I’m a big fan of custom 404 pages, and I like sites that exude personality. This is an important function-needs-to-trump-form page, however. Make it as funky as you like, so long as usefulness remains the top priority.

Got examples of great 404 pages? Techniques to minimize 404 errors? Share them in the comments!