404 not found

Let us offer you a way to find it

(Or, a small UX improvement on this website)

I came across Joe Allen’s Smaply blog post, Journey mapping beyond the happy path: designing for edge cases, breakdowns, and recovery earlier today. It’s an excellent post, and you should read it.

Coincidentally, I’ve been drafting a post here, provisionally titled “Look for the workarounds”. It covers the same topics; if you want to fix a service, you first need to figure out where it’s broken, cracked, creaking , leaking, or blocked.

Face it. You’re a plumber.

I was thinking mostly of internal, back-office users. Joe’s article focuses more on how to identify problems-to-solve on the front end.

The tells are different … if, during research, an internal user says “Excel”, prick your ears up. Every workaround involves Excel. I’ll try to publish that in the next week or so.

Joe’s post goes into great and useful detail on the frontend side of things, so go read that instead if you’re more interested in that side of things.

Instead, I offer you an anecdote.

The most useful UX improvement I ever suggested

Around 10-15 years ago, when I was working on the Scottish Enterprise website, I noticed that the abandonment (bounce) rate from our 404 page was high. Very high. Can’t remember exactly what, but north of 85%. So we ran an experiment: can we reduce the bounce rate on our 404 page?

Originally, we had designed a sliding scale of “Oor Wullie” themed errors, which went:

• 404: Jings!
• 403: Crivvens!
• 5xxx: Help ma boab!

We even had agreement from DC Thomson to use their images.

Sadly, senior management at the time weren’t keen (despite very positive user feedback) so we ended up with fairly generic “Page not found” or “Forbidden” messages.

So our 404 page just said “Page not found” with a link to the home page or the option to try a search.

Analytics showed that nobody was using the link, or the search. Why would they? We were asking them to either:

• Navigate our information architecture, right from the home page, to try to find the page they want, click-by-click; or
• Re-type a search query they had literally just typed into a search engine only to find a broken link

Unsurprisingly, hardly anybody did these things. They just hit the back button.

So, I had an idea. What if, instead of just some text saying “Oops, we couldn’t find that page” (or whatever) and a link to the home page, we took the page path, sanitised it and inverted it then ran a search for that and displayed the results.

So for example, if you got a 404 for /business-growth/grants/grants-for-small-businesses.aspx we turned that into a search for grants for small businesses grants business growth, then returned the results.

We got users back on the right track effortlessly.

Bounce rate more than halved.

A small victory

After a conversation at work today, I thought I’d have a go at recreating this here.

I haven’t had time yet to write the code to actually execute the search, but, if you ever arrive at this site via a broken link, or a typo in a URL, you should see something like this.

I’m not sure yet about placing focus on the search input, as it may be jarring for assistive technologies.

For now, just hit the search button.

[Edit: the code now executes and returns search results automatically.]

Try it. Hit this link: /this-link%20/is-broken