3

These days you see it more and more. You click a dead link on a website and before you know it you're looking at a beautifully illustrated page with the code 404 written somewhere. Here are such examples:

By Zazuly Aziz By Adheedhan Ravikumar

Now don't get me wrong these are great illustrations, but they seem to have nothing to do with the content.

Are there some benefits to using illustrations for error screens? Does it minimize stress for the user?

  • What do you experience when you see these types of pages? Considering that the alternative is either a standard or default message with no other information or just a straight redirect elsewhere, do you think it can enhance the user experience in certain cases? – Michael Lai Aug 13 at 2:14
  • 2
    @MichaelLai Personally I don't feel like being entertained or amused when I encounter an error on a website I just want to find the page I'm looking for or be taken back from where I came from. I didn't ask for a joke or a cheesy line but I got one anyway and it wasted my time while I was trying to get back on track. But I know probably I'm an edge(or nut) case. So I was wondering if there was any specific research into these screens and the effect. – RobbyReindeer Aug 13 at 10:11
  • 1
    I always thought that I didn't care about those illustrations. But this question made me aware of that I find them distracting and not very helpful. It would help if sites at least tried to get some useful information from the given url and use that to search for possible useful pages. If you manage to find out what people were actually looking for, that would make them really happy. As a bonus it could also generate helpful information for improving your SEO. – jazZRo Aug 21 at 14:04
4

I think it's done because of a couple of reasons.

1. To be welcoming to the user

Error 404 never occurs in a situation where everything is alright. The same goes for connectivity errors, server down, etc.

You'd see marketing, forum-based, social and shopping websites doing this the most. Enterprise-level software or websites never do this. The reason being, these websites try to be appealing to the user at every step of the way. I can't tell you how much the Amazon error page made me want to keep coming back to it (see screenshot below)

Such designs help keep the users engaged even during a possible "diconnection"

enter image description here

2. To maintain continuity

An error page is a sign of loss of connection, misplaced url or an issue. By virtue of its existence, it means a lack of continuity in the web-surfing flow.

An attractive design not only keeps the theme and likeability of the page at-par with the rest of the website, it also makes it feel seamless. The Please Try Again, Go to Homepage, Go to Previous Page buttons seem less obtrusive and feel more like guides if a funny character or a cute doggo is sitting beside it


I also feel that the emergence of more creative Empty States and understanding that they are important have added to this trend

  • 1
    I'm not yet convinced by your second point. I'd wager that the websites with the cutesy 404 pages don't use pop-culture references anywhere else. Where's the continuity then, where's the seamlessness? If the doggo makes the "Go to Homepage" button feel more like "guides", and if that's a good thing (which I think is arguable), why isn't the website plastered with doggos everywhere? – Schmuddi Aug 13 at 12:11
  • @Schmuddi gets it. – RobbyReindeer Aug 14 at 6:48
  • 2
    Again, I feel like you're both missing the point. Empty states have a lot of value and a well-designed empty state screen helps in user retention. You might not feel like they do anything for you, but it certainly served its purpose considering it got your attention enough to post a question about it. – Shreyas Tripathy Aug 14 at 9:41
  • 3
    @Schmuddi - The reason why every screen doesn't have a mascot is because there, the CTA is the center of attention. The mascot would be a distraction. However, on an empty state screen, they draw the attention of the user and keep them engaged. Chrome's offline game and Firefox's offline illustration are great examples. They keep you engaged while the problem gets resolved or they redirect you to a resolution. Continuity doesn't just mean "similar looking screens", it means engagement and similar experience. Hence my point about why enterprise websites don't have such illustrations – Shreyas Tripathy Aug 14 at 9:47
  • @ShreyasTripathy From a more technical perspective, it costs almost nothing to implement. If I was deciding whether or not to implement one on my site, it would come down to "sure, why not". – Tony Aug 21 at 20:18
2

