9

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?

  • 1
    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 '19 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 '19 at 10:11
  • 2
    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 '19 at 14:04
6
+100

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.

11

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 '19 at 12:11
  • @Schmuddi gets it. – RobbyReindeer Aug 14 '19 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 '19 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 '19 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 '19 at 20:18
4

(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.

  • 1
    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 '19 at 6:01
3

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 '19 at 11:47
  • 1
    @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 '19 at 5:58
3

The typical 404 Error page that we see these days is a result of the emphasis (and some might even say over-correction) on the user experience of website navigation and interactions.

For those of us that can remember what these pages look like, the default display and content reflected something that was more suitable for the developers that have to diagnose or debug what the issue might be.

Nowadays, what most of us see is a combination of:

  • Visual communication design
  • Interaction design
  • Microcopy design

That results in a number of different experiences, which aim to:

  • Reinforce the branding and image of the organisation (which has more of a marketing effect)
  • Reduce the stress of seeing an error and not being able to access a page
  • Communicate clearly the alternative choices available and provide the links for possible actions
  • Create a sense of trust and assurance by closing the loop on a particular user journey that is not expected to happen often (but somehow does).

So it is really the combination of visual, text and interactions that work together to achieve the intended/desired outcome for the user, rather than the specific use of the image (which is just one aspect of the entire design). Some designers/teams combine them better than others, while other examples are less than ideal and the image can create the opposite effect.

3

I personally arrive to the conclusion after seeing your example images that the main reason why the error pages are accompanied by illustrations is to show that this error belongs to the page itself, since each illustration has the same graphic style than the page to which it belongs. This somewhat reassures the user because:

  • It's not an error of his/her connection
  • It's not a browser error
  • It's not a user mistake

These illustrations only show an internal error of the page on which the user is browsing.

2

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 '19 at 6:03
  • 1
    @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 '19 at 9:52
  • 1
    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 '19 at 9:56
2

The summary on MDN describes 404 Error as;

The server can not find requested resource. In the browser, this means the URL is not recognized. In an API, this can also mean that the endpoint is valid but the resource itself does not exist. Servers may also send this response instead of 403 to hide the existence of a resource from an unauthorized client.

Since we're dealing with browsers, it means the URL is not recognized by target server or server's hiding the existence of a resource from an unauthorized client. Either way, it's not a desirable situation since it gives user trying to reach a source deprecated or somehow something happened.

In a world of web and/or software development, it's practically almost unavoidable to build and maintain something unbreakable as an experience. Because things are evolving as user needs, so the products eventually. To make a bit clarification on this, either firms are seeking growth in order to grasp more amount of money or the products are evolving with the personalization of users needs via technology, there's always a room for improvement.

Even I was perfectionist before I started to work as a developer, it's not possible to command a server's reaction or internet connection at least. One should take into consideration every improvement and bug fixes to be covered within documentation to be able to get a smoothest UX and development within UI, while backend, DB, and system part should provide these details in a different manner somehow disciplined as the same above.

Like the evolution of the democracy wasn't in perfect form, the need for this redirected error page also wasn't the idea of UX-origin people and not represents the clearest point of view appearantly. It's more clearer from the text below with the provided link above,

Many web sites customize the look of a 404 page to be more helpful to the user and provide guidance on what to do next. Apache servers can be configured using an .htaccess file and a code snippet like the following example.

It was started with developers or server management firms to handle unsatisfaction of their customers but using a general error page instead all of the other errors would make it more appealing for developers and firms creating values in that sense. So rather than solely for 404, it's used as an error page for all kind of HTTP Status Codes.


Well, I don't know of any research on this topic but I'm also on the side of using it, instead of a blank page in a point whenever it's inevitable. It's better rather the page is fed with the information according to the user's need like re-routing, re-direction, why it has happened if possible, go back or vice versa rather than fancy visualizations.

0

One sentence: Increase the attention (because user is in an error state and app is not working at that page –besides with text illustration increase the attention), and lover the frustration.

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.