October 21
Screencapture - OxFam 404 page

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.

OxFam FAQ about jobs

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.

Screencapture - OxFam 404 page

 

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.
    Oxfam jobs
    Jobs bullets on the Oxfam site map.
    • Jobs with the Oxfam International Secretariat: oxfam.org/en/jobs/secretariat
      Oxfam jobs - top level
      The Oxfam link makes you think you are not in the English section of the site. Then it asks you to click something else to get to the jobs listing.

      Oxfam vacancy link
      There is no “Vacancies” tab but there is “Vacancy Search.” However, clicking that link yields a not-very-helpful message. I did not “search” — I clicked “Vacancies”. My deduction is that there are currently no job openings at Oxfam International … which would be the preferred message.
    • Job with Oxfam Affiliates (stet): oxfam.org/en/jobs/affiliates

      Oxfam jobs - level 1
      The Oxfam affiliate job link goes straight to jobs listings.

 

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.

Oxfam, SERP
Searching the website for “jobs” does not  yield useful results.
Oxfam - search engine results page
Searching the website for “work for Oxfam” does not  yield useful results, either.

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!

 

 




Posted 21 October 2015 by Kathy Gill in category "Design

Leave a Reply

Your email address will not be published. Required fields are marked *