There are a few reasons for this:

  • Error pages are content scarce. Adding illustrations bulks it up a bit.
  • Stumbling upon an error page isn't fun for a user. Adding illustrations and a touch of humor (its common sidekick) is an attempt to balance the bad vibes out.
  • It's currently trending and successful software patterns tend to catch on.
  • 1
    Basically, this raises more questions than it answers: Why should bulking up an informative page with unrelated illustrations be considered good user interface design? How do we know that adding a touch of humor helps mitigating the user's annoyance instead of adding to it? What is the reason that this software pattern is trending, i.e. why do people consider it successful? – Schmuddi Aug 13 at 11:47
  • @Schmuddi I designed a lot of error pages. It was always just two lines of text and one button to go back. Do you ever notice how light that page becomes and how it feels like there is literally nothing useful on the page? Now, best solution is to provide a comprehensive guide on how to fix the problem or at least debug it. But a regular user is not going to bother ever. Plus error page is the best place to show your creative side without hampering the business process flow. So, question is not "why do it", question is "why not do it". – jitendragarg Aug 22 at 5:58
2

(As someone who volunteers as user support on a hobby site:) When users run into errors, they don't always think to inform us of the specific error number they ran into, but they're much more likely to mention the strange dinosaur or other illustration on the page. This only saves a bit of time by skipping asking the user what error message they saw and waiting for a response, so I'm not sure it's enough to motivate a design choice, but it is a minor benefit of unique images for each error page.

  • Plus regular users don't like to see scary numbers or won't be remembering the difference between 404 and 503. Imagine if websites showed something like BSOD on 404 error. Regular user will be calling their personal tech support people (son/daughter/nephew/neighbour etc) thinking they broke their device. – jitendragarg Aug 22 at 6:01
1

Donald Norman (one of the founders of the Nielsen Norman Group) talks about Visceral Design:

It’s a reference to the concept of “gut instinct”. It’s a subconscious level of reaction to certain experiences....The visceral reaction is the one triggered by the initial sensory scan of the experience. It’s immediate and often beyond our control.

So by adding humor to the 404 page you can tap into this gut reaction to convert a frustrating situation into surprise or delight for the user.

A good 404 page would offer that delight paired with:

  • a simple / useful explanation of the error (the number '404' alone doesn't mean much for people outside of web development)
  • a way to keep the user engaged: a clear call to action to return to the normal site and/or a search box

By using an unexpected element it becomes easier to create a surprise moment and tap into that gut reaction.

1

I think the idea of exaggeration for the 404 page became outdated, most of the people now became mature enough to recognize that they need to try again the moment they notice the number 404. For me it's nice to put some explanatory image or illustration, but not going too far to invest more in creating such creative illustrations, since the stay in such page will not extend more that 2 sec.

So I suggest to make straight forward illustration with BIG clear message button such as: Try again, get back home, refresh again, will be more meaningful and gives hope that this will not be repeated again.

Because I think the big illustration work sometimes gives opposite message for the user that you reached the end of the way, and you have few chances to get your request, and this will let them move away from your app or webpage.

  • 2
    Both my parents use internet 8-9 hours a day watching youtube, netflix etc. I don't think either of them know what is 404. Point is, "most people know 404" is the exaggeration. You are just not looking at the average people anymore. If I work in mechanical field, thinking "everyone knows what is a carbeurator" will be same exaggeration. – jitendragarg Aug 22 at 6:03
  • @jitendragarg Logically right, I understand the need for a clear instruction since we have people who are not aware of IT cases. But what I noticed lately that even the exaggerated illustrations is not doing it's job, what I mean that most of them are not focusing on showing the way to get out of the problem but it tell the user that he is stuck "Only" :D and this in many cases gives a negative reaction and may let people move away unless you put a big button message as I mentioned above that you need to refresh or get back to homepage or whatever! – Khalil Hanna Aug 22 at 9:52
  • Yes, I agree. That's what happens when people follow without understanding. That's how we get programmers trying to create "awesome error pages", managers trying to be "agile", and organizations trying to be "hip and cool". But I don't think "people are not implementing it correctly" is a valid reason to say "we should not have it at all". – jitendragarg Aug 22 at 9:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